In Episode 7 of Screen Space: Design 101 (Four Basic Principles)

Welcome to Screen Space your podcast about web, blog, and new media design for the everyday (and non-expert) designer. It is July 21, 2008, and this is Episode 7 Screen Space: Design 101 (Four Basic Principles). Today I’m giving special welcome for my listeners from around the world. After my last podcast, I started looking at my stats and found I do have plenty of listeners from around the world, including people from Canada, the United Kingdom, China, Germany, Spain, the Russian Federation, Bulgaria, and Sweden. Thank you for joining me. If you have any special issue you want to cover, just drop me a line via email or the comments. I’d love to hear from you.

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. In fact, I teach a class on document design, which is directly related to this episode.

Design itself is a funny term, especially when one is discussing web design. The phrase “web design” means many things from all aspects of creating and producing a web site to the actual visual components of it, which better fit the more traditional definition of design. In this episode, I’ll be talking about the visual design of websites.

Like color design, which I briefly covered in the last episode, visual design is a very complex subject and it is one pursued by a variety of experts and artists from graphic designers to photographers, painters, sculptors, and more. Not only are there books on this area, but a huge number of varying degrees. So, this is no small subject, and even a focus on the visual aspects of web design is still a huge area—with numbers books and classes of all types. Since this is such a huge topic, I’m not going to attempt to over it in one podcast, but several. This is just the first one, and as such the most very basic. And what better place to start then with basic design principles?

Thus, today I am presenting you with “CRAP” an acronym for four basic design principles, which should help you prevent crappy designs. These principles are not only for web, blog, and new media design, but for any type of visual design, particularly media design. They work especially well for web, blog, and new media design, which is why I am using these four particular principles. While these principles are covered in a variety of sources, let me recommend one book, which I not only love but also use in classes. Robin Williams’ Non-Designer’s Design Book offers a great basic introduction to design for non-designers, and she covers these four principles quite nicely. She does advocate design which may be a bit much for some websites, but the basic ideas are great and can be applied with moderation when needed. I’ll provide a link in the transcript. She is on the third addition. I’ve not read it yet, but the first two were great.

There are many “basic” design principles out there. If you do a web search you find several pages that list a varying number of principles, but generally from four to twelve. Not all of these easily apply to web and new media visual design, and many of them overlap. These four easily apply to web and new media design and do not overlap as much. Most of these also include the other design principles, which I will also address.

So, let’s dive into the four design principles that make up “CRAP”.

The first one is the C, which stands for contrast. I did cover color contrast in the last episode, and this contrast includes color contrast. Contrast is a pretty easy concept to grasp. In good design there are contrasts. Contrast is the differences you create between items in your design. There are many types of differences you can create in your new media designs. As we learned last time, a good color contrast between the background and font makes the font more readable. Color contrasts are pretty obvious contrasts. Black contrasts with white, dark blue with cream, and so on.

However, a good web design will have more contrasts. Don’t think just think color contrasts. Think of all types of contrast. Try contrasting typefaces. If you have a highly technical sans serif typeface, try contrasting it with a lovely script or an old-fashioned serif typeface. (I’ll talk more about typefaces in a later episode. I don’t recommend using script typefaces for long bodies of text online as they are not very readable. And the teacher in me won’t let me go on without saying that). Contrasting typefaces will make the difference obvious and make both pop in different ways.

Also, consider contrasting sizes. Most of us do this already—our headings are bigger than our text, for example. Think of other ways you can do this. Perhaps contrast a large picture with small typeface or another small picture. And, you can combine these types of contrast: for example make your headings dark, large and in a contrasting typeface from your lighter and smaller body typeface. Other things you can contrast easily in new media are weight (bold and normal for example), shapes, directions, and textures.

So why add contrast? Contrast allows you to emphasize key aspects of your design and deemphasize others. It will draw your users’ eyes into your design and often shows them where they need to look by creating a visual hierarchy and flow. Contrast adds variety and interest to your pages also. Contrast consists of a variety of other design principles including dominance, unity, harmony, proportion, and emphasis.

