What if Eero Saarinen Designed or Inspired a Website?

Eero Saarinen (1910-1961), an architect, was born in Finland and migrated to America when he was 13.  He grew up in Michigan with his father who was also an architect.  With his father he became close friends with Charles and Ray Eames who were famous architects at the time.  He recieved his degree at the Yale School of Architecture in 1934 and went on to teach at the Cranbrook Academy of Art.

A “What if Wednesday” Post

Eero Saarinen (1910-1961), an architect, was born in Finland and migrated to America when he was 13.  He grew up in Michigan with his father who was also an architect.  With his father he became close friends with Charles and Ray Eames who were famous architects at the time.  He recieved his degree at the Yale School of Architecture in 1934 and went on to teach at the Cranbrook Academy of Art.  During his short life that ended with a brain tumor (Wills 2019), he had an outsized impact on architecture and designed some of the most iconic buildings in America today.

One of his first designs was a chair called the Tulip Chair, which he designed with Charles Eames, and the Crow Island School, both in 1940.  The tulip chair, also called the womb chair, was designed to be on one leg (Davidson 2020).  In 1948, he won the competition to design the Gateway Arch in St. Louis, Missouri.  Besides the Gateway Arch, some of his most famous buildings are the Washington Dulles International Airport Terminal and the TWA Flight Center at New York City’s John F. Kennedy International Airport.

The architecture of Saarinen, even though he designed in the modernist style, was considered ahead of its time.  During the mid 20th century a lot of designers, such as Frank Lloyd Wright and Mies van der Rohe, conformed to the straight line grids of the time.  Eero Saarinen, however, followed a more fluid geometry that is more common today (Lacayo 2010) and gave an “alternative to the steel-and-glass boxes of the International Style” (Lewis 2023).

The shining example, is the TWA Terminal at, what was then Idlewild Airport, now New York’s JFK Airport that resembled the curves of an airplane.  TWA wanted a building that would be cutting edge and have the latest in innovation.  Saarinen aimed to “design a building in which the architecture itself would express the drama and specialness and excitement of travel.” (Wills 2019).

The design of the TWA terminal, which is now a hotel (Wills 2019), later went on to influence a number of other airport terminals (Historic American Buildings Survey 2019), such as the Washington Dulles International Airport.

The Basics of an Eero Saarinen Website

A website in the style of Eero Saarinen would prioritize clean lines, bold shapes, and focus first and foremost on user experience.  It would be elegant and uncluttered, such as the TWA Flight Center, and have the smooth lines of the Gateway Arch.  Below is an outline of some of the main features.

• Website Visuals
  • Color Palette: A limited and neutral palette would be used and have accents of black with pops of color that reflect Saarinen’s use of modern materials (yellow or teal).
  • Typography: A clean and modern font with a clear hierarchy for headings and body text would be used.
  • Imagery: Minimalist black and white images, similar to those used by Mies van der Rohe, would showcase the website content to produce a timeless aesthetic.
  • Layout: A grid-based layout with clear negative space and emphasizing simplicity and organization would be used.
  • Shapes: Geometric shapes, especially circles and curves would echo Eero Saarinen’s designs such as the Tulip chair.  In addition, a subtle use of organic shapes, would add a touch of dynamism.
• Website Features:
  • Functionality would be Foremost: The user experience would be front and center with clear navigation, intuitive menus, and easy access to information.  Unnecessary clutter would be avoided.
  • Large and Bold Calls to Action: Buttons and CTAs would be prominently and visually distinct and use clear language to guide users.
  • Interactive Elements: Subtle and purposeful use of animation and micro-interactions would add a touch of engagement without detracting from the clean aesthetic.
  • Responsive Design: The website should adapt to different screen sizes to ensure a seamless and functional user experience.

Color Palette in a Eero Saarinen Website

The architecture of Saarinen sought to balance modern materials with a timeless aesthetic.  The colors used should complement each other and not overwhelm the user.  Some of the colors used to achieve would include:

• Base Colors:
  • White: White is the dominant color, providing a clean backdrop and a sense of spaciousness like whitespace.  This color respects Eero Saarinen’s emphasis on light and the sense of openness found in his buildings.
  • Black: Used sparingly for accents and text adding a touch of sophistication as well as a bold contrast to white.
• Accent Colors:
  • Pops of Modernity: Small amounts of colors that reflect the materials that Eero Saarinen used.
    • Mustard Yellow: Represents the brass colors that Saarinen used for accents in his buildings.
    • Teal: Gives a mid 20th century modern design feel and represents the use of glass and turquoise accents.
• Additional Possibilities: 
  • Monochrome Option: You could have a minimalist website that just uses black and white and a single accent color.  Think of Mies van der Rohe.
  • Use the Brand Color as the Accent: Using the above, use the main color of the brand as the accent color to give a more cohesive look.

