Web-based Mockups Represent Designs Effectively in the Browser
•
37 likes•11,540 views
Slides for my talk at FrontendConf (CH) in Zürich.
Recommended
More Related Content
Viewers also liked
Viewers also liked (17)
Similar to Web-based Mockups Represent Designs Effectively in the Browser
Similar to Web-based Mockups Represent Designs Effectively in the Browser (20)
More from Stephen Hay
More from Stephen Hay (20)
Recently uploaded
Recently uploaded (20)
Web-based Mockups Represent Designs Effectively in the Browser
- 1. Revenge THE NEW PHOTOSHOP, PART 2 Web STEPHEN HAY FRONTENDCONF 2013 ZURICH of the the
- 2. PSD
- 5. PSDON A SMALL SCREEN
- 6. web-basedmockup ON A SMALL SCREEN
- 8. aresponsivedesignworkflow 1. Content inventory 2. Content reference wireframes 3. Designing in text 4. Linear design 5. Breakpoint graphing 6. Designing for breakpoints 7. Web-based mockup 8. Presenting as screenshots > revise 9. Presenting in browsers > revise 10. Design guidelines / style guide
- 10. Image-basedmockupsare SORRY TO BE THE BEARER OF BAD NEWS.
- 15. DESIGNER MEDIUM
- 16. DESIGNER MEDIUM fashion furniture/interior architecture print web I MADE THIS UP. BUT STILL.
- 19. er…
- 21. Managingmorethan200PSDfilesisnot onlytedious,butitcanproduceminor discrepanciesbetweencompsofthe samepageatdifferentbreakpoints. – appendTo ON THE TIME.COM REDESIGN http://appendto.com/case-study/responsive-design-time-com
- 22. Managingmorethan200PSDfilesisnot onlytedious,butitcanproduceminor discrepanciesbetweencompsofthe samepageatdifferentbreakpoints. – appendTo ON THE TIME.COM REDESIGN x< 200 THAT’S WHY
- 27. Designrevisionscanbea nightmare. Get rid of this Make logo this big Put some LoremIpsum here andwe’ll tackle it in afuture iteration. Search bar looks great!
- 28. Designrevisionscanbea nightmare. Get rid of this Make logo this big Put some LoremIpsum here andwe’ll tackle it in afuture iteration. Search bar looks great! GOOD LUCK WITH THAT ON 3 MOCKUPS PER SCREEN
- 29. experimentation
- 31. versioncontrol.
- 32. versioncontrol.
- 34. sketch. first,
- 35. sketch. first,
- 36. sketch. first, SKETCHING IS WHERE DESIGN HAPPENS SKETCHING IS VISUAL THINKING IT’S THE HARD PART. THE REST IS EXECUTION
- 38. getanduse representativecontent. WITHOUT IT, YOU’RE DESIGNING BLIND DESIGN WITHOUT CONTENT IS EITHER ART OR DECORATION AND I’M PRETTY SURE IT’S NOT ART
- 43. Youhavetoknowwhatyourcontentis— orisgoingtobe—inordertodealwithit appropriately. WHAT IS THE STRUCTURE OF THE CONTENT?
- 44. thesethingscanhelpwithspeed LAYOUT/GRID HELPERS STATIC SITE GENERATORS CSS PREPROCESSORS
- 46. Optionally,yourmockupcouldbecome thebaseforfront-endproduction. THOUGH IT DOESN’T NEED TO BE. RELAX.
- 47. staticsitegenerators FOR EXAMPLE: JEKYLL, HYDE, NANOC, DEXY THESE PROVIDE WAYS OF SAYING: setup mymockup serve mymockup
- 49. Jekyll FOR EXAMPLE ~ $ gem install jekyll ~ $ jekyll new mymockup ~ $ cd mymockup ~/mymockup $ jekyll serve AVAILABLE AT LOCALHOST:4000
- 51. Dexy FOR EXAMPLE ~ $ dexy gen --t [template] --d [directory] ~ $ cd mymockup ~/mymockup $ dexy ~/mymockup $ dexy serve AVAILABLE AT LOCALHOST:8085
- 53. Hi,mom.
- 54. layout/gridhelpers FOR EXAMPLE: SUSY, CSS, YOUR OWN THESE PROVIDE WAYS OF QUICKLY POSITIONING ELEMENTS TO AN UNDERLYING GRID
- 57. CSSpreprocessors FOR EXAMPLE: SASS, LESS PROVIDE VARIABLES, MIXINS, & MUCH MORE
- 61. presentthem
- 62. presentthem TO CLIENTS, DEVELOPERS, BASICALLY ANYONE
- 63. automatedscreenshots VISUAL ARCHIVE OF THE ITERATION PROCESS ~ $ casperjs screenshots.js
- 70. usethemasabaseforastyleguide STYLE GUIDES ARE THE NEW PHOTOSHOP slideshare.net/stephenhay/style-guides-are-the-new-photoshop-fronteers-2012
- 71. Tocreateweb-basedmockups,youwill needsomeknowledgeofthemediumfor whichyouaredesigning. WEB TECH IS SIMPLY ANOTHER TOOLSET. NO NEED TO BE AFRAID.