The next principle is the “r” in our acronym: repetition. Repetition works nicely with consistency, another design concept I have mentioned in a few episodes. However, consistency is just one part of repetition. With consistency, you are repeating the design you did for one element of your design each time you present that element. For example, if you make your first level heading blue, bold, extra large, and in Georgia typeface, then you will be consistent by repeating this with each first level heading across your site. However, repetition goes beyond consistency.

With repetition you will repeat various design elements throughout the media. For example, if blue is part of your color palette for a site, you should repeat the use of blue throughout the site. You may not only make your first level heading blue, but may make all headings blue, your links blue, your title blue, and use blue as the background color for part of your page. You can see this use of color on many company and university sites. They will take their company or school colors and often repeat these colors in various ways throughout the site. You may also repeat typeface use, general layout, the design of elements (as is also necessary for consistency), and perhaps other particular parts of your design.

For example, you may have a circle in your logo, and you may repeat this shape in various ways throughout the site. Maybe you use circle bullets and have light circles as part of the background. Maybe the design of the homepage is circular. Or maybe you repeat parts of a circle—arc and half circles could be used in various ways, creating repetition. Any of the things you can contrast you can repeat: weight, typeface, color, size, shape, direction, and texture. With repetition you can repeat elements exactly, almost exactly, or create variety. For example, a certain shade of blue may be repeated, or a similar shade may be used, or a variety of blue colors may be used.

Repetition is one of the four basic design principles because it unifies your design. It attracts and holds attention and helps you control what the user should focus on. Often repetition creates a pattern and a rhythm and leads to movement. Repetition combines aspects of three other conventional design principles: harmony, unity, and rhythm.

The next of our four design principles is alignment. Alignment is the orientation of the elements of your design and it brings unity and coherence to your design. It also helps organize information and directs the eyes. For those used to working with word processing software you are probably aware of three general types of alignment: left, right, and center. These are all types of horizontal alignment. With your new media design you will also have vertical alignment: top, bottom, and middle.

Alignment makes a line in your design. If something is left aligned there is a hard left edge, and if it is right aligned there is a hard right edge. Center alignment creates a center line, but the line is not as hard and leads to a weaker design and readability issues. With alignment every design element must be aligned with every other one. This means you don’t want a page with a crazy mess of alignments: some items top aligned, some left, some bottom, some right, and some center. What you want is a single horizontal and vertical alignment. A single alignment creates a clean, professional look and adds organization and flow. DO NOT mix alignments! Multiple alignments on a single page are messy, unprofessional, annoying, and distracting. Choose a single horizontal alignment (left, right, or center) and a single vertical alignment (top, bottom, or middle).

Align text, images, and all other elements on the page with the same alignment. But, keep in mind a single alignment does not mean everything has to line up on one margin, you can indent items; just make sure they still maintain your chosen alignment. For example, you may choose a left alignment, so everything aligns left. You may have links in a cell on the right that all align left, and your text, in a center cell, may all align left, and your images in the same cell may be indented, but still left aligned. With a design like this you can create several lines, as long as they are all left alignment lines.

In web, blog, and new media design there are some alignments I recommend and others you should not use. For horizontal alignment there is only one good choice—left. This is the most readable for those who read left to right, especially for long bodies of text and is the most professional. Left is more readable because of the way we read. Reading left to right our eye goes left and follows the line right. When the line ends our eyes do that typewriter motion of zipping across to the start of the next line. Our eyes want the next line to begin where the last one did, just a line below. If the line doesn’t begin there our eyes get confused and have to search for the beginning of the line. So, left alignment works best—our eyes know where to go.

