Typography and Colors for GUI Designers

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

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

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. 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. 1. Know your user 1. Know your user

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

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

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

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

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

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

11. All interfaces require some level of copywriting. Keep things conversational, not sensational 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. Keep “If you think every pixel, every icon, every typeface matters, then you also need to believe every letter matters. ” 8. Speak their language 8. Speak their language

12. 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? really need this?”. Are you adding things because you like or want them? “Does the user “A modern paradox is that it’s simpler to create complex interfaces because it’s so complex to simplify them.” 9. Keep it simple 9. Keep it simple

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

14. 6 Ways to 6 Ways to Improve Your Web Improve Your Web Typography Typography

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

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

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

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

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

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

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

24. 20 Colour Tips for Web Pros

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

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

27. 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? 3. Links 3. Links

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

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

30. 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. 6. Shades 6. Shades

31. 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… 7. Add 30% more white space 7. Add 30% more white space

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

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

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

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 Few Examples

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