Designs of the Times 04: Layouts
We’re back with more Designs of the Times, a series that explores the impact of digital design decisions on company branding, customer perception, and community building. We’re discussing how specific brands exhibit different elements, and we’ll be getting the Yaguara Design team’s take on each topic along the way.
Let’s dive into layouts.
The UX Morning Paper
Picture the front page of a typical morning paper: The title and date are organized at the top and the titles of each article are bolded. The first story that catches your eye in the largest one in the middle, with the largest letters and largest photo. Beside the cover story, there is a weekly column on one side, and two smaller stories stacked on top of each other on the other. Everything is square, rectangular, and the important stories have bolded titles.
The organized columns of your morning paper are organized that way for a reason– readability for the basis of responsive design. The bold lettering and organized squares you see in the paper are engineered to help make reading the material easier to visually digest and read through. More important stories are bolded to ensure they are read, and perhaps a weekly column lives on the right side where you can always expect to find it. Layouts are the framework that wrangles content into digestible sections, and print was their original medium.
Most print materials are backed with a grid layout, meaning squares or columns organize sections and elements onto a page. Grids offer a streamlined and simple view of content in a newspaper or on a website. Newspapers often use column grids, which utilize long rectangular column boxes to elongate pages and help organize several stories onto one page with a vertical backbone. With the progression of print, and the move from print to the web, other grid layouts emerge, such as modular, which are more square and allow for more flexibility, or hierarchical layouts, which organize content by importance and use a combination of freestyle and modular grids to create a unique layout.
Once the grid is translated onto a website, it offers a simple template for online publications to use and further develop– layouts are truly the basis upon which design is organized, built, and seen, making it a truly interesting design element.
Lay(out) the Foundation
With modern technology, grid layouts blend into codes with ease and provide simple templates for sharing information. Perhaps some of the first popular web pages that utilized grids and connected with an audience were blogs– i.e. fashion, travel, food, and even MySpace and Tumblr. While the colors and content took center stage, the grid layouts hard at work in the background, supporting the readability of the website- whether it be about the latest boot trends or the incredibly angsty “About Me” section of your MySpace profile.
The fun job of bloggers and MySpacers alike is the ability to customize layouts– perhaps it goes unrecognized, but oftentimes when creating layouts there is a natural tendency to structure a page hierarchy. Kat from the Yaguara design team adds, “this subtle communication of importance gives the reader cues to a section or story’s importance,” whether it be a big picture plastered on the front page, or a large square outlining a particular story.
One example of a notable layout is Bustle, an online publication we’ve discussed before in terms of font. With their rebrand in early 2020, Bustle shifted from a traditional Internet blogger grid layout to one more asymmetrical and editorial. This digital overhaul not only marked a new content era for Bustle, but it proves their design dedication to a rapidly growing audience that is forward thinking, curious, and hungry for thought provoking content.
It’s All in the First Impression
They say a strong handshake is the key to a great first impression– the DTC brand or blogger equivalent is having an intriguing, descriptive, and readable web layout that keeps consumers coming back for more.
The grid system is still alive and well, and Kat adds that it’s “really the basis of successful, responsive design.” Additionally, a few standout layout templates have since developed:
For instance, the Bootstrap template is considered the modern go-to template. Developed in 2011 by Twitter and originally dubbed “Twitter Blueprint.” Originally developed to streamline the format of internal tools of the social media platform, once the blueprint became available to the public, it grew in popularity. The simplified layout provides “containers” to hold content, and the resulting look is uniform and organized. Since 2011, Bootstrap has continued to evolve; the newest version, Bootstrap 5 Alpha, was released June 16, 2021 and complete with a rewritten grid to support columns placed outside rows, improved application performing interface (API), updated forms, and more. Today, Bootstrap is the second most popular web framework used today, right behind Microsoft.
A few other layouts, while not as widespread as bootstrap, have risen in popularity. Layouts such as the Z-Pattern and the Zig-Zag Pattern stem from the Gutenburg Diagram, which outlines the natural movement of the human eye as it reads. The diagram illustrates how reading gravity moves from the top left to the bottom right– so, theoretically, an effective layout could be putting a bold headline at the top left and a call to action button in the bottom right. The Z-Pattern follows a reverse “s” layout, and it veers off the Gutenberg Diagram with its movement from left to right and back to left. Likewise, the Zig-Zag Pattern is an extended version of the Z-Pattern.
While there are studies about the effectiveness of different layouts, what often determines an effective layout is the popularity and success of a site. And, if a new site layout is successful, competing brands or creators notice, and oftentimes catch on– the birth of a trend. Many modern DTC companies share similar layouts– while this might seem redundant, it signifies a company’s identity. For instance, Nuggs, Tushy Bidet, Oscar, and Outer might all seem like different companies, but they are all DTC brands that are concerned with connecting to their customers. And? They all have strikingly similar layouts. A large image takes up the front page, scroll down to zig-zag through reviews and product, and enjoy the visually simple color schemes and pops of color through illustration and images.
Ultimately, the layout of a brand’s site serves to present a product and message in a way that is easy to understand and pleasing to the eye. Layout templates such as Bootstrap and the Z-Pattern offer a streamlined layout that is easy to implement and follow. On the other hand, some sites use layouts also as an art form: Fluff Cosmetics, for instance, incorporates floating objects and moving compartments throughout their homepage. Additionally, designer and writer Frank Chimero documented his blog’s redesign, which consists of three boxes on the homepage, and a simple column running down the middle of his post archive– no boxes or complicated layout structure in site.
Whether the layout is from a template or more avant-garde, a layout is only as effective as its translation to mobile and its connection to the desired audience. With many shoppers taking to mobile applications and social channels to transact and consume content, mobile adaptability is essential to a brand site’s success. A layout tells a brand’s story, and its ability to take many forms and still continue to accurately present content and take a consumer through the beginning, middle, and end of a user experience is the sign of a successful layout design.
Birds of a Feather Layout Together
So we have an idea of grids and the history of web layouts, but what about digesting the content? Ultimately, the goal of layouts is to express a brand’s message and content in a readable and unique way: enter, user experience (UX).
A user’s experience on a website determines the impressions, bounce rate, conversions, and ultimately the success of a webpage from a blog or brand. As a customer or reader scrolls through a page, they are embarking on a consumer journey. In order for that journey to be smooth sailing, very basic UX “laws” can help streamline experience. For instance, the law of proximity states that objects close to each other tend to be grouped together. Also, the peak-end rule states that people usually judge an experience largely based on how they felt at its peak and at its end– so, from the initial impression on the front page to the checkout, the goal is for the customer to enjoy the process. Just like a book has a clear beginning, middle, and end, a layout serves as the vessel upon which a consumer rides through a site.
If a typical site layout illustrates a beginning, middle, and end to the digestive consumer experience as they scroll down a page, then parallax scrolling is the Jackson Polluck of UX layouts. Thanks to advanced CSS and HTML, the optical illusion effect of the foreground moving faster than the background gives parallax its exciting movement. Where a layout template is to delicate strokes of paint on a portrait, parallax takes the paintbrush and flicks color all over the canvas.
A visual example of parallax is Gucci’s Spring Summer 2018 collection, as well as their Gucci Zumi 2019 collection sites. As you scroll down the page, images change from one scene to another with unique transitions and colorful illustrations. The movement of the layout combines animation with parallax scrolling that moves horizontally, in and out, and all over as you scroll down. While parallax is certainly immersive and exciting, the heavy use of parallax, or scroll hijacking, is in some light an overwhelming UX experience. Since parallax veers away from the expectations when scrolling down a page, it prevents a user from controlling all of their site experience– “scrolljacking” controls how a user views a page, and it puts the brand, instead of the customer, in the driver’s seat. Regardless, parallax is an experience that envelops a customer or viewer like a really good book- the intro, body, and conclusion of the customer experience becomes an immersive art form.
Building Up and Burning Down the House
The layout of a website tells a lot about the brand or person behind it– the framework provides the support beams for the content that fills the site and speaks to the customer or reader. From print to web design, layouts blend information together with ease and encourage a unique user experience, however simple or complex it might be. The site’s goal is for the viewer to have a positive experience, ultimately leading to return visits, purchases, increased page views, and conversions.
Whether a Bootstrap layout defines a brand, or a parallax experience, layouts draw in and out of the lines when it comes to UX. The evolution of layouts comes from evolution in design as time goes on, whether it be on print or on the web. Where parallax is an impressive modern feature, experiments in print taken from Futurism, Dadaism and Constructivism were revolutionary for their time, and ultimately paved the way for future web layouts.
Layouts are just another piece of the design puzzle that help tell a brand’s story. Here at Yaguara, we really enjoy helping brands tell them with data; and, with the help of our design team, we love planning out the best visual story to tell all of our customers, readers, and site visitors. A house can’t stand without its frame, just like a person can’t stand without a skeleton– and, just like a website can not effectively communicate without some form of layout. We’re excited to continue our exploration of impactful design elements on successful branding– stay tuned.
