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
Â
Working In The Now - Paris Web
Working In The Now - Paris Web
Christian Heilmann
Â
Travailler dans le prĂŠsent - Chris Heilmann - Paris Web 2008
Travailler dans le prĂŠsent - Chris Heilmann - Paris Web 2008
Association Paris-Web
Â
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
Â
Working In The Now - Paris Web
Working In The Now - Paris Web
Christian Heilmann
Â
Travailler dans le prĂŠsent - Chris Heilmann - Paris Web 2008
Travailler dans le prĂŠsent - Chris Heilmann - Paris Web 2008
Association Paris-Web
Â
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
Â
Working In The Now - Paris Web
Working In The Now - Paris Web
Â
Travailler dans le prĂŠsent - Chris Heilmann - Paris Web 2008
Travailler dans le prĂŠsent - Chris Heilmann - Paris Web 2008
Â
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
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
Nanddeep Nachan
Â
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
danishmna97
Â
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
apidays
Â
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
ThousandEyes
Â
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(âď¸+971_581248768%)**%*]'#abortion pills for sale in dubai@
Â
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
Product Anonymous
Â
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Juan lago vĂĄzquez
Â
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
apidays
Â
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
apidays
Â
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Angeliki Cooney
Â
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
Khushali Kathiriya
Â
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
Dropbox
Â
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
Remote DBA Services
Â
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Orbitshub
Â
Elevate Developer Efficiency & build GenAI Application with Amazon Qâ
Elevate Developer Efficiency & build GenAI Application with Amazon Qâ
Bhuvaneswari Subramani
Â
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
DianaGray10
Â
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
sammart93
Â
WSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering Developers
WSO2
Â
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc
Â
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Jeffrey Haguewood
Â
Recently uploaded
(20)
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
Â
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
Â
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Â
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
Â
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
Â
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
Â
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Â
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Â
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Â
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Â
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
Â
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
Â
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
Â
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Â
Elevate Developer Efficiency & build GenAI Application with Amazon Qâ
Elevate Developer Efficiency & build GenAI Application with Amazon Qâ
Â
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Â
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Â
WSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering Developers
Â
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
Â
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Â
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