1 / 34

Design 101: Design for Developers

Design 101: Design for Developers. Color, Layout & Typography. Contact Information: Sandy Fougerousse UX Design Specialist My blog – http://blog.aridae.com Email – sandraf@magenic.com Twitter – @ aridae. In an ideal world designers design and developers develop…

miracle
Download Presentation

Design 101: Design for Developers

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Design 101: Design for Developers Color, Layout & Typography

  2. Contact Information: Sandy Fougerousse UX Design Specialist • My blog – http://blog.aridae.com • Email – sandraf@magenic.com • Twitter – @aridae

  3. In an ideal world designers design and developers develop… However, we don't live in an ideal world and from time to time we have to swap roles. 

  4. The Goal: To give you tips and tricks to make your site or application more effective at what it does AND make it look better at the same time

  5. Purpose of Design …Is to Emphasize What’s Important. So how do we do that? • Color • Typography • Layout

  6. Emphasis The 5 Second Test Classic: Show someone who hasn’t been staring at the application to look for 5 seconds and then tell you what they remember about it. Compare: Show the same person 2 different versions for 5 seconds each and ask which they preferred. More Info: http://fivesecondtest.com/

  7. Emphasis - what’s important?

  8. Emphasis: The 5 Second Test So…. What do you remember?

  9. Emphasis - what’s important?

  10. Emphasis: The 5 Second Test, take 2 So…. What do you remember?

  11. Emphasis - what’s important?

  12. Layout Vs.

  13. Layout • Alignment – Everything on a page should be lined up with something else, creating a clean look. • Proximity – Things that are near each other will be assumed to be related • “Negative space” – A term for space with nothing in it. Important to include to give a feeling of “breathing room”

  14. Layout

  15. Layout

  16. Layout: Alignment

  17. Layout: Proximity

  18. Layout: White Space

  19. Layout: A note about forms • Options on layout of titles vs. input boxes • And a note on Action Buttons Source: http://www.lukew.com/resources/articles/web_forms.html

  20. Easy Color Theory

  21. Easy Color Theory Color Wheel: Divining Color Palettes from a single color: Monochromatic Analogous Triadic Complementary Split-Complementary

  22. Monochromatic • Colors are derived (in painting terms) by adding white or black to the original color to achieve tints and shades. • Difficulty: • Contrast:

  23. Analogous • This set of colors comes from adjacent colors on the color wheel. • Difficulty: • Contrast:

  24. Triadic • Colors are picked as evenly spaced locations from one another around the wheel. • Difficulty: • Contrast:

  25. Complementary • The new color is the one directly across from the original color on the color wheel. • Difficulty: • Contrast:

  26. Split Complementary • Created similarly to a simple Complementary set, but instead of taking a single color from the opposite side, we take 2 colors from either side of the true complement. • Difficulty: • Contrast:

  27. Demo tool at http://kuler.adobe.com • See Also: http://www.colourlovers.com/ • http://expression.microsoft.com/en-us/dd421877.aspx

  28. Easy Color Theory: Other Tips • Contrast = interest • Keep it simple toAvoid the “Skittles Effect” • Pay attention to Balance • Use Color Tools • Don’t be afraid toexperiment!

  29. Typography The key to good typography is constraint and consistency.

  30. Typography: Font Types Sans-Serif Fonts are used fortitles and most on-screen text • Arial • Calibri • Verdana Serif Fonts are used for body text for readability • Times New Roman • Garamond • Palatino • Forget these exist… please: • Curlz • Comic Sans • Wingdings • Fancy fonts are things like Scriptina and Klingon… and should not be used without a good reason

  31. Typography: Contrast “If things on the screen are not the same, make them very different” You can create contrast in text by using: • Size • Color • Boldness and itallics Or any combination of these

  32. Typography The point of text is to be read – if you cant read it, change something • Be conscious the age of your audience • Limit the Number of fonts you use to 3 or less • DON’T CAPITALIZE EVERYTHING – Even in warnings • Cheat – see if there’s a style guide already in place with font decisions pre-made

  33. Conclusions Major Points to Remember: • Look at your project critically and determine a priority, then set it up visually by using different levels of emphasis • Color has a method and a theory, its not magic • If your project is for a business, ask for a style guide. It should contain fonts & color information

  34. Conclusion: Materials & Contact Info Contact Information: Sandy Fougerousse UX Design Specialist • My blog – http://blog.aridae.com • Email – sandraf@magenic.com • Twitter – @aridae Links: • Color Tools – http://kuler.adobe.com and http://www.colourlovers.com • Also check my blog for downloading slides

More Related