Search

In Episode 9 of Screen Space: Design 101b (Some Basic Vocabulary)

Welcome to Screen Space your podcast about creating usable, accessible, effective, and efficient web, blog, and new media design for the everyday (and non-expert) designer. It is September 7th, and this is Episode 9 of Screen Space: Design 101b (Some Basic Vocabulary). The episode focuses on a few key design vocabulary words and concepts you should know for good web, blog, and new media design.

In case you forgot or for any new listeners, I am Dr. Jennifer L. Bowie, a professor at Georgia State University. I teach and conduct research in areas related to new media, web, and blog design.

Sorry for the delay folks with this episode. As a professor the beginning of a new semester is particularly crazy. Plus, on top of normal beginning of semester craziness, I had a triathlon and then had 13 friends visiting from out of town for Dragon*Con (an awesome science fiction and fantasy convention). I’ve been busy. Now things are a bit more settled, and I should be back on track.

Today’s episode focuses on four design terms you should know and utilize, especially before I delve deeper into design with future podcasts. So, sit back and prepare those mental vocab flash cards.


Today’s first vocab word and great design concept is white space. White space is simply the empty space, or negative space, on a page. This is the space that doesn’t contain any other design elements—no text, headings, lines, visuals or anything. While this space is empty, it is vital design element. Without white space we would have crowed messy pages that would be impossible to read. Think of white space a bit like time. Time is nature’s way of keeping everything from happening at once, and white space is the designer’s way of keeping everything from happening and overlapping in the same space. Both time and space give breaks between things, letting us focus on the good stuff. White space is probably the most important element of any design, and especially of design on the screen. Use white space in your designs to emphasize, frame, and separate. By surrounding an element with white space, you will emphasize it. This is why titles are often surrounded by a lot of white space—they are important and need this level of emphasis. Use white space also to frame elements that belong together or to chunk (which I will talk about more in a moment). Also, use white space to separate elements of your design, say some text and an image that do not belong together.

The ideal amount of white space for a web page, blog, or new media text varies. For web pages and blogs try to have between 20-60% of your design white space, depending on your audience, subject matter, and page type. For other new media the amount may vary even more depending on these factors. A variety of studies have shown white space increases comprehension, reduces reading/use time, increases user satisfaction, increases legibility, and provides a sense of balance and some breathing room for your users. Limited white space looks messy, unprofessional, and can lead to confusion, lose of place, eye strain, and headaches. Also, since so many of us are used to print design, white space has taken on something of an expensive feel. In print, space costs money, and often designers would try to cram as much as they can in. Consequently space in a design has come to mean class and expense. Some of the most stunning and elegant pages have a lot of white space. Check out Tiffany’s website and you’ll see what I mean. So, fight the urge to fill your web, blog, or new media designs with stuff and instead incorporate lots of white space. It will only make your design stronger.

Now on to vocab term two: chunking. Chunking is a concept that works closely with white space. In fact, you use white space to chunk. Although the term might sound like something people might do when they had too much beer, chunking is a way to show the relationships of elements in your design. Chunking is simply creating chunks of content in your design. These chunks need to be created based on the relationships of the elements of your designs. Items that are closely related should be chunked together—placed closely to each other. Those that are not related should be separated from each other by more white space. The end result is a design that has several chunked elements and clear relationships between the page content due to this chunking. If you look at any page and blur your eyes you’ll see some chunks, and even with blurred eyes you can tell which items are related and which are not. These chunks improve the users’ processing time on the page. With chunking, not only are the page order and relationships clear, but it also adds in navigation and use clues for the page. Obviously chunking is done through adjustments to white space. Put more white space between unrelated items and less between related items—and you have chunked!

Bulleted lists are a great way to chunk. In a bulleted list, white space surrounds the whole list, chunking the information in the list (which should all be related) while separating it from other information. Headings are elements that need to be chunked, but often are not. Your headings should clearly be related to the text they are heading, so your headings should be closer to this text then to any other text. However, in many designs the headings are placed equally between the paragraph they are not related to and the first paragraph they are related to. So, make sure you have less space between your heading and its related text then unrelated text.

The next two vocab words are often confused: readability and legibility. Yet, these are different, if related, concepts. Both these terms are often used in design, and I have mentioned them in past podcasts. So, if you were wondering just what I meant you are about to find out. The main difference between the words is length. How much text are we talking about?

Legibility refers to how easy it is to read or recognize short pieces of text like headings, titles, or single word. Often legibility depends heavily on the typeface and size. Some typefaces are simply more legible than others, especially on screen. Also, larger sizes generally are more legible (to a point of course). San serif fonts tend to be more legible on the screen, but I’ll talk more about this in a future episode on typography and design. Do avoid all caps, which are not very legible and slow down reading.

Readability refers instead to how easy it is to read longer blocks of text, like a web page or blog entry. Readability is also strongly based on your typeface and application, such as size. Some typefaces will be less readable, especially in long bodies of text. Imagine a decorative squiggly script font in paragraphs of text on a webpage in bold and a small size. This would not be very readable. But the same typeface could be used for a one or two word heading in a bigger size and be fairly legible.

To make your text more readable
• find a size that is neither too big or small
• try to use shorter lines of text (but not too short)
• avoid setting long bodies of text in bold, italics, and/or all caps
• use a text color that contrasts nicely with the background

Both readability and legibility are important concepts in your design. If you want your users to read your text make sure they can—make it both readable and legible. If you want to know which typefaces are the best for this, then stick around. Typography in design is an upcoming episode.

So, there are your vocabulary words. Are you ready for a quiz? Here is your study guide:
-White space: the empty space on a page used to create balance, emphasis, chunking, and breathing room. Try to use between 20-60% in your web, blog, and new media designs.
-Chunking: the grouping of related elements and the separation of unrelated elements. Chunking creates order, relationships, and aids in navigation and use.
-Legibility: the ease (or lack thereof) of reading or recognizing short pieces of text like headings, titles, or single word. This is often dependant on typeface, size, and other characteristics and applications.
-Readability: The ease (or lack thereof) of reading longer bodies of text—like paragraphs or pages. Just like legibility, typeface and use of the typeface can greatly impact readability.

Now start rehearsing and memorizing these vocabulary words. You never know; there might be a quiz. And if nothing else, I promise to use them in future episodes.

That’s it for your vocabulary lesson. Join me next time for a break in all this visual design stuff I’ve been talking about. In episode 10 I’ll tell you why you don’t want your sites to be user-friendly, not if you want them to be usable, accessible, effective, and efficient. Intrigued? Stay tuned.

If you have questions, comments, or thoughts on what you want me to cover please send me an email at jbowie@screenspace.org or check out the Screen Space blog—www.screenspace.org. Do send email. Right now I’m getting more spam then screen space email. I’d like it to at least be equal! Have fun and design well!

Screen Space is licensed under a Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 United States License. So, feel to send a copy to that blog with serious readability and white space issues, but don’t change the podcast, do give me and Screen Space credit, and don’t make any money off of it.

Screen Space’s opening music today is “African Dance” by Apa Ya off of Headroom Project and the closing music is “Survival” by Beth Quist off of “Shall We Dance”. Both these selections are available from Magnatune.

 
icon for podpress  Screen Space 9: Design 101b (Some Basic Vocabulary) [11:09m]: Play Now | Play in Popup | Download

One Response to “Screen Space 9: Design 101b (Some Basic Vocabulary)”

Wow, this is a great podcast. I just subscribed on Itunes and I’m looking for any way I can to make http://austen.com a better designed site. This will help. I also just added you on twitter ( @austencom )

Something to say?