Topic: List of Design Rules.

Author: Alia

 

This blue note contains brain dumps of design rules.

Feel free to comment!

Based on discussion between Alia & Lynda

1. Categories of rule:
a. Color
b. Font
c. Location
d. Aesthetics
e. hierarchy

2. Priority of rule (low, medium, high)

Category:

No Rule Priority
1. Color  
  1. Foreground and background color should have enough contrast (high) H
  2. Use colors which are harmonious with the background color (to do defined: harmonious) (high) H
  3. Border colors should match with the color theme of the presentation (to be defined: match)  
     
2. Location  
  a. location of image, can be several cases:  
  a1. as background  
  foreground text should not cover forbidden area of the image. (see below for explanation)  
  multiple images should blend together in a similar way (same fading, same color, or other means)  
  placement of background image should take into consideration the vanishing point: vanishing point should go to the center of attention of the presentation (i.e. center of presentation) or  
  placement of background: center of background image should be aligned with one of the center points of the presentation (center, top left/right, bottom left/right, center top/bottom, center left/right) (to be defined: center of background image)  
     
  a2. as foreground  
  foreground image and background should have clear borderline  
  multiple foreground image should be of the same aspect ratio, resolution, size.  
     
3. Fonts  
  Never use the different font type face from the same family in one presentation. (high) H
     
4. Aesthetics  
  1. Use specific color harmonious combinations for foreground and background (black/white, soft colors, natural colors) (low) L
  2. Use specific fonts. (low) L
     
5 Hierarchy  
  hierarchy can be visualized in two ways: nested or outwards.  
  use external hierarchy for navigation or small elements  
  use nested for general hierarchy  

 

Relation with K-Space:

To be able to place a text in front of a background  image or an image in front of a background image in the right position, more information about the image is needed in the form of annotation:

1. Forbidden areas of the image: areas where it is not desired to put text on: eg. face.

2. Dominant colors  (including their areas)  of the image: the image can contain many colors, it is desirable to know the dominant colors and how many percentages of area do they occupy.

3. Image aspect ratio and resolution

4. Rotation center of an image

5. Vanishing point of an image

6. Resolution of picture

7. Foreground and background

Note:
1.Resolution of the picture.
Resolution of a picture is important because the resolution sets the limit of a picture to be altered or magnified.
2. Foreground - background notion.
Generally every (nonabstract) picture has a foreground and background. The notion of foreground can be achieved through analysis of brightness, sharpness, shadows of the elements of the images. Foreground is usually the most important element of the picture, thus it is most likely a nonpreferable (if not forbidden) to be covered by text.
The notion of what are the Foreground elements is also useful for manipulation of the original image for presentation. Usually modifying or eliminating background elements are allowed whereas modifying foreground elements should be proceed with caution under certain design rule condition.
Important information for foregrounds:
- what are the foreground(s) element in the picture.
- where are the boundaries of these foregrounds and the ability to select isolatly a particular foreground element.

 

Note to be defined:

1. Harmonious color

2. Degree of sameness