Submit Search
Upload
The New Photoshop, Part 2: The Revenge of the Web
•
5 likes
•
3,598 views
Stephen Hay
Follow
My talk for Mobilism 2013, (May 16, 2013). The sequel to my talk at Fronteers 2012
Read less
Read more
Technology
Art & Photos
Report
Share
Report
Share
1 of 59
Recommended
Dont try these at home
Dont try these at home
Yan Cui
MCAD 2009 - Future of Advertising: session #05 recap (Feb 23)
MCAD 2009 - Future of Advertising: session #05 recap (Feb 23)
Tim Brunelle
Nubia martinez actividad1 mapa_c
Nubia martinez actividad1 mapa_c
NubiaMartinezCordoba
Trabajo final de procesos 1 Sergio Figueroa
Trabajo final de procesos 1 Sergio Figueroa
J G
ITAM Tools Day, November 2015 - Concorde
ITAM Tools Day, November 2015 - Concorde
Martin Thompson
Office 365 Amazing Productivity Tips
Office 365 Amazing Productivity Tips
Dennis Bottjer
Cal 40 s 3rd november 2010
Cal 40 s 3rd november 2010
Garden City
FINANCIAL MANAGEMENT ppt
FINANCIAL MANAGEMENT ppt
Jagruti Godambe
Recommended
Dont try these at home
Dont try these at home
Yan Cui
MCAD 2009 - Future of Advertising: session #05 recap (Feb 23)
MCAD 2009 - Future of Advertising: session #05 recap (Feb 23)
Tim Brunelle
Nubia martinez actividad1 mapa_c
Nubia martinez actividad1 mapa_c
NubiaMartinezCordoba
Trabajo final de procesos 1 Sergio Figueroa
Trabajo final de procesos 1 Sergio Figueroa
J G
ITAM Tools Day, November 2015 - Concorde
ITAM Tools Day, November 2015 - Concorde
Martin Thompson
Office 365 Amazing Productivity Tips
Office 365 Amazing Productivity Tips
Dennis Bottjer
Cal 40 s 3rd november 2010
Cal 40 s 3rd november 2010
Garden City
FINANCIAL MANAGEMENT ppt
FINANCIAL MANAGEMENT ppt
Jagruti Godambe
gold monetization
gold monetization
Arpit Daga
The Need For Transparency.
The Need For Transparency.
farah ahmed
Share market basics
Share market basics
Pradeep Behera
Tulsa Tech Fest - SharePoint 2013 Lessons Learned
Tulsa Tech Fest - SharePoint 2013 Lessons Learned
April Dunnam
Form 8909 Energy Efficient Appliance Credit
Form 8909 Energy Efficient Appliance Credit
taxman taxman
Uu nomor 3_tahun_2002_tentang_pertahanan_negara
Uu nomor 3_tahun_2002_tentang_pertahanan_negara
Rizki Fitrianto
Company profile pt. reka bumi consulting
Company profile pt. reka bumi consulting
asep samsudin
DFP FUNDAMENTALS FOR TRAFFICKERS
DFP FUNDAMENTALS FOR TRAFFICKERS
Surya Reddy
Ser profesor evelyn toro
Ser profesor evelyn toro
evelyntorofisica
Cephalometric landmarks
Cephalometric landmarks
Indian dental academy
Radiation induced bystander effect
Radiation induced bystander effect
masoudnajafi67
SQL Server Query Optimization, Execution and Debugging Query Performance
SQL Server Query Optimization, Execution and Debugging Query Performance
Vinod Kumar
Systematic withdrawal plan
Systematic withdrawal plan
Saxbee Consultants
Scrotal swellings 1
Scrotal swellings 1
Selvaraj Balasubramani
BMC_VIEWPOINT_II_Focus on CMDB
BMC_VIEWPOINT_II_Focus on CMDB
Javier Leyva Novoa
Arh2050 sp2017 syllabus
Arh2050 sp2017 syllabus
ProfWillAdams
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Brad Frost
Webmaker Workshop: Appmaker in 60mins
Webmaker Workshop: Appmaker in 60mins
Bob Chao
Responsive Design
Responsive Design
Sara Cannon
Responsivedesign slides2-120507173812-phpapp01
Responsivedesign slides2-120507173812-phpapp01
Innovation Excellence
Travailler dans le présent - Chris Heilmann - Paris Web 2008
Travailler dans le présent - Chris Heilmann - Paris Web 2008
Association Paris-Web
Working In The Now - Paris Web
Working In The Now - Paris Web
Christian Heilmann
More Related Content
Viewers also liked
gold monetization
gold monetization
Arpit Daga
The Need For Transparency.
The Need For Transparency.
farah ahmed
Share market basics
Share market basics
Pradeep Behera
Tulsa Tech Fest - SharePoint 2013 Lessons Learned
Tulsa Tech Fest - SharePoint 2013 Lessons Learned
April Dunnam
Form 8909 Energy Efficient Appliance Credit
Form 8909 Energy Efficient Appliance Credit
taxman taxman
Uu nomor 3_tahun_2002_tentang_pertahanan_negara
Uu nomor 3_tahun_2002_tentang_pertahanan_negara
Rizki Fitrianto
Company profile pt. reka bumi consulting
Company profile pt. reka bumi consulting
asep samsudin
DFP FUNDAMENTALS FOR TRAFFICKERS
DFP FUNDAMENTALS FOR TRAFFICKERS
Surya Reddy
Ser profesor evelyn toro
Ser profesor evelyn toro
evelyntorofisica
Cephalometric landmarks
Cephalometric landmarks
Indian dental academy
Radiation induced bystander effect
Radiation induced bystander effect
masoudnajafi67
SQL Server Query Optimization, Execution and Debugging Query Performance
SQL Server Query Optimization, Execution and Debugging Query Performance
Vinod Kumar
Systematic withdrawal plan
Systematic withdrawal plan
Saxbee Consultants
Scrotal swellings 1
Scrotal swellings 1
Selvaraj Balasubramani
BMC_VIEWPOINT_II_Focus on CMDB
BMC_VIEWPOINT_II_Focus on CMDB
Javier Leyva Novoa
Arh2050 sp2017 syllabus
Arh2050 sp2017 syllabus
ProfWillAdams
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Brad Frost
Viewers also liked
(17)
gold monetization
gold monetization
The Need For Transparency.
The Need For Transparency.
Share market basics
Share market basics
Tulsa Tech Fest - SharePoint 2013 Lessons Learned
Tulsa Tech Fest - SharePoint 2013 Lessons Learned
Form 8909 Energy Efficient Appliance Credit
Form 8909 Energy Efficient Appliance Credit
Uu nomor 3_tahun_2002_tentang_pertahanan_negara
Uu nomor 3_tahun_2002_tentang_pertahanan_negara
Company profile pt. reka bumi consulting
Company profile pt. reka bumi consulting
DFP FUNDAMENTALS FOR TRAFFICKERS
DFP FUNDAMENTALS FOR TRAFFICKERS
Ser profesor evelyn toro
Ser profesor evelyn toro
Cephalometric landmarks
Cephalometric landmarks
Radiation induced bystander effect
Radiation induced bystander effect
SQL Server Query Optimization, Execution and Debugging Query Performance
SQL Server Query Optimization, Execution and Debugging Query Performance
Systematic withdrawal plan
Systematic withdrawal plan
Scrotal swellings 1
Scrotal swellings 1
BMC_VIEWPOINT_II_Focus on CMDB
BMC_VIEWPOINT_II_Focus on CMDB
Arh2050 sp2017 syllabus
Arh2050 sp2017 syllabus
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Similar to The New Photoshop, Part 2: The Revenge of the Web
Webmaker Workshop: Appmaker in 60mins
Webmaker Workshop: Appmaker in 60mins
Bob Chao
Responsive Design
Responsive Design
Sara Cannon
Responsivedesign slides2-120507173812-phpapp01
Responsivedesign slides2-120507173812-phpapp01
Innovation Excellence
Travailler dans le présent - Chris Heilmann - Paris Web 2008
Travailler dans le présent - Chris Heilmann - Paris Web 2008
Association Paris-Web
Working In The Now - Paris Web
Working In The Now - Paris Web
Christian Heilmann
Finding the optimum Horsepower for your internet project
Finding the optimum Horsepower for your internet project
Comsultia
Workshop 11: Trendy web designs & prototyping
Workshop 11: Trendy web designs & prototyping
Visual Engineering
Rapid Templating with Serve
Rapid Templating with Serve
Nathan Smith
Goodgreater
Goodgreater
Vera Kovaleva
Michael Themba Thapelo Portfolio
Michael Themba Thapelo Portfolio
Michael Themba Thapelo
Power Tools For Browser-Based Design
Power Tools For Browser-Based Design
Stephen Hay
Mobile First: Responsive Design for eCommerce | Imagine 2013 Technology | B…
Mobile First: Responsive Design for eCommerce | Imagine 2013 Technology | B…
Atwix
Coding for Designers
Coding for Designers
Milly Schmidt
How Modern Software Architecture Benefits from Patterns Found in Natural Comp...
How Modern Software Architecture Benefits from Patterns Found in Natural Comp...
Jeremiah Jones
Optimize Images for SEO WordCamp Sacramento
Optimize Images for SEO WordCamp Sacramento
Leslie Staller
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Brad Frost
Smart Marketing - EduWeb 2015, Chicago
Smart Marketing - EduWeb 2015, Chicago
Jason Mark
WordPress for mobile
WordPress for mobile
rachel_mccollin
From Concept to Completion: Tips for Designing Great Content
From Concept to Completion: Tips for Designing Great Content
Vicke Cheung
Additive Manufacturing / 3D Printing and CAD
Additive Manufacturing / 3D Printing and CAD
Yudhi Ariadi
Similar to The New Photoshop, Part 2: The Revenge of the Web
(20)
Webmaker Workshop: Appmaker in 60mins
Webmaker Workshop: Appmaker in 60mins
Responsive Design
Responsive Design
Responsivedesign slides2-120507173812-phpapp01
Responsivedesign slides2-120507173812-phpapp01
Travailler dans le présent - Chris Heilmann - Paris Web 2008
Travailler dans le présent - Chris Heilmann - Paris Web 2008
Working In The Now - Paris Web
Working In The Now - Paris Web
Finding the optimum Horsepower for your internet project
Finding the optimum Horsepower for your internet project
Workshop 11: Trendy web designs & prototyping
Workshop 11: Trendy web designs & prototyping
Rapid Templating with Serve
Rapid Templating with Serve
Goodgreater
Goodgreater
Michael Themba Thapelo Portfolio
Michael Themba Thapelo Portfolio
Power Tools For Browser-Based Design
Power Tools For Browser-Based Design
Mobile First: Responsive Design for eCommerce | Imagine 2013 Technology | B…
Mobile First: Responsive Design for eCommerce | Imagine 2013 Technology | B…
Coding for Designers
Coding for Designers
How Modern Software Architecture Benefits from Patterns Found in Natural Comp...
How Modern Software Architecture Benefits from Patterns Found in Natural Comp...
Optimize Images for SEO WordCamp Sacramento
Optimize Images for SEO WordCamp Sacramento
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Smart Marketing - EduWeb 2015, Chicago
Smart Marketing - EduWeb 2015, Chicago
WordPress for mobile
WordPress for mobile
From Concept to Completion: Tips for Designing Great Content
From Concept to Completion: Tips for Designing Great Content
Additive Manufacturing / 3D Printing and CAD
Additive Manufacturing / 3D Printing and CAD
More from Stephen Hay
From Deception to Clarity
From Deception to Clarity
Stephen Hay
The Backside of the Class (CSS Day 2015)
The Backside of the Class (CSS Day 2015)
Stephen Hay
The Art of Deception
The Art of Deception
Stephen Hay
Sculpting Text: Easing the Pain of Designing in the Browser
Sculpting Text: Easing the Pain of Designing in the Browser
Stephen Hay
UIE Virtual Seminar: Responsive Web Design Workflow
UIE Virtual Seminar: Responsive Web Design Workflow
Stephen Hay
Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)
Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)
Stephen Hay
Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)
Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)
Stephen Hay
The New Photoshop, Part 2: The Revenge of the Web (FEC13)
The New Photoshop, Part 2: The Revenge of the Web (FEC13)
Stephen Hay
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
Stephen Hay
Style Guides Are The New Photoshop (Smashing Conference 2012)
Style Guides Are The New Photoshop (Smashing Conference 2012)
Stephen Hay
Style Guides Are The New Photoshop (Fronteers 2012)
Style Guides Are The New Photoshop (Fronteers 2012)
Stephen Hay
Responsive Design Workflow: Webshaped 2012
Responsive Design Workflow: Webshaped 2012
Stephen Hay
Responsive Design Workflow: Mobilism 2012
Responsive Design Workflow: Mobilism 2012
Stephen Hay
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Stephen Hay
Go With The Flow
Go With The Flow
Stephen Hay
Fronteers Workshop: Rabid Prototyping
Fronteers Workshop: Rabid Prototyping
Stephen Hay
Meta layout: a closer look at media queries
Meta layout: a closer look at media queries
Stephen Hay
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Stephen Hay
HTML5 & Webrichtlijnen 2
HTML5 & Webrichtlijnen 2
Stephen Hay
Real-world Responsive Design
Real-world Responsive Design
Stephen Hay
More from Stephen Hay
(20)
From Deception to Clarity
From Deception to Clarity
The Backside of the Class (CSS Day 2015)
The Backside of the Class (CSS Day 2015)
The Art of Deception
The Art of Deception
Sculpting Text: Easing the Pain of Designing in the Browser
Sculpting Text: Easing the Pain of Designing in the Browser
UIE Virtual Seminar: Responsive Web Design Workflow
UIE Virtual Seminar: Responsive Web Design Workflow
Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)
Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)
Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)
Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)
The New Photoshop, Part 2: The Revenge of the Web (FEC13)
The New Photoshop, Part 2: The Revenge of the Web (FEC13)
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
Style Guides Are The New Photoshop (Smashing Conference 2012)
Style Guides Are The New Photoshop (Smashing Conference 2012)
Style Guides Are The New Photoshop (Fronteers 2012)
Style Guides Are The New Photoshop (Fronteers 2012)
Responsive Design Workflow: Webshaped 2012
Responsive Design Workflow: Webshaped 2012
Responsive Design Workflow: Mobilism 2012
Responsive Design Workflow: Mobilism 2012
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Go With The Flow
Go With The Flow
Fronteers Workshop: Rabid Prototyping
Fronteers Workshop: Rabid Prototyping
Meta layout: a closer look at media queries
Meta layout: a closer look at media queries
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
HTML5 & Webrichtlijnen 2
HTML5 & Webrichtlijnen 2
Real-world Responsive Design
Real-world Responsive Design
Recently uploaded
How to Remove Document Management Hurdles with X-Docs?
How to Remove Document Management Hurdles with X-Docs?
XfilesPro
Key Features Of Token Development (1).pptx
Key Features Of Token Development (1).pptx
LBM Solutions
Pigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping Elbows
Pigging Solutions
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
Delhi Call girls
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
Michael W. Hawkins
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Safe Software
Slack Application Development 101 Slides
Slack Application Development 101 Slides
praypatel2
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC Architecture
Pixlogix Infotech
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
shyamraj55
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
HampshireHUG
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
Rafal Los
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
Gabriella Davis
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
BookNet Canada
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
naman860154
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Katpro Technologies
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
Puma Security, LLC
SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024
Scott Keck-Warren
AI as an Interface for Commercial Buildings
AI as an Interface for Commercial Buildings
Memoori
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
soniya singh
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions
Recently uploaded
(20)
How to Remove Document Management Hurdles with X-Docs?
How to Remove Document Management Hurdles with X-Docs?
Key Features Of Token Development (1).pptx
Key Features Of Token Development (1).pptx
Pigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping Elbows
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Slack Application Development 101 Slides
Slack Application Development 101 Slides
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC Architecture
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024
AI as an Interface for Commercial Buildings
AI as an Interface for Commercial Buildings
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food Manufacturing
The New Photoshop, Part 2: The Revenge of the Web
1.
Revenge THE NEW PHOTOSHOP,
PART 2 Web STEPHEN HAY MOBILISM 2013 AMSTERDAM of the the
2.
Image-basedmockupsare
3.
Image-basedmockupsare SORRY TO BE
THE BEARER OF BAD NEWS.
4.
DESIGNER MEDIUM I MADE
THIS UP. BUT STILL.
5.
DESIGNER MEDIUM fashion furniture/interior architecture print web I MADE
THIS UP. BUT STILL.
6.
why? web-basedmockups…
7.
Managingmorethan200PSDfilesisnot onlytedious,butitcanproduceminor discrepanciesbetweencompsofthe samepageatdifferentbreakpoints. – appendTo ON
THE TIME.COM REDESIGN http://appendto.com/case-study/responsive-design-time-com
8.
Managingmorethan200PSDfilesisnot onlytedious,butitcanproduceminor discrepanciesbetweencompsofthe samepageatdifferentbreakpoints. – appendTo ON
THE TIME.COM REDESIGN x< 200 THAT’S WHY
9.
Web-basedmockupsmoreeffectively representtheendresultinthebrowser
10.
Web-basedmockupsmoreeffectively representtheendresultinthebrowser becausetheyarealreadyinthebrowser.
11.
Web-basedmockupsmoreeffectively representtheendresultinthebrowser becausetheyarealreadyinthebrowser. DOH!
12.
flickr.com/photos/uggboy/4098274795/ Clientseesthis.
13.
flickr.com/photos/boanerges/70312998/ Clientgetsthis.
14.
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!
15.
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
16.
experimentation
17.
experimentation
18.
experimentation win.
19.
versioncontrol.
20.
versioncontrol.
21.
oops. psdisasters.com
22.
oops. psdisasters.com
23.
er…
24.
THE TOOL RULE It’snotaboutthetools.
25.
THE TOOL RULE It’snotaboutthetools. It’saboutthemedium.
26.
how? web-basedmockups…
27.
sketch. first,
28.
sketch. first,
29.
sketch. first, SKETCHING IS WHERE
DESIGN HAPPENS SKETCHING IS VISUAL THINKING IT’S THE HARD PART. THE REST IS EXECUTION
30.
getanduse representativecontent.
31.
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
32.
Don’tdesignaroundthis Enimurna,pharetrasuscipit,varius et,conguequis,odio.Doneclobortis, elitbibendumeuismodfaucibus,velit nibhegestaslibero,vitae pellentesqueelitaugueutmassa. Nullaconsequateratatmassa. Vivamusid.
33.
whenitshouldbethis Enimurna Pharetrasuscipit,variuset,congue quis,odio.Doneclobortis,elit bibendumeuismodfaucibus • Velitnibhegestaslibero • Vitaepellentesqueelitaugueut massa. Nullaconsequateratatmassa. Vivamusid…
34.
Youhavetoknowwhatyourcontentis— orisgoingtobe—inordertodealwithit appropriately.
35.
Youhavetoknowwhatyourcontentis— orisgoingtobe—inordertodealwithit appropriately. WHAT IS THE
STRUCTURE OF THE CONTENT?
36.
thesethingscanhelpwithspeed LAYOUT/GRID HELPERS STATIC SITE
GENERATORS CSS PREPROCESSORS
37.
Ideally,yourmockupcouldbecomethe baseforfront-endproduction.
38.
Ideally,yourmockupcouldbecomethe baseforfront-endproduction. THOUGH IT DOESN’T
NEED TO BE. RELAX.
39.
staticsitegenerators FOR EXAMPLE: JEKYLL,
HYDE, NANOC, DEXY THESE PROVIDE WAYS OF SAYING: setup mymockup serve mymockup
40.
Jekyll FOR EXAMPLE http://jekyllrb.com/
41.
Jekyll FOR EXAMPLE ~ $
gem install jekyll ~ $ jekyll new mymockup ~ $ cd mymockup ~/mymockup $ jekyll serve AVAILABLE AT LOCALHOST:4000
42.
Dexy FOR EXAMPLE http://dexy.it/
43.
Dexy FOR EXAMPLE ~ $
dexy gen --t [template] --d [directory] ~ $ cd mymockup ~/mymockup $ dexy ~/mymockup $ dexy serve AVAILABLE AT LOCALHOST:8085
44.
layout/gridhelpers FOR EXAMPLE: SUSY,
CSS, YOUR OWN THESE PROVIDE WAYS OF QUICKLY POSITIONING ELEMENTS TO AN UNDERLYING GRID
45.
Susy FOR EXAMPLE http://susy.oddbird.net/
46.
CSS FOR EXAMPLE http://w3.org/Style/CSS Flexbox Gridlayout (Grid)Templatelayout http://www.w3.org/TR/css3-flexbox/ http://www.w3.org/TR/css3-grid-layout/ http://dev.w3.org/csswg/css-template/
47.
CSSpreprocessors FOR EXAMPLE: SASS,
LESS PROVIDE VARIABLES, MIXINS, & MUCH MORE
48.
Tocreateweb-basedmockups,youwill needsomeknowledgeofthemediumfor whichyouaredesigning. WEB TECH IS
SIMPLY ANOTHER TOOLSET. NO NEED TO BE AFRAID.
49.
do whatcanyou withweb-basedmockups onceyouhavethem?
50.
presentthem
51.
presentthem TO CLIENTS, DEVELOPERS,
BASICALLY ANYONE
52.
automatedscreenshots VISUAL ARCHIVE OF
THE ITERATION PROCESS ~ $ casperjs screenshots.js
53.
livedemos ON ACTUAL DEVICES
54.
[usability]testing ON ACTUAL DEVICES
55.
usethemasabaseforastyleguide
56.
usethemasabaseforastyleguide STYLE GUIDES ARE
THE NEW PHOTOSHOP slideshare.net/stephenhay/style-guides-are-the-new-photoshop-fronteers-2012
57.
more web-basedmockupsare thanaprettypicture.
58.
more web-basedmockupsare thanaprettypicture. CONSIDER THEM!
59.
havefun keeplearning THANK YOU! @stephenhay