Typography for a Eero Saarinen Inspired Website

The typography of Eero Saarinen had clean lines and functionality, which for fonts would mean using clear, modern fonts that enhance user experience.  Generally these would include Sans-Serif fonts that lack serifs and are cleaner and more modern looking.

• Sans-Serif Fonts:
  • Proxima Nova: A typeface that offers a clean and professional look, having a number of weights and headings for body text.
  • Fira Sans: A clean and open-source font that has a geometric feel to it echoing the shapes in his architecture.
  • Franklin Gothic: A classic mid-century font that has a historical touch and a clean aesthetic.
• Hierarchy and Readability:
  • Headings: A bold typeface can be used for headings to create a clear hierarchy and guide users through the content.  A large font size can be used for the main headings.
  • Body Text: Use a font that is easy to read on small screen sizes.
  • Use only 2-3 fonts: Keep the font types to a minimum to maintain a clean and consistent look.
  • Whitespace: Create a sense of spaciousness by having plenty of whitespace between the elements.

Use of Imagery in an Eero Saarinen Website

Saarinen’s architecture was known for its clean lines, bold forms, and focus on light and space.  To replicate this same effect on a website, images should create a visually engaging experience that compliments the overall design.  To do this:

• Image Selection:
  • Use High-Quality Photography: A general must for any website, images should be sharp, well-lit, and well composed.  Grainy photos would detract from the clean aesthetic.
  • Content-Focused Images: Images used should relate directly to the content of the website.
  • Minimalism: Images should have minimal clutter and no unnecessary elements.  The clean lines and forms of the subject should take center stage.
  • Focus on Light and Space: If you can, use photos that capture the play of light and shadow, or showcase open spaces.  These themes were prevalent in Saarinen’s work.  Think of the main terminal at Washington Dulles Airport with its large windows or the open center of the Gateway Arch.
• Image Style:
  • Modern Aesthetic: The overall style of the images should be modern and timeless, reflecting the mid 20th century modern design principles.
  • Black and White: Black and white photos give a classic and sophisticated look.  Using black and white gives more emphasis to the shapes and forms in the image.
  • Selective Color: An alternative would be to use selective color, by having one element in color and rest of the photo in black and white.  This draws attention to one particular detail and can be used to spotlight specific things in the site.
  • Custom Illustrations: If photography is not available, try to use custom illustrations that echo clean lines and minimalist style.
  • Consistent: Maintain a consistent visual style by using the same color palette for all of the images.

Layout on an Eero Saarinen Website

Eero Saarinen’s focused heavily on the user experience in his buildings.  Given the space in his buildings, website sections should be full-width and incorporate some asymmetry.  Some general guidelines to follow include:

• A Grid-based Design: Have a design based on a grid to give a balanced and organized presentation of content.  A grid creates a sense of order and predictability reflecting the structure and functionality of Saarinen’s buildings.  Be sure to include a little bit of asymmetry to add visual interest and to reflect the occassional organic shapes in his work.  Also have full-width sections as part of the grid.
• Negative Space: Incorporate plenty of negative space to create a sense of spaciousness and prevent the website from being cluttered.  Negative space replicates the open floor plans and large windows in Saarinen’s designs.
• Clear Hierarchy: Have a clear hierarchy to guide users through the website.
  • Use large font sizes and bolding for headings.
  • Use contrasting colors for important elements, such as call-to-action buttons.
  • Arrange content in a logical flow by placing the most important information at the top of the page.
• Simple and Intuitive Navigation:
  • Have the information bar at the top of the page or in a vertical menu along the side.
  • Keep the number of navigation options limited to what’s essential in order to avoid overwhelming the user with too many choices.
  • Consider using icons next to the text for visual clarity.

Use of Shapes in an Eero Saarinen Website

Being a modernist, Saarinen incorporated a lot of geometric and natural shapes.  Your website can include these same shapes and mirror his work.  Be sure that they are used in  harmony and do not detract from each other or look out of place.  Some ideas to follow include:

• Geometric Shapes: Circles, squares, and rectangles should encompass the foundation of the layout and provide a sense of order and organization.  A number of these shapes were used widely in the TWA Flight Center at New York’s John F. Kennedy International Airport.
  • Focus on Circles and Curves:
    • Have rounded corners on buttons and image containers.
    • Have subtle curved lines as accents or dividers.
    • Use circular profile images or social media icons.
• Organic Shapes: Balance the geometric shapes with organic shapes to add dynamism.  Shapes to consider include:
  • Soft, wavy lines as subtle background elements.
  • Teardrop or elliptical shapes for call to action buttons.
  • If you have them, use organic shapes in images.
