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
- 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, the balance one another.
The elements of a composition are the same on either side of an axis line.
Objects on the page are arranges 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.
Great Website Designs
Upload the following by midnight of our next class day:
|3||Design Principles Critique||principles.doc|
|News Site Mockup: Project 1, Version 2||news-site-v2.psd|
Design Principles Critique
In an MS Word document named principles.doc, compose design critiques for a total of six different sites:
- Site 1: acheiving balance
- Site 2: failing to achieve balance
- Site 3: acheiving unity
- Site 4: failing to achieve unity
- Site 5: achieving emphasis
- 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.
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?