Typography and Colors for

GUI Designers

www.admecindia.co.in

Presentation by:

ADMEC MULTIMEDIA INSTITUTE

Typography and Colors are most important

elements to be considered if you are looking for a
successful design for you website or application.
So this is just a
reference for my
workshop on the
following topic.

Typography and Colors for GUI

Designers

Its no great mystery that truly great user interfaces

are the ones that are engineered to stay out of the
way.
Staying out of the way means not distracting your
users. Rather, good UIs let your users complete
goals. The result? A reduction in training and
support costs, and happier, satisfied and highly
engaged users.

When getting started on a new interface, make

sure to remember these fundamentals:
Your users goals are your goals, so learn them.
Restate them, repeat them. Then, learn about your
users skills and experience, and what they need.
Find out what interfaces they like and sit down and
watch how they use them.

1. Know your user

Users spend the majority of their time on interfaces

other than your own (Facebook, MySpace, Blogger,
Banking Websites, school/university, news
websites, etc). There is no need to reinvent the
wheel. Those interfaces may solve some of the
same problems that users perceive within the one
you are creating. By using familiar UI patterns, you
will help your users feel at home.

2. Pay attention to patterns

Your users need consistency. They need to know

that once they learn to do something, they will be
able to do it again. Language, layout, and design
are just a few interface elements that need
consistency. A consistent interface enables your
users to have a better understanding of how things
will work, increasing their efficiency.

3. Stay consistent

Design your interface in a way that allows the user

to focus on what is most important. The size, color,
and placement of each element work together,
creating a clear path to understanding your
interface.
A clear hierarchy will go great lengths in reducing
the appearance of complexity.

4. Use visual hierarchy

Your interface should at all times speak to your

user, when his/her actions are both right and
wrong or misunderstood. Always inform your users
of actions, changes in state and errors, or
exceptions that occur. Visual cues or simple
messaging can show the user whether his or her
actions have led to the expected result.

5. Provide feedback

No matter how clear your design is, people will make

mistakes. Your UI should allow for and tolerate user error.
Design ways for users to undo actions, and be forgiving
with varied inputs (no one likes to start over because
he/she put in the wrong birth date format).
Also, if the user does cause an error, use your messaging
as a teachable situation by showing what action was
wrong, and ensure that she/he knows how to prevent the
error from occurring again.

6. Be forgiving

Once a user has become experienced with your interface,

reward him/her and take off the training wheels. The
breakdown of complex tasks into simple steps will become
cumbersome and distracting. Providing more abstract
ways, like keyboard shortcuts, to accomplish tasks will
allow your design to get out of the way.

7. Empower your user

All interfaces require some level of copywriting. Keep

things conversational, not sensational. Provide clear and
concise labels for actions and keep your messaging
simple. Your users will appreciate it, because they wont
hear you they will hear themselves and/or their peers.

If you think every pixel, every icon,

every typeface matters, then you also
need to believe every letter matters.

8. Speak their language

The best interface designs are invisible. They do not

contain UI-bling or unnecessary elements. Instead, the
necessary elements are succinct and make sense.
Whenever you are thinking about adding a new feature or
element to your interface, ask the question, Does the user
really need this?. Are you adding things because you like
or want them?

A modern paradox is that its simpler

to create complex interfaces because
its so complex to simplify them.

9. Keep it simple

The design that you created is not the world's

best design you must always accept it. So
always keep moving forward to get
something new every second.

10. Keep moving forward

6 Ways to
Improve Your Web
Typography

The Basics of Typography are important for all designers,

whether or not they are designing for the web.

1. Understand the Basics of

Typography

To create an effective typographic scale, the best method I

have found is to use the unit of size measurement "em,"
as it sets the size relative to the base of a given document.
In the example below, the base font-size is 12 pixels, which
would set the standard font-size for paragraphs at 15
pixels.
body {
font-size: 12px;
}
h1 {
font-size: 5.0em;
}
h2 {
font-size: 4.0em;
}

h3 {
font-size: 3.0em;
}
h4 {
font-size: 2.0em;
}
blockquote {
font-size: 1.5em;
}

