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
- Design Elements
- Color Harmony
- 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
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.
The elements of a composition are the same on either side of an axis line.
Objects on the page are arranged so that, despite their differing size, shape, tone, or placement, they equalize the weight of the page.
Failing to Achieve 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.
Align content along edges. The best way to accomplish this is by using a grid.
Failing to Acheive 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.
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.
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.
Failing to Achieve 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.