Non-typographic elements //01
Up until now we dealt in a typographic world that was black and white as far as instructional samples were concerned. Although a lot of the design work shown was coloured and incorporated non-typographic visual material, so far I have not given any indications as to how we achieve results when working with non-typographic elements. From now on we shall start focusing on these issues.

We start out by examining lines and their usage in conjunction with type (link 01). Lines will add great definition to design both as underlines (link 02) and as elements that determine navigational axes 8link 03). As far as I am concerned, lines should either be very very thin, that is 1 pixels or hairlines or thick enough to have well defined, crisp end cuts that give us neat rectangles. In between values may end up looking ambiguous since their edges will inevitably end up as antialiased blobs (link 04). A way to avoid this is to cut off the edges of intermediate width lines with the rectangular marquee tool in photoshop (link 05). Unfortunately vector applications will not give us this luxury so my advice there is to stick to the nice crisp hairline lines or to go thick thick thick, using a rectangle tool and not the line tool.

Grey tones (alongside black and white) and simple geometric shapes and their usage in conjunction with type is the second step in our journey towards the fully fledged layout. A tremendous amount can be achieved by using just these elements. However remember to always start out with putting your type onto the page and arranging it without the aid of shapes and tones initially. After we have arranged the type to our satisfaction we shall progressively add other elements. To follow the following constructions click on the images to see the steps.

As you have observed in the two examples above, combining type and shape involves a lot of experimentation, trial and error. Even a couple of simple grey rectangles gave me the runaround. Just imagine what complicated shapes and visuals will do... You may "nudge" your original type (and in most cases will do so) but never ever put down non-typographic elements first and then try to design type on top them - the clumsiness of such designs will stick out like a sore thumb!

The rounded rectangle is very much in fashion and will give you some interesting results, as a single shape or by additions and subtractions, using the photoshop customshape tool or a rounded rectangle in any vector application (link 01, 02). Again click on images (link 01) to follow progression:

Below are design samples that utilise rectangles and rounded rectangles. Rectangles find their usage especially in web design, here demonstrated by Başar Önal in the first link and the crew of Kollektif Tasarım in the second and third (link 01, 02, 03):

The circle and circular forms, such as spirals, crescents and ellipses are considerably more complicated to work with than rectangles: This is due to the fact that it is very difficult to align them with other elements, except from their middle, thus circular forms will best be aligned from the dead center, horizontally or vertically, or will be left completely unaligned. However due to their roundness this unaligned state can very easily result in ambiguity, which is of course to be avoided at all cost (see # 06). They will however, give a holistic, warm feeling to your layout by centering and pulling diverse elements together. Needless to say, as always we start out with the type (link 01, 02, 03, 04, 05):

Arrows and triangles can also be classified under basic shapes. Whilst most basic triangles are as difficult to align as circular forms, the arrow shape is pure joy to work with. This is most likely due to its inherent function: Arrows direct our eyes and as such provide excellent material for establishing navigational axes. Arrow shapes can also be combined to create complex vector forms which will can create truşy dynamic forms. Triangles in their solid state are problematic as stated above, however distorted triangles, especially in combinations, can work very well in establishing dynamic non-typographic visual material.