Fine Points of Web Design

Good Web Design

1. Lead the user’s eye through the website using key visual cues
2. Don’t be afraid to use some spacing to guide the user through the content
3. Make sure your navigation is consistently placed and easy to use
4. Design your site so it will be easily executed or built : we will learn more about this as we go through the semester.
5. Really consider your use of Typography–both the special fonts you will have to represent with images and the live type that will be rendered by the browser.
6. Think about how your user will approach and go through your site, then design to facilitate those actions. This is what we mean when we talk about usability.
7. Be consistent: keep your styles simple and apply them with vigor. The less consistently you style your site, the less the user can trust you to be a reliable guide through the content.
8. Really strip off as much of the extraneous styling that you can. Unless your overall style is a frothy, ornate style, there is little need to add style upon filter upon effect for things like navigation buttons, backgrounds, and patterns.

Principles and Elements of Design Principles:

• Balance: symmetrical, horizontal, approximate, radial, asymmetrical
• Rhythm: regular, flowing, progressive
• Proportion
• Dominance: dominant, sub-dominant, subordinate
• Unity: the gestalt of the image

Related Concepts:

• Contrast or opposition
• Positive and negative space
• Rule of thirds
• Visual center
• Color and typography

Elements

• Point
• Line
• Form (or shape)
• Texture
• Color

Web Design Process

I did not apply any look and feel because I just want you to get an idea how to start. It is built using several techniques you need to learn as a designer:

• Shapes: using the Shapes Tool enables you to create a vector shape that you can edit ad nauseum. Do not use rasterized objects if you can avoid it, they do not edit well, losing quality each time you resize them.
• Layers and folders: you can organize your site cleanly and clearly using these.
• Layer effects: these are amazing tools in adding depth and style to your web designs
• Template: I downloaded a template from 960 Grid System. In order to keep your measurements and design easily translatable, you must choose and design on a grid.

Concerns for the Web Designer

When you design for a client, you have to make sure you are designing a site that will fit the displays of the audience she is seeking to reach. You also have to make sure it will run as well as it possibly can for as many people as possible.

• Optimize your design for the most common display size:
  When you design your site, you are only designing it at its best, under optimal conditions. Once you publish your site, you have little control over how it will look to all the users with all of their configurations. This has changed a lot over the years, but it is safe to say that a large portion of your audience have 1024×768 sized displays. That means you should be able to design a site that is 960 pixels wide, but you can also code it so that it can reflow within a smaller sized window.
• Keep in mind that users still have a wide variety of monitor sizes
  Although the screen resolutions have gotten larger, a lot of people still have laptops , which are shorter than full sized monitors. You also need to account for the browser chrome, or the actual browser window and its apparati.
• Keep an eye on user statistics
  As a designer, you will be expected to know what the general web browsing population is using to look at the internet.

Colors and Fonts

When designing a web site, you have to use colors and fonts that are easy to read. In choosing your palette of colors that you will be using, keep in mind that if it is hard to look at, people will not stay to read it, and they certainly won’t visit your site again.

Text in Web pages is displayed by browsers using the default fonts available in the viewer’s computer. Most PC users have Arial and Times New Roman installed. Macs usually have Helvetica and Times. Arial is similar to Helvetica and Times is similar to Times New Roman. The vast majority of text presented on Web pages is limited to these fonts for both practical and technical reasons.

Text Legibility

Here are some tips for you in choosing the font in which your body copy will display:

• Use sans serif fonts rather than serif fonts in body text (ie: Arial is sans serif, Times is a serif font).
• Do not ornamental or display fonts in body text.
• Avoid setting large chinks of copy in italicized fonts as that makes it hard to read.
• Keep you body copy in mid-sized type
• Design your site to allow for plenty of “white space” or room between text and other elements. That helps your viewer really read what you have to say.
• High contrast between text and background makes the text easier to read, but be careful of combining harsh colors (orange type, blue background, for example). That is just too painful for most users, and can also pose problems for people who are color blind.