As the Web is different from print, it’s necessary to adjust the writing style to users’ preferences and browsing habits. Promotional writing won’t be read. Long text blocks without images and keywords marked in bold or italics will be skipped. Exaggerated language will be ignored.

No cute words, no exaggerated statements. Instead a price: just what visitors are looking for.

An optimal solution for effective writing is to

use short and concise phrases (come to the point as quickly as possible),
use scannable layout (categorize the content, use multiple heading levels, use visual elements and bulleted lists which break the flow of uniform text blocks),
use plain and objective language (a promotion doesn’t need to sound like advertisement; give your users some reasonable and objective reason why they should use your service or stay on your web-site)

If the navigation and site architecture aren’t intuitive, the number of question marks grows and makes it harder for users to comprehend how the system works and how to get from point A to point B. A clear structure, moderate visual clues and easily recognizable links can help users to find their path to their aim.

Although the design itself is simple and intuitive, to understand what the page is about the user needs to search for the answer. This is what an unnecessary question mark is. It’s designer’s task to make sure that the number of question marks is close to 0. The visual explanation is placed on the right hand side. Just exchanging both blocks would increase usability.

By reducing cognitive load you make it easier for visitors to grasp the idea behind the system. Once you’ve achieved this, you can communicate why the system is useful and how users can benefit from it. People won’t use your web site if they can’t find their way around it.

http://vimeo.com/7252845

Elementary right? I mean what kind of stupid tutorial is this? I’m explaining that the piece I’m designing needs to be visible?? This is a retarded concept for a tutorial right?

Wrong.

Because unfortunately, I see lots of problems with designer’s contrast all the time. Not only that, but contrast, when used properly can be an important tool.

Here is one big mistake I see frequently: Designers use color difference to produce contrast instead of value difference. For instance… a medium value blue sitting on top of a medium value red produces some contrast. You CAN see the difference between the two. But when you have two colors together of the same value – it produces what is known as “vibrating.” You’ll notice that at the line where the blue and red meet your eye seems to oscillate back and forth between the two. It almost feels like the text is pulsing.

A quick way to evaluate your design to see if there is sufficient contrast is to convert the entire thing to grey scale momentarily and see if the design still looks clear and easy to read. In Illustrator you do this by selecting your design, and select: Edit>Edit Colors>Convert to Grayscale. In Photoshop you’ll need to flatten your work then you can select: Image>Adjustments>Desaturate. This will convert it to Grayscale.

Rule Two: Limit Your Colours. Sounds a lot like the last rule of limiting your fonts right? Exactly! We want to limit our colours for the same reason we want to limit our fonts. Reducing the number of colours we use in our design will make the piece feel consistent. Basically, everything will look like it goes together. Just like a sports team’s uniform or a company’s branding – we want a uniform over-all look to the colors.

As with the font selection, limiting the number of your colours is just a guide not a rule. You could very well have a rainbow of colours in your design and it will look great. But you need to start with a colouring strategy and stick with it. Use your colour consistently throughout your design.

For starters lets talk about color values. A color’s value is how bright or dark the colour is. A yellow for instance is fairly bright. A purple is fairly dark. Of course, a color can have a range of values. Purple for instance is a color that most of us think of as relatively dark, but you can also have a very light purple. Here is an example of some colours and their relative value. Then next to that you can see a range of values for one colour.

So here is one rule I use when picking my colour scheme: make sure you have a range of values in your color scheme. In any design you’re going to need some light colours and some dark colours to produce contrast. If for instance, the background of your design is dark, you’ll need a light color so that the copy can be easily read. Or conversely, if you have a bright background you’ll need a dark colour for your art or text or whatever.

I will also typically only pick 2-5 colors to make up my colour schemes. Reduce the number of options and you’ll typically have good results in the design. Here is a sample of a color scheme I put together. As you’ll see I picked One dark colour, one middle-valued colour and one bright colour. Just to the right, I also set up a value range for each of these colours. It’s this collection of colours that I will use on my project as my palette. Once I have this colour palette set up I will try my best to only use these colour.

