Hi Everyone! I’m back again (like you could be that lucky).

When creating a website it is important to have a good base. Using a grid layout when you design allows for you to properly size your objects, organize them easily, and create a clean hierarchy for your viewers. As with much else in design, good design lies in subtlety. When you try too hard on your design, or just place items where they fall, your views will often get lost and not know where to look. As I was looking through websites to find a restaurant that I wanted to eat at, it stuck me that usually I either loved or hated the design. There really wasn’t an in between for me. So lets take a very, very short trip through the design of restaurant websites!

(Disclaimer: I take no responsibility for how hungry you get after reading this post.)

Grid Gold

To provide a solid and firm basis to start with, let’s look at some pleasing design choices. Here we have The Amsterdam Brewing Co. website. We have a very clean grid that is stuck to and done well, while also changing things up enough that it doesn’t get boring after scanning the website for a while. The hierarchy used in the website is clean, cohesive, and lets me know exactly what I’m looking at at all times. Color is used to dictate important information– like what tab you are on, if they are open or not, and if something is clickable. The three column information grid is followed consistently throughout the page. Starting at the top with the different pages you can navigate to in the menu bar, then down to the information provided about their hours and how to park, finally you can scroll all the way to the bottom of the page and get the links to their social medias.  The website flows smoothly and the image at the very top of the home screen allows for users to know there are things below it and to scroll further. When the user gets to the grid change, the 50/50 split is a nice indicator that they are on a different topic. The alternating black and white and images are interesting and prevent having a long block of text on one side of the page.

I think that the designer was aiming for a clean, organized structure that was still visually pleasing and displayed important information prominently. They achieve this not through creative liberties with the grid, but the media that they use. The grid allows for the site to be clean and cohesive while the images are what really provide the personality of the site. The color scheme is also simple, but there is a reason behind it. The reason we see red just about everywhere we look regarding food (i.e. Mcdonalds, Wendy’s, Arby’s, Jack-in-the-Box, KFC… Need I go on?) is because the color red actually activates your pituitary gland and elevates your heart rate. This encourages you appetite and increases your metabolism. We designers are a manipulative bunch. We just seem all innocent and artsy.

Back To the Drawing Board, Please

Veni, Vidi, Dictum “Utinam Non”. (Translation: I came, I saw, I said “Oh No”.) Now, there are a lot of things going on on this webpage here. Firstly, you’ve go the grid. What grid? you may ask. Well the grid that seems to be composed of multiple grids with differing numbers of columns depending on where you are. That grid. When I first came to the Korealicious website, I didn’t know where to look. There was so much going on and the hierarchy doesn’t lead me through the page. My eyes just kept fluttering around and never really focused on one thing. There are 4 different fonts used in the styling of this page– not including the three different Hangul fonts used but lets stick to the Latin Alphabet for now, yea?

On top of these fonts, you also have other attention grabbers like italics, bolds, different font colors, and background/highlight colors. In design, there is in fact, a thing known as too much. And you have reached it. Regardless of the clashing color pallet decisions, the grid structure isn’t the greatest. It might’ve been a bit more aesthetically pleasing to lower that menu in the top right to align centered with the logo image they have. Then, right below it, they seem to shift the three columns to be not only a different width, but also a different height. As you scroll, it switches to a centered two-column layout. While this normally wouldn’t be a bad change, with how many discrepancies there are in the rest of the page it’s just a bit much. To make things a little bit worse, none of the vertical edges line up with any other elements on the page. None of them.

Now, to be honest, I’m not quite sure what their designer was going for. I’m assuming that they were following the philosophy of ‘You can’t have too much of a good thing’, and I will tell you this now: you can. You can very much have too much of a good thing. Now, with color choices, I can see where the designer was coming from. Much of the design is red and blue and this can easily be tied to the Korean flag. Which given that this is a Korean food restaurant, I completely am behind and understand. Where I think they went wrong though, was assuming that having a solid color background was too simple and added in a background image. And a background image that seemingly has nothing to do with, Korean, their food, or where we are currently located. I also believe that this is where that third, grayish blue is coming from. It seems to me that it is reminiscent of the waves fading from orange to blue and in an attempt to tie them together, they added that color into the fray.

Lets Break It Up

Finally we have a website that subtly breaks the rules of it’s grid in the the right way. The Gamercy Tavern website is well put together, a good example of consistent branding, and just off the grid enough to be interesting. As you view the website, any images on the page are overlapping in some way. They are also larger than their corresponding text blocks. The text blocks are also cohesive in that they remain the same size, the same alignment, same color, and the same font. Because the images and the text blocks are different sizes, it leads the layout to break outside of it’s grid and overlap with other elements on the page. The header and footer are cohesive in that they are the same sizes and the same opacity. There is one issue that I have with this page, though. When you first load the page, it is an entire full browser sized set of images that carousel on a timer. Some of these images actually blend in with the image that is overlapping it, and so the user doesn’t inherently get an indicator to continue scrolling until the image pans and a new, lighter image shows up.

From a design perspective, I think that the designer wanted to convey a sense of refined elegance and cohesiveness. Which I think they do spectacularly. Much of the interest comes from the images, but they also have the overlapping element to them in the layout and that leads to contrast in the hierarchy of the images that draws your eye and moves you smoothly through the page. I believe that the designer saw that many of the images they were given to work with were darker in tone, and so it led to the logical conclusion of making the background of the body elements a lighter color. I think that the color chosen was a good choice as well, because while it is a light color, it is not white. White has been proven to hurt your eyes if you stare at it for too long on a screen. It’s why we have night mode on our phones and can actually adjust the tonality to suit our preferences in the settings (at least on IPhones. I don’t know about you Android users out there. Keep me informed please). My mother actually taught me how to change the page and display colors on Word and Excel when I was younger because I saw that she had a light lilac color instead of the white that I had become so accustomed to. The warm tone of the cream color that they chose ties in well with the oranges of the fire and the pasta in the images.

I hope that this has been a little bit informative on what grids are, how they are used, and my opinions of good grid work. And maybe I hope I was a bit entertaining, too. It’s always a goal.

Til next time!