Proximity

by Michael Thoming

screenshot of RunBulldogRun website

The concept of Proximity is perfectly demonstrated by the folks at RunBulldogRun.com. This site uses “tiles” or visual groupings, laid-over a background image that spans the entire window to create a dramatic first-impression. A large tile in the center of the page draws the viewer’s eye there first, and then allows them to scan the other tiles around the perimeter. While they don’t actually have any white space on this page, they make great use of spacing to separate the sections from one another. This creates the same clean, clear look that’s intended when adding white space. Visual hierarchy is evident in the navigation bar at the top, where text and topics are grouped logically. The clickable tiles are arranged in a manner similar to a grid, which gives order and consistency to the page. This site is very easy to scan and read, with a minimum of text clutter and visual distractions. Users can easily find what they’re looking for, if it’s on the screen. Otherwise the search bar is exactly where they would expect it to be in the upper-right corner of the page.

Alignment

by Matthew Robison

screenshot of Newegg website

This website shows the principle of alignment by how the content is organized on the screen. The menues, navigation bar, header, footer, and main content section are organized like blocks built on each other. These blocks are in neat columns and rows which make it easy for the users to find information on the website. Alignment should also balance the website. This website has the logo top far left, and the top right has the header. There is a left side option bar, and in the middle are the main contents of the page. This type of alignment is an example of a grid style, and this makes it easy for people visiting the site to find what they are looking for quickly.

Repetition

by Isaac Monsalvo

Sample of Repetition

Aspynovard.com shows consistency on her fonts and design. As you browse her website, the images follow a specific size and image editing process, with the traditional title in the centre on a gray tile. In addition, as her site is considered a lifestyle blog, Aspyn Ovard keeps her site with photographs featuring herself linked to the topic she discusses. Visitors will find that the fonts are kept consistent in all of her posts, making the viewer enjoy a pleasant design that is constant and minimalist to an extent. Perhaps one of the trademarks is adding photos with high brightness, making her posts stand out with the image. Viewers will know they are browsing on her site due to the consistency on her image edits, font usage and design shown.

Contrast

by Benjamin Greenway

Sample of Contrast on the web

This example from hp.com displays several elements of contrast, with large type displaying the main message followed by smaller type below. It draws attention to the main message and makes the picture more dramatic. The words are on a picture that shows a father and a son, further enhancing the drama on the page. This taking place behind the test further displays the principles of contrast.

Typography

by Melanie Buchanon

screenshot of Newegg website

Typography is the design and arrangement of the text on your website – to include font type, size, line length and line height. These attributes are limited on the web due to the ability of the end user’s device. Users will view your website all on kinds of devices, but can only see font and design that have been loaded on their own computer. The most common font is Georgia. Line length should be between 40-60 characters for good readability. The other things that affect readability are: font body size (should not be below 10-12pt), background color (black and white is ideal), and space between lines. You want your website design to stand out, but not be too hard for the user to read and follow.

The NY Times website above demonstrates the following attributes about typography:

  • Serif font in the body and heading
  • Content font is Georgia, white in color and 15 font size
  • Left-aligned justification
  • Space between paragraphs is 15

Team Members

  • Jacalyn Boggs - Team Lead
  • Michael Thoming - Proximity
  • Matthew Robison - Alignment
  • Isaac Monsalvo - Repetition
  • Benjamin Greenway - Contrast
  • Melanie Buchanon - Typography