The first font can be fancy or artistic. This font will be used to give your design some flair, character and personality. It’s this font that sets the mood for the piece. Is it a fun font with swirls for a girl’s party, or is it a grungy evil font for a rock band? I would use this fancy font for the header copy – anywhere it’s big, I’ll use this font. The fancy font will be the focal point of the piece. You will usually have less copy in this fancy font, but it will be much bigger – so that’s what people will see and focus on.

The second font should be very basic. The audience shouldn’t take notice of this secondary font at all. This secondary font needs to be very easily legible. It’s this basic font that will be used for large bodies of copy. Obviously, it’s very hard to read large bodies of copy that are in some extravagantly artistic font. So, this second font is all about functionality.

Here is an example of proper use of fonts in a design. As you can see, there is only two fonts used here. The fancy font is used as the headers and the basic font is used for the copy. It looks clean and consistent.

So now you’re going to learn the names of four of the main design principles that can be applied to any design piece at all. You are going to be in control of your pages and website as a whole.

The following is a brief overview of the principles. Although these are discussed separately, keep in mind they are really interconnected, rarely will you apply only one principle.

1. Contrast
The idea behind contrast is to avoid elements on the page that are merely similar. If the elements (type, color, size, line thickness, shape, space, etc.) are not the same, then make them very different. Contrast is often the most important visual attraction on a page.

• Can you see the difference between your content, ads, headings, body copy and comments?

2. Repetition
Repeat visual elements of the design throughout the piece. You can repeat color, shape, texture, spatial relationships, line thicknesses, sizes, etc. This helps develop the organization and strengthens the unity.

• Do you have a consistent theme or brand throughout your site? Do you reuse the same colour, shapes, blockquotes, formatting for all of your articles?

3. Alignment
Nothing should be placed on the page arbitrarily. Every element should have some visual connection with another element on the page. This creates a clean, sophisticated, fresh took,

• Does everything line up or have you got things centred, left aligned or out of place?

4. Proximity
Items relating to each other should be grouped close together. When several items are in close proximity to each other, they become one visual unit rather than several separate units. This helps organize information and reduces clutter.

1. Work with vectors
   This probably sounds obvious to most designers out there, but it isn’t to everybody so I repeat it as often as I can to avoid receiving those damn jpeg logos. Vector formats are the ones that will allow the most variations for your logo.
2. Don’t use more than 2 fonts
   There is many nice fonts out there and we would all love to use as many as we can. Unfortunately using too many fonts will most of the time result in a loss of coherence. Using two different fonts can be good to create a contrast, catching the eye.
3. Keep it readable
   If people can’t read your logo, it’s useless to have one. This sounds like dumb advice again, but it’s easy to get caught in creating letters or distorting a font until it becomes unreadable. Always stay aware of that when working on your logo.
4. Test sizes
   Your logo should resize well at any size, whether it’s huge on a truck or tiny on a badge.
5. Adapt it for dark backgrounds
   So you’ve got a wonderful looking dark logo, but now your client want to get it on his black car. It’s usually not too hard to adapt it, but you’ll look more professional if you already got that case figured out.
6. Make sure it works well in black and white
   I have a very simple technique for that: I work every logo in black and white before adding any colour. This way choices are made judging by the shapes and you are not distracted by anything else. It makes it much easier to know that your logo will work well in shades of grey afterwards.
7. Don’t include photos in your logo
   Well… this one goes along with the first tip. First, photos are not vectors. Photos also don’t scale, have no branding value and are hard to adapt for any use.
8. Look at it upside-down
   This is a tip I got from my teachers in graphic design school, looking at your logo (or any printed design really) will get the meaning out of the way and give you a new look at the design’s balance and white spaces. Try it!
9. Don’t follow trends
   It’s often hard to escape trends, especially if you’re passionated and love to look at inspiring logos on design sites. Your logo has to work on the long run, so try to avoid the web 1.0 swoosh or the web 2.0 reflection.
10. Get specific feedback
    Asking people’s opinion is worthless if you don’t know what informations you want to get, so when getting feedback, try asking specific questions (eg. does your logo expresses the industry of the company?).