Note 6 for Web Publishing II
Note: You should be reading the Chapters in the book!!
Watch & Read:
Sample of what happens when you have bad design
SEO Rap (Design Coding)
Joyce's Planning Website , my check list for planning and notes on Good Web design!
Good Web design is based upon two factors: Usability and Design Principles
Web Design Principles Check list and the 10 Basic things your site should have. If 10 is too many, 4 Steps to a Website Layout That Works!
Web Design Library has a great article on Simple Steps for Web design
Meaning of Color is important and you need to setup a Color Scheme for your site
Color tips and guidelines
1. Understand your site's message and brand. Choose colors that reinforce your message. For instance, if designing a site for a financial institution hoping to convey stability, choose cool, muted colors such as blue, gray, and green. In this case, using warm, vibrant hues would undermine the site's brand.
2. Understand your audience. Cultural differences can lead to unexpected responses to color. Additionally, demographic segments and age groups respond to colors differently. Younger audiences generally respond to more saturated hues that are less effective with older segments.
3. Use a small number of colors in your palette. Four or five colors, in addition to white and black, should be sufficient. Too many colors create discord and distract the user.
4. Use contrast for readability. Colors similar in value do not provide enough contrast and hinder legibility. Black text on white backgrounds provides the highest degree of contrast.
5. Use grayscale to test contrast. When dealing with hues other than black, white, and gray, it's sometimes difficult to determine the relative value of each color. To ensure that your color palette provides enough contrast, create a wireframe mockup and convert it to grayscale.
6. Be aware of timeliness when choosing colors. Color trends can quickly saturate the marketplace, and consumers rapidly become numb to fashionable hues. On the other hand, you can use popular color palettes from decades past to evoke feelings of nostalgia.
7. Consider functional colors when choosing a palette. Don't forget to establish functional colors for elements that communicate contextual information, such as headings and links.
8. Prepare for color differences on the Web. Every Web developer knows that even Web-safe colors appear differently across platforms. Be sure to correct for gamma differences and test your color palette on multiple platforms.
Web Design Checklists
We will use Dreamweaver to create an image map!
Images can be links and you can take an image and break it into several different links!
1. Identify the area you will be mapping (creating a link to).
Image maps use a graphic for several links. You break the graphic into areas (circle, rectangle, or polygon) and identify the area relative to the top left-hand corner of the graphic (see figure 1). The X and Y dimensions are in pixels.
2. Follow the syntax default:
<area shape="type of shape" coords="X,Y coordinates of the shape" href="URL of site you plan to link to"></area>
<area shape="rect" coords="10,20,100,40 " href="http://www.pvc.maricopa.edu"></area>
Shapes are rect (rectangle) and circle and polygon
Review the following:
Terms you need to Lookup:
CSS, Styles, Absolute, Relative, Class, Pseudo-class
Homework:
Take one of your pages and add styles to the page to change the "look and feel" of the page
You should be reading Chapter 9 in your Dreamweaver book and Chapter 1, 3 & 4 in your Web Desing book
Final Step:
Review in your mind everything we covered in class and remember to cover it again before you go to bed so your mind to process this information while you sleep.
