5: Design Principles

The Design

As you have seen throughout these modules I am a great believer in simplicity,  so I carry that over to my feelings about design. My reasoning for this is that there is this thing called style, a rhythm of consistencies that an artist develops over time, their use of colors, combination of fonts, composition, and use of the little things that finish off a design. These nuances become part and parcel of their style, their design. And so I leave the subtleties of what becomes the artists signature to the mystery of creation and choose to explore what is a bit more graspable. There are three pieces of design that umbrella all else: composition, color, and typography.

It’s my opinion that web design contains a foundational composition that is the one and only composition on the web, everything else is a derivative of this composition. This is a strong statement but I believe it is well founded. Look at the web and you will see it everywhere. That composition is simple, it is composed of the header, the body, and a footer. That is it, from top down. Within this foundation are placed the additional design complements that finish off websites, such as side bars and navigational menus. Grab a pen and paper and draw out this basic form, use a box model, that is simply use squares and rectangles to create a mock up of this foundational construction.

This design is ubiquitous; however I would like to qualify my statement above. There are always exceptions to the rule and as you continue to grow in your design abilities you may also break away from this foundational design. Why would you want to do that? To be honest, I can’t answer that. I believe this design is similar to a book in that a book almost always has a cover that envelops the text. Within the cover you almost always find a title page, a table of contents, and the work itself. Yet every book is its own work and that I believe is how the web works.

I know that this may seem overdone, and I apologize if it is long winded, but the point needs to be made that there is a simplicity to web design that works, that delivers what is generally more important than the design itself, the content. It is our job to get out of the way of the content and the viewer, making it as easy to access and ingest the information as possible. Again, there are always exceptions.

I am not an expert in color or typography and I think I would be doing you a disservice to try to explain these two topics in any detail. That said, as always I know where to look for great advice on both these topics, so I will refer you to them at the bottom of this page under resources.

Information Architecture (IA)

IA is an often overlooked aspect of web design. Basically, it is the structure of the presentation of information. This idea can be presented in many ways, for example, organizing your library alphabetically, or by genre, or by color, or by size. What is the goal here?

We are trying to make it easier to find the information that we are looking for. I like to remind myself of one of my main goals when trying to communicate and that is, “Don’t make them work; make it easy for them.” Again, the art of the artist is to be unseen and to let the art speak for itself.

The point here is to get you thinking about how you present your information to the world. The reality is that IA on a simple five page site is not going to be as complex as a large thirty page site. So, you can decide for yourself how much time and thought you want to put into your IA.

At a minimum, it is a good idea to create a simple flow chart breaking down the path that a visitor to your site will have to take to get from place to place. Taking this idea further, you should think about what your visitors are coming to your site for. Once you figure that out you can use your design skills to lead the visitor to the desired information. Do this well and you have mastered the medium as far as I am concerned.

Watching the eye:

We create a separation by drawing boundaries that do not really exist. It may be that this is a necessary practice and it is what I have done in these lessons to make it easier to learn. The truth is that the lines between all of these topics are malleable if nonexistent.

Your use of IA, XHTML and CSS, for example, all play a part into the design of the site. As for your overall style, who knows where that comes from. There are many things, an infinite variety of stimulus that may affect your tastes, which then effects the outcome of your designs. The more you think about designs and I mean all designs, websites, posters, houses, appliances, human bodies, tables, trees, sky scrapers, the cosmos, and so on, the more you will begin to see the world. And from here you will begin to understand better how we flow between the lines.

I bring this up because as you make your way through the landscape of design, you will see that there are many ways to create similar expressions. You are the guide that leads the viewer through your creation. To bring this back to earth, you can choose where you want your viewers attention to travel by creating a path through the placement of content.

My Thoughts: Opinions?

Design is one of those topics that can be discussed forever without getting anywhere. Here I presented a brief of a few key aspects of design combining a few topics together that may not be thought of as traditional design and I have left out a lot as well. It is upon you to put in the work to gain an understanding and appreciation for what makes a design work. I’ve stated my opinion about what I believe a great design accomplishes, but I took a very practical approach, a utilitarian approach. And I want to counter what I said above with a statement about my reality.

While I said the goal is to get the information to the viewer without getting in the way, I fully believe that this may be misinterpreted as practicality over all else. I do believe in the usefulness of things, but not at the cost of negating our human need for the subtleties that make life wonderful, those ineffable qualities of life that don’t scream out at us but whisper. I recognize the use in what is often said to be useless, thus the useless becomes the thing that is cherished. What these “useless” things are I can’t really say. It is the artist that illuminates. The artist that is you.

Resources:

Design:

  1. For a wonderful anthology of articles on design please consult the website:  http://www.alistapart.com/topics/design/
  2. This wiki article describes a phenomenon that I believe is getting to the roots of what good design is moving towards: http://en.wikipedia.org/wiki/Desire_path
  3. Here is a nice short article that asks us to see deeper into design, to recognize it as life itself:  http://stuffandnonsense.co.uk/write/about/creating_inspired_design_across_the_universe/

Typography:

  1. http://www.alistapart.com/articles/on-web-typography/
  2. http://webtypography.net/toc/

Color Theory:

  1. Start with this brief but very useful article: http://veerle.duoh.com/blog/comments/choosing_color_combinations/
  2. http://www.webexhibits.org/causesofcolor/index.html
  3. http://www.worqx.com/color/index.htm
  4. http://www.apple.com/pro/color/tools/caponigro/contrast.html

Leave a Comment