What is Grid-Based Design?

Grid-based design is, as you might have guessed, designing content that can be visually fit into a grid. Most forms of user interface use grid-based design. Even handwritten materials generally use grid-based design, whether you’re aware of it or not! Remember when you were taught as a kid to “write between the lines?” That was your first lesson on grid-based design. Grid-based design as a conscious pursuit simply asks that you draw your own lines first, then write between them.

Note that grid-based design is (figuratively and literally) just a guideline. You can actually make excellent designs without following a grid at all! But grids are there to make designing easier. It often takes an expert hand to pull off gridless design. In that hand, though? It can be beautiful.

Good Grid-Making Design

Finding good grid-based design is simple enough, because most websites use grid-based design. I’ll post our student dashboard as my example.

The designer’s thought process seems simple enough: they wanted a clean UI that matched the Penn State color scheme. Fortunately, said color scheme is white and dark blue, two colors that compliment each other fantastically. Add some soft and cozy fonts, rounded corners on UI features, and plenty of white space, and you have a grid-based design that balances style and utilitarianism to create a crisp by-the-books site.

Good Grid-Breaking Design

For excellent design that breaks the grid, there’s one example that’s almost famous in video game enthusiast circles. I have to thank our lesson writers for explicitly counting video game UI as viable examples, because this one is perfect!

Behold Persona 5, a game about fighting inner demons. As this is a game and not a website, I chose to link an article about how said game’s UI designer won awards for their work here. It’s easy to see why! The red, black, and white color scheme is absolutely gorgeous, simultaneously adding illusory depth while also resembling stylized art. The font and abnormal tilt of the UI are easy to read, yet absolutely ooze character. And there’s subtler details, too. The black and red bars look like action lines, 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 call themselves the “Phantom Thieves” and leave actual notes in that fashion! You can tell Masayoshi Sutoh made these choices super deliberately, and the result is incredible.

Design That Is. . .Not So Good.

Unfortunately, now we have to analyze a bad design. I’ve found 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, in this case intended to promote tourism.

Somehow it manages to fail both at following grid-based design and breaking it. That entire sepia section of grid space seemingly created solely to pop a logo onto the navigation bar. Not only does it ruin the balance of the page, but the logo is pretty ugly itself. Then there’s the text on said logo. It appears to read “Elkhart Indiana Well Crafted USA County.” Worse examples of jumbled sentences definitely exist, but that’s still clearly not what it actually intended to say! And nitpicking here, but I don’t like the font choice much either. The thick block text in headers and slightly flowery font on the rest of the page are trying a bit too hard to be folksy, to the point that it no longer feels genuine. In-character for the county, still not a good thing! Then there’s the massive, muddy looking video below all of the above, which takes up far too much real estate for any kind of interactive feature. I’m not even getting into what’s below the fold! The whole site seems to fail at design at every level. Clearly the intent was to create a country feel by putting 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.