Design .. is to make a synthesis of } Needs + Information + Colors {

in order to create something greater than the sum of its parts

Graphic design is everywhere, touching everything we do, everything we see, everything we buy: we see it on billboards and in Bibles, on taxi receipts and on websites, on birth certificates and on gift certificates, on the folded circulars inside jars of aspirin and on the thick pages of children's chubby board books.

Graphic design is complex combinations of words and pictures, numbers and charts, photographs and illustrations that, in order to succeed, demands the clear thinking of a particularly thoughtful individual who can orchestrate these elements so they all add up to something distinctive, or useful, or playful, or surprising, or subversive or somehow memorable.

Introduction

As designers, we often focus on the practical aspects of design above all else. We focus on what works, with little regard for why it works. And in our day-to-day work, that outlook serves us well. It let us get our work done in an efficient, professional manner, and generally present good results.

There are a lot of general design theories and principles out there that apply to all forms of design, whether in digital or print mediums. These include things like balance and scale, as well as more abstract topics like emotion and what makes for “good” design.

Design Theory

Starting with the Basics

Web design is a relatively new profession compared to other forms of design, due to the youth of our medium. As with any design discipline, there are aspects of the Web design process that are unique to the medium, such as screen resolution, additive color spaces and image compression.

How Does Web Design Fit In?

I tend to define Web design as being one of many disciplines within the larger field of design.

The point is that in order to start with a discussion about the fundamentals of design as they relate to Web design we need to understand that there is a good degree of inheritance that design has received over the years from other art forms. These art forms, such as lithography, typography, painting/illustration and industrial design, evolved over many centuries, and a number of basic ideas have emerged as providing universal guidance to any artistic endeavor.

The Principles of Design

There are many basic concepts that underly the field of design. They are often categorized differently depending on philosophy or teaching methodology. The first thing we need to do is organize them, so that we have a framework for this discussion.

Let’s begin by focusing on the principles of design, the axioms of our profession. Specifically, we will be looking at the following principles:

Balance Rhythm Proportion

Dominance Unity

It is the arrangement of the objects in a given design as it relates to their visual weight within a composition.

Balance

Rhythm is the repetition or alternation of elements, often with defined intervals between them. Rhythm can create a sense of movement, and can establish pattern and texture.

Rhythm

Proportion is the comparison of dimensions or distribution of forms. It is the relationship in scale between one element and another, or between a whole object and one of its parts.

Proportion

It determines the visual weight of a composition, establishes space and perspective, and often resolves where the eye goes first when looking at a design.

Dominance

The concept of unity describes the relationship between the individual parts and the whole of a composition. It investigates the aspects of a given design that are necessary to tie the composition together, to give it a sense of wholeness, or to break it apart and give it a sense of variety.

Unity

Simplicity in website design doesn’t necessarily equate with a minimalist design aesthetic. Simple

designs just remove all unnecessary elements from the content. While minimalist designs generally fit this

criteria, there are plenty of designs that wouldn’t, by any stretch of the imagination, be considered “minimalist” that

still fit the definition of simple.

Simplicity

Advantages of Simple web designs:

1. Easier to Navigate

2. Simple Designs Load Faster

3. Content is More “Scanable”

4. Simple Sites are Quicker to Design and Build

5. Simple Code is Easier to Debug

5. Smaller File Sizes Mean Less Server Space

How to Simplify Your Websites

1- Remove unnecessary decorative elements

2- Ask yourself: “Is this element really important?”

3- Make sure the backend of your site is as simple as the frontend

Color Theory

We often think of a good eye for color as something innate rather than something learned. But in fact, given the proper tools, and possibly a few electrical shocks along the way, even a person who's colorblind can pick color schemes that are pleasing to the eye.

First let's deal with the basic terminology of color just to make sure we don't lose any of you along the way. We all know that primary colors are red, yellow, and blue. Then to get secondary colors, you add a primary color to another primary color. But what then are tertiary colors? simply a primary color added to one of the adjacent secondary colors. That means there are six tertiary colors.

Figure A: To understand how to pick the best color schemes, it's first important to understand the three different types of colors.

To fully understand the manner in which these colors relate, it's best to imagine these hues organized in a circle. This organization, shown in Figure B, is known in the design world as the color wheel.

While the choice of color is one of the most subjective decisions in the world of design, it's still important to understand the theory behind why you should choose one set of colors over another. The theory may not let you instantly select a color scheme, but it will certainly lead you along the right path.

Typography

The computer is not a typewriter; it gives us access to all of the same typographical resources that evolved over centuries in the printing industry. However, many people learned to type on a typewriter and haven’t gotten rid of their “typewriter habits”. What follows is a guide to some typographic principles for writing on the computer.

Basic typographical principles

Proportional fonts

There are two kinds of fonts: “Fixed-Width” and “Proportional”.In a fixed-width font (such as Courier New), the characters are all the same width: an “i” is the same width as an “m”. This makes the font harder to read.In a proportional font (such as Times or Arial), the characters are different widths. Typesetters have always used proportional fonts, and they look much more professional. Always use proportional fonts unless you have a specific reason not to!

Serifs

Fonts come in two styles: “serif” and “sans-serif”. Times New Roman is a serif font; Arial is sans-serif. Serifs are the little lines at the ends of strokes.

This text is probably in a sans-serif font

&

This text is probably in a serif font

Serif fonts are easier to read on paper; for instance, they distinguish capital I and small L, which are confounded in many sans-serif fonts.

Emphasis

You should never use ALL CAPS . If you want something similar for a title or gloss use SMALL CAPS , automatically in Word: it’s under Format | Font

Paragraphs

To reiterate the point made under styles: always use indenting (a paragraph format attribute) instead of tabs to indent paragraphs, and paragraph spacing instead of blank lines to separate paragraphs. This will make reformatting your document much easier.

Punctuation

Another bit of “typewriter residue” is the use of straight quotes (") instead of curly quotes (“,”), and a “double dash” (--) instead of an “em dash” (-). The characters you need for the elegant version aren't available from the keyboard, but they are present in ANSI fonts.

15 tips to choose a good text type

Many people may asked me which text type is best for a magazine, a newspaper, a poster, a newsletter, a publication, etc. In general, I can tell them which to use, but I know that this is not the best answer, because they won't learn to do this by themselves.

Today, I want to take time to analyze how to choose correct text typography design in different cases. It is very important to understand that these tips are not final word, but they can be good help at the moment of choosing a text type. In any case, it depends on what do you want to convey with this type, because many times legibility is as important as the character of the type. Try to be very careful and take in account the following points.

1. The Letterform

The ‘ductus’ represents the framework of a type. It is very important. For legible text we need typographies with a simple ductus without complex details. Those details distract from the reading process and we need the reader to pay attention to the content and not the text.

2. The Weight

When we discuss the ‘weight’ of a type, we refer to a consistent relationship between the characters themselves, and the light of the page that flows around them. If you use a light version of a type for a lot of text, reading of this text will probably become tiring and nobody will want to read it.

3. The Contrast

The contrast refers to the thickness difference between vertical and horizontal strokes. The difference between the thicker and the thinner part of the character. Bodoni and Didot are very contrasted type designs. Try to read the photocopy of a photocopy of a photocopy of text layed out in Bodoni. You will probably see only vertical strokes. Good type design should be able to resist a lot of copies. It must be strong, solid, but not coarse.

4. The axis

In my view, the axis of a type design could affect reading. Vertical strokes prevail in a text type and if the axis is diagonal, the eye will have trouble following that line of text. If the type uses more than one axis, a line of text will appear as if dancing which makes is harder to read. If we use an orthogonal axis, the characters can't dance.

5. x height

The area between baseline and x height contains most of the readable information. It is a very important area at the moment of reading text. Long ascenders and descenders require a small x hight. If we compare two types of designs, one with long ascenders and the other with short ascenders, we can see that the x height of the second one will be larger, so it will obviously be more legible.

6. Capital letters height

Older typefaces designs consider the same height for the ascenders and the capital letters. In any cases capitals are bigger… But the appearance of a word in upper case between lower caps is usually ugly. When I write the word ‘Garamond’ I feel the ‘G’ as a dinosaur and the ‘a’ as its prey.

7. Endings and details

When we use a font in a big size (for example in a poster), we enlarge everything. All the small details of the type design become evident, as well as the mistakes. A lot of typographies are badly drawn. As designers, we should not accept this.

8. Text and texture

A block of text looks like a texture from a distance. This texture must be uniform, without thicker characters or spots that could attract the attention.

9. Degree of the Counter Opening

In many type designs, the counters are too closed. It could cause legibility problems, because somebody could read 'o' instead of an 'c'. So, if the internal counter is too opened, it will start to mingle with the external counter, generating a lot of white.

10. The Fish Effect

This effect becomes evident when the internal counter is bigger than the space between characters. It looks very strange where round and straight characters join.

11. External counter

There are small details that make a text type design more legible. A carefully designed external counter leads to better text understanding. Think about the connection between the vertical stroke of the ‘n’ and its curve, or the difference between ‘rn’ and ‘m’.

12. Internal counter

A small eye in an ‘a’ or an ‘e’ character will probably disappear, especially in small type sizes. These are the most used characters in most of the languages, that is why this becomes a very big problem.

13. Is the set complete?

How many times do we note that the font we are using lacks a character? It always happens when our design is almost finished. Terrible! We must change the type and check out the complete text again. Many type designers don't design some characters such as ñ, written accents, tildes, points, commas or numbers… It is better to check the font out before using it.

14. The family

It is important to verify that the type family is plentiful, with variations in weight, black, whites and italics… Check out that the italic is as legible as the regular version. Sometimes they have a lot of rococo details.

15. Letter spacing

There are fonts with bad or non-existent letter spacing and obviously, they don't work well. A good designer will try to correct the letter spacing that he (she) considers bad, but it is too much work when all the spacing looks bad… There are software packages that can help, but it is not the same as good typographer work. Try to use fonts with correct letter spacing and metrics.

Conclusion

In designing it is too easy to get engrossed in the many unique constraints of the medium and completely forget some of the underlying concepts that can strengthen any design. To better discuss such concepts, we need to step back from our specific discipline and look to the history of the field. It is here we find the axioms of our profession.

In this research we looked at half of those axioms, the principles of design. The principles of design are the guiding truths of our profession, the basic concepts of balance, rhythm, proportion, dominance and unity. Successful use of these core ideas insures a solid foundation upon which any design can thrive.