5 Things Every Designer Should be Doing Right Now
3 likes600 views
The document discusses five things that every web designer should be doing: 1. Create websites using a grid system for layout and organization. 2. Make mistakes early by creating wireframes and prototypes to test designs before development. 3. Use frameworks to simplify development and create responsive websites. 4. Use web fonts for responsive typography and icons. 5. Include imagery responsively to convey information visually.
5 Things Every Designer Should be Doing Right Now
- 1. RIGHT NOW THINGS EVERY WEB DESIGNER SHOULD BE DOING @PaulTrani 5 T
- 2. THINGS EVERY WEB DESIGNER SHOULD BE DOING5 @PaulTrani2 FOLLOW ME: @PAULTRANI Sr. Creative Cloud Evangelist, Adobe SLIDES: #FITCtoronto
- 3. THINGS EVERY WEB DESIGNER SHOULD BE DOING5 @PaulTrani3 DIFFERENT TYPES OF DESIGNERS 3 The Artist Designer CSS DesignerUI/UX The Deseloper
- 4. THINGS EVERY WEB DESIGNER SHOULD BE DOING5 @PaulTrani4 GETS SH*T DONE THE RIGHT WAY TO DESIGN IS THE ONE THAT
- 5. THINGS EVERY WEB DESIGNER SHOULD BE DOING5 @PaulTrani “DON’T TRY TO BE ORIGINAL 5 JUST TRY TO BE GOOD. PAUL RAND ”
- 6. THINGS EVERY WEB DESIGNER SHOULD BE DOING5 @PaulTrani6 BE GOOD HOW TO …
- 7. THINGS EVERY WEB DESIGNER SHOULD BE DOING5 @PaulTrani7 THE 5 THINGS T
- 8. THINGS EVERY WEB DESIGNER SHOULD BE DOING5 @PaulTrani8 (RESPONSIVE DESIGN)1CREATE USING A GRID
- 9. THINGS EVERY WEB DESIGNER SHOULD BE DOING5 @PaulTrani9 “GRIDS ORGANIZE CONTENT.” - CAPTAIN OBVIOUS USE A GRID
- 10. THINGS EVERY WEB DESIGNER SHOULD BE DOING5 @PaulTrani FOUNDATION OF DESIGN 10 Design as we know it was born partly in response to the Industrial Revolution. English Illustrated Magazine, 1884 shows designs were suddenly competing for attention. USE A GRID
- 11. THINGS EVERY WEB DESIGNER SHOULD BE DOING5 @PaulTrani FOUNDATION OF DESIGN 11 Design as we know it was born partly in response to the Industrial Revolution. English Illustrated Magazine, 1884 shows designs were suddenly competing for attention. USE A GRID
- 12. THINGS EVERY WEB DESIGNER SHOULD BE DOING5 @PaulTrani Responsiv e Grid System Unsemant ic Golden Grid System 1200 Grid System 960 Grid System Photosho p GRID-BASED DESIGN 12 USE A GRID Wirify
- 13. THINGS EVERY WEB DESIGNER SHOULD BE DOING5 @PaulTrani13 USE A GRID GOLDEN RATIO 1 x 1.618
- 14. THINGS EVERY WEB DESIGNER SHOULD BE DOING5 @PaulTrani Responsiv e Grid System Unsemant ic Golden Grid System 1200 Grid System 960 Grid System Photosho p GOLDEN RATIO 14 USE A GRID 1 x 1.618
- 15. THINGS EVERY WEB DESIGNER SHOULD BE DOING5 @PaulTrani GRID SYSTEMS 15 Photoshop Unsemantic Golden Grid System 1200 Grid System 960 Grid System Responsive Grid System USE A GRID
- 16. THINGS EVERY WEB DESIGNER SHOULD BE DOING5 @PaulTrani16 TRY TO BE GRID NOT BORING USE A GRID
- 17. THINGS EVERY WEB DESIGNER SHOULD BE DOING5 @PaulTrani TRY TO BE GRID NOT BORING 17 USE A GRID
- 18. THINGS EVERY WEB DESIGNER SHOULD BE DOING5 @PaulTrani DESIGNING WITH A GRID 18 USE A GRID LAYOUT GUIDES SMART GUIDES LINKED ASSETS
- 19. THINGS EVERY WEB DESIGNER SHOULD BE DOING5 @PaulTrani19 (WIREFRAME/PROTOTYPE)2MAKE MESTAKES EARLY
- 20. THINGS EVERY WEB DESIGNER SHOULD BE DOING5 @PaulTrani20 Low-fidelity Wireframe High-fidelity Prototype WIREFRAME/PROTOTYPE
- 21. THINGS EVERY WEB DESIGNER SHOULD BE DOING5 @PaulTrani ChangesMade 0 6 12 18 24 30 36 42 48 54 60 66 72 78 84 90 96 Web Design With a Wireframe 21 WIREFRAME/PROTOTYPE Minimal Changes
- 22. THINGS EVERY WEB DESIGNER SHOULD BE DOING5 @PaulTrani Without a Wireframe 22 ChangesMade 0 6 12 18 24 30 36 42 48 54 60 66 72 78 84 90 96 Web Design WIREFRAME/PROTOTYPE
- 23. THINGS EVERY WEB DESIGNER SHOULD BE DOING5 @PaulTrani ChangesMade 0 6 12 18 24 30 36 42 48 54 60 66 72 78 84 90 96 Web Design Without a Wireframe 23 Buttload of Changes WIREFRAME/PROTOTYPE “I didn’t realize our product line was this confusing.” “We have too many options in our navigation: our key pages are getting lost.” “Our call to action is weak.” “Our Contact form takes too long to fill out.” “We’re talking too much about ourselves and not enough about our customer.” “Our most important product photos are below the fold: nobody’s going to see them.” “We really don’t know what we’re doing.”
- 24. THINGS EVERY WEB DESIGNER SHOULD BE DOING5 @PaulTrani24 Low-fidelity Wireframe High-fidelity Prototype WIREFRAME/PROTOTYPE
- 25. THINGS EVERY WEB DESIGNER SHOULD BE DOING5 @PaulTrani25 Low-fidelity Wireframe High-fidelity Prototype WIREFRAME/PROTOTYPE http://www.axure http://muse.adobe.comAdobe Comp CC https://marvelapp.comhttp://www.invisionapp.com
- 26. THINGS EVERY WEB DESIGNER SHOULD BE DOING5 @PaulTrani26 (AND SPEND MORE TIME OUTSIDE)3USE A FRAMEWORK
- 27. THINGS EVERY WEB DESIGNER SHOULD BE DOING5 @PaulTrani27 USE A FRAMEWORK Google Web Starter Kit Zurb Foundation v5+ UIkit Semantic UI Gumby FrameworkBootstrap
- 28. THINGS EVERY WEB DESIGNER SHOULD BE DOING5 @PaulTrani28 EVEN FOR ICONS4USE WEB FONTS T
- 29. THINGS EVERY WEB DESIGNER SHOULD BE DOING5 @PaulTrani TYPOGRAPHY 29 CONVEY INFORMATION IN WRITING HAS ONE PLAIN DUTY BEFORE IT AND THAT’S TO ” “ EMIL RUDER WEB FONTST
- 30. THINGS EVERY WEB DESIGNER SHOULD BE DOING5 @PaulTrani30 WEB FONTST (roll your own) Typekit SkyFonts DESKTOP USE WEB FONTS HOSTED SERVICES Typekit Google Fonts Font Squirrel
- 31. THINGS EVERY WEB DESIGNER SHOULD BE DOING5 @PaulTrani31 WEB FONTS WEB FONTST
- 32. THINGS EVERY WEB DESIGNER SHOULD BE DOING5 @PaulTrani RESPONSIVE TYPOGRAPHY 32 MEANS LEGIBILITY EVERYWHERE WEB FONTST
- 33. THINGS EVERY WEB DESIGNER SHOULD BE DOING5 @PaulTrani USE FONTS 33 FOR IC NS WEB FONTST
- 34. THINGS EVERY WEB DESIGNER SHOULD BE DOING5 @PaulTrani34 ICON FONTS WEB FONTST FONTAWESOME ICOMOON scalable vector icons that can instantly be customized
- 35. THINGS EVERY WEB DESIGNER SHOULD BE DOING5 @PaulTrani35 RESPONSIVELY5USE IMAGERY
- 36. THINGS EVERY WEB DESIGNER SHOULD BE DOING5 @PaulTrani USE IMAGERY 36 WITH VISUAL INTEREST TO CONVEY INFORMATION IMAGERY
- 37. THINGS EVERY WEB DESIGNER SHOULD BE DOING5 @PaulTrani RASTER/BITMAP: GIF, JPG, PNG, SVG VECTOR: SVG, ICON FONTS, HTML CANVAS 37 IMAGERY CREATING IMAGERY SKETCH PIXELMATOR GIMPPHOTOSHOPILLUSTRATOR
- 38. THINGS EVERY WEB DESIGNER SHOULD BE DOING5 @PaulTrani38 IMAGERY CREATING IMAGERY SKETCH PIXELMATOR GIMPPHOTOSHOPILLUSTRATOR
- 39. THINGS EVERY WEB DESIGNER SHOULD BE DOING5 @PaulTrani39 IMAGERY CREATING IMAGERY PHOTOSHOPILLUSTRATOR ALIGN TO PIXEL GRID SAVE AS SVG CSS PROPERTIES EXTRACT ASSETS EXTRACT IN BROWSER COPY CSS MARKET
- 40. THINGS EVERY WEB DESIGNER SHOULD BE DOING5 @PaulTrani40 IMAGERY ANIMATED SVG SNAP.SVG
- 41. AND NOW…
- 42. PLEASE STOP THINGS EVERY WEB DESIGNER SHOULDN’T BE DOING5
- 44. THINGS EVERY WEB DESIGNER SHOULD BE DOING5 @PaulTrani44 THANK YOU! FOLLOW ME: @PAULTRANI Sr. Creative Cloud Evangelist, Adobe SLIDES: #FITCtoronto