Design for Web

Transcript

2. DESIGN FOR WEB Tools & Tips ×
3. 1. “Of course” 2. Don’t make me click 3. Let me accomplish DESIGN FOR INSTANT
4. Photoshop is slow. PSD WIREFRAMES DON’T
5. Move fast with a pencil. SKETCH WIREFRAMES DO
6. Sketch Wireframes
7. Too precise. MOCKUPS DON’T
8. Between moodboards and mockups. STYLE TILES DO
9. Style Tiles
10. There will be changes. PIXEL PERFECTION DON’T
11. Inventory of elements and patterns. STYLEGUIDES DO
12. Styleguides
13. Styleguide
14. Zoom out. LAYOUT DO
15. Layout
16. Design for screen size. RESPONSIVE DESIGN DON’T
17. Design for content. RESPONSIVE DESIGN DO
18. Responsive Design
19. Constraints help prioritize. MOBILE FIRST DO
20. Mobile First
21. Learn basic HTML & CSS. CODE DO
22. CSS Tricks Codecademy HTML5 & CSS for Web Designers - Jon Ducket Code
23. Square & Bellroy CASE STUDIES DO
24. Square
25. Bellroy
26. There’s no leather in web. SKEUOMORPHISM DON’T
27. Skeuomorphism
28. Simplify. FLAT DESIGN DO
29. Flat Design
30. Ideate, design, test. COLLABORATE DO
31. http://styletil.es/ https://github.com/styleguide/ css/11.0 http://www.abookapart.com/ products/mobile-first https://squareup.com/ http://bellroy.com/ Links Links
32. https://speakerdeck.com/tractical @tractical