Let’s talk about grids…
Grids are a huge part to the over layout of many websites today. With 12 columns, there is a whole lot you can do to create beautiful and responsive websites. With so many websites using a grid system it’s hard to choose which one “breaks the grid” well.
Just today, I found a website for the promotion for Google Stadia. Stadia is Google take on their own video game console, except it’s similar to the an Amazon Firestick comparatively. The site really screamed, “awesome user experience” to me, not only am I greeted with simple navigation menu at the top, but the interactive visuals let me truly learn about the product. What was great about the nav bar was it’s ability to stay sticky so that I, as a user had a sense of place if I needed to navigate elsewhere. The use of san-serif as a font really made the look and feel of the page sleek and organized.
It “breaks the grid” successfully by having a ‘full-bleed’ effect where images and animations span different parts of the page. I was immediately greeted with an image of the controller with a brief deceptions of the product. The best way I can describe on this site was “fluid”, as parallax effects responded alongside my scroll. As you scroll, the video transforms into multiple devices while seamlessly continuing playback.
Google Stadia’s website went from a non-traditional none grid layout by displaying full res images and videos but stuck to the grid when it came to the blurbs of information and towards the end with the pricing and footer.
On the opposite end, there is a website still floating around that gives me the “hibee-jeebies” that doesn’t follow grid rules to a tee. Space Jam, (Yes, you know…the movie about cartoon aliens) has not been updated since 1996. Their website is still alive and well and serves as a great way to peer into the dawn of early web design. The landing page is both nostalgic yet horrific at the same time. You are presented a logo from the movie with hyperlinks and icons floating around it like a weirder version of Saturn’s rings.
The background is a small tile repeated across the screen and theres no real rules to the color scheme or contrast ratio to the fonts and backgrounds behind it. With no real navigation bar it hard to move back and forth through the site so you are forced to either click the logo (and hope it works) or click aimlessly until you find what you are looking for. I could only image in terms of accessibility, how difficult it would have been to navigate throughout this page! The fonts used were pretty much a free for all and combined both serif and wacky hand drawn illustrations presented as text on the site!
From a design perspective, perhaps those developers probably had a cool idea of what they can make as long as it had all the information they needed to put from
the movie into this site. It makes me wonder where they have gotten their inspiration from or perhaps just hard-coded until it turned out alright. The site is also surprisingly responsive as the content glides across various screen sizes so pretty much any devices can see all of its Space Jam glory!