Wikipedia states this is grid design: a structure (usually two-dimensional) made up of a series of intersecting straight (vertical, horizontal, and angular) or curved guide lines used to structure content. The grid serves as an armature or framework on which a designer can organize graphic elements (images, glyphs, paragraphs, etc.) in a rational, easy-to-absorb manner. I will go over a few examples of grid design, and my opinion of them.
Successful grid-based design
This is a website for Henry Desroches, a creative developer based out of Denver, CO. He uses this website as a place where he can publish his work, as well as market himself.
His overall website design is very simple using mostly just black and white colors throughout. Each of his pages has a grid-like structure that favors vertical columns. He has a mixture of script, serif and sans serif fonts throughout the webpage. What is nice about his design, is that the mood can change if you wish. There is a moon/sun icon on the bottom left of his webpage. This icon toggles back and forth between a primarily white or black webpage.
I think this website is successful because it easy to follow which draws you in and makes you want to click through the other pages to see what it’s about. There is no clutter, so you can easily see and understand what is happening. I think Henry intentionally did this – have a clean and sleek design so that his potential clients are pulled in to learn more about him.
Designs that break the grid
This website is dedicated to promoting a new type of shopping center in St.Louis, MO called City Foundry STL. It is set to open in the spring of 2020. People in the are can check out what the plant is for this current development are, and potential vendors can contact them regarding renting a space.
The website uses a lot of white and charcoal with a yellow accent color. They have a few script fonts but mostly use a wide variety of sans serif font. Although there is a grid structure to the page, they bend the rules a little bit. There are sections throughout the webpage where the boxes don’t fall within the grid or overlap in certain areas.
I find that using a combination of all of these things: clean, simple, a pop of color, and a little bit of misplacement, is successful. All of these things are attracting users to search their website, which is ultimately their goal. They want to publicize this new spot as much as possible, so people know what is going on, and they go and check it out sooner. This design helps them to achieve that.
Design I do not like
Union Bank is a website for a bank in Sri Lanka. They offer a variety of financial services including but not limited to: credit cards, savings accounts, debit accounts, for both personal and corporate clients.
They have 3 primary colors: white, blue, and yellow as an accent color. They use a wide variety of sans serif font throughout the webpage. The grid dominates as a horizontal platform and the top part has a gallery that automatically changes every 4 seconds.
I don’t think this website is successful because it seems too cluttered and there is nothing interesting about it. There is a lot of things going on, the automatic gallery seems to be changing too often, and the scrolling bar below it is a bit distracting. There are too many elements with movement in the same area. Additionally, there is no point of interest throughout the webpage. This means there is nothing that draws and keeps the viewers’ attention.
Work Cited:
“Greater BankingConvenience.” Union Bank Sri Lanka | Personal, Business and Corporate Banking, https://www.unionb.com/.
“Grid (Graphic Design).” Wikipedia, Wikimedia Foundation, 9 July 2019, https://en.wikipedia.org/wiki/Grid_(graphic_design).
“Henry Desroches: Creative Developer & UX Engineer.” Henry Desroches | Creative Developer & UX Engineer, https://henry.codes/.
“St. Louis – Opening 2020.” City Foundry, http://cityfoundrystl.com/.
