We see different colors because some objects reflect/absorb specific wavelengths. Human eyes perceive these wavelengths as colors.

Understanding Color

In web design colors are very subjective; take black for example, for some it is the color of elegance, and it sometimes gives the idea of prosperity (you may immediately imagine a black and elegant limousine), but for others it can be a reminder of something unpleasant (death, hopelessness, evil, mourning).

You can’t use only a single color in your work even if it is a site, logo or a business card. It needs to be a combination of two or more colors to be effective. Unfortunately making a wise mixture poses a tough choice; the modern monitor displays can render more than 16 million (16,000,000) colors. Therefore it’s very easy to make a wrong choice.

To combat these situations, designers and in particular web designers, have an important and useful guide to color theory. This is a set of principles that help create harmonious color combinations.

Primary Colors

In traditional color theory, there are only three colors which can’t be formed by combining others, to be more specific there are only three colors from which all the rest are created. These colors are: red, yellow and blue – primary colors.

Secondary Colors

Mixing the primary colors we will get the secondary colors – green, orange and purple.

Tertiary Colors

Tertiary colors are combinations between primary and secondary colors (yellow-orange or marigold, red-orange or vermilion, red-purple or magenta, blue-purple or violet, blue-green or aquamarine and yellow-green or chartreuse).

Cool & Warm Colors

As in life, harmony consists of a well balanced arrangement of the parts. To establish some relationships between colors in color theory we distinguish two categories:

1. Warm Colors are the colors from red to yellow including brown, orange, pink. These colors evoke warmth because they remind us of things like the sun or fire. These tend to advance in space.
2. 2. Cool Colors are from green to blue, but also include some shades of violet. Cool colors are better for backgrounds and will give the impression of calm and reduce tension.

White, black and gray are considered to be neutral.

Useful Color Theory Terms

These terms are very useful in color theory too:

• Color Value measures lightness or darkness of a color.
• Saturation or intensity is the brightness or dullness of a color.
• Chroma is how pure a hue is in relation to gray.
• Shade: a hue produced by the addition of black.
• Tint: a hue produced by the addition of white.

We use different sets of primary colors, the widest used being:

• RGB color: this is based upon light. “RGB” stands for Red, Green and Blue (are the primary colors with green replacing yellow). Computer monitors and TV sets use RGB, but not used in printing.
• CMYK color: this is based upon pigments. “CYMK” stands for Cyan, Yellow, Magenta and Black (K stands for black).Using these four colors most of the others can be achieved. CMYK can produce less colors than RGB (yellow-greens sometimes doesn’t have the best quality).This system is used in printing.
• Pantone (PMS) Color: this is another system used in printing; PMS stands for Pantone Matching System and is a very large list of color mixtures made by the Pantone Corporation. Unfortunately they are very expensive.
• Hexachrome: more recently Pantone developed another system, based on the regular cyan, yellow, magenta, black and in addition Pantone Hexacrome Orange and Pantone Hexacrome Green. It will be used and it is used in printing, being a step further than PMS or CMYK.

The Meaning of Color

Have you ever asked yourself why Las Vegas is the city of red neon? This is because red makes people take riskier actions than blue, that calms down the spirit. Scientists demonstrated that colors have an impact on the human brain. Thus a human being exposed to a certain color can have different reactions, some are excitant, and others increase appetite or give the feeling of warmth or coolness.

Like we mentioned previously, colors are subjective and for each of us a color has an individual impact, but generally accepted meaning of these are as follows:

• black: mystery, elegance, death, evil, power, mourning.
• blue: sadness, calm, loyalty.
• green: abundance, nature, freshness.
• yellow: happiness, concentration, hope.
• red: passion, anger, danger, love.
• white: purity, cleanness, innocence.
• purple: royalty, luxury, wealth, sophistication.
• cream: elegance, purity.
• gray: conservative, formality.

But there are some specific interpretations in certain countries or regions:

• Black is the mark of high quality and trust in China.
• Blue in Iran has the meaning of immortality.
• Green means high-tech in Japan, luck in the Middle East, death in South America.
• Yellow is the color of mourning in Mexico and gives the feeling of strength in Saudi Arabia.
• Red has multiple meanings, from good luck in China, danger in Europe to mourning on the Ivory Coast and death in Turkey.
• White means mourning in Japan.

