Grid Layout (draft)

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 information in the grid.  It is almost like time standing still.

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. As you scroll different options appear to move your focus in a fluid way. The video also tells a story which allows a user spend more time on a page. As the user scrolls down the header disappears. This allows the user more viewing space on the website. White draws attentions so it 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.

 

An example of bad grid layout is SnapChat’s mobile app. Many users stopping 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.

One thought on “Grid Layout (draft)

Leave a Reply

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