AESTHETIC DESIGN

HIERARCHY

Hierarchy is imperative for creating a sense of organization and guiding the reader through a page, by leading them to where you want them to look.

BBC GEL Guidelines

Take this website for example; the information at the top such as the logo, and large headings above the content, show that these are important aspects to the page and what you should be reading. The navigation featured on the left hand side is distinct and helps guide the user through the content. Hierarchy is usually displayed vertically and utilizes size (such as large to small text, or vice versa).

CONSISTENCY

Consistency in design is about making elements uniform- having them look and behave the same way. Not only should consistency be used within the design, but it should conform universally to how other standard websites work. For example, logos are usually featured on the top left of the page and as a return to home button.

Consistency utilizes:

  1. Logo usage and placement
  2. Heading sizes
  3. Font and line spacing
  4. Tone of voice in content
  5. Color choices
  6. Button styles
  7. Grid layout and spacing
  8. Design elements
  9. Illustration styles and textures
  10. Photo choices
  11. Icons and symbols

The website below is a great example of consistency.

Kraftworxs retail

GRIDS

Keeping things aligned and in order is an important aspect in designing for the web. Grids are very helpful for alignment, as well as to support viewing pages on a number of different devices. They are a great tool for organizing elements and will provide a framework that you can build upon.

Pinterest utilizes a grid layout to display photos seamlessly.

Pinterest grids

You can find more on grids at:

  1. The Grid System
  2. 960 Grid System
  3. AisleOne

SPACING

Whether it is space between lines of text or the gap between elements and content, spacing is a very important aspect of design and extremely rewarding if utilized correctly.

Letter-Spacing: Increases or decreases the space between characters in a text.
Values = Normal | Length (px/cm) | Inherit For example, setting the pixel value to three: increases space between letters

Line-height: Specifies the height of text lines.
Values = Normal | Number | Length (px/pt/cm/etc.) | Inherit
For example, setting the number value to three doubles this line vertically.

Word-spacing: Increases of decreases the space between words in a text.
Values = Normal | Length (px/pt/cm/em/etc.) | Inherit
For example, this sentence is set to space out 4px.

Padding: Sets the space of (and surrounding) the declared element.
Values = Normal | Length (px/pt/cm/etc.) | % | Inherit

White Space: Also known as negative space, White Space refers to the empty space on a page; it gives balance, proportion, and contrast to a page.