Anatomy & Grid Theory Tori Bohnett

Anatomy of a website: there are many parts of a website, all of which have names and purposes. We can see several of these parts when looking at CB Photo Design Studio's website.

  • Pink: The container is the edges of the space inside which we place our information. In this case, the container is invisible, but it can also take the form of a more obvious block around the edges.
  • Blue: The navigation section is very important. It needs to be placed near the top of the page so that readers can find it quickly and easily. It helps us navigate through the website.
  • Green: The logo is not only the symbol that is used to differentiate businesses from each other, it is also the color scheme and other elements that define a business.
  • Yellow: The content, or the meat of the page, is where you post all of the information that you are trying to get across to the reader. This can be photo galleries, in this case, or blog posts, or information about where the business is located.
  • Orange (below): The footer is what appears at the bottom of each page, letting the reader know when the end has come. It usually has a little more information, and perhaps a few links to other pages on the site, or to different sites all together.
  • White: The white space is the area that doesn't have anything in it. It does not have to be white in color, although on this page it is.

Grids: These are invisible lines which are evenly spaced across a webpage, which help guide the placement of different parts of the website. These grids can be as simple as three lines evenly spaced, or as complicated as 24 lines, or more! Grids can be useful in getting everything to "look right".

This website, Alia Hodge.com, uses the rule of thirds to center the picture and qualifications at the top of the page. The "currently" section and the RENT logo pop out of their columns, but in a way that works visually. The edges of the orange box also line up with the edges of the text and logo down below. If this website had a footer, it would line up as well.

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.