So, examples of grid-based design.
Finding well designed grid-based design is simple enough, because grid-based design is what most websites consist of. Since it’s convenient, I’ll post our student dashboard as my example.
The thought process here seems pretty simple: the designer wanted a clean UI that matched the Penn State color scheme. Fortunately, the Penn State color scheme is white and dark blue, which are two colors that compliment each other fantastically. Bring in some soft and cozy fonts, rounded corners on UI features, and a whole lot of white space, and you have a grid-based design that plays by the rules in a way that balances style and utilitarianism to create a crisp by-the-books site.
For excellent design that breaks the grid, it took some thinking, but it hit me that there’s one example of breaking the grid that is almost famous in gaming circles. I have to thank the people running this course for explicitly mentioning video game UI as being viable examples, because this one is perfect!
Behold Persona 5, a game about fighting inner demons. Since it’s a video game and not a website, I made my link the article I got this image from. Said article is about how the UI designer for this game won actual awards for it, and it’s easy to see why! The red, black, and white color scheme is absolutely gorgeous and manages to simultaneously carry the illusion of depth while also looking like stylized art, and the font and abnormal tilt of the UI absolutely ooze character while still being easy to read. There’s subtler details, too. The black and red bars look like action lines, for one thing. And the font looks like it’s been ripped right out of a detective novel where some mysterious note is left at the scene of the crime, perfect for a game where the main characters go by the moniker “Phantom Thieves” and leave actual notes in that fashion. You can tell choices like that were made super deliberately by Masayoshi Sutoh, and it all comes together so perfectly.
Unfortunately, we must now spend time on a site that doesn’t come together so perfectly. I’ve found that the easiest place to locate particularly gross examples of grid-based design is to look up local municipal sites. Here’s one from my local area, created with the aim of promoting tourism to the county.
Somehow it manages to fail both in how it obeys grid based design and in how it breaks it. Look at that entire sepia section of grid space seemingly created for the sole purpose of popping a logo onto the navigation bar. Not only does it completely throw off the balance of the page, but the logo itself is pretty ugly in it’s own right. That’s not even getting into the the text on that logo. It looks like it reads “Elkhart Indiana Well Crafted USA County.” Not the worst example of a sentence created by words being out of order, but clearly not what it was actually intended to say! And while it’s probably nitpicking, I don’t like the font choice all that much either. The thick block text in headers mixed with slightly flowery font on the rest of the page is trying just a bit too hard to be folksy to the point that it no longer feels genuine. In-character for this area, but that doesn’t make it a good thing. Then there’s the massive, muddy looking video below all of the above, which takes up nearly the entire real estate of the page above the fold. That’s way too much screen real estate for anything, but especially a video! There’s so much to go over, I’m not even getting into what’s below the fold. The whole thing seems to fail at design at every level. The intent was clearly to give the website a country feel by putting the more rural aspects of the area on full display and using font and coloration choices that emphasize the same message, but I doubt that whoever made the page was actively thinking about design while creating it.
Recent Comments