Is Color our Friend or Foe?

Colors can be a great friend within, but they can also be a very powerful and strange enemy. Strange…? Look at the pictures below, how many colors you see?

You will probably believe that there are four.

The correct answer is only three. Don’t forget that color is light, light is energy, so color is energy.

The post Understanding the Meaning of Color Within Design appeared first on Speckyboy Design Magazine.

I honestly believe that this debate will go on forever. The classification is not what is the most important aspect, the way designers work with each individual and unique font should be.

The Structure of a Letter

Let’s start by having a look at the structure of a letter:

• Baseline is the imaginary line that is the base of all letters, they “sit” on it.
• Cap height is the imaginary line that is determined by the top edge of uppercase letters. It can have the same height with the ascender but it can also be different, depending on the font.
• Meanline is the horizontal line determined by the top extremities of the majority of lowercase letters as “a”,”c”, “e”, “x”.
• Descender is the part of the “g”, “j”, “p”, “q”, “y” letters that is situated bellow the baseline.
• Ascender is the opposite of descender. It is determined by the top of “b”, “d”, “f”, “h”, “k”, “l”, “t” lowercase.

We may all discuss the classification of serif fonts and sans serif. Unfortunately, not many know what the true distinctions are:

• Serif is the extra stroke of the letters. Sans serif, as you must have figured out, is the lack of those strokes; the characters have a prominent cut.
• “x” height is the height of lowercase letter “x”. This might seem kind of unimportant at first glance, but it is used in CSS as a measuring unit (mostly because the lowercase letter “x” has no ascenders or descenders).

1. Old style or Garalde

This type of font was designed by the printers of the Renaissance and it takes up many Roman elements. Some specialists consider Old style to be a synonym of Garalde, other consider Garalde as being a category of Old style (together with Venetian). It is characterized by the low/moderate contrast between thick and thin strokes and the serifs are usually rounded. It is defined by excellent readability.

Some of the most used fonts in this category are: Garamond, Minion Pro, Palatino, Centaur & Bembo.

2. Transitional

As the name states it is a transition element between Old style and Modern fonts. This type of fonts can be recognized by its characteristics: the majuscules and the ascenders of the lower case are on the same line, breaks are oblique or horizontal, and the axis is slightly oblique or horizontal. Rounded serifs are more formal than Old Style, but less formal than Modern.

By far the most used font from this family is Times New Roman.

3. Modern or Didone

These fonts have very strong features: thin horizontal strokes but thick vertical ones, extreme contrast between strokes, serifs aren’t rounded and joined vertically. The Modern fonts have appeared in the eighteen century, the creators being the Didone group which was based in France and the Italian printer Giambattista Bodoni.

Some of the most important exponents of this kind of types are: Century, Bodoni, Didot & Bookman.

4. Slab serif

The influence of the Modern style is powerful, but these fonts have other features that make them stand out. The serifs are square and larger; the same line weight and the serifs are usually perpendicular on rectangular ends. There are five different subcategories: Egyptienne, Clarendon, Italienne, Latin & Tuscan.

Some examples of slab serif are: Rockwell, Memphis, Figaro & Excelsior.

5. Sans serif

This font was created at the beginning of the nineteen century, but it took almost a hundred years to gain the popularity it deserved. The main feature of the sans serif is the lack of any serif (in French “sans” means without). These fonts impress with their simplicity and large usability. It is considered as the most abstract form of the letter-alphabet.

The most important fonts are: Helvetica, Arial, Futura, Century Gothic & Gill Sans.

6. Gothic Scripts

These fonts look like they had been handwritten in the Europe of Gutenberg age and because of that it is very easy to determine their origin. Gothic Scripts is characterized by the elaborated and complicated shape of the letters and it is used mostly on diplomas, invitations and other formal occasions. It is highly recommended to use them only in lowercase and avoid uppercase. Other names for this category are Black Letter or Old English.

The most prominent fonts are: Cloister Black Lite, Black Forest & Linotext.

7. Handwritten

These are the fonts that look like they have been handwritten. They have a natural look and letters have a cursive, current aspect and are highly rounded. These fonts are not very legible.

