Grids are a traditional, yet still, successful way of organizing a layout, whether print or digital. A grid structure may easily be recognized in the common newspaper print layout. Serving as a structure, grids can consist of evenly spaced columns and rows, margins to align, as well as gutters to create an order of content. Modern designs, think of magazines and interesting websites (Apple.com), have successfully “ignored” the traditional grid structure in the “breaking of the grid” – overlapping, cropping, slanted text, etc. As you read further, we take a look into individual examples of successful grid-based designs, “grid breaking” designs, and an example of poor design.
Successful Grid-Based Design – YouTube
YouTube is the most well-renowned video sharing platform on the Internet. YouTube has continuously updated their layout of the site throughout the years to maintain relevancy and increase user interaction and experience. Today, YouTube finds success in sticking to a rather basic grid-based design in order to organize the varying content. While successful, the structure has a simple style, consisting of well-spaced columns and rows, but the gutters between columns give each piece of content its own space to sit. Within recent years, YouTube, like many other companies, has added a new feature, ‘Dark theme’ that will change the theme of the layout to ‘white’ or ‘dark’ based on preference. This ability to control the site’s theme is a smart tactic YouTube implemented to keep people on the site. The mood YouTube portrays in the style of layout invokes a satisfying feeling. Recommendations and trending videos are located immediately on your landing page, decreasing time in finding content. Further, the titles and subtitles of each video are scaled accordingly within the borders of the video frame, making it clean and easy to read. Because there is such varying content with varying thumbnails uploaded constantly, YouTube can’t really organize the videos to create a specific aesthetic. That being said, I think YouTube found the most successful way to arrange such varying content in an easily readable and distinctive design.
“Breaks the Grid” – VOGUE
VOGUE magazine is a well-known source for high fashion, lifestyle and beauty and spans across multiple countries. This magazine layout, taken from VOGUE Paris, breaks traditional rules of grid design, a design style that VOGUE ritually utilizes to create interest on the page. ‘Black and White’, or greyscale, is a strong dominating color theme within the VOGUE brand as well as ‘serif’ font. This brand recognition is determined by the consistency in theme and style. Here, rather than limiting the space with a traditional vertical and horizontal structure, VOGUE utilizes white space and slanted text. While padding maintains a readable outline for the smaller, description text, the descriptive text is shaped around the larger font, the title of the issue. As you can see the ‘M’ is close to bleeding off the page, indicating no margin. The mood and style of these layouts invoke a luxury symmetry across the page. Interestingly, VOGUE has a way of mirroring shapes with the descriptive text structure. Consider the model on the right, her hat and elbow turn upwards slightly, just as so, the larger font (left) is structured symmetrically. From a designers perspective, this layout is a rather successful style of designing the traditional page.
Poor Design – PerezHilton.com
PerezHilton.com is a Hollywood celebrity gossip and news website that, in my opinion, is severely outdated. The mood and style of this site brings me back to the early 2000s, but not in a good way. The site feels cluttered and distracting with advertisements and element motions. From a designer’s perspective, the content is disorganized without thought. Random containers seem to have a symmetrical top and bottom title and button while others do not. The colors and swapping images make it hard for a reader to focus on what they’re reading. The positioning of the right column feels off, as if it should be on the left, positioning the main content column to the right, simulating the direction in which English is read. The header rows feel uneven and crammed at the top, in my opinion, the spacing should be larger to separate and enhance the menu bar. The font sizing varies throughout the page and the thin sans serif style is used improperly for ‘header’ appropriate sections. Altogether, the grid layout seems to have changed and continues to change based on the sections left for advertisements. Larger rows can be found that separate content while other rows are filled with advertisements, disguising and hiding content of the website.