Typography and Colors for GUI Designers

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

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

Typography and Colors for GUI
Designers
Typography and Colors are most important
elements to be considered if you are look...

It’s no great mystery that truly great user interfaces
are the ones that are engineered to stay out of the
way.
‘Staying o...

1. Know your user
When getting started on a new interface, make
sure to remember these fundamentals:
Your user’s goals are...

2. Pay attention to patterns
Users spend the majority of their time on interfaces
other than your own (Facebook, MySpace, ...

3. Stay consistent
Your users need consistency. They need to know
that once they learn to do something, they will be
able ...

4. Use visual hierarchy
Design your interface in a way that allows the user
to focus on what is most important. The size, ...

5. Provide feedback
Your interface should at all times speak to your
user, when his/her actions are both right and
wrong o...

6. Be forgiving
No matter how clear your design is, people will make
mistakes. Your UI should allow for and tolerate user ...

7. Empower your user
Once a user has become experienced with your interface,
reward him/her and take off the training whee...

8. Speak their language
All interfaces require some level of copywriting. Keep
things conversational, not sensational. Pro...

9. Keep it simple
The best interface designs are invisible. They do not
contain UI-bling or unnecessary elements. Instead,...

10. Keep moving forward
The design that you created is not the world's
best design you must always accept it. So
always ke...

6 Ways to
Improve Your Web
Typography

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

Typographic Scale
To create an effective typographic scale, the best method I
have found is to use the unit of size measur...

Vertical Rhythm
The vertical rhythm of line spacing that provides the
optimal spacing for the eye to follow. To create thi...

Below is a standard vertical rhythm that I use on many of
my websites built on the 960 grid system. To achieve
vertical rh...

2. Design in the Browser
As most designers and developers know, websites render
differently in different browsers. This is...

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

Make the @font-face Declaration(s)
@font-face {
font-family: "Anivers";
src: url("Anivers.eot");
}
@font-face {
font-famil...

4. Find Inspiration and Never Stop
Learning
Typography on the web is in its infancy when compared to
typography in print, ...

20 Colour Tips for
Web Pros

1. Contrast
Background colour should be a single wash and have
plenty of contrast with the text. Black - or dark grey – te...

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

3. Links
I firmly believe that links should be coloured blue, largely
because the web’s most popular websites typically us...

4. Clicked links
The vast majority of websites change the colour of a visited
link to help users navigate. So should you. ...

5. Limit your colour choices
The consensus opinion with regards to colour and web
design seems to be one of ‘the fewer the...

6. Shades
Many websites use a blend of neutral colours and a range
of shades of their main colour choice/s. This is easier...

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

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

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

Few more:
11. Take extra care when using light text
on dark backgrounds
12. Use gradients and shadows.
13. Consider some c...

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

Few Examples

Few Examples

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

Share Slideshare

LinkedIn
Facebook
Twitter

Embed

Size (px)

Show related Slideshows at end

WordPress Shortcode

Link

Share
Email

Typography Anatomy By ADMEC Multime... by Ravi Bhadauria 2564 views
Tips and Tricks how to use Typography by Ravi Bhadauria 7633 views
Types of Layouts by ADMEC Multimedi... by Ravi Bhadauria 99396 views
Learn more About Typography Art Tec... by Ravi Bhadauria 1914 views
Responsive web design - tips & tricks by Ravi Bhadauria 4889 views
Differentiate illustrator n coreldraw by Ravi Bhadauria 52816 views

View on Slideshare

1 of 44 Ad

View on Slideshare

1 of 44 Ad