Successful Grid

Grids help to structure our designs when creating a website in a concise and organized way. Like the foundation is to a house, Grids are the foundation to your web design, they allow you to formulate and control sections on the page. One of my favorite and successful grid-based implementation on a webpage is the Nike website.

We all have bought some form of Nike product before on their online platform, either shoes, clothing, or accessories. Nike utilizes the grid structure of their webpage to display their products in a mouth-watering and attractive way. By featuring light-grey and white backgrounds the webpage attracts the attention of users’ eyes towards vibrant and colorful images of their advertising or product display. Unlike, other eCommerce brands, Nike does not overwhelm the user while browsing their page because they employ grids by using the rule of three design principles which is a term in marketing that states things arranged in odd numbers are more appealing, memorable, and effective than even-numbered groupings. The site keeps elements consistent through their sales pages and also embeds a filtering column on the left side of the page which is also consistent. The fonts are basic except when it comes to advertising, which is to be expected.

The overall mood of the page is eye-catching, especially to the products and ads. If I was a web designer for Nike, I would be content with this because it attracts the user’s attention to the companies products and that is good for both parties because it gives the company more customers viewing their products and also gives the user less distraction when browsing the page.

Unsuccessful Grid

Usually, if a web page has a bad grid format it leads to an overwhelming site that is disorganized on so many levels. One of my personal favorite websites that is famous for their bad design is the Arngren. A Norway-based shopping platform that showcases a bad utilization of the grid.

The page looks dis and cluttered. There was no consistency between the text and images. The spacing throughout the page from the navigation bar to the footer seems non-existent. The mood of the pages does not feel appealing to the user, rather it feels overwhelming and confusing. This design is not useful because it lacks the appropriate grid structure that balances out the content of the entire site. It needs better fonts, organization, color, and composition to make this a visually appealing page.

Breaking the Grid

Today, websites are becoming more interactive than ever better. Rather, than just having the conventional look and design grids create web pages, other web designers are choosing to incorporate that in a whole new different, and innovative way. This is meant to change the dynamic users are normally accustomed to. An example of where this is demonstrated is at Rouser.

Rouser is a new kind of activist organization. We’re a collective of experts from the creative, entertainment, art, and environmental sectors who worry a lot about the future. The page does have some form of grid structure but by utilizing how users scroll on their page, they are able to showcase text and information about their organization and what they stand for. The bubble is a metaphor meant to stand more breaking out of your norm and change the way you think.