Design for Programmers

Transcript

1. Design for programmers TartanHacks 2012 presented by Chris Lee chrsl.net
2. Why learn design? flickr.com/photos/striatic/2144933705/
3. Why learn design? Communicate with designers! Pretty up your personal projects! flickr.com/photos/striatic/2144933705/ Wear multiple hats! Win some hackathons!
4. vision audience feature list sketches & mockups what’s the idea?
5. Layout Hierarchy Distinctions in size, color, etc. make content easier to scan Grid Divide content area into numerically spaced columns; align things 960.gs Fluid vs. fixed Let content stretch to the browser width or make it static? Responsive Does your app cater to phones? Tablets? Huge monitors?
6. Serif Sans-serif vs Consider personality & readability Pick an appropriate size & line height (16px/1.4 is my fave) Typography Typography Typography Typography Typography Typography Typography
7. Google Web Fonts google.com/webfonts Lost Type Co-op losttype.com CSS3 @font-face opens the web to creative type. League of Movable Type theleagueofmoveabletype.com Typekit ($) typekit.com Typography Typography Typography Typography Typography Typography Typography
8. Color Saturation & brightness Dark and dull colors are serious business Bright and intense grabs attentions Take advantage for link and button states, etc. Contrast Can you read this? How about this? Some help: 0to255 0to255.com Kuler kuler.adobe.com Colors (Mac) mattpatenaude.com
9. Style Texture match the beauty of the natural world wood, watercolor, paper, dust subtlepatterns.com Minimalism focus on the content and function Illustration artists have a place on the web!
10. space-traveler-theme.tumblr.com
11. skillshare.com
12. bellstrike.com
13. mindsnacks.com
14. Usability Feedback What happens when the user takes an action? Affordance Do clickable things look clickable? Consistency Error prevention & handling
15. designing in code Rapid changes Easy alignment Suits the technical mind Mockups ➠ prototypes CSS3 is super versatile css3please.com ...but not always the right answer
16. Get inspired LittleSnapper realmacsoftware.com/ littlesnapper Your own catalog of inspiring websites and other artwork ($40) Dribbble dribbble.com Designer galleries in 400x300 pixel bites
17. Okay, so I only actually have 24 hours... Premium Pixels premiumpixels.com Bootstrap, from Twitter twitter.github.com/bootstrap
18. Experiment and have fun!
19. Want to learn more? CS isn’t the only good academic program at CMU... design, hcii { } .cmu.edu 51-261 Visual design, color, typography, layout 05-421 Interaction design (how things work) 05-410 User-centered design & usability testing
20. Thanks! TartanHacks 2012 presented by Chris Lee chrsl.net