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