Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Typography and Colors for GUI Designers


Published on

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

Published in: Technology
  • Be the first to comment

Typography and Colors for GUI Designers

  1. 1. Presentation by: ADMEC MULTIMEDIA INSTITUTE Typography and Colors for GUI Designers
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 14. 6 Ways to Improve Your Web Typography
  15. 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. 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. 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).
  18. 18. 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; }
  19. 19. 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:
  20. 20. 3. Use CSS3's @font-face Rule for Web Font Embedding One of the most exciting features of CSS3 is the @font-face rule.
  21. 21. 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; }
  22. 22. 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.
  23. 23. 20 Colour Tips for Web Pros
  24. 24. 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.
  25. 25. 2. Avoid patterns behind text This is the main problem with many of those user- customised MySpace profiles.
  26. 26. 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?
  27. 27. 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.
  28. 28. 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.
  29. 29. 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.
  30. 30. 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…
  31. 31. 8. Be ‘web safe’ Macs and PCs both render colours differently, as do browsers. You should use ‘web smart’ colours to minimise issues.
  32. 32. 9. Clashing colours Nobody wants to read green text on a bright red background. Avoid bad colour combinations.
  33. 33. 10. Branding Make sure you consider brand guidelines and use matching or complementary colours throughout your website.
  34. 34. 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.
  35. 35. 16. Avoid fluorescent craziness. 17. Remember the role of images. 18. Going global? 19. Demographics. 20. Does it fit?
  36. 36. Few Examples
  37. 37. Few Examples
  38. 38. ADMEC Multimedia Institute Call us: +91-9811-8181-22, +91-9911-7823-50