Anatomy and Grid Theory from a BEGINNER'S perspective

Designing websites can be incredibly fun, but it is also easy to get lost in the design process and end up creating something that is not useful for the user or the client.

In order to have a beautiful and user friendly design the designer must first understand a web page's anatomy. Yes, there is anatomy to web pages, take a look at the following image.

  • I will begin by explaining Body/Content (#4), since this is the most important part of a webpage. Your content should be what stands out to the website visitors. If they do not find what they are looking for they will most likely leave the site, even if it is very visually appealing.
  • The Header (#1) and Footer (#6), are usually positioned at the beginning and end of the web page. It is critical to position the Logo (another important anatomical part) of the company in the header, and do not forget to illustrate the logo in every page of the website, it will remind the visitors what webpage they are on as well as help the client with brand recognition.
  • Navigation(#2), should always be easy to find and positioned near the top of the page . Navigation, can also be positioned as a sidebar(#5), but again near the top of a webpage.
  • The last part of a webpage that I will be mentioning is the Background(#7), or Whitespace. This would be all the areas on the page that do not have any writing or illustrations on them. It is important to remember that these areas are critical in a website in order to give structure and allow the important information to stand out and not be hidden behind a cluttered webpage.

A very useful tool in webpage design is a Grid System. It can enhance the design by providing proportions and aid to the designer with structure to illustrate all the information they desire.

Some people might find the Grid System to restrict their creativity, but the designer can always take a step back by first creating the web page and then setting a grid above their ending project. This will allow them to see if there are areas they can move around in order to enhance structure and proportion.

Now, Lets discuss COLOR THEORY

Color might not seem of much importance in relation to content in a website, but in reality there is much more to it that you might think. The color of a restaurant wall might trigger a customer to order a super size meal instead of a regular one, and a red flower can symbolized to you significant other how you feel more clearly than a yellow one.

A Bit of Background on Color Models

The additive color model, expresses colors in percentages of Blue, Green, and Red. These are the colors we can mainly see on computer screens and therefore used for website design. If all of the colors in this model were to be as bright as they cold be they would reflect as white. The subtracted color model, located on the right would be colors that a printer might use, a combination of these colors will create a tint similar to black.

The Color Wheel is another very important aspect of understanding color. It includes the traditional primary colors and their combinations of secondary and tertiary colors.
Phsycology of Colors

There are plenty of ways to use colors in websites, but it is also important to know that they have a special effect on the users.

  • Red: Is more closely associated with passion, it is an exciting and stimulating color.
  • Blue: Can have many feelings attributed to it, like many of the colors stated previously. It can represent calmness, intelligence but also sadness as it is common to mention feeling a bit down as feeding "blue."
  • Yellow: Is also an energetic color, however it can be known to be overwhelming.
  • Green: Can symbolize from to nature to wealth to technology.
  • Orange: Is also a very stimulating color but does not evoke passion as the color red, more likely used for a marathon website.
  • Purple: The color is know to wealth and extravagance due to historical context, it represents an intermediate color between red and blue.
  • White: As seen in the picture above white can symbolize tranquility, cleanse, and purity.
  • Black: Although usually having a negative connotation, black represents elegance and strength.

Lines, serve for more than just dividers in a webpage. They can be used to convey certain messages and themes depending of how they are used. In this image, we see lines positioned in many directions which give the image a more detailed and textured space. When creating a webpage it is convenient to use lines in order to have a more expressive touch.

This image illustrates lines, angles, and geometric shapes. We mainly see the same shape being used in different sizes, but the viewer does not get board of the same shape due to the way they are positioned. Shapes are great ways to illustrate images and content in webpages, as we see being done here.

This image is part of Target's webpage. The well know retail store separated their categories into icons with discrete but detailed shadows. This gives dept and volume to different size object to make them seem proportional. The webpage also tries to give the viewer a close resemblance of the object as if the customer were in the store, shadows help with their marketing strategy.

Black Friday and Typography

Today, being the day after Thanksgiving I found myself in my living room with bags illustrating different fonts. After looking at them for a long time and appreciating many aspects of them, thanks to everything I have read about typography this past week, I started contemplating the importance of word design in our everyday lives. I realized that if I were to search these brands online I would most likely encounter the same fonts. To me, it shows the commitment that every designer must have to their brand, since it is what the customer or viewer in this case expects every time they see anything in association with the brand.

There are many important aspects of typography, and I will mention a few. First, it is important to remember that it is critical to plan this step in the design process, since it will have everything to do with content. Text can be in any color, shape, or size, and if the designer chooses wisely they can be able to portray the message they want successfully. It is also important to remember to not get carried away with the design of words simply because of all the endless combinations; the wrong use of fancy fonts can be an example of this. The positioning of text is another aspect to consider. Based on the readings, it is much better to ditch center text since it requires more energy from the viewer. Overall, typography is a big part of the design process and the designer should take time to plan how it is that they will deliver their content to the viewer while complementing the rest of the page's design.

Fonts

"Hierarchy"

The Last Supper

The Aesthetics of Leonardo Da Vinci's Great Masterwork

When the Duke of Milan, Lodovico Sforza, com­mis­sioned Leonardo da Vinci to paint a de­pic­tion of the Last Sup­per on a re­fec­tory wall of the Do­mini­can con­vent, Santa Maria delle Gra­zie, he could not have dreamed of the ways in which the paint­ing would cap­ture the imag­i­na­tion of not just aca­d­e­mic schol­ars but the mass pub­lic over five hun­dred years after its cre­ation.

The Voices of Type

on Thursday 20th of March 2014

We see type daily, but how well do we listen to it? Today, type designer Eben Sorkin tells us about the subtle yet powerful influence of typographic voice and gauges how tuned in you are with an actual test!

Created By
Ana Lievano
Appreciate

Made with Adobe Slate

Make your words and images move.

Get Slate

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.