MM1111 Design Layout :: Art Institute

Week 3: Design Principles

Student Showcase: News Site Mockup: Version 1

We will showcase your version 1 news site home page layouts in class. Tell us a bit about your design choices. Then we will seek feedback from your classmates. [5 minutes per student]

Use the following design terminology and concepts as prompts in your discussion of the design work:

  • Design Principles
    • Alignment
    • Proximity
    • Contrast
    • Repetition
  • Design Elements
    • Color Harmony
    • Texture
    • Use of Imagery
    • Typography and Font Choice
  • Required content areas and other specifications
  • Intended purpose
  • Organization and clarity
  • Leading the eye through the design
  • Any special technology needed

The Principles of Beautiful Web Design

Visual Balance

Just as physical objects have weight, so do elements of a layout. If the elements on either side of the layout are of equal weight, the balance one another.

Symmetrical Balance

The elements of a composition are the same on either side of an axis line.

web design principle example symmetrical balance

Asymmetrical Balance

Objects on the page are arranges so that, despite their differing size, shape, tone, or placement, they equalize the weight of the page.

web design principle example asymmetrical balance

Failing to Achieve Balance

web design principles non-example balance

Unity

The way in which the different elements of a composition interact with each other. A unified layout works as a whole rather than being identified as separate pieces. Unity can be achieved through the use of repetition and alignment.

Repetition

Use the same colors, textures and other design elements throughout the page and from page to page.

web design principles example unity repetition

Alignment

Align content along edges. The best way to accomplish this is by using a grid.

web design principles example unity alignment

Failing to Acheive Unity
web design principles non-example unity web design principles non-example unity
web design principles non-example unity

 

Emphasis

Emphasis is about making a particular feature draw the viewer's attention. One method of creating emphasis is by making an element a focal point. A focal point draws the viewer's eye in a way calculated by the designer.

Isolation

An item that stands out from its surroundings will tend to demand attention. While everything else on the page blends together more, the item that is isolated is distinct in some way and surrounded by white space.

web design principle example emphasis isolation

Contrast

Contrast is the juxtaposition of dissimilar graphical elements. The greater the difference between an graphic element and its surroundings, the more that element will stand out. Contrast can be created using differences in value, color, size, shape, texture, or dimension.

web design principle example emphasis contrast

Proportion

Another way to create emphasis is to play with proportion. Proportion has to do with differences in the scale of objects. When we place an object within an environment which is way out of scale to it, this draws the viewer's attention.

web design principle example emphasis proportion

Failing to Achieve Emphasis

web design principles non-example emphasis

Making the Grid More Visually Appealing

Smashing Magazine has a great article about how to go beyond the grid (once it's established) using some appealing design treatments.

Grid systems bring visual structure and balance to site design. As a tool grids are useful for organizing and presenting information. Used properly, they can enhance the user experience by creating predictable patterns for users to follow. From designer’s point of view they allow for an organized methodology for planning systematic layouts.

After creating a well-structured and usable grid, consider allowing it to breath. A page without a grid is a usability nightmare. On the other hand, a grid that has creatively overlapping, escaping, or energizing columns leads to a more enjoyable user experience. Discovering or planning areas of the design that will have some freedom will lead to more interesting and appealing design solutions.

Grid-Based Design: Six Creative Column Techniques

Great Website Designs

Smashing Magazine Showcases

Dropbox go to eCompanion

Upload the following by midnight of our next class day:

Week Assignment File Name
3 Design Principles Critique principles.doc
News Site Mockup: Project 1, Version 2 news-site-v2.psd

Assignment Details

Design Principles Critique

In an MS Word document named principles.doc, compose design critiques for a total of six different sites:

  1. Site 1: acheiving balance
  2. Site 2: failing to achieve balance
  3. Site 3: acheiving unity
  4. Site 4: failing to achieve unity
  5. Site 5: achieving emphasis
  6. Site 6: failing to achieve emphasis

For each site, provide a screenshot as I have on the left. Describe why the site is acheiving the given design principle or how it is failing to. Write this document as if you were trying to teach these concepts to a new design student.

News Site Mockup: Project 1, Version 2

Based on the feedback and recommendations of your classmates, create an improved version of your news home page layout.

You may not start from scratch with a second design. The point is to create a refined second version based on feedback of your first version. It's important to work through iterations toward an optimal design.

IF YOU DID NOT GET FEEDBACK ON VERSION 1 DURING STUDENT SHOWCASE:
You must seek feedback from at least 3 fellow students on your own prior to beginning version 2.

Design Considerations

Ask yourself the following questions as you complete your home page layout for the News Site: Project 1, Version 2:

  • Is your layout based on a grid?
  • Are the text and images appropriate for a news website?
  • Does your layout look like a news source (and not, for example, a grocery store or movie website)?
  • Have you checked your spelling and grammar?
  • Do your headlines capture the imagination and compel people to keep reading?
  • Are your images of high quality?
  • How’s your typography?
  • Have you made good use of space / white space?
  • How does your alignment support organization and unity?
  • How have you used proximity to organize?
  • Does your focal point contain the most contrast?
  • Which repeating design elements unify the design?
  • Is there visual balance?