With centering or right alignment our eyes have to work to find the start of each line, which slows down reading, and can even lead to use getting lost in the text, and reading a different line then we wanted. Right alignment is most often used for “edgy” designs and small amounts of text—thus you really want to avoid this alignment if you have a lot of text or a conservative or traditional website. It is also not good if you use absolute setting in your designs, as right aligned text may end up off screen. Centered alignment is really only used for one type of body text these days: traditional paper wedding invitations. It is calm, formal, and old-fashioned design and nearly impossible to read on websites. It creates a weak line and often a weak resulting design. Some people like to center their headings, and this is especially bad on websites and other new media. People are not used to centering on websites, so they do not look for it and often simply do not see centered headings. I know I often miss them when reading websites. It is much better to use other methods to make your headings stand out.

As for top, bottom, and middle vertical alignments, the big one to avoid is middle, for reasons similar to those I presented for center alignment. Middle weakens the line of your design and often creates odd gaps. Also putting small bits of text or images in a middle alignment can create a ragged look if some items are bigger than others. For example, putting text in a table row in middle alignment can cause weird variations with where the text starts if the text is in multiple lines. A single line of text will start in the middle, but the two lines of text will start a line above middle, weakening the alignment and readability significantly. Bottom alignment is okay, though it may lead to larger gaps and slight readability issues as our eyes go from top to bottom, if that is how we read. All of this discussion on alignment is for readers of English, the romance languages, and other languages that read left to right and top to bottom. Readers of languages that read in directions that are different should adjust what I am saying to fit their reading direction.

Alignment includes other design principles such as balance, rhythm, unity, and harmony.

Proximity is the final of the four design elements. Proximity involves putting items that are related close together and items that are not related further from each other. Think of this a bit like people and their relationships. If you like someone you are comfortable being psychically close to together, but if you don’t like someone you are likely to stand or sit further away from them. If you love someone you’ll probably even touch them—you are comfortable being very close. Thus, proximity can show these relationships among people and among your design elements.

Your designs should create visual groups of related elements. Think of your typical blog with a two column design. Often there is a header section with the name, a tagline, and an image. These items are all close together. Then there is the main column, where all the blog posts go, and each post is closer to the post before and after it than it is with the other sections of the site. The right column will likely include links to other blogs, a calendar, and possibly other categories of links or tags. Each different section in this column is likely visually separate, but closer to each other than to the header or main column, which shows these items are related.

Proximity is most easily developed with the use of spacing. If things are not related put extra space between them. If they are use less space. Always make sure items that are related are closer than items that are not related. Our eyes will naturally place these into groups and create the relationships the designer was trying to show. Proximity includes several of the other design principles including unity and balance.

Of course, the best designs include all four principles used together. So, contrast your headings from your body text, but use proximity to show which headings relate to which piece of text. Repeat your alignment in interesting ways. Use the four throughout your new media design to have a useable, efficient, effective, accessible, and strong design. So, to wrap up, remember CRAP (Contrast, Repetition, Alignment, and Proximity) to prevent bad web, blog, and new media designs.

Once again, this is a long episode. There is so much to say about design. Due to length I’m going to once again save the first web site critique and explanation of the Screen Space Star Ranking System for next episode. Indeed, I’m going to make the next episode listener questions and web critiques. I’ve gotten a few very interesting questions from listeners including a question on color contrasts and another on the ideal amount of text for a page on a website. I also have a few sites that have been submitted for critique, including a site that is being revised and a site that has receive a lot of coverage in the blogosphere.

Please do keep submitting good and bad sites for me to discuss in future podcasts and to rank using the Screen Space Star System. And of course send me those questions. In fact, now is the time to send questions, so I can answer them in my next podcast!

While I am at it, let me ask you, my listeners, a question. I am contemplating doing a small series in this podcast on the whole web design process from start to finish with a client. I would actually have a real client whom I would create a site for and offer examples of my own work throughout the process. Would you find this helpful and/or interesting? Let me know!

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. 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 website with the center alignment and no contrast, 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.

 

 Screen Space 7: Design 101 (Four Basic Principles) [17:52m]: Play Now | Play in Popup | Download

Posted by Jennifer on Tuesday, July 22nd, 2008 at 12:00 pm.