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, they 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 arranged 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


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.


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

web design principles example unity repetition

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 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.


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 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

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