p{
font-size: 1.25em;
}
input {
font-size: 1.0em;
}
small {
font-size: 0.75em;
}

Typographic Scale

The vertical rhythm of line spacing that provides the

optimal spacing for the eye to follow. To create this rhythm
it is best to follow a baseline grid. From my experience,
online vertical rhythm is best set at or near 1.5em. For
example, use a vertical rhythm of 1.6em, which equates to
roughly to a 17.6px line-height (based on a 11px font-size).

Vertical Rhythm

Below is a standard vertical rhythm that I use on many of

my websites built on the 960 grid system. To achieve
vertical rhythm appropriately, every paragraph should have
a margin or padding below equivalent to the standard
baseline grid line-height.
body {
font-size: 12px;
line-height: 15px;
}
p { margin-bottom: 15px; }

As most designers and developers know, websites render

differently in different browsers. This is especially true with
rendering fonts. Below is a comparison of how five popular
browsers render the same text differently:

2. Design in the Browser

One of the most exciting features of CSS3 is the @font-face

rule.

3. Use CSS3's @font-face Rule for

Web Font Embedding

@font-face {
font-family: "Anivers";
src: url("Anivers.eot");
}
@font-face {
font-family: "Anivers";
src: url("Anivers.otf");
}
Use the Font
body {
font-family: Anivers, "Helvetica Neue",
Helvetica, Arial, sans-serif;
}

Make the @font-face Declaration(s)

Typography on the web is in its infancy when compared to

typography in print, broadcast, and film. Watch other
forms of media for inventive typography usage. The next
time you are at the movie theater, check out all of the
movie posters and pay close attention to the typography
used in previews and trailers. Take a look at the
typography both inside and on the cover of books at your
local bookstore. Examine your DVD collection or your
favorite magazines for inspiration.

4. Find Inspiration and Never Stop

Learning

20 Colour Tips for

Web Pros

Background colour should be a single wash and have

plenty of contrast with the text. Black - or dark grey text
against a white background remains the most sensible
option.

1. Contrast

This is the main problem with many of those usercustomised MySpace profiles.

2. Avoid patterns behind text

I firmly believe that links should be coloured blue, largely

because the webs most popular websites typically use
blue (Google, Yahoo, BBC, New York Times, eBay, etc).
Why reinvent the wheel?

3. Links

The vast majority of websites change the colour of a visited

link to help users navigate. So should you. Maroon is a
common choice for clicked links. Avoid applying these
settings to your primary navigation.

4. Clicked links

The consensus opinion with regards to colour and web

design seems to be one of the fewer the better. Use
colour sparingly if you want it to grab the eye. Colour can
be persuasive, but not if it is lost among a rainbow.

5. Limit your colour choices

Many websites use a blend of neutral colours and a range

of shades of their main colour choice/s. This is easier on
the eye than trying to work with multiple primary colours.
Im currently a big fan of grey. Note that some people
struggle to pick out differing shades of blue.

6. Shades

By spacing out content units and blocks of colour youll

help guide the eye to key areas. Id wager that lightlycoloured landing pages with one brightly coloured buy
now button will convert better than a page featuring a
mess of colour. Make that button stand out! Go on, try it

7. Add 30% more white space

Macs and PCs both render colours differently, as do

browsers. You should use web smart colours to minimise
issues.

8. Be web safe

Nobody wants to read green text on a bright red

background. Avoid bad colour combinations.

9. Clashing colours

Make sure you consider brand guidelines and use

matching or complementary colours throughout your
website.

10. Branding

Few more:
11. Take extra care when using light text
on dark backgrounds
12. Use gradients and shadows.
13. Consider some colour coding
14. Try a little opacity.
15. Use richer colours for prominent items.

16.
17.
18.
19.
20.

Avoid fluorescent craziness.

Remember the role of images.
Going global?
Demographics.
Does it fit?

Few Examples

Few Examples

ADMEC Multimedia Institute

www.admecindia.co.in
Call us: +91-9811-8181-22, +91-9911-7823-50