This is the second installment of the blog series called “What if Wednesday.” Here I explore style and 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 is my attempt and imagination of what the design would look like. Additional comments are welcomed and appreciated.
A “What if Wednesday” Post
This week I am covering the work of Mies van der Rohe, who was a contemporary of Frank Lloyd Wright, discussed last week. First called, Ludwig Mies, he changed his name to Mies van der Rohe, which was in part is mother’s maiden name. Mies was from western Germany, where he was director of the Bauhaus school. Just before WWII, he moved to the United States after being unable to sufficiently practice under the Nazi regime.
After moving the United States, he became director of the Armour Institute of Technology, later the Illinois Institute of Technology, and became an American citizen in 1944 (Watson 2020). Like Wright, Mies van der Rohe practiced and specialized in Modernist architecture, but with a classicial twist, following the “less is more” (Wikipedia – Ludwig Mies van der Rohe) philosophy. In contrast, Wright was more expressionist in his modernism (Modern Culture 2001). When in America, Mies used steel in his designs, because of ready access to it (Schulze 1999).
Mies van der Rohe’s philosophy came to define the minimalist architecture that is typical in modernist architecture (PR Newswire 2014). His designs are characterized by clean lines, open spaces, and the use of modern materials, such as steel and glass.
Mies brought the inside out with his commercial buildings (Garcia 2019 and Cope 2013), as evident with Crown Hall on the IIT campus (Baur 2009), and in residential structures with the Farnsworth House (McGuigan 2001). Generally, Mies van der Rohe is responsible for the steel and glass high-rise buildings becoming the norm (Baur 2009).
Some of his most famous buildings are the Seagrams Building in New York, NY, 860 and 880 Lakeshore Drive in Chicago, IL, and the Farnsworth House in Plano, IL, a precursor to a lot of modernist glass houses in use today and a style improved upon with the National Gallery in Berlin. Other examples are the Museum of Fine Arts in Houston, TX, an example of the International style, and One Charles Center in Baltimore, MD.
Guiding Principles of a Website by Mies van der Rohe
If we could go back and interview Mies van der Rohe about designing or inspiring a website in his signature style, he would have the following guidelines.
- Form Following Function: Like Frank Lloyd Wright, Mies van der Rohe, was of the modernist tradition, and prioritized the function of the architecture. Howeverm while Wright brought the outside in with organic architecture, Mies brought the inside out. This provides an interesting comparision and contrast to the two architects.
- It would Celebrate the Beauty of Simplicity: A website designed by Mies would be uncluttered, sophisticated, have elegance, and follow his “less is more” philosophy.
Features of a Mies van der Rohe Website
The features of a Mies van der Rohe website would likely include the following:
- A Grid Layout: Mies designs were based on a grid layout that provided structure and order. Hence, a website following his design would have neat rows and columns.
- Minimalism: Following “less is more,” a Mies van der Rohe website would prioritize the essential elements by using whitespace and having easy navigation.
- Modern Materials: Backgrounds of a Mies van der Rohe website would feature metallic accents, transparent backgrounds, or have subtle animations giving a hint of sophistication. Mies used steel in his designs, in contrast to the wood generally used by Wright.
- Typography: A Mies website would feature sans serif fonts for simplicity and legibility.
- Color Palette: Mies van der Rohe emphasized neutral colors such as black, white, and shades of gray to create harmony and consistency. Important information and interactive areas such as calls to action would be highlighted with accent colors.
- Interactivity: Mies commercial architecture interacted with the eye as you followed the building to the sky. A website using a similar focus would have smooth transitions, hover effects, and subtle interactive elements.
The Mies van Der Rohe Grid System
In his buildings, Mies adhered strictly to grids, which offered a sense of stability and added cohesiveness to the designs. The use of grids also allowed for equillibrium between form and function. The use of grids is evident in the architecture of the Farnsworth House (McGuigan 2001).
Implementing the Grid System in a Website
Like his buildings, the underlying structure of a Mies van der Rohe website would be a grid system that would be used to organize content into rows and columns, thereby emplacing a sense of order, balance, symmetry, and fostering clarity. The grid would determine the placement of text, images, and buttons and results in a website that is visually clean, modern, and timeless. In addition to the content, the layout would also include specific shapes and generous whitespace.
The Use of Specific Shapes
- Squares and Rectangles: These would be the fundamental shapes and be used for website sections, content blocks, buttons, and navigation menus.
- Squares: used for image containers, profile sections, or showcasing products.
- Rectangles: used for content areas, navigation bars, and text sections forming the overall layout.
- Geometric Overlays and Accents: the sparing use of geometric shapes (other than squares and rectangles) could be used as overlays or backgrounds to add visual interest. An example would be a faint triangle around a call to action button or a circle framing an image.
The Use of Whitespace
While not a shape, the whitespace is just as important in a Mies van der Rohe website. The space in between elements allows the eye to rest and appreciate the clean lines and shapes. It also keeps the website from feeling crowded or overwhelming, and promotes a sense of calm and allows for focusing on the details of the website. Having ample whitespace is the embodiment of Mies’ “less is more” philosophy, which was expressed as a building facade and adopted by many later Chicago architects (Nad 2011). Some practical applications include:
- Padding and Margins: Generous padding around text blocks, images, and buttons creates breathing room and separation of elements.
- Line Spacing and Typography: Ample space between lines of text and proper kerning (spacing between letters) enhances readability.
- Content Chunks and Whitespace: Large paragraphs of text should be broken down with headings, subheadings, and strategically placed whitespace guiding the user through the content.
- Imagery and Whitespace: Images should be separated to allow them to breath and create visual interest of their own.
Use of Limited Color Palette
Mies van der Rohe focused on simplicity and as such used a limited color palette, generally of monochromatic black and white. Any colors selected need to work in harmony and balance. Analogous colors might be used or a monochromatic palette could be used.
Primary Colors Used on Mies van der Rohe Website
A website designed or inspired by Mies would use black, white, and shades of gray as the primary colors to embue timeliness and unity throughout. Since these colors are monchromatic, they allow for the seamless integration of different media types, effective contrast, as well as, depth and interest. The practical use of the colors is described below:
- Black: Black creates a feeling of elegance, sophistication, and contrasts well with other colors. It could be used for text, navigation bars, and subtle accents.
- White: White represents purity, openness, and gives the open space needed for other elements to breathe. This would be the dominant background color.
- Gray: Gray occupies the neutral ground between the black and white and is used for text, borders, and some backgrounds as a transition.
The Use of Accent Colors
Mies van der Rohe was known for using metallic colors for accents. These could be of chrome, steel, aluminum, or another metal. Metallic finishes show luxury, innovation, and a futuristic edge. However, in his style, they were not used for decoration, but to highlight functional elements as is described below:
- How to Use the Colors: It is likely that Mies would have used one metallic accent color to draw attention to specific elements. Requirements for the color would include:
- It would have to complement the core colors and not clash. Generally brushed metal finishes are more subtle and blend in better. The use of chrome could add a higher shine.
- The accent color would be used for buttons, call to actions, and provide subtle outlines for text boxes.
- The goal of the colors would be to draw attention to the interactive elements without overwhelming the minimalist aesthetic.
Examples of Effective Use of Accent Colors
- Button Borders: A thin chrome border around a call to action can make it stand out without appearing overly flashy.
- Navigation Menu Accents: Subtle metallic outlines around navigation menu items can improve their visibility, especially when using a white background.
- Scroll Bar/Arrow Highlights: A thin chrome line around the scroll bar or arrow can add a touch of sophistication and subtly guide the user’s eye without distraction.
- Product Detail Accents: Products that feature metallic components can have those features highlighted, creating a cohesive visual experience.
Material Textures
Mies van der Rohe, like Frank Lloyd Wright, also used natural materials, such as glass and stone. Like the metallic accents these colors were used sparingly. Generally the use of material textures could be seen in his furniture designs. For instance, the colors that could represent materials include:
- Light Biege: could represent stone.
- A Transparent Background: could represent glass.
- Silvery Colors: could represent steel, aluminum, and chrome.
- Brown Metallic Colors: could represent copper and brass.
Use of High-Quality Photos and Graphics
Mies van der Rohe would have used high-quality photos and graphics to complement the minimalistic aesthetic he wanted. In this way, space would not be wasted. Below are some ways the visuals would be used:
- Content-driven: Images and graphics would have to directly relate to the website’s content and purpose. Instead of stock photos, photos that showcase the brand, product, or service in a clear and concise way would be used.
- Minimalist Approach: When placing images, unnecessary clutter should be avoided. Images should have clean compositions, simple backgrounds, and focus only on the essential elements, thereby complementing the surrounding whitespace.
- Black and White Photography: A Mies van der Rohe design would use black and white imagery to match the overall color aesthetic of the site. The use of black and white can showcase objects, products, and people in a sophisticated and dramatic way.
- Simple Illustrations: Vector graphics and line art illustrations with geometric shapes, architectural elements, and product lines drawings could be used without overwhelming the layout and overall design.
Technical Aspects of Images and Graphics
- High-Resolution and Optimized: Images should be of high-resolution and optimized for fast loading.
- Consistent Style: You should have a consistent visual style to reduce clutter. Consider using similar color palettes, lighting techniques, or editing styles of the images.
Examples of Image Use in Mies van der Rohe Website
- Architecture: Images of architectural or artistic work show highlight clean lines, geometric shapes, and the use of natural materials.
- Products: Products should have a clean background that allows the product to have the center stage.
- People: Portraits and images of people should be in black and white and should show them interacting with the brand or the product.
Website Navigation
Using the minimalistic design philosophy of “less is more” as practiced by Mies van der Rohe, a clear and concise navigation structure would be central to the website. Some aspects of the navigation would include the following.
Textual Aspects of Navigation
- Flat Hierarchy: A Miesian website would have a flat navigation structure with no dropdown menus. The primary navigation options would be displayed all at once, minimizing the need to go through mutliple layers.
- Logical Grouping: Navigation labels would be grouped logically based on content or functionality. For example, it might have “About Us”, “Services”, “Products”, and “Contact.”
- Labeling and Wording: Labels should be clear, concise, and easily understandable by the target audience. Try to avoid jargon and technical terms.
- Descriptive and Actionable: Do not use generic labels for buttons or links.
- Use descriptive labels that tell users exactly what will happen. This is also required for the Web Content Accessibility Guidelines (WCAG) standards.
- Try to use action verbs like ‘explore’, “Shop Now”, or “Find out about” to encourage engagement and clicks.
Visual Aspects of Navigation
- Minimalistic Approach: The navigation bar should match the overall website design by having:
- Clean lines, neutral colors, and a focus on typography,
- Avoid excessive use of icons and not use complex graphics.
- Placement and Visibility: The navigation bar should be at the top of the website and users should not have to scroll to reach it.
- Keyboard Navigation: The navigation bar should be visible and usable to users navigating with keyboard by having proper tab order and keyboard shortcuts.
Typography in a Mies van der Rohe Website
Again using the minimalistic approach, typography would use sans-serif fonts to match the clean lines and geometric shapes used on the website. These would likely include the fonts of Helvetica, Proxima Nova, Nunito Sans, or Open Sans. Elegant typography would be a hallmark of the website, contributing to it timeliness and user-friendly design.
Interactivity in a Mies Van Der Rohe Website
Many of Mies buildings blended with the sky and the surrounding environment giving a subtle animation. In your website, you could have micro-interactions such as hover effects, parallax scrolling, or loading animations. However, be careful not to distract from the minimalist aesthetic.
Example Website Inspired by Mies Van der Rohe
Conclusion
Mies van der Rohe brought many new architectural ideas to America and the world and provided an opposite contrast to Frank Lloyd Wright. Widely introducing the use of steel and glass in residential high-rise structures and in smaller structures, he brought the “inside out.” Using his techniques in your website you can have a modernist minimalist aesthetic that contrasts with that of Frank Lloyd Wright, providing more choice for clients.
Find a WebHead For Your Web Design Project
References
- Baur, Brian C. 2009. American Field Trip: Chicago Architecture of Mies van der Rohe. U.S. Stamp News 15 (2): 18-20.
- Cope, Jon Lee. 2013. The Grand Design – Why Ludwig Mies van der Rohe is still the most important architect, arguably, in Louisville. Louisville Magazine 64 (10): 80-83.
- Garcia, Alejandro Cervilla. 2019. The skin and bones of structure. A brief history of how Mies van der Rohe revlealed the skeleton of the house. Architectus 58 (2): 15-26.
- McGuighan, Cathleen. 2001. Totally Modern Mies. Newsweek 137 (26).
- Modern Culture. 2001. Modern Culture: 1945-73. History of American Architecture: Buildings in Their Cultural & Technological Context.
- Nad, Srdan. 2011. Mies van der Rohe in Njegov Vpliv Na Vecstanovanjsko Architekturo v Chicagu. AR Arhitektura 2011 (2): 5-14.
- PR Newswire. 2014. New Book Celebrates the Historic Significance of Mies van der Rohe, Father of the American Skyscraper.
- Schulze, Franz. 1999. Mies van der Rohe, Ludwig. https://doi-org.wikipedialibrary.idm.oclc.org/10.1093/anb/9780198606697.article.1700886
- Watson, Victoria. 2020. Architecture and Faux-nationalism: reflections on a remark made by the British architectural historian Gavin Stamp about the German-American architect Ludwig Mies van der Rohe. National Identities 22 (4): 471-478.
