Welcome back friends. This week’s class assignment brings us to the subject of grid-based design. What is grid-based design you may be wondering. Grid-based design separates your webpage into columns and rows by drawing invisible horizontal and vertical lines. These lines are used as reference points for placement, starting from the top left column working across to the right. This pattern continues down the page from left to right, filling each row across. The best part of this design is the ability to pick the starting column and the number of columns the object will span across the page, letting you create whitespace around objects or to fill all the columns contained in a row.
Like any good tool at your workbench, grid-design, when used right can produce clean, visually effective pages. Used wrong, it can confuse and lose your intended audience. They say a picture is worth a thousand words, so let’s take a look at some examples of grid-based design in action, showing the good, the bad, and one that “breaks the grid”.
The Good
First up, a webpage that uses grid-design effectively, curioos. The site is designed to offer different types of prints, designed by graphic artist. The webpage displays different categories of printed objects, using images that alternate between two sizes, one being twice the width of the other. By alternating the order of these image sizes from row to row, it creates a visually pleasing look that’s not overly simple and boring to the viewer. The uniform appearance throughout the page is partially created by using only 2 fonts for the majority of text, LeanORegular and LeanOBold. The use of whitespace and margins help to separate the content and prevent overcrowding that could confuse the viewer.
The Bad
The next example is a bad use of grid-design, Northeastern Eye Institute. While beauty is in the eye of the beholder, my biggest issue with this site is the inconsistent format as you scroll down the page. The top of the page has too many menus and clickable links, providing no area of focus. The top menu bar produces drop-down list that extend past the visible page, requiring you to scroll down to find some choices. As you scroll down the page the format changes, now it has large areas of text with a white background and a contact form that can be filled out. The link at the top of the page displaying, contact us, takes the user to a completely different contact page. The format creates repetition and confusion. Only one font, Open Sans is used, throughout page. Using different font types in different sections could have helped to make areas stand out from one another.
Scrolling down further, you come across a big green scroll-able box of patient reviews, which displays 8 reviews, covering a 4-day period from 2 years ago. Content for active page should be current. The benefit of grid-design is to provide consistent format and spacing throughout your web page. This site switches how it uses the grid to display content 6 or 7 times, creating a confusing and unattractive page.
The Unique
Finally, let’s take a look at a design that is “breaking the grid”. The site is Merbis Filmmaking and Photography. What makes this site stand out to is the simplified use of grid-design, displaying single full-page sections one after the other, unlike the majority of sites that try to put as many sections on one page as possible. Photography focuses on the details of the subject, and that concept is transitioned to the grid-design used. Other than the name and top menu, the page contains no text. The section names for the display types are part of the clickable images. Nothing on the page distracts you from focusing on the details of the image. This approach breaks the traditional grid-design, making you “flip” through the sections, rather than selecting from a display of multiple thumbnail images.
I hope you enjoyed the examples I have selected to show the effects different uses of grid-design can have on the user. What are your views on the sites I selected? Ultimately, personal preferences and user interaction will determine whether a site deters or welcomes us. I’d like to hear your thoughts and perhaps some examples on what you feel qualifies a site to fall into one of these 3 categories.