Typography and Colors are most important elements to be considered if you are looking for a successful design for you website or application.

1. Presentation by:
ADMEC MULTIMEDIA INSTITUTE
Typography and Colors for
GUI Designers
www.admecindia.co.in

2. Typography and Colors for GUI
Designers
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.

3. It’s 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.

4. 1. Know your user
When getting started on a new interface, make
sure to remember these fundamentals:
Your user’s goals are your goals, so learn them.
Restate them, repeat them. Then, learn about your
user’s skills and experience, and what they need.
Find out what interfaces they like and sit down and
watch how they use them.

5. 2. Pay attention to patterns
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.

6. 3. Stay consistent
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.

7. 4. Use visual hierarchy
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.

8. 5. Provide feedback
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.

9. 6. Be forgiving
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.

10. 7. Empower your user
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.

11. 8. Speak their language
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 won’t
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. ”

12. 9. Keep it simple
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 it’s simpler
to create complex interfaces because
it’s so complex to simplify them.”

13. 10. Keep moving forward
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.

14. 6 Ways to
Improve Your Web
Typography

15. 1. Understand the Basics of
Typography
The Basics of Typography are important for all designers,
whether or not they are designing for the web.

16. Typographic Scale
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;
}

17. Vertical Rhythm
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).

19. 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; }

20. 2. Design in the Browser
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:

21. 3. Use CSS3's @font-face Rule for
Web Font Embedding
One of the most exciting features of CSS3 is the @font-face
rule.

22. Make the @font-face Declaration(s)
@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;
}

23. 4. Find Inspiration and Never Stop
Learning
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.

24. 20 Colour Tips for
Web Pros

25. 1. Contrast
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.

26. 2. Avoid patterns behind text
This is the main problem with many of those user-
customised MySpace profiles.

27. 3. Links
I firmly believe that links should be coloured blue, largely
because the web’s most popular websites typically use
blue (Google, Yahoo, BBC, New York Times, eBay, etc).
Why reinvent the wheel?

28. 4. Clicked 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.

29. 5. Limit your colour choices
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.

30. 6. Shades
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.
I’m currently a big fan of grey. Note that some people
struggle to pick out differing shades of blue.

31. 7. Add 30% more white space
By spacing out content units and blocks of colour you’ll
help guide the eye to key areas. I’d wager that lightly-
coloured 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…

32. 8. Be ‘web safe’
Macs and PCs both render colours differently, as do
browsers. You should use ‘web smart’ colours to minimise
issues.

33. 9. Clashing colours
Nobody wants to read green text on a bright red
background. Avoid bad colour combinations.

34. 10. Branding
Make sure you consider brand guidelines and use
matching or complementary colours throughout your
website.

35. 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.

36. 16. Avoid fluorescent craziness.
17. Remember the role of images.
18. Going global?
19. Demographics.
20. Does it fit?

37. Few Examples

38. Few Examples

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