Anatomy & Grid Theory BEGINNER'S GUIDE TO WEBSITE DESIGN

DRAWING USED TO EXPLAIN AN EXAMPLE OF A GRID LAYOUT

Above you will find an example of the anatomy of a grid. The purpose of the picture is to show one example of how one would set up their page using a grid layout. Grids are incredibly helpful for new designers because they help the designer articulate their ideas when building a web page. They are like the contents of hamburgers, they have seperate layers and sections that when put together create a balanced piece. In addition to helping the designer, they also help the person visiting the website navigate through the content. The header (1) is the top bun of the website, it is used to bring attention to the title of the site and give the viewer an idea of what the page is about if they don't already know. The main content (A) is the meat of the website because it is all about the content and point of the current page. It gives the viewer the information they need to understand the page. The "other stuff" (B1/B2) are the toppings (lettuce, onions, tomatoes), these sections are supplemental to the main content in that they can include alternate navigation forms, information about additional pages, and other small things that do not necessarily need to be included in the main content. Lastly, the footer (2) is the bottom bun of the site. This is the area for smaller things such as contact info for the company or person as well as legal information. Once all the pieces are put together in the layout of your choosing, you have a beautifully crafted website that is easy on the eyes and easy on the person navigating the site!

Report Abuse

If you feel that this video content violates the Adobe Terms of Use, you may report this content by filling out this quick form.

To report a Copyright Violation, please follow Section 17 in the Terms of Use.