Good examples are: Rage Italic & Cristopherhand.

8. Decorative or novelty

Decorative fonts are easier to classify. They are the fonts that can’t be included within any of the above categories. The main purpose of such letters is to create a mood or to try to be original and this is the reason why they are rarely used in print or web content.

9. Dingbats or ornamental fonts

A cool idea was to replace the alpha numeric characters with symbols, drawings, pictures… and so ornamental fonts appeared. Dingbats usually have no real purpose, but are very useful and times visually beatiful.

Conclusion

I can’t say the classification I have outlined in this article is correct, only that it is based on my best judgment and experience; it is only a good opportunity to explore type and more importantly to establish the elements that make a small individual letter part of a family (of fonts). If you have a better classification, i would love to hear about it in the comments.

The post The Classification of Fonts appeared first on Speckyboy Design Magazine.

To round-up, a logo designer is an artist who specializes in graphic software and is well aware of current trends and preferences. Very few people will fully meet this criteria, and that is why there are so few truly great logo designers.

The art of creating logos takes an enormous amounts of work, even if it at a first glance it may not look that way; creating logos implies talent and creativity but there are some rules to follow in the logo designs fascinating process. In this article, we will take a look at some of them:

Compositional Rules

1. Less Colors & Fonts
To establish reliable logo design rules, statisticians and designers analyzed an astonishing number of logos. Their statistics revealed: The majority of logos use no more than three colors and fonts. The use of too many fonts in addition with a great number of nuances makes if difficult to accomplish the logos initial purpose… to be retain-able.

2. Use Regular Fonts
The statistics revealed another interesting fact: numerous logos from large and popular companies use common fonts such as Arial, Times New Romans, and Helvetica.

3. Simple Shapes Put You in a Good Shape!
It is highly recommended to draw simple shapes in the process of creating logos. Have a look at the logos below, two of them respect this rule and one that doesn’t.

4. Avoid Highlights, Gradients and Shadows
This conceptual rule is strictly linked with the next one, but this is about the composition of the logo. Anyway, consider the positive aspects of a logo that lacks highlights, gradients or shadows.

Structural Rules

5. A Good Logo Should be Easily Rendered on all Types of Media

We are living a radical revolution in media: before the internet, the methods for promotion were simple and few, with the most obvious being print. Nowadays the possibilities are far greater, but this has also become troublesome from the designers point of view, logo designers in particular.

A logo should look great on a website that can be accessed from a high performing computer with a display of 22-24 inches, from a smartphone that has a few inches display or from a simple mobile with wi-fi access capabilities. The client will probably want the logo displayed on a business card or on a poster or even on a T-shirt. All of these types of media (with the exception of T-shirt design, it is not a media but requires some particularities in its design) need some specific treatment. Thus a logo that looks good on all of these is much more appreciated.

6. A Logo Should Always Look Good in Black & White

Its good practice to initially sketch on paper with a pencil your logo ideas, allowing for multiple revisions, and then proceeding to draw it with the help of graphic software – Photoshop or Illustrator – but only in black and white format. This rule helps to emphasize the idea or notion of a logo and not its composition …we have no color shadow, only the concept.

Conceptual Rules

7. A Logo Should Respect the “KISS” (Keep It Simple Stupid)

The purpose of a logo is not to reveal as many chunks of information as possible, nor is to present the skills or the services offered by the client – it should only make the connections between a high quality product and you. To put it simpler, a logo is the small thing that makes people remember the big thing. So, to easily stand out and be remembered, having a simple composition is a must.

8. A Logo Should be Memorable

Here, unfortunately, nobody can give you any help or advice, it is impossible. To say that using TNR will make a logo memorable opposed to using Arial or that this color works better than color would be wrong. As was mentioned previously, the process of creating logos is an art and a science at the same time… In this article we have only covered the artistic part.

Maybe we can offer one small piece of advice: making a logo timeless will surely make it memorable for a long time. Here are some examples of timeless logos:

Conclusions

There are some rules, but nobody can guarantee that if you follow these rules you will be able to create exceptional logos. A good opportunity to find the positive and negative from your logo works is to post them on websites that offer you feedback, and attempt to act on it.

