Design Basics Part 1: How to design

Design. How do you design something that apeals to the person looking at it and achieves the goal you are trying to achieve?

Well, lets look at the goal of a good design, the main goal would be to communicate to the viewer the idea you want to communicate. This may be indirect, very direct, or even hidden.

Take the Google home page for example, what are they trying to communicate with the design? Well each person who saw it might tell you what they get, but what I get is “simplicity” the design communicates that to me and I myself like a search engine that is simple so I use Google like so many others.

Google Search (Entire page):

Yahoo Search (Entire page):

If you wanted to communicate that your website has many different services and show that on your homepage, you might get a design like Yahoo where the home page is so loaded that to me it overwhelms me. Someone else who might like lots of links might really enjoy the design. Thats the point, you want to communicate your message with the design.

For your design to be a success, you would want to communicate the message that will pull peoples interest (People that you are selling to) and then deliver your product. As an illustration: You want to design something that sells computers. You design something that looks old fashioned, the only people you will be selling to is people who like old fashioned things – not computers. Doing this, you will lose sales and the design is a bomb (Not the Bomb, like it should be).

To be successful to sell computers you would have to do a design that communicated what a person buying a computer likes about a computer, to find this out you need to survey those kind of people and find out what they like. But surveying is a whole additional subject. Once you have surveyed and found out what the people who would like computers like about computers that makes them interested in buying computers you can do the design correctly. You then do your design in a way that communicates what would make the person buy.

Knowing the data mentioned, you can do a successful design, providing you know the basic rules and techniques of the area you are working in. The basic rules and technical skill in the area you are working in are necessary to do a good design.

Here are some examples of the technical skills necessary for some areas of design:

Book cover design:
Basic design rules
Photoshop or Indesign (Or any of the programs for designing images)

Internet design:
Basic HTML (So you know what can be done)
Photoshop or ImageReady
Flash (for designing Animations)

Interior Book Design
Photoshop
Indesign or Quark
Basics of Typesetting and Typography

The better you know your technique, the better you can execute your ideas for the medium being designed for.

DESIGN BASICS

I will now go over the design basics as I know them and what I think works. Some of this data I have collected from various design books, and some of the data I have seen as I have been designing.

Do not take anything I say here as an unbreakable rule, once you get the feel of design and get familiar, you will build your own style and you will probably break many stated design rules. This is good, I don’t think you need to follow the rules perfectly. The rules will help you get started and the rest is up to your imagination and your best knowledge.

The first thing I will cover is the basic rules of Typographic designing. Typography, meaning dealing with Type or letters. This is a very important subject, type is used in most designs on the market in present time and it has been used since god knows when.

TYPOGRAPHIC DESIGN

Some of the general concepts for this section are derived from Robin Williams: Non-Designers Design Book.

There are a number of basic rules governing designing with type. They are as follows:

1. Have good Contrast in your type and design

Having good contrast in your design is imperative. What is contrast? contrast is essentially the difference between elements and how obvious or not they are. Using correct contrast in your typography can add a sense of impact or sophistication. You want to contrast things that are supposed to be different. For example, the title of a chapter should have good contrast to the main body of text, weather it be with font size, color, typeface or even type style. Contrast can be used in many ways to make typography more comprehensive and understandable.

Subtitles in a book or publication would have some contrast so separate the subsections (not necessarily the same contrast that the title would have — that could confuse things). Italic or bold can be used as a contrast as well as type position and white space. (i.e. indents)

Example of a resume design:

2. Repeat certain elements in your design so that the piece is strengthened as a unit

Repeating certain elements in a design is important. It shows unity and strength as a design whole. There are many ways to do this. Some examples of this are: repeating a logo, using a color scheme throughout a design, coordinated type styles, etc. Another example for magazines is a repeating grid layout throughout.

Example showing repeated elements in a design:

3. Have correct grouping and alignment, this means aligning things that are related and not aligning things that are dis-related.

Group together pieces of information that are related, separate elements that are dis-related. This helps in understanding the relation between all of the elements. This piece of information can be used in any kind of design including web design and packaging design.

Example showing good and bad grouping:
(The bad example also has other problems, but look at it for grouping and alignment)

4. Make sure the type is readable, don’t make it too small, don’t put it over some background where it can’t be read.

If you are using text or type, think about readability. If you want a person to read the type elements, make sure they are big enough to read comfortably. Don’t overlay text onto a design element that would render the text illegible. If you are using text as a design element and not necessarily something to read, you can overlay it and do whatever you want with it.

If you want to use text over an image, try adding an outline, a drop shadow or even a dark gradient over the image:
(There are many other ways to make text readable over an image, I have only mentioned a few ideas)

5. Use the color wheel to enhance design concepts, create contrast or create similarities.

The use of  the color wheel can greatly enhance design and visual concepts. I am not going to cover the color wheel and how to use it. Colors can be chosen to show relation between design elements, color can also be used in the exact opposite way to convey contrast or difference. I have seen many designs and websites where the colors are not coordinated correctly to communicate the message of the site. I have also seen way to many colors used which clutters up the design or layout (This can be handled by reducing the amount of contrasted colors being used in the design).

Here is a very nice color harmony tutorial: read it here

Example of designs using just color and shapes:

---

---