Design

Advanced Online Media

HOME

SYLLABUS

TOOLS

DESIGN

MULTIMEDIA

WRITING

RESOURCES

Design

ASSIGNMENT 1: ABE LINCOLN
ASSIGNMENT 2: DIVIDED FAMILIES
BOOKS ON USABILITY & DESIGN
LAYOUT (link to “Resources for Web Workers” by Mindy McAdams)
SEVEN COMPONENTS OF DESIGN
YOU DON’T KNOW WHAT YOU DON’T KNOW

SEVEN COMPONENTS OF DESIGN (thanks to Mindy McAdams)
Some Web pages make us say, “Wow!” Others appear blah or even ugly. Even though your first impression of a Web site may be “Wow!” — that might change to “Huh?” if you can’t figure out what the site is about or how to get around or how to find what you want.

It boils down to good communication. All seven components contribute to clear, effective communication.

Dominance
Hierarchy
Balance
Space
Color
Unity
Gestalt

For example, if nothing is dominant on a Web page, then you don’t know what to look at first. You may give up and try another site. Dominance can be conveyed by size (largeness) or color (red attracts attention) or placement (position).

Even a Web page with just one headline, one image and one block of text can have a hierarchy. Which element on the page is most important? Which element grabs your attention first? Which element plays with your emotions or appeals to your logical mind? How does your eye move across the page?

Untrained designers think balance means that all elements should be centered. Not so. Centering everything means there’s no tension. Tension creates interest and even excitement. Balance can be asymmetrical. Think about three children on a seesaw (teeter-totter). Two small kids on one side. One large kid on the other side. That’s balance.

The deliberate use of empty space (also called white space, although it’s not always white) as a design element contributes to a dynamic balance among all the elements on a Web page. It helps reveal a hierarchy.

Color can help communicate hierarchy and also establish a mood, such as calm or seriousness, fun or excitement. Color can show how elements on a page are organized. It can help the eye match things that go together and separate things that stand alone.

> More about use of color on the Web

When elements are dropped onto a page without planning and forethought, they appear to be random and even senseless. Unity is the opposite. When unity exists among the elements on a Web page, they look as if they belong exactly where they are.

The Bauhaus brought us the word and concept of gestalt. The whole is more than the sum of its parts. Design is a system, and each part of a system is affected by the other parts.

Jump to top

YOU DON’T KNOW WHAT YOU DON’T KNOW
How can you learn the best ways to use these seven elements in your own Web page layouts? Some people have a natural ability for visual design. Most people, however, do not.

Carol B. Schwalbe A white-sand beach curves around Bahia Gardner on Isla Española, the most southerly island in the Galapagos.

This little page is just an appetizer in the banquet of design knowledge. Take a class. Read some books. Visit the largest bookstore you can find and look for the magazines How, Step, Communication Arts and Applied Arts. Explore the AIGA site. Invest some time in learning about professional design practices.

Unlike HTML and CSS, design is not a topic with hundreds of online tutorials and instructional Web sites. You’ll need to go offline. A couple of good books are listed below. Try the public library or the ASU library.

You can learn to create better designs — if you study, observe and practice new things.

> Review Typography
> Review Layout (link to “Resources for Web Workers” by Mindy McAdams)
> Review Color

Jump to top

BOOKS ON USABILITY & DESIGN (thanks to Mindy McAdams)
Don’t Make Me Think: A Common Sense Approach to Web Usability, 2nd edition, by Steve Krug (New Riders, 2005). Easy enough for anyone to understand and learn from. Very practical! At first glance, it looks as if it shouldn’t be so expensive, but it’s actually worth it. Warning: If you’re an advanced Web designer, you probably won’t learn anything new from this book, but you could give it to people to help them understand what you already know.

Rockport Publishers have beautiful books about graphic design. You might find their books in larger bookstores. For example, The Complete Color Harmony (2004) is a GREAT resource when you’re designing a brand-new Web site.

Allworth Press and RotoVision also publish excellent books about graphic design.

Stop Stealing Sheep & Find Out How Type Works, 2nd edition, by Erik Spiekermann (Adobe Press, 2002). If you’d like to learn how to use typography well, read this book from cover to cover. You’ll gain a new appreciation for the beauty and variety of letterforms.

Jump to top

ASSIGNMENT 1: ABE LINCOLN (thanks to Mindy McAdams)

PURPOSE
Show us your creativity and skill by building a single Web page using only the assets given to you.

GRADING 30 points

15 points: originality and overall appearance (readable text, harmonious colors, etc.)
15 points: proficiency in CSS and HTML
Make sure you’ve read the instructions carefully and met all the requirements.

DETAILS
Your mission is to create the best-looking page you can using ONLY Dreamweaver CSS and Photoshop. You’ll all start with the same image of Abe Lincoln and the same text of the Gettysburg Address. You must use all the text and just that one image. You may do anything you like to the image in Photoshop. Pick harmonious colors and readable fonts. You may use one additional image, such as a title, if you make it yourself in Photoshop.

Will Kirkland About the size of a hen, frigatebirds fly on slender wings almost 8 feet long.

INSTRUCTIONS (before class)