The post The 8 Most Important Rules for Logo Design appeared first on Speckyboy Design Magazine.

Even with a myriad of colors, the chances of stumbling into good an eye-pleasing color by mixing two or more together are very slim.

To help make a good color selection or arrangement, the situations when two colors are in a harmonious combination have been split into six color categories or schemes. They are: Monochromatic, Analogous, Complementary, Split Complementary, Triadic and Tetradic.

In this post, we will take a look at each and highlight some effective examples of their use within web design.

1. Monochromatic Color Harmony

As the name dictates, this calming color scheme uses only a single color as a base and allows its various shades, tints, and tones to be included within its palette.

A Monochromatic Color Harmony or Scheme: Using monochromatic harmony expresses unity and instills elegance while at the same time is neither powerful nor bold enough to allow you to focus on any particular aspect of the design (due to its lack of color contrast).

Here are some beautiful examples of Monochromatic Color Schemes within web design:

1.1 Loewy Design

1.3 WilsonMiner

1.4 nclud

2. Analogous Color Harmony

Analogous color schemes are made up of colors that are directly next to each other on the 12-point color wheel.

An Analogous Color Harmony or Scheme: Compared with the monochromatic scheme (above), the analogous offers more nuances but suffers from the same defect – a lack of color contrast.

To use this scheme effectively, you have to choose one dominant color, a second to support, and lastly, a third color that is used as the accent, which will give your web design a dramatic impact.

It is also recommended to use only a few hues and avoid the combination of cool and warm colors.

Here are some examples of Analogous Color Schemes within web design:

2.1 ustvarjalko

2.2 Ecoki

2.4 Whooray Records

3. Complementary Color Harmony

With complementary color schemes, we finally have a recipe for good color contrast.

A Complementary Color Harmony or Scheme: This scheme basically uses two colors located on opposite ends of the color wheel (such as red is the opposite of green and orange is the opposite of blue, meaning they are complementary).

Due to the huge effect and power of the contrast, web designers will choose one dominant color (usually the background) and another to highlight the most important elements of the page (the content).

Any shade or tint of color can be used in a complementary color scheme, but desaturated colors should not be used, as you will lose positive contrast, and the site’s overall impact will greatly decrease. Such as, red is the opposite of green, meaning they are complementary.

Here are some examples of Complementary Color Schemes within web designs:

3.1 Gobierno Federal Mexico

3.2 Douglas Menezes

4. Split Complementary Color Harmony

To ease the contrast of the two colors from the complementary scheme (see above), split complementary schemes use a combination of three colors.

A Split Complementary Color Scheme

They are formed by combining a primary color from the color wheel with colors on each side of its complement.

Here are some examples of Split Complementary Color Schemes within web designs:

4.1 Apps Templates

5. Triadic and Tetradic Color Harmony

Triadic Color Scheme: As its name suggests, triadic uses the power of three colors which are situated at 120 degrees from each other (these points are determined by an equilateral triangle) on the 12 step color wheel. Their color harmonies tend to be bold and vibrant, even if you choose to use pale or unsaturated versions of the original hue.

A Triadic Color Scheme or Harmony: This harmony could be considered your best color scheme option, with its effective contrast. You could use one color for a background and the two remaining for content and the highlighted areas. The colors should be carefully balanced – let one color dominate and use the two others for accent.

Tetradic Color Scheme: Yes, you have guessed it, tetradic uses a combination of four colors, determined by a square or rectangle placed over the color wheel. To create different harmonies, the square or rectangle can be rotated, which will result in the creation of new harmonious tetradic schemes.

A Tetradic Color Scheme or Harmony: In a logical deduction, this scheme has the greatest number of combinations. It is based on two complementary pairs.

This can be a double-edged sword though – it does offer the biggest option of color, but it can give problems for good harmony. Be very careful when choosing these colors.

Both of these (triadic and tetradic) color combinations are difficult to interpret; most websites will use a combination of four colors based on these color schemes, making it difficult to highlight with examples.

Throw a stick into the deep recesses of the web, and the chances are you will wind up hitting a site with either a triadic or a tetradic color scheme.

The post The Beginners Guide to Using Color in Web Design appeared first on Speckyboy Design Magazine.