This is the first intallment of blog series called “What if Wednesday.” Here I will try to take the style and design philosophies of famous architects, designers, and painters and try to imagine what a website designed or inspired by them would look like. The opinions presented here reflect my attempt and imagination of what the design would look like. Additional comments are welcomed and appreciated.
Since it is Earth Day week and Silphium Design does websites for environmental businesses and organizations, I thought Frank Lloyd Wright would be a good person to start with. Best known for his masterpiece, Fallingwater, in western Pennsylvania, Wright was known for incorporating the human with the natural environment.
Frank Lloyd Wright felt that nature “was not only the obivious features of the environment or natural surroundings, but the unequalled spirit of all of it in harmony” (Hummell 1994). His style, called the Prairie Style, was a part of organic architecture.
Frank Lloyd Wright, practiced architecture in the late 19th and first half of the 20th century after going to the University of Wisconsin. Wright later learned organic architecture from his mentor, Louis Sullivan, and soon specialized in it. Organic architecture is a form of design that harmonizes the human and natural world by blending both into a whole organism.
A lot of Frank Lloyd Wright’s philosophy towards buildings can be applied to websites. Wright stated that “buildings, like people, must first be sincere, must be true” (French 2016). This is the same for your website in order to make a great first impression.
Components of a Website by Frank Lloyd Wright
If we could go back and talk with Frank Lloyd Wright about designing a website in his signature style, he would follow these principles:
- Natural Materials and Colors: A Frank Lloyd Wright website would use colors that are associated with nature such as browns, biege, and greens. Natural textures deriving from wood, stone, and glass would be used for borders and backgrounds.
- A lot of Negative/Whitespace Integration: Frank Lloyd Wright’s architecture allowed for a sense of flow, often called embrace and release. This is where when you walk into one of his buildings, you are at first embraced (a small confined space) and then you are released into the open (a larger space). His website would utilize a lot of whitespace to allow the content within to breathe.
- Incorporation of Horizontal Lines and Openness: A website by Frank Lloyd Wright would have a lot of horizontal lines and would take advantage of the spaciousness created by the whitespace. Horizontal lines could be evoked through wide banners, minimalist menus, and layouts that are clean and uncluttered.
- A lot of Emphasis on Geometric Shapes: To bring humans and nature together, Frank Lloyd Wright made use a multitude of geometric shapes, such as squares, rectangles, and some inspired by plants. A prominent example of the use of plant shapes is the Johnson Wax Headquarters building in Racine, WI. As such all of the elements of the building were one organism (Krause 2011). A website can incoporate these shapes through the overall layout, buttons, and the cropping of images thereby creating a unified “organism.”
Form Follows Function
The term, “form follows function” was coined by Louis Sullivan, Frank Lloyd Wright’s mentor, and stated that buildings must blend in with their environment. This philosophy was followed by a lot of modernist architects, including Ludwig Mies van der Rohe, a contemporary of Wright’s. Modernism, was a respond to the frugality, brought on by the Great Depression (Cannell 2011). An example of Frank Lloyd Wright’s thinking of the phrase was that a house should be “of the hill, not on top of the hill” (McLendon 2001).
A website using this design would have visual elements and functionalities that directly reflect the website’s purpose. In an earlier post on content writing, I talked about needing to know the purpose of the website before starting it. This is where it is important not only for the content, but for the design as well. The steps to achieve this include:
- Understanding the Website’s Purpose: Are you selling products through an eCommerce store? Sharing information with a blog? Or are you showcasing your creative work in a portfolio? Each type of website has a different target audience and therefore a different design subtype.
- Ecommerce Website: The layout (form) shoud be clear and organized, having well-developed product categories and search bars that are easy to find. Functionally it should have high-quality product images with a zoom capability, detailed descriptions, and a user-friendly shopping cart and checkout process.
- Blog Website: The layout (form) shoud be clean and minimalist with plenty of whitespace promoting readability. A clear hierarchy should be included with titles, subheadings, and bullet points that enables users to find information easily. Functionally this site should have clear and concise fonts, easy navigation to different sections, and social media sharing buttons.
- Portfolio Website: The layout (form) should have large image galleries and/or project sections. Functionally the website should have a clear and easy way to contact the designer and clear information about the services provided.
- Benefits to Your Website by Using “Form Follows Function”
- You have an Enhanced User Experience: A design that follows the purpose allows users to find information and complete tasks efficiently and intuitively, much like Frank Lloyd Wright’s architecture.
- Improved Conversion Rate: A well-designed site can guide or steer users to click you call-to-action.
- Increased Engagement: A website that is easy, comfortable, and visually appealing keeps users engaged and looking for more.
- Brand Clarity: Expressing your brand’s identity through design elements can solidify the image of your brand with users.
Hypothetical Websites Using "Form Follows Function"
- An Environmental Website: Would have an open layout with horizontal lines, large images, and simple navigation to see different sections of the website.
- Ecommerce Furniture Store: Would have a layout that has clear product categories, high-quality images with the ability to zoom in, and an easy checkout process.
- A Minimalist Artist Portfolio Website: Would have a layout that is clean and minimalist that has large, high-resolution images of the artist’s work as a focus with minimal text. Contact information for the artist would be easy to find.
Technical Website Aspects for "Form Follows Function"
Under the concept of form following function there are some things that can be done to any type of website. All of these enhancements and styles are in line with Frank Lloyd Wright’s efforts at adaptive functionality. These include:
- Having a Fluid Layout: In order to preserve the same experience across devices, use relative units such as em, rem or a percentage, instead of sizes in absolute units such as pixels.
- Have Responsive Images: Use srcset or another responsive image solution to ensure the same user experience. Generally this is handled at the CMS level.
- Make Sure your Website is Accessible: Comply with the Web Content Accessibility Guidelines (WCAG) standards. Be sure you have alternative text for images, that your website can be tabbed through by having proper heading structure and that you have adequate color contrast, for the diffrently-abled.
Horizontal Lines/Flow and Openness
A website by Frank Lloyd Wright would have a lot of horizontal lines and would take advantage of the spaciousness created by the whitespace. Having the two together gives the form and the function, creating the harmony in the exprience.
Horizontal Lines/Flow in a Website
Having horizontal lines and flow helps create a sense of spaciousness with a vanishing horizon, tranquility, user-friendliness, stability, and serenity. The use of lines, a signature Frank Lloyd Wright feature, often seen in stained glass, brought out the natural elements of the surrounding landscape.
How to Implement Horizontal Lines/Flow in a Website
- Wide Banners: Large banner images or video headers across the top of the website gives a sense of the horizontal to your website.
- Menu Bars: Having horizontal navigation menus placed at the top and bottom of the page; frames the site in a horizontal structure.
- Content Blocks: Divide the website content into horizontal sections using clean lines and subtle spacing to promote readability by scanning and better organization.
- Use Whitespace: Have a lot of whitespace around content and between elements such as buttons and images to show spaciousness and flow.
- Have long-scrolling Landing Pages: Using a long-scrolling landing page with ample whitespace avoids overwhelming website visitors and enables them to consume bite-sized portions of information.
- Use a Sticky Header Bar: Having the top-menu remain at the top, promotes a top horizontal line and avoids the reader having to scroll back up to find what they are looking for.
Benefits of Horizontal Structure
- A Sense of Balance and Tranquility: Having room to breathe and spaciousness can create calmness and stability similar to the houses of Frank Lloyd Wright.
- Improved Readability: Horizontal lines can help guide the eye across the screen, enhancing the flow of information and make content easier to consume.
- Modern Design/Aesthetic: Horizontal lines have a clean and modern aesthetic that reflects contemporary design trends.
Creating a Sense of Openness
A hallmark of Frank Lloyd Wright’s architecture was to eliminate unnecessary interior walls achieving a feeling of openness or release. Your website can achieve a similar sense of openness by using strategic placement of content and elements.
Benefits of Openness
- A Feeling of Spaciousness and Uncluttered Look: Having a lot of unused space gives a feeling of airiness and release. Like an open floor plan for your website.
- Emphasizes the Content: Without visual distractions, more focus is placed on the text, images, and/or videos.
- Improves the User Experience: A website that is uncluttered is less tiring and more inviting for exploration.
How to Implement a Sense of Openness on a Website
- Minimalist Menus: Use hidden menus that appear on hover or through tab navigation, or even the use of icons with clear meanings can mimimize clutter, creating more whitespace and openness. Just be careful to follow the WCAG accessibility guidelines when doing this.
- Full-Width Layouts: Using full-width layouts can expand the space between elements and content giving a more open feel.
- Use of Grids: Laying content and elements in a grid can establish structure and build on the horizonal lines.
- Large High-Quality Images: Large, high-resolution images can create an immersive and open user experience.
Natural Material and Colors
Being a part of the organic architecture movement, Frank Lloyd Wright used a lot of materials from the natural environment and accented them with the surrounding colors. He also worked with nature instead of against it. The use of these colors, textures, and materials created a sense of warmth, organic connection, and elegance that was timeless.
Natural Materials Used by Frank Lloyd Wright
Materials used by Frank Lloyd Wright included wood, stone, and glass, which helped bring a sense of the outdoors and the surrounding natural world into the built space. Often the building materials were accented by furniture and carpeting containing the same natural materials.
Benefits of Natural Materials
- Created an Organic Connection: Using natural materials brought the connection to the nature closer and evoked a calm and inviting user experience.
- A Sense of Warmth and Luxury: Natural materials brought a sense of warmth and luxury/sophistication and were qualities of Frank Lloyd Wright’s Prairie style architecture.
- An Aesthetic that was timeless: Since natural materials have been around for a long time, they do not go out of style and have a timeless quality.
How to Implement Natural Materials in a Website
- Background Textures: Textures such as wood grain patterns or stonework can be used to background the website sections.
- Use of Imagery: Images of natural materials or objects using natural materials can be portrayed around the website. These can include wood furniture, stone walls, or woven textures. Try to match the textures in the images to the backgrounds used elsewhere for a unified look.
- Google Material Design: this design language incorporates principles of natural materials with a focus on light and depth.
Natural Colors Used by Frank Lloyd Wright
Frank Lloyd Wright was famous for using colors that were found in nature. These often included earthy colors such as browns, beige, tans, and greens along with those found in the air and water such as blues and reds. The use of these colors helped the architecture blend into the landscape and created a connection between the humans and nature.
Benefits of Natural Color Use
- Harmony and Tranquility: Natural color palettes create a sense of harmony and tranquility, reflecting the peacefulness oftern associated with nature.
- Versatility: A natural color scheme can add versatility and allows the seamless integration of natural elements.
Implementation of Natural Colors on a Website
- Use of Earthy Tones: Colors such as browns, beige, and tan can be used as the primary background colors of the website, grounding the site to the Earth and providing stability.
- Accents of Green: Various shades of green can be used to represent the living environment and enliven the page. Shades of blue can represent water and the sky.
- Muted Reds and Oranges: These colors, found occassionally in nature, can be used to bring some warmth and accentuate the things we want to be noticed.
- Intersperse some Neutral Shades: In concert with negative/whitespace, neutral shades such as white, black, and gray can add depth and contrast when used with bolder colors.
- Transitional Gradients: Use a blending of adjacent colors to simulate the light effects of sunsets, water bodies, and the sky. These can be used to guide the user’s eyes to prominent regions of the website.
The Use of Negative Space
Frank Lloyd Wright used various arichitectural elements, e.g. cantilevered beams, overhanging rooflines, and open floor plans to create natural lighting and blur the boundary between the internal and external environments. On your website, Frank Lloyd Wright’s open space is equivalent to your whitespace. Producing a website can be thought of painting with light, and whitespace can be used as a canvas as such.
Benefits of Whitespace in a Website
- Provides Focus and Clarity: The liberal use of whitespace can reduce visual clutter, minimize distraction, and balance the content, allowing key website elements to stand out. This in turn can allow your users to focus on those things you want them to focus on.
- Visual Hierarchy: By having less to focus on, website designers can create a clear hierarchy and guide users to the most important content.
- Allows the Eyes to Rest: Just like Wright’s architecture promoted a sense of calmness, whitepace on a website is less tiring and allows the eyes to rest. Thus, it allows, readers to focus on the information presented, leading to more browsing of your website. The use of whitespace is especially important for text-heavy websites.
- Aligns with Wright’s Philosophy: The ample use of whitespace reflects the design principles of simiplicity, balance, and a connection to nature when used with the other elements.
How to integrate whitespace in a website
- Use Padding and Margins: Make sure that text has plenty of space and add padding and margins around images and other website elements such as buttons and images.
- Have Sections with a Purpose: Break-up the website into distinct sections with whitespace to organize content and provide focus.
- Have Limited UI Elements: Similar to having sections with purpose; buttons, menus, and forms should be minimized to only those necessary for interaction with the site. This helps preserve the simplicity and elegance of the website and allows for more whitespace.
- Large Hero Banners: Have large hero banners with minimal text to make an impressive visual statement and not produce a distaction or be overwhelming.
- Pay Attention to the Typography: Use font styles, sizes, and weights that enhance readbility and guide users through the content. Some typography can be used for decorative purposes to add a sense of surprise or whimsy.
Geometric Shapes
One hallmark of Frank Lloyd Wright’s architectural style was the use of various geometric shapes such as squares and rectangles that were found in rock formations or were inspired by plants. These same shapes mimicked the horizontal lines of the Prairie landscape and other places where this buildings were located.
Frank Lloyd Wright also used geometric shapes from light using the clerestory windows in this houses. An emphasis on geometry can give your website a sense of order, balance, harmony, and make the website more functional overall.
Benefits of Using Geometric Shapes in Design
- Promotes Order and Balance: Geometric shapes create a sense of order and balance on your website.
- Gives a Modern Aesthetic: The use of geometric shape contributes to a clean and modern look and aligns well with contemporary website design trends.
- Improves Navigation: By using a grid-based layout and using clear geometric shapes for content blocks, users can navigate the website intuitively and find the information they need faster.
- Looks More Like Wright’s Design: An emphasis on geometric shapes ties the website to the Prairie style and creates a familiar experience for those who know Wright’s design.
How to Use Geometric Shapes in a Website
- Overall Layout: Layout the website on a grid-system using squares and rectangles. This creates a sense of order and predictability for users on the website.
- Content Blocks: Using the overall grid layout, divide the content into squares or rectangles with each block having a clear heading and concise text within. This allows readers to scan information and helps with readability.
- Buttons and Call-to-Actions: Use squares, rectangles, or rounded squares following the overall website theme to produce a clean and modern look.
- Image Cropping and Galleries: Crop images into squares or rectangles following the theme developed in the overall layout.
- Subtle Geometric Patterns: Try to use subtle differences in patterns that can be used in the background or in sections to create some suspense. This can add visual interest while staying true to the overall theme of the website.
Example Website Design Using Frank Lloyd Wright Principles
Conclusion
If you are doing a website that is minimalistic, modern, and relates to the natural environment, the principles of Frank Lloyd Wright may work very well. As you can see above a lot of the components of Frank Lloyd Wright’s architecture also translates to website design as well.
References
- Cannell, Michael. 2011. Design well within reach. (New York: The New York Times, Apr. 3, 2011).
- French, Thomas. 2016. The Master’s Call. Indianapolis Monthly. 40 (1): 87-89.
- Hummell, Laura. 2013. Discovering the amazing world of Frank Lloyd Wright’s Designs. Children’s Technology and Engineering 18 (1): 22-25.
- Krause, Linda R. 2011. Frank Lloyd Wright: Organic Architecture for the 21st Century. Journal of Architectural Education 65 (1): 82-84.
- Ledes, Allison Eckardt. 2003. A Carpet Resource. Magazine Antiques 164 (2): 104.
- McLendon, Sandy. 2001. North by Northwest. Old-House Interiors 7 (6): 32-37.