Read the Seven Components of Web Design.
Download the two items below (one photo and one text file) by right-clicking on a PC or Control + click on a Mac:
• one photo of Abe Lincoln
• one text file of Gettysburg Address
You must use all the text but only that one photo in your one-page layout.
Create a title, such as Gettysburg or Gettysburg Address. You may make it in Photoshop.
You may do anything you like to the photo in Photoshop, such as turning it sepia in color. Use the photo of Abe on the page (using an IMG tag; see below) rather than as a background image (a background image would not be viewed by users who do not have CSS). Be sure to check the resolution and size of the image. Will it fit in the box you’ve created. If the photo is wider than the box, you’ll have a problem.

HINT: To add the photo of Abe, type <img src = "lincoln.jpg"> in the <div> where you want the photo to appear. Make sure the photo is in the same folder as your HTML file.
Link the text for the photo credit to the sources of the photo. (The URL is provided in the text file.) Note: Do not make the URL visible on your page. Use words (Image from the U.S. Library of Congress) rather than a clickable URL (http://www.loc.gov/rr/print/list/057_pra4.html). Only the words U.S. Library of Congress should be the link.

HINT: Add a CSS style for your link so the color harmonizes with your color scheme rather than the standard underlined blue. Click on the + to make a new CSS rule. Click on Advanced, then scroll to a:link. Pick a harmonious color. Under the Decoration category, click none.

Add a:visited in a harmonious color.

To use the online color pickers, go to the Color page on our class Web site.
The text of the Gettysburg Address must be HTML. Do not make any of the text into an image using Photoshop. Align the top of the text with the top of the Lincoln image and the bottom of the text with the bottom of the Lincoln image.
Pick harmonious colors (NOT black and white only) and readable typefaces.

HINT: For layout tips, go to Layout.
Set your wrap for 1000 pixels wide x 750 pixels high so users won’t have to scroll.
Use only CSS for positioning. Do NOT use any HTML or Dreamweaver tables. Create the CSS from scratch or by modifying what we did in class. Do NOT copy the HTML or CSS from other sites or pages. The best way to master CSS is to do your own work and be able to explain the details of your HTML and CSS if asked.
You may use an external style sheet, but if you don’t know how to do that, put the styles on the same HTML page with Abe. That’s what we did in class.
Put the HTML page, the image and anything else you created (such as a title in Photoshop) in one folder.
TEST your finished page in Firefox 1.5 (or later) OR Safari 6 (or later) OR both. Firefox is a good representation of what will happen on a PC. If the page looks wildly different in one or the other—no points!
Print out one copy BEFORE class. B&W is fine.
At the beginning of class, put a hard copy in the folder on the table in the front of the classroom. Also put an electronic copy in your Student folder inside the folder called CSS. Make sure the folder includes your HTML file AND the image of Abe AND a Photoshop file if you created your title in Photoshop.

EXAMPLES
The first example below would get at least 26 out of 30 points. Notice that filling the 1000 x 750 window does NOT mean things need to touch the edges. Use space intelligently in your page design.

Remember the design principle of alignment. Note how the edges of most text and the picture align. Make sure the words are big enough to read. Ragged left text is difficult to read. Would flipping the text and photo help? That way the text could be flush left and ragged right.

This example is classic but not wildly creative. The color scheme is a bit dull. Can you be more original while still sticking with colors and typography that suit the subject?

The following example would get 15 points at best IF the CSS was done well.

In the poor example above, the image is so tall that the top of it scrolls off the screen. The use of space is very awkward. The text is too wide and hits the left and right sides, but a large amount of emptiness gapes above and below the text. This is poor use of white space. There’s no title. Both screen shots are from a monitor at 1024 x 768 resolution (Firefox 1.5 at full-screen).

ASSIGNMENT 2: DIVIDED FAMILIES

PURPOSE
Show us your creativity and skill by designing the Divided Families site. Use CSS to build the home page and an inside page using one of your stories, including photos and multimedia. We’ll use the best design!

GRADING 50 points

25 points: originality and overall appearance
25 points: CSS

INSTRUCTIONS

Look at the Gila River Indian Community. How could you improve it?
• Brief intro on home page explaining project
• Resources page
By the end of class, turn in a storyboard for the home page and one inside page with as many of these items as possible:
     • Color scheme
     • Filename on each of the two pages (index.html + filename of your second page)
     • Title on the inside page (it should agree with the navigation)
     • Consistent navigation on each page at the top or side
     • Content
     • Footer at the bottom of each page
               © Copyright 2008 Walter Cronkite School of Journalism and Mass                    Communication, Arizona State University
               Contact Us <Link to kristin.gilger@asu.edu>
Design a logo or banner with a nice type treatment. Divide the workload. One person could design the logo or banner while the other builds the page using CSS. Only one navigation link needs to work to your second page.
Use a:link to change the color of links and a:visited to change the color of visited links.
Use CSS boxes to build the site. Make each page 1000 pixels wide. Make the home page 700 pixels high so it does NOT scroll. EACH PERSON ON YOUR TEAM SHOULD BUILD ONE PAGE. Work on a template together, then save a copy (Save As) for the two inside pages.

IMPORTANT: Save all your .psd files for revisions.

Jump to top