HOME

SYLLABUS

• Assignments
• Attendance
• Books
• Cheating
• Critiques
• Diversity
• Extra Credit
• Grades
• Instructors
• Lab Times
• Objectives
• What’s New?

TOOLS

• CSS
• Flash
• Photoshop
• Soundslides

DESIGN

• Color
• Cropping
• Design
• Photography
• Typography

MULTIMEDIA

• Audio
• Maps
• Multimedia
• Video

WRITING

• Blogs
• Captions
• Headlines
• Sidebars

RESOURCES

• Copyright
• Jobs

Design

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

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

• 25 points: originality and overall appearance (readable text, harmonious colors, etc.)
• 25 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)

1. Read the Seven Components of Web Design.
   
   
2. 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.
   
   
3. Create a title, such as Gettysburg or Gettysburg Address. You may make it in Photoshop.
   
   
4. 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.
   
   
5. 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.
   
   
6. 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 without an underline.
   
   To use the online color pickers, go to the Color page on our class Web site.
   
   
7. 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.
   
   
8. Pick harmonious colors (NOT black and white only) and readable typefaces.
   
   HINT: For layout tips, go to Layout.
   
   
9. Set your wrap for 1000 pixels wide x 750 pixels high so users won’t have to scroll. Set the wrap margin-left at none and the wrap margin-right at none so your creation will stay centered when the page is resized.
   
   
10. 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.
    
    
11. Make an external CSS style sheet. Give the .css file a name.
    
    
12. Put the HTML page, the image and anything else you created (such as a title in Photoshop) in one folder.
    
    
13. TEST your finished page in Firefox AND Safari. 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!
    
    
14. Put an electronic copy in the jmc460 > Abe Lincoln folder. 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 45 out of 50 points IF the CSS was done well. 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 25 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: CRONKITE ZINE

PURPOSE
Show us your creativity and skill by designing the new Cronkite Zine site.

1. Use Photoshop to design the logo and mock up the home page and an inside page.

2. Use CSS to build the home page and an inside page. Go as far as you can with CSS. Put in the logo and at least make the boxes to hold the content. We’ll critique each design in class and pick the best one!

3. Show your Photoshop mockups to everyone at our next class.

GRADING 50 points

• 25 points: originality and overall appearance
• 25 points: Photoshop and CSS

INSTRUCTIONS

1. Look at the Gila River Indian Community. How could you improve it?
   • Brief intro on home page explaining project
   • Resources page
   
   
2. By the end of class, show Carol or Nancie a sketch for the home page of the Cronkite Zine and one inside page for your section (Politics, Business, A&E, etc.) 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
        • Possible content
        • Footer at the bottom of each page
          1. © Copyright 2009
          2. The Cronkite Zine showcases the coursework of individual students at the Walter Cronkite School of Journalism and Mass Communication, Arizona State University.
          3. Contact Us <Link to cschwalbe@asu.edu>
    
3. Refine your logo and turn it into a banner. Divide the workload. One person could design the logo or banner, another could mock up the home page and inside page in Photoshop and the third person could build the pages using CSS. Only one navigation link needs to work to your second page.
   
   
4. Use a:link to change the color of links and a:visited to change the color of visited links.
   
   
5. 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. Work on a template together, then save a copy (Save As) for the page.
   
   IMPORTANT: Save all your .psd files for revisions.