Assignment 3_1: Background Images / Line Patterns 1

There are two image properties available in CSS: The "image" and the "background-image" properties. We’ll be using our grid as a start (5 columns, 5 rows) and continue to assign varying proportions to each row of column and width. You will not use borders or colors. Create 6 compositions (2 with vertical lines, 2 with horizontal lines and 2 where box should be mixed). Due September 20. For more information about the two CSS image properties please read this article.

Fixed: 5 colums, 5 rows
Variables: Widths, heights, background images.
Goal: Create visual hierarchy with a focus on either dark or light sections.

CSS and HTML setup

Images: Download and unzip this folder. It contains small PNG image files that can be used for the background-patterns. One group of images are horizontal lines and the other group are vertical lines.

"Regular" images are linked withing the HMTL markup and background images are linked in the CSS. Have a look at the example code below. These rules link to vertical lines and the name matches the image. For example: "v_b-1_w-5.jpg" means is that the pattern will be vertical 1px black lines with a 5px (white/transparent) gap between them.

Example CSS code: Example HTML code: result in browser:

Task: Compositions

Create visual hierarchy with a focus on either dark or light sections. Work on different ideas and submit 6 final layouts (2 using horizontal lines, 2 using vertical lines and 2 with both). Due: Tuesday, Sept 20.

Further Reading:

Shades of Grey

There is a standing temptation for the typographer to use his type primarily as a tone of grey and thus to allot it a purely aesthetic and decorative role. It is a sign of immaturity to use a grey surface or a grey tone as a basis for a design into which the typography has to fit as best it can. However rich the grey effect obtained, there may still be serious functional and formal defects. Before the grey effect is decided upon, the typographer must be certain that the layout of his composition is functionally right. Only when this requirement has been satisfied should the designer turn his attention to: the various ways of creating a grey effect with lines, typographic ornamentation and typefaces. The opposite page shows many tones of grey ranging from deep black to light grey—a small excerpt from the almost unlimited number of possibilities.

This brings us into the realm of optical illusions: All the forms and signs are printed in the same deep tone of black, yet the fine line looks grey and a number of them together make a grey surface. The same type size looks different according to the spacing of the letters and the varying distances between the lines.

Black creates different tones of grey for the eye, but it also has another effect with which the typographer must be familiar. The smallest quantity of black consumes white; it takes white away and lies at a lower level than the white surface. The black square on the right makes a hole in the surface and the degree of penetration depends on the intensity of the grey or black. There are as many depths as there are tones of grey; the white surface is broken up and riddled with illusions of depth.

The typographer should handle his grey tones and depth deliberately and use them only when he has decided precisely what he is going to do with them. The many tones of grey serve to articulate the diverse meanings in a large printed work but they can also be used formally when printing has to be evocative and dynamic.

—Emil Ruder

Hierarchy

Hierarchy is expressed through naming systems: general, colonel, corporal, private, and so on. Hierarchy is also conveyed visually, through variations in scale, value, color, spacing, placement, and other signals. Expressing order is a central task of the graphic designer. Visual hierarchy controls the delivery and impact of a message. Without hierarchy, graphic communication is dull and difficult to navigate.

Like fashion, graphic design cycles through periods of structure and chaos, ornament and austerity. A designer’s approach to visual hierarchy reflects his or her personal style, methodology, and training as well as the zeitgeist of the period. Hierarchy can be simple or complex, rigorous or loose. Aat or highly articulated. Regardless of approach, hierarchy employs clear marks of separation to signal a change from one level to another. As in music, the ability to articulate variation in tone, pitch, and melody in design requires careful delineation.

In interaction design, menus, texts, and images can be given visual order through placement and consistent styling, but the user often controls the order in which information is accessed. Unlike a linear book, interactive spaces feature multiple links and navigation options that parcel content according to the user’s actions. Cascading Style Sheets (CSS) articulate the structure of a document separately from its presentation so that information can be automatically reconfigured for different output devices. from desktop computer screens to mobile phones, PDAs, kiosks. and more. A slightly different visual hierarchy might be used in each instance.

The average computer desktop supports a complex hierarchy of icons, applications, folders, menus, images, and palettes-empowering users, as never before, to arrange, access, edit, and order vast amounts of information-all managed through a flexible hierarchy controlled and customized by the user. As technology allows ever greater access to information, the ability of the designer to distill and make sense of the data glut gains increasing value.