What if Guðjón Samúelsson Designed or Inspired a Website?

Guðjón Samúelsson was the first Icelander to be educated in architecture and was one of its most influential (Stamp 2012). He did most of his work in the 1920s and was inspired by the volcanic geology of Iceland.

“A What if Wednesday” Post

After our brief excursion in the late 18th and early 19th century with Charles Bulfinch for Independence Day, we are going back to the modernism period and an architect who has a connection with Eero Saarinen, Guðjón Samúelsson.

Guðjón Samúelsson’s crowning achievement, the Hallgrimskirja Church, was inspired by the basaltic columns produced by lava flows on the island. A landmark in the city of Reykjavik, the church was named after Hallgn’mur Pétursson, a poet in 17th century Iceland (Stamp 2012).

Some of Guðjón Samúelsson’s architecture was inspired by the Finnish architect, Eliel Saarinen (Stamp 2012), the father of Eero Saarinen, who was discussed in a previous “What if Wednesday” post. Another influence to Guðjón Samúelsson’s architecture was the introduction of concrete as a building material to the island (Nannini 2018).

The Basics of a Guðjón Samúelsson Website

As stated above, the architecture of Guðjón Samúelsson was heavily influenced by the geology of Iceland. A website inspired by him, should strive for a sense of elegance, simplicity, and connection to nature; all of which are the essence of Samúelsson’s style. A lot of the website elements would have clean lines and express the vertical. Below are some of the main characteristics:

• Visual Design:
  • Clean Lines and Geometric Shapes: The clean lines reflect the simplicity and functionality found in Guðjón Samúelsson’s later modernist works. Geometric shapes, reflect the hexagonal structures of the volcanic rock, and are some common they are written into building ordinances (Gaber 2018).
  • Emphasis on Verticality: Elements in the website should emphasize the vertical to reflect the tall structure of Hallgrimskirja and its windows.
  • Natural Color Palette: Colors would feature those reminiscent of Iceland’s landscape – greys, blues, blacks, and accents of earthy tones like browns and greens common to the island.
  • Use of Natural Textures: Subtle textures like basaltic rock patterns or wood grains could be incorporated into the background or design elements.
• Website Features:
  • Focus on Functionality: The website would prioritize user experience with clear navigation, easy-to-find information, and uncluttered layouts.
  • Large, High-Quality Images: Showcasing Icelandic landscapes, architectural photography, or the subject of the website, would complement the design.
  • Minimalistic Menus and Navigation: The menus and navigation would use icons or text-based menus that blend seamlessly with the overall clean aesthetic.
  • Integration of Icelandic Elements: Whatever the subject the website, it should try to include the subtle use of Icelandic patterns or fonts to bring about the feeling or being in Iceland.

The Use of Clean Lines and Geometric Shapes

A website inspired by Guðjón Samúelsson would emphasize shapes that found in geologic structures. Different types of rock have crystalline structures that fracture in straight lines and have shapes based on molecular structure. The most common rock in Iceland is basalt which has a hexagonal crystal structure. Combining the straight lines and geometric shapes would evoke those used in Guðjón Samúelsson’s designs. Some aspects involving clean lines and geometric shapes include:

• Website Layout: The layout of the website would be grid-based and have clear divisions between sections using horizontal and vertical lines. Much like a lot of modern websites today, these lines should create a sense of order and reflect the essence of Guðjón Samúelsson’s buildings and the geology of Iceland. For example, imagine a website whose content is organized in rectangular or square blocks, with margins and padding creating clean separations.
• Buttons and Call-to-Action Elements: Buttons and other interactive elements would be of the same shapes, such as squares, rectangles, or rounded squares. The shapes would have a clean and modern aesthetic and be easy for users to identify and interact with.
• Minimalist Use of Decorations: Decorative elements would be kept to a minimum, focusing on clean lines instead of ornate flourishes. For instance, you could use subtle borders or lines to separate sections, rather than elaborate patterns or gradients.
• Typography: Clean sans-serif fonts would be used to complement the clean lines used elsewhere in the site. Make sure that the font aligns with the minimalist approach and avoid fonts that appear busy and cluttered and would otherwise detract from the rest of the site.
• Imagery Cropping: Images used on the site could be cropped to spotlight image features or to match the geometric shapes used elsewhere in the site. For example, a landscape photo could be cropped to highlight the triangular peak of a mountain or a rectangular shaped building.

Emphasize the Vertical Elements

Guðjón Samúelsson emphasized the vertical in his tall building designs, which in turn were inspired by the basalt geologic forms in Iceland. A website inspired by him would have similar vertical elements scattered throughout the site. You still want to use horizontal elements, though, to maintain structural balance in the website. Below are some ways to go about this in your website.

Vertical Design Elements

• Tall Elements: A Guðjón Samúelsson website could incorporate elements that draw the user’s eye upwards, creating a sense of verticality. Some examples are:
  • Vertical Navigation Bars: Instead of having a horizontal navigation bar that is so prevalent in today’s designs, a vertical bar could be used. Menu items would be stacked on top of each other instead of side by side.
  • Hero Section with Vertically Oriented Images instead of Landscape: The main landing page could feature high-resolution, vertically oriented images that showcase the full height of an architectural feature and resemble the towering columns of Hallgrimskirja Church.
  • Use of Vertical Lines and Patterns: Subtle vertical lines or patterns could be used in the background or as separators to subtly guide the user’s eye upwards.

Presenting Content to Show Verticality

• Use Card-based Layouts in a Vertical Orientation: Information on the site can be presented in vertical card formats. Elements such as text, images, and links could be stacked on top of each other. These elements would create a clean and organized layout while maintaining the overall sense of verticality on the site.
• Long Scrolling: Using the vertical menu as a cue, the website could encourage vertical scrolling to reveal content progressively as you move down. This approach is especially effective when combined with tall images or the vertical card layouts used above.

Interactive Elements

• Vertical Sliders or Accordions: Interactive elements like sliders or accordions that unfold in a vertical way, could be used to display information.
• Parallax Scrolling Effects: Subtle parallax scrolling effects could be implemented where background elements move slower than the foreground elements as the user scrolls down. This can create a sense of depth and reinforces the vertical dimensions of the website.

Achieving a Sense of Reaching Upwards

By having the above elements, the website would evoke a feeling of reaching upwards and give the feeling of looking at one of Guðjón Samúelsson’s tall buildings. These elements create a sense of granduer and connection to the Icelandic landscape, its geology, and volcanic mountains.

Using a Natural Color Palette

Colors in the website would be drawn from those present in the Icelandic environment. Below are some examples to use:

• Dominant (Base) Colors:
  • Greys: The base color scheme would be drawn from the volcanic rock formations and often cloudy skies of Iceland. Shades of gray can be used for backgrounds, text, and subtle design elements. This color would evoke the greys used in the National Theatre of Iceland that was designed by Guðjón Samúelsson (Snapshots 2021).
  • Blues: Shades of blue represent the sky and glacial water present in Iceland. Lighter blues can be used for accents or backgrounds, while darker tones can be used for text or to create a sense of depth.
• Accent Colors:
  • Blacks: Black colors can be used for contrast and emphasis, such as in text or stronger design elements. They represent the lava flows of Iceland and add a touch of sophistication.
  • Earthy Tones: Browns and beiges can be used for subtle accents, evoking the warmth of Icelandic soil and the natural textures of the wooden houses. These colors should be used sparingly to avoid overwhelming the cooler colors used elsewhere.
  • Greens: Green accents, represent the vegetation of the short summers, and can be used to provide a pop of color sparingly on the website.

General Rules on the Use of Color

There are some general guidelines to follow in using colors inspired by Iceland.

• Use Muted and Desaturated Colors: Colors should be muted and desaturated to reflect the polar environment of Iceland. Due to the low sun angle and cloud cover, colors here are less vibrant than those seen in a more tropical area. The muted colors also create a sense of calmness and sophistication in the site.
• The Color Palette Should be Limited: Focus on the core colors to reinforce the clean and minimalist aesthetic of Guðjón Samúelsson architecture.
• Use an Occasional Pop of Color: To evoke the wildflowers of Iceland or the northern lights, use a vibrant color here and there that mimics them. Just be sure not to detract from the overall muted tone of the website.

The Use of Texture

Subtle hints of texture reflective of the volcanic rock and wood used in Iceland can be incorporated with the colors above. Textures can add visual richness to otherwise bland colors and bring about a connection to the natural world. Any textures should be used in a subtle way to avoid overwhelming the user or detracting from the clean aesthetic. Some ways to achieve this and some examples are:

• Background Textures: A faint pattern of basaltic rock formations or of wood grain could be incorporated into background elements. This adds a touch of organic character and does not overwhelm the element.
• Texture Overlays: Overlays with a hint of texture, like a light weave or a subtle eggshell pattern, could be placed on top of images or sections to add a touch of tactility and depth.
• Textured Elements: Specific design elements like buttons or call-to-action boxes could have a subtle texture applied, for instance, a faint brushstroke pattern or a light stipple effect. These elements can add visual interest and make the elements stand out slightly.

Types of Textures Inspired by Iceland

• Basalt: This rock is one of the most common in Iceland and is formed by volcanoes. It is generally used as the main building rock, besides concrete. As stated above, this rock texture is best used for backgrounds.
• Wood Grain: Wood is used for beams and furniture in Icelandic interiors. A light wood grain texture could bring about the warmth from the wood.
• Concrete: Besides basalt, concrete is often used in Icelandic buildings. The color and texture of concrete, complements the modern and minimalist aesthetic of a Guðjón Samúelsson website.
• Natural Fabrics: A texture resembling linen or wool can add organic warmth to the website, especially when combined with traditional Icelandic patterns, such as that in sweaters.

Focus on the Functionality of a Guðjón Samúelsson Website

Like a lot of other modernists, Guðjón Samúelsson focused on functionality in his designs. A website inspired by him would do the same. Below are some ways to ensure the functionality of the website.

• Intuitive Navigation: The navigation on a Guðjón Samúelsson inspired website would have a clear hierarchy, a logical placement of menus, and navigation bars. These reflect and mimic the space present in Guðjón Samúelsson’s building that were designed for a clear flow and purpose.
• Clear Information Architecture: Information present on the website should be well-organized and easy to find.  Labels, titles, and headings should be clear and concise as to what they are and allow users to quickly understand the content.  The clarity mirrors how Guðjón Samúelsson’s buildings guide visitors through the space with clear sightlines and designated areas.
• The Website Should have Minimal Clutter: Unnecessary elements should be avoided as they may distract users from finding the information they need.  Having minimal clutter aligns with the Modernist philosophy of Guðjón Samúelsson.
• User-Friendly Forms: Forms on the website should be simple and straightforward to fill out.  Clear instructions should be provided with minimal required fields.

Typography in a Guðjón Samúelsson Inspired Website

The typography in a Guðjón Samúelsson inspired website would focus on clean lines and geometric shapes.  Below are some guidelines to follow to achieve this:

• Use Sans-Serif Fonts: These fonts lack the decorative flourishes (serifs) at the ends of the letters and would be the primary choice of fonts to give a clean look.  The modern aeshetic of the fonts aligns with the geometric shapes in Guðjón Samúelsson’s architecture.  Some examples include:
  • Helvetica
  • Arial
  • Futura
  • Proxima Nova
• Focus on Readability: Whichever font is chosen should prioritize clear legibility across all screen sizes.  Fonts that are simple and have good spacing will ensure that users will be able to read the information on the website.
• Use a Limited Number of Fonts: Use only a few well-chosen fonts to give order and consistency.  A low number of fonts reflects the minimalist style of Guðjón Samúelsson, where he used a limited number of materials, creating a cohesive experience.
• Emphasize Hierarchy: Besides having different font types, fonts can be small or large, or have different weight to promote a sense of hierarchy.  For instance, headings could be larger and bolder than the body text, while links and calls to action could be a different weight or color.  The hierarchy is similar to the columns and beams that guide users through the physical space of his buildings.
• Letterspacing and Line Spacing: Readability is improved with ample spacing between letters and gives an uncluttered feel.
• Some Fonts can be Different for Context: Some fonts can be chosen to bring out the feel of a particular section, so long as they do not clash with the overall style.

Minimalistic Menus and Navigation in a Guðjón Samúelsson Website

The menus on a website inspired by Guðjón Samúelsson would echo the clean lines and uncluttered space used elsewhere on the site.  This can be broken into two main parts, Menu Design and Style of Navigation.

• Menu Design:
  • Limited Menu Items: The navigation menu on the website should only have the most essential pages or sections, which reflects the overall emphasis on simiplicity and functionality.
  • Icons or Text-based Menus: Menus can use easily recognizable icons or clear, concise text-labels, aligning with the minimalistic aesthetic.
  • Hidden or Collapsible Menus: The main menu could initially be hidden and appear when a user hovers over a designated area or clicks a hamburger icon.  This can keep the website clean, uncluttered, and give a feeling of more spaciousness.  If this method is used, be sure to mind the accessibility, with access via a keyboard.
• Navigation Styles:
  • Using a Horizontal Navigation Bar: When using a horizontal navigation include only the most essential items.
  • Using a Vertical Navigation Bar: This style of navigation bar, would align with the verticality of Guðjón Samúelsson’s buildings and follow the overall style of the theme.
  • Use Breadcrumbs: Breadcrumbs allow the user to understand where on the website they are and reflect the clear wayfinding principles in Guðjón Samúelsson’s buildings.

Example of a Guðjón Samúelsson Inspired Website

Conclusion

Being the first educated architect in Iceland, Guðjón Samúelsson had an outsize influence on the architecture of Iceland.  Using his native exprience he was able to channel the local geology and environment into functional and modern buildings to be enjoyed by all.

References

• Gaber, Tammy.  2018.  Designing for the Subarctic Sacred.  Faith & Form 51 (2): 6-11.
• Nannini, Sofia.  2018.  From reception to Invention: The Arrival of Concrete to Iceland and the Rhetoric of Guðmundur Hannesson.  Arts 7 (4): 68.
• Snapshots of the Icelandic Theatre.  2021.  Icelandic National Theatre Updates Signage: Peerless-AV Displays Harmonize with Theater’s Art Deco Facade.  Systems Contractor News 28 (4): 33.
• Stamp, Gavin.  2012.  Architecture.  Apollo: The International Art Magazine 175 (598): 78-79.