• Use Shapes to Determine Hierarchy: Use the size and placement of shapes to create visual hierarchy.  For example, larger circles or squares could be used to highlight important sections of the website.
• Use Shape Overlays: Shapes can be layered for visual interest.

Website Functionality

Eero Saarinen’s buildings were designed to serve a specific purpose, such as airport terminals to get people where they were going or the Gateway Arch representing the entry to the west.  They also aimed to provide a positive user experience.  Any website inspired by him should have user experience top of mind.  Here are some ways to achieve a user-centric website that have not been discussed in other sections.

• Search Functionality:
  • Search Bar: A prominently placed search bar should be evident for those who know what they are looking for.
  • Auto-complete: An auto complete can be used to show relevant keywords as users enter their queries.
  • Search Filters: If there is a lot of content, provide search filters to help users refine results and find the information they need.
• Content Accessibility:
  • Use Clear and Concise Language: Provide clear and concise terms and information that is easy for users to understand.
  • Have scannable content: Break text into smaller chunks to make it easily scannable.
  • Accesibility Features: Be sure to follow the Web Content Accessibility Guidelines (WCAG) to allow differently-abled users to use your website.
• Have a Touch Friendly Design: For those on mobile, provide large enough buttons to make the experience easier.
• Fast Loading Times: Make sure the website loads fast in order to avoid frustrated users having to wait.

Large Calls to Action

The calls to action on a Saarinen inspired website should be prominent, distinct visually, and use clear language to guide users to taking action.  Make an attempt to test different CTAs to see which ones resonate best with your audience.  Below are some ways to design effective CTAs.

• VIsual Design
  • SIze and Color: Make CTAs stand out by using a larger font size and contrast color as compared to the surrounding text.
  • Bold Buttons: Have bold, rounded buttons that echo the geometric shapes in the website.  Include dropdowns and/or hover effects to increase the visual appeal.
  • Icons: For the most important CTAs, incorporate relevant icons alongside the text to enhance clarity.
• Action-Oriented Language:
  • Use of Stong Verbs: Strong verbs entice users to take action now getting them to do what you want.
  • Benefit-focused: Make mention of the benefit users will receive by taking action.  For example:
    • “Get Your Free Guide Today!”
    • “Start Your Free Trail Now!”
    • “Schedule a Consultation.”
• Placement of CTAs
  • On Landing Pages: Place them prominently on landing pages, where users are ready to take action.
  • Content Endings: Include CTAs at the end of blog posts, articles, or product descriptions.
  • Above the Fold: Attempt to include at least one CTA above the fold.

Interactive Elements

Most of Eero Saarinen’s architecture was designed to be functional on its own.  However, you can include some interactive elements, so long as they do not clutter the clean aesthetic.  Some example interactivity features might include:

• Micro-interactions: Have buttons, menus, or icons that change color upon hovering or clicking.
• Progress indicators: Animated progress bars can be used to keep users engaged when content is loading.  Be sure the indicator matches the geometric shapes being used on the website.
• Interactive Image Gallery: Showcase product images or photographs in an interactive gallery.

Responsive Design

Eero Saarinen endeavored to create spaces that not only functioned well for the pupose they were designed for, but also to provide a positive experience.  Making sure your content is usable and readable across a variety of screen sizes will ensure that your users have a good experience when using your website.  Some ways to accomplish this include:

• Having Fluid Layouts: A fluid layout can adjust the website’s content and structure based on the screen size.
• Flexible Grid System: A flexible grid system can adapt its columns and gutters to accomodate different screen widths.  It also maintains the visual hierarchy and balance of the website.
• Media Queries: Media queries can be used to define different styles for different screen sizes and ensure the most optimal viewing on each device.
• Test the Website: When finished with the website, test the site on device emulators and on actual devices to make sure the site is working as planned.

Example of a Website Inspired by Eero Saarinen

Conclusions

Eero Saarinen, even though he was a modernist designer, was considered ahead of his time in his use of circular and rounded shapes.  His architecture is still iconic today and is still relevant in the current day.  His architecture and architecture inspired by it can be seen in a lot of the airports in the United States and when visiting St. Louis, Missouri.

References

• Davidson, Benjamin.   2020.  Eero Saarinen in Four Chairs.  Antiques Magazine 187 (2).
• Historic American Buildings Survey.  2019.  Flight Odyssey.  Treasures Magazine 9 (1): 30-37.
• Lacayo, Richard.  2010.  Eero Dynamic.  Time Magazine v. 175 (4).
• Lewis, Michael J.  2023.  Saarinen & starchitecture.  New Criterion 41 (6).
• Wills, Eric.  2019.  Flights of Fancy: The TWA Terminal at JFK, long dormant and then threatened with demolition, is reborn as a hotel.  American Scholar 88 (3).