The
most important element when designing with type is a non-element: Space! Unfortunately space can be rare commodity in graphic design as much as it is in web design; clients often presenting us with reams of text and visual material which we are expected to magically transform into good design utilising as few pages as possible, due to the high cost of paper or because of misconceptions pertaining to design, such as the idea that all "imporant" material should be present on the home page of a website. On this website where we are learning to design with type in the best possible way we are going to temporarily disregard these future pitfalls and concentrate on the optimum solutions only, knowing that in our professinal lives things may end up being more complicated than what is actually presented here. Furthermore, on this site we are dealing with "dummy text", which makes design and space creation a lot easier than actual text! So bearing all this in mind let us progress to defining space. Negative Space: What we mean by this all important term is not empty space but space that is devoid of essential informational content! Type, unless used as background material as is the case with Orçun Göğüş's magazine spread (link 04) in which case it becomes part of negative space, is positive; since type, which is meant to be read, conveys essential information. Similarly, visual material that carries essential information, such asclipart, photographs, illustrations or parts of photographs and illustrations, that depict a certain situation or environment or object are also positive. Background images, shapes, blurry or non-descriptive parts of photographs as well as background text (link 04) are negative. Rollover the images in the following 3 links with your mouse to observe negative and positive space (link 01, 02, 03). In order to utilise space to its fullest potential you need to setup hierarchies amongst the type that you have. The "boss" of the page is the headline (link 01), in the case of the link below this is the word "zıpır çekmeceler". We recognise this not because the size of the type is larger but because that word sits in a particularly good spot, the focal point. In fact were we to reduce the type size (link 01a - click on image to access) nothing much would change, that particular word would still be the boss. So, what determines hierarchy is location, not size, colour or typeface/font. Sometimes a page can have two headlines that carry equal weight (link 02), in which case hierarchies have to be set up accordingly. In such a case each "boss" gets his own staff, in other words the secondary type as well as the images and shapes have to be reffered to these bosses separately. In the sample (link 02) below, "medikal" on the left is one boss and he gets the nice black shape as well as the face and especially the eye of the doctor as his staff, since these elements are placed in reference to that headline. The word "sağlık için" is the second boss and his staff are the thin horizontal lines and sub-headlines that are placed in reference to him, along with the dark blue part of the image that points at him in a directional axis. Oftentimes the headline(s) will be annotated for you by the editor or writer, however you may be confronted with situations where you have to come this decision yourself. Although it may feel silly to do this, my advice to any novice designer is to read the entire text to be put on a page out loud, with the proper intonation and inflections - not just mumble it, but act it out; preferably in front of a mirror. Alternatively you may wish to record your own voice and listen back to how you read what you read. Where did you raise your voice, where did you slow down? Where did you fall into a rythm (that will most likely be your body text, by the way), and most importantly, where did you pause? What you read directly before or after the pause will be a punchline and that in all likelihood will be your headline! Headlines need space! Just as you would never think of crowding the "boss" of your imaginary office into a narrow space ("bosses get the biggest offices, drive the biggest cars and no employee in his right mind is going to "cuddle-up" to his boss, is he? - You keep space between yourself and whoever is in charge...) the same applies to the "boss" of the layout: The boss, i.e. the headline gets to sit in the nicest space with plenty of room around him! Note how the shape curls itself around the boss in link 01 below. All other elements, such as other type and the photographs maintain a respectful distance. The same applies to the other samples provided below (link 03, 04, 05). In 03 the word "menu" is the boss. It is located at the furthest right of the page (read more on this in directional axes below), where it acts as a locomotive, pulling the whole page in its wake. In 04 the boss, "tensel birkaç söz", stands alone in a lot of white space and the body text and lines are set up so as to point at. In 05 "the rose garden" is the boss and here the body text is grouped around it whilst maintaining a respectful distance, much as we tend to flock around our own "boss" (respectfully), when he makes an appearance in our midst. Clustering and Grouping is a very effective way of pulling a layout together. Just as we cluster around the "boss" in the office, type elements placed in close proximity and relationship to one another and in reference to the "boss" will not only optimise negative space but also set up a strong focal point that pulls in the eye. A good practice is to place the hierarchically superior element more to the center of the cluster as Fatih Polat does here (link 01). However there are no cut and dried rules here: A cluster that excludes the boss can be just as effective (link 02) as Seçkin Karayol demonstrates in this layout where all body text is clustered around the photograph on the top right while the headline "Nikon Coolpix 5700" is excluded on the bottom left, giving it the space appropriate to a "boss" status. Directional axes are established by making the elements that stand lower hierarchically point at the elements that are higher up on the pecking order. Thus background images and shapes will point at the overall type elements, though preferably at the headline, body text will point at sub-headlines and they in turn will point at the headline(s). In order to be able to achieve this we do need al ot of space and thus in most real life design situations this can become very tricky. In the below designs you will find the navigational axes delineated with red arrows when you click on the images (link 01-05). I took the liberty of adding some text to the wallpaper designed by Pınar Paçacıoğlu (link 02), for which I sincerely hope that she will forgive me. Finally, a very clever designer's trick: Seçkin Karayol shows the navigational axes as part of his design (link 06). Most of the establishment of correct directional axes depends upon alignment, which is important enough a subject to merit an entire link and will thus be content of our next topic. >>>>
|