Design Basics Part 1: How to design

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:

Resume example

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:

People magazine cover 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)

Bad and Good Grouping in Design

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)

Text over an image

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:

Color image by NDesign Studios

Design with colors and shapes

6 thoughts on “Design Basics Part 1: How to design”

  1. thanks for the useful blog..but could you plz share Micromedia flash tutorial if you have pls ..whenever you did it then pls leave a comment on my blog/profile.
    thanks and regards
    Shehzada

  2. I would have liked to have seen a few examples of what you were talking about. Don’t know if that’s possible but a link to something would be helpful.

Leave a Reply

Your email address will not be published.