Design Principles

CIT 230 Mike Odom

Brandon Webb, Ariel Larsen, Paul Harris, Julie Noseth, Martin Peterson

CONTRAST

Martin Peterson

CONTRAST DEFINED

Contrast refers to the arrangement of opposite elements (light vs. dark colors, rough vs. smooth textures, large vs. small shapes, etc.) in a piece so as to create visual interest, excitement and drama.

EXAMPLE WEBSITE

Color

The light green with the black and the gray creates a nice contrast which allows the viewer to easily read the text.

Typography

The use of varying fonts creates a contrast drawing you eyes first to the “KIP Dashboards” banner. It also help to differentiate the smaller links from the banner. The size of the font also helps create contrast.

Shape

Using the different shapes (circle, triangle, rectangle, square and rounded rectangle) create a contrast highlighting key navigation buttons.

Texture

Using the blurred image in the background creates contrast with the other in-focus elements on the page.

REPETITION

Brandon Webb

  • Repetition is the ability to create a website/product that will continually have something recognized/repeated.
  • Apple is superb at this, creating products that continually repeat their logo as well as their user interface
  • Repeat elements makes it more user friendly
  • Repetition applies to logos, headings, images, graphical elements, colors, and multiple other things. Creating a website that is repetitious will make your website more noticeable and recognizable.

EXAMPLE WEBSITE



In this example the pill shaped button is repeated in the heading, banner, and body which shows the user where to find the action buttons.

PROXIMITY

Julie Norseth

  • Proximity is the relationship between space, time, or relationship.
  • In web design, we are primarily focused on the visual. Spatial proximity helps indicate relationship. Things that are closely related should be near to each other, while distance relays lack of relation.
  • By taking full advantage of proximity, we can increase the usability of our websites and influence the success of the user experience.
  • This design principle includes the use of white space, the portion of the page that is left unused, and hierarchy, a method of grouping and subgrouping related items.

EXAMPLE WEBSITE

FOCUS

Brandon Webb

EXAMPLE WEBSITE

USING THE REPETITION OF BOXES ALLOWS THE VIEWER TO FOCUS ON EACH INDIVIDUAL OBJECT

  • If you notice in this website, the boats.com logo try to focus on the purpose of boats, which is water. The logo was designed to show the ocean
  • This may be something that a normal user would not notice, but it plays a huge role in remembering this website. It adds emphasis to the website
  • By creating focus points, users are able to understand the site better.

TYPOGRAPHY

Paul Harris

ALIGNMENT

Areil Larsen

  • Alignment is a subtle design principle. Every good website follows basic rules of alignment, meaning it is skillfully arranged to lead the viewer though the webpage. This is accomplished by arranging content on a grid, like this one taken from the Tech Republic website.
  • These grids are ordered according to viewer content scanning habits. In societies like ours, where we read left to right then down, people tend to scan websites in an “F” pattern looking for relevant information. We stop at the information that catches our eye, or stands out from the rest. Proper alignment enhances a viewer’s ability to find that information.
  • So how do we guide our readers?
  • Heavier or bolded fonts are typically viewed first, they shout, “I’m important!” There should also be a clear hierarchy, such as that in the grid shown, so that your eyes know what things are important and what they should notice, and the lines move you from one portion to the next.

EXAMPLE WEBSITE

  • When columns are involved, your eyes can quickly become confused as to where they should focus.
  • Although our eyes move from one article to the next on a website like this, the pictures and headlines give clear indications of where you should focus as the subtle lines move across the tops and bottoms of photos and texts.

Thank You