Grid Layout

 

Successful Grid Layout

In order to have successful grid layout, there are several identifiers used to engage users. While visiting a website, the appearance is the first thing a user notices. I personally gravitate to cleaner websites. Heather Buchel created a mock website for a magazine called The Collection. I know that monochrome can be seen as boring, however, it provides a great feel of nostalgia. She uses the negative space to guide the eyes toward the text in the lower right grid. Scrollability of this website is wonderful as it uses the vertical column structure to entice the user to move down the page. The grid layout has different sized which help break up the monotony of the color scheme. The changes in font and sizing create a sense of precedence on what should be read first. The layout is reminiscent of a newspaper layout. I think this is a successful display of grid layout because it follows the same layout used in newspapers. The skeleton of this website provides familiarity to users, even if it is their first time using the website. The font size for this page is just as bold as one for the New York Times. Most newspapers usually have larger font sizes on their “landing pages”. The text is provided in a rectangular grid to the right of the cover image. Since we naturally read left to right, we naturally read the information next to the image.

 

 

 

 

 

Unconventional Grid Layout

A great example of a grid layout that “breaks the grid” is a website for Dynamit. Most websites engage users with great organization, focusing attention with colors, fonts, scrollability, and messaging. This website is very engaging because it uses video instead of pictures. In my opinion, what allows this website to break the grid is the ability to allow a user to focus and forget. For example, The header is a video that is overlapped with the words “Web & Mobile”. The white words typically draw your attention because the eyes are automatically drawn to the color white. After reading the words, the user is instantly watching the header. As you scroll, different options appear to move your focus in a fluid way. The video also tells a story which allows a user to spend more time on a page. As the user scrolls down the header disappears. This allows the user more viewing space on the website. The white space perfectly frames the information housed in the grids. The parts of the layout that have color pop due to the blank slate in the background. While the grid layout is commonly used throughout the website, the overlaying of video and words break the conventional grid layout.

 

 

 

 

 

Bad Grid Layout

An example of bad grid layout is SnapChat’s mobile app. Many users stopped using the app because they found the grid hard to navigate. The layout reminds me of an elementary collage project. The stacking of the grids are like vertical bricks. The background is purple, naturally, many colors are not complementary to purple. This app has lost cohesion so it seems a bit awkward in functionality. The messaging portion that connects with your friends looks nothing like the collage of cover images. Many users are trying to get the old Snapchat layout back because it was easier to use. The direction does not seem clear between the animated focus of users to the real life stories that pop up on the right side of the image below.

Snapchat could improve by removing the purple background from the page on the far right. Leaving the background white could give the illusion of more space. This would mean that word discover and search icon could be purple instead. I believe that providing a larger grid to more popular stories would break up the similarities in the columns. The space created of larger columns could be easier on the eyes as more white space is needed. Like the Dynamit website, Snapchat could play video on their app depending on where a user is while scrolling up or down a page. The middle page should also have a white background for a cohesive design layout. The words should be purple as it creates a pleasing contrast compared to small yellow words.  The smaller columns on this page could be used to break up the two large rows. The button used to create a story should be removed. The large circle in the bottom center of all the pages is used for the same function. The page on the far right is still similar to the original, however, I would still change the header color to only showing color for the words. The friend you contact the most, could be allowed to have a larger column. This would make the app easier to use and engaging. For now, the layout needs work and a direction. This is what hurts its potential to have a good grid layout the most.

 

 

 

3 thoughts on “Grid Layout

  1. I like a cook who smiles out loud when he tastes his own work.
    Let God worry about your modesty; I want to see your enthusiasm.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *