Layout and design notes The entire goal is to lead the eye in a pleasing manner. Various methods can be used to achieve this. The eye should naturally move from one information object to another in a way that follows your priorities. Areas, images, or type can be used to affect this goal. An area of great contrast, for example, will have more visual power than an area with minimal contrast. When you add the factors of placement, color, etc., you can see there is a wide range of possibility here. Rules of 3 The top item will have the greatest visual strength: Contrast This is the result of 2 shapes or other objects juxtaposed.
Size It is important to either make items of equal value the same size, and break up sizes either for variety or to signal level of importance. However, an image can be used very large, as a background, possibly screened back, to suggest an ambient level of meaning.
Color If a site or page has a general color of a dull blue, any small red will have a lot of power … so color strength is definitely relative. But in general bright, saturated colors have greater strength, and are usually used with prudence.
Fonts Fonts are affected by the other elements, such as size, etc. The number of faces should definitely be minimized, so the designer can control the levels and sublevels of meaning. The most readable type on the web is sans serif [none of the little “feet.”] In general, you should be able to organize type into:
Placement This includes the aspect of negative space, or white space. It is important to think of the page space as a “place” where you visually “float” objects and text. The visual center of a page is not the measured position; it “floats” above this actual position. Objects that are positioned in a void of negative space will be impacted by this positioning. Negative or white space does not have to be “white” … it can be whatever the background color is.
Shallow 2D space Use bevels, drop shadows and occlusion [one object on top of another] to convey a slight “lift” to objects, as if they hover slightly above the picture plane. Symmetry and Asymmetry Be very aware of your usage. An asymmetrical page can have clusters of objects that are organized symmetrically within their own grouping. Be sensitive to elements of balance. This is a sense that is difficult to teach. Items should have a look of balance, but balance is not an absolute factor or guideline. Play with this. The most important thing is to get a “feel” for weight, floating, within the “negative” white space of the page. How do I integrate images, text, etc? Look for attributes you can transfer to other objects. For example, if a main image has a certain orange, dropper that color, and use a version of that for background, text, etc. Find variants of the color by increasing or decreasing saturation. Take visual elements, for example thin lines, reverse them through and image, and make them a light gray elsewhere. Make type black, but reverse it to white in the navigation bar, through images, etc. |