Home • About • Contact
Login • Page Content • Site Map

Search
GH.com   GH.com dir
Wikipedia   Web

Here are a general mix of design tips.

• Design Basics
• Roger Black's 10 Rules of Web Design
• Creating Seamless Backgrounds
• Adding Dramatic Lighting to Raster Images
• C.R.A.P.
• Miscellaneous

Design Basics

Elements

• Line/Curve
• Shape/Volume
• Size/Scale/Proportion
• Space
• Color
• Texture
• Value

Principles

• Balance
• Variety/Contrast
• Emphasis/Focal Point
• Size/Scale/Proportion
• Pattern/Repetition
• Gradation

Other

• Unity
• Rhythm
• Motion/Time
• Economy
• Composition

Roger Black's 10 Rules of Web Design

1. Put content on every page.
2. The first color is white.
3. The second color is black.
4. The third color is red.
5. Never letter space lowercase.
6. Never set a lot of text type in all caps.
7. A cover should be a poster.
8. Use only one or two typefaces.
9. Make everything as big as possible.
10. Get "lumpy!"

Creating Seamless Backgrounds

1. In RGB mode, edit image to desired size and change to 72 dpi.
2. Offset and make horizontal and vertical dimensions half the width and height of image. Select "wrap around".
3. Use rubber stamp tool to remove seam in the middle of the image.
4. Clone out all seams and repeating elements that may appear to be distracting when repeating a background.
5. Convert to GIF.

Adding Dramatic Lighting to Raster Images

1. Select the foreground subject.
2. Soften the edge of the selection.
3. Add a new layer and fill with the shadow color.
4. Use the mask on the shadow layer to remove the background.
5. Have the original image show underneath the shadow and use the eraser set at misc. opacities to reveal more of the desired subject.

C.R.A.P.

• Contrast
  Elements that aren't the same should be very different so they stand out, making them "slightly different" confuses the user into seeing a relation that doesn't exist. Strong contrast between page elements allows the user's eye to flow from one to another down the page instead of creating a sea of similarity that's boring and not communicative.
• Repetition
  Repeat styles down the page for a cohesive feel — if you style related elements the same way in one area, continue that trend for other areas for consistency.
• Alignment
  Everything on the page needs to be visually connected to something else, nothing should be out of place or distinct from all other design elements.
• Proximity
  Proximity creates related meaning: elements that are related should be grouped together, whereas separate design elements should have enough space in between to communicate they are different.

Via http://www.thinkvitamin.com/features/design/how-crap-is-your-site-design.

Miscellaneous

• Mix photographs, illustrations, and type for interest.
• Use a consistent theme throughout your project. Use icons, photos, words, and fonts consistently.

• Units of measurement
       1 in =     6 pc =   72 pt = 1440 twip
     1/6 in =     1 pc =   12 pt =   72 twip
    1/72 in =  1/12 pc =    1 pt =    6 twip
  1/1440 in = 1/240 pc = 1/20 pt =    1 twip

• Common Ratios
  1/1.25    = 0.8
  1/1.6	  = 0.625
  1/2	  = 0.5

Page Modified: (Hand noted: 2006-04-20 16:15:35Z) (Auto noted: 2010-02-26 16:09:49Z)