Submit Search
Upload
The New Photoshop, Part 2: The Revenge of the Web (FEC13)
•
37 likes
•
11,540 views
Stephen Hay
Follow
Slides for my talk at FrontendConf (CH) in Zürich.
Read less
Read more
Technology
Design
Report
Share
Report
Share
1 of 77
Download now
Download to read offline
Recommended
A challenge in your pocket - an introduction to brainteasers
A challenge in your pocket - an introduction to brainteasers
Ange Albertini
A wonderful day in a lovely city
A wonderful day in a lovely city
iesjacaranda
Design killers
Design killers
Diane Leeper
Sketches
Sketches
samgrayjnr
Fred Boye Presentation
Fred Boye Presentation
azanim8r
Visual discovery tools
Visual discovery tools
The Marketing Distillery
DDive - Franziska Tanner client upgrade options
DDive - Franziska Tanner client upgrade options
Dominopoint - Italian Lotus User Group
Presentación1. discapacidad visual.
Presentación1. discapacidad visual.
Gerard Casanova
Recommended
A challenge in your pocket - an introduction to brainteasers
A challenge in your pocket - an introduction to brainteasers
Ange Albertini
A wonderful day in a lovely city
A wonderful day in a lovely city
iesjacaranda
Design killers
Design killers
Diane Leeper
Sketches
Sketches
samgrayjnr
Fred Boye Presentation
Fred Boye Presentation
azanim8r
Visual discovery tools
Visual discovery tools
The Marketing Distillery
DDive - Franziska Tanner client upgrade options
DDive - Franziska Tanner client upgrade options
Dominopoint - Italian Lotus User Group
Presentación1. discapacidad visual.
Presentación1. discapacidad visual.
Gerard Casanova
CV_MICHAIL_KONSTANTINOS-tel
CV_MICHAIL_KONSTANTINOS-tel
Konstantinos Michail
Informe compilado achs implementa clinica vespucio 01 al 06 de julio de 2011
Informe compilado achs implementa clinica vespucio 01 al 06 de julio de 2011
implementachile
Documento Web2Py
Documento Web2Py
Frameworkuce Uce
Portal ClienteSA - Marcas no Ambiente Digital - out 2013
Portal ClienteSA - Marcas no Ambiente Digital - out 2013
Rodrigo Puga
Haider Ruf Dezember 2009
Haider Ruf Dezember 2009
Sebastian Rappl
¿Por qué tu negocio necesita un Sitio Móvil?
¿Por qué tu negocio necesita un Sitio Móvil?
tuappnet
Conclusiones Entrenamiento InnovacióN Y Mejora De Las Operaciones TuríSticas ...
Conclusiones Entrenamiento InnovacióN Y Mejora De Las Operaciones TuríSticas ...
RED CIDE Cide
Boletín 19 maquetación 1
Boletín 19 maquetación 1
hogar reyes huertas mérida
Los retablos en sevilla 5
Los retablos en sevilla 5
Sanmoreno
DMarx Peace Corps Description of Service
DMarx Peace Corps Description of Service
Danny Marx
Iv bim. 3er. año geog. - guia nº 4 - áfrica iii - hidrogra
Iv bim. 3er. año geog. - guia nº 4 - áfrica iii - hidrogra
NAVICO37
Mundial de Uruguay 1930
Mundial de Uruguay 1930
martinymartin
PresentacióN Libros A La Hoguera Para Slideshare
PresentacióN Libros A La Hoguera Para Slideshare
isabelsumozasolmo
Ferias mktng
Ferias mktng
Janel Cardenas Villasante
Metas inflacion (1)
Metas inflacion (1)
hperhuaman
Mini estetica
Mini estetica
Luis Alarcon
My e portfolio Joel Mendoza
My e portfolio Joel Mendoza
yanckmendoza
Close Your Browser: Finding Inspiration In The Offline World
Close Your Browser: Finding Inspiration In The Offline World
elliotjaystocks
Coding for Designers
Coding for Designers
Milly Schmidt
Designed to Be Clicked: Must-Know Design Principles for Social Media Marketers
Designed to Be Clicked: Must-Know Design Principles for Social Media Marketers
Alison Knott
HR DevFest - Web Design
HR DevFest - Web Design
Frances Coronel
Responsive Web Design
Responsive Web Design
Ricardo Torres
More Related Content
Viewers also liked
CV_MICHAIL_KONSTANTINOS-tel
CV_MICHAIL_KONSTANTINOS-tel
Konstantinos Michail
Informe compilado achs implementa clinica vespucio 01 al 06 de julio de 2011
Informe compilado achs implementa clinica vespucio 01 al 06 de julio de 2011
implementachile
Documento Web2Py
Documento Web2Py
Frameworkuce Uce
Portal ClienteSA - Marcas no Ambiente Digital - out 2013
Portal ClienteSA - Marcas no Ambiente Digital - out 2013
Rodrigo Puga
Haider Ruf Dezember 2009
Haider Ruf Dezember 2009
Sebastian Rappl
¿Por qué tu negocio necesita un Sitio Móvil?
¿Por qué tu negocio necesita un Sitio Móvil?
tuappnet
Conclusiones Entrenamiento InnovacióN Y Mejora De Las Operaciones TuríSticas ...
Conclusiones Entrenamiento InnovacióN Y Mejora De Las Operaciones TuríSticas ...
RED CIDE Cide
Boletín 19 maquetación 1
Boletín 19 maquetación 1
hogar reyes huertas mérida
Los retablos en sevilla 5
Los retablos en sevilla 5
Sanmoreno
DMarx Peace Corps Description of Service
DMarx Peace Corps Description of Service
Danny Marx
Iv bim. 3er. año geog. - guia nº 4 - áfrica iii - hidrogra
Iv bim. 3er. año geog. - guia nº 4 - áfrica iii - hidrogra
NAVICO37
Mundial de Uruguay 1930
Mundial de Uruguay 1930
martinymartin
PresentacióN Libros A La Hoguera Para Slideshare
PresentacióN Libros A La Hoguera Para Slideshare
isabelsumozasolmo
Ferias mktng
Ferias mktng
Janel Cardenas Villasante
Metas inflacion (1)
Metas inflacion (1)
hperhuaman
Mini estetica
Mini estetica
Luis Alarcon
My e portfolio Joel Mendoza
My e portfolio Joel Mendoza
yanckmendoza
Viewers also liked
(17)
CV_MICHAIL_KONSTANTINOS-tel
CV_MICHAIL_KONSTANTINOS-tel
Informe compilado achs implementa clinica vespucio 01 al 06 de julio de 2011
Informe compilado achs implementa clinica vespucio 01 al 06 de julio de 2011
Documento Web2Py
Documento Web2Py
Portal ClienteSA - Marcas no Ambiente Digital - out 2013
Portal ClienteSA - Marcas no Ambiente Digital - out 2013
Haider Ruf Dezember 2009
Haider Ruf Dezember 2009
¿Por qué tu negocio necesita un Sitio Móvil?
¿Por qué tu negocio necesita un Sitio Móvil?
Conclusiones Entrenamiento InnovacióN Y Mejora De Las Operaciones TuríSticas ...
Conclusiones Entrenamiento InnovacióN Y Mejora De Las Operaciones TuríSticas ...
Boletín 19 maquetación 1
Boletín 19 maquetación 1
Los retablos en sevilla 5
Los retablos en sevilla 5
DMarx Peace Corps Description of Service
DMarx Peace Corps Description of Service
Iv bim. 3er. año geog. - guia nº 4 - áfrica iii - hidrogra
Iv bim. 3er. año geog. - guia nº 4 - áfrica iii - hidrogra
Mundial de Uruguay 1930
Mundial de Uruguay 1930
PresentacióN Libros A La Hoguera Para Slideshare
PresentacióN Libros A La Hoguera Para Slideshare
Ferias mktng
Ferias mktng
Metas inflacion (1)
Metas inflacion (1)
Mini estetica
Mini estetica
My e portfolio Joel Mendoza
My e portfolio Joel Mendoza
Similar to The New Photoshop, Part 2: The Revenge of the Web (FEC13)
Close Your Browser: Finding Inspiration In The Offline World
Close Your Browser: Finding Inspiration In The Offline World
elliotjaystocks
Coding for Designers
Coding for Designers
Milly Schmidt
Designed to Be Clicked: Must-Know Design Principles for Social Media Marketers
Designed to Be Clicked: Must-Know Design Principles for Social Media Marketers
Alison Knott
HR DevFest - Web Design
HR DevFest - Web Design
Frances Coronel
Responsive Web Design
Responsive Web Design
Ricardo Torres
RWD in the Wild
RWD in the Wild
Rich Quick
Designer vs Developer: BE THE UNICORN
Designer vs Developer: BE THE UNICORN
Sara Cannon
Topsy Turvy Design
Topsy Turvy Design
Rich Quick
Creating a Webpage from a Template
Creating a Webpage from a Template
Mike Crabb
Juggling
Juggling
Ross Lawley
Web Standards for Web and Graphic Designers
Web Standards for Web and Graphic Designers
Kelley Howell
The Design Panel
The Design Panel
Bryan Veloso
Designer vs Developer: Creators in WordPress
Designer vs Developer: Creators in WordPress
Sara Cannon
Topsy Turvy Design: Adapting your design process for adaptive layout
Topsy Turvy Design: Adapting your design process for adaptive layout
Rich Quick
Responsive Web Design Process
Responsive Web Design Process
Steve Fisher
What web designers could learn from print designers
What web designers could learn from print designers
Erlend Debast
Juggling
Juggling
Casey Bradford
Design Basics for Non-Designers
Design Basics for Non-Designers
Mel Choyce
Marketing at Rice University
Marketing at Rice University
Michelle Kerkstra
Rails is not enough, by Javier Ramirez, at Conferencia Rails 2010 in Madrid, ...
Rails is not enough, by Javier Ramirez, at Conferencia Rails 2010 in Madrid, ...
javier ramirez
Similar to The New Photoshop, Part 2: The Revenge of the Web (FEC13)
(20)
Close Your Browser: Finding Inspiration In The Offline World
Close Your Browser: Finding Inspiration In The Offline World
Coding for Designers
Coding for Designers
Designed to Be Clicked: Must-Know Design Principles for Social Media Marketers
Designed to Be Clicked: Must-Know Design Principles for Social Media Marketers
HR DevFest - Web Design
HR DevFest - Web Design
Responsive Web Design
Responsive Web Design
RWD in the Wild
RWD in the Wild
Designer vs Developer: BE THE UNICORN
Designer vs Developer: BE THE UNICORN
Topsy Turvy Design
Topsy Turvy Design
Creating a Webpage from a Template
Creating a Webpage from a Template
Juggling
Juggling
Web Standards for Web and Graphic Designers
Web Standards for Web and Graphic Designers
The Design Panel
The Design Panel
Designer vs Developer: Creators in WordPress
Designer vs Developer: Creators in WordPress
Topsy Turvy Design: Adapting your design process for adaptive layout
Topsy Turvy Design: Adapting your design process for adaptive layout
Responsive Web Design Process
Responsive Web Design Process
What web designers could learn from print designers
What web designers could learn from print designers
Juggling
Juggling
Design Basics for Non-Designers
Design Basics for Non-Designers
Marketing at Rice University
Marketing at Rice University
Rails is not enough, by Javier Ramirez, at Conferencia Rails 2010 in Madrid, ...
Rails is not enough, by Javier Ramirez, at Conferencia Rails 2010 in Madrid, ...
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
Power Tools For Browser-Based Design
Power Tools For Browser-Based Design
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
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
Stephen Hay
The New Photoshop, Part 2: The Revenge of the Web
The New Photoshop, Part 2: The Revenge of the Web
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
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
Power Tools For Browser-Based Design
Power Tools For Browser-Based Design
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)
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
The New Photoshop, Part 2: The Revenge of the Web
The New Photoshop, Part 2: The Revenge of the Web
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
Recently uploaded
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Juan lago vázquez
Architecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
ThousandEyes
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
sammart93
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
UiPathCommunity
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
apidays
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Jeffrey Haguewood
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
MadyBayot
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
Rustici Software
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
apidays
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
debabhi2
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
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
Martijn de Jong
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
DianaGray10
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Orbitshub
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
MIND CTI
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
apidays
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
The Digital Insurer
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
The Digital Insurer
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
Recently uploaded
(20)
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Architecting Cloud Native Applications
Architecting Cloud Native Applications
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
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 ...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
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
The New Photoshop, Part 2: The Revenge of the Web (FEC13)
1.
Revenge THE NEW PHOTOSHOP,
PART 2 Web STEPHEN HAY FRONTENDCONF 2013 ZURICH of the the
2.
PSD
3.
PSDPRETTY SHITTY DELIVERABLE
4.
web-basedmockup HTML, CSS, ?
5.
PSDON A SMALL
SCREEN
6.
web-basedmockup ON A SMALL
SCREEN
7.
aresponsivedesignworkflow
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
9.
Image-basedmockupsare
10.
Image-basedmockupsare SORRY TO BE
THE BEARER OF BAD NEWS.
11.
Ourdesigncompsareacarryoverfromprint.
12.
http://harryborgmanart.blogspot.ch/
13.
http://harryborgmanart.blogspot.ch/
14.
http://harryborgmanart.blogspot.ch/
15.
DESIGNER MEDIUM
16.
DESIGNER MEDIUM fashion furniture/interior architecture print web I MADE
THIS UP. BUT STILL.
17.
ThereisnothingwrongwithPhotoshop.
18.
WTF psdisasters.com
19.
er…
20.
why? web-basedmockups…
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
23.
Web-basedmockupsmoreeffectively representtheendresultinthebrowser
24.
Web-basedmockupsmoreeffectively representtheendresultinthebrowser becausetheyarealreadyinthebrowser. DOH!
25.
flickr.com/photos/uggboy/4098274795/ Clientseesthis.
26.
flickr.com/photos/boanerges/70312998/ Clientgetsthis.
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
30.
experimentation win.
31.
versioncontrol.
32.
versioncontrol.
33.
how? web-basedmockups…
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
37.
getanduse representativecontent.
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
39.
http://harryborgmanart.blogspot.ch/
40.
Don’tdesignaroundthis Enimurna,pharetrasuscipit,varius et,conguequis,odio.Doneclobortis, elitbibendumeuismodfaucibus,velit nibhegestaslibero,vitae pellentesqueelitaugueutmassa. Nullaconsequateratatmassa. Vivamusid.
41.
whenitshouldbethis Enimurna Pharetrasuscipit,variuset,congue quis,odio.Doneclobortis,elit bibendumeuismodfaucibus • Velitnibhegestaslibero • Vitaepellentesqueelitaugueut massa. Nullaconsequateratatmassa. Vivamusid…
42.
Youhavetoknowwhatyourcontentis— orisgoingtobe—inordertodealwithit appropriately.
43.
Youhavetoknowwhatyourcontentis— orisgoingtobe—inordertodealwithit appropriately. WHAT IS THE
STRUCTURE OF THE CONTENT?
44.
thesethingscanhelpwithspeed LAYOUT/GRID HELPERS STATIC SITE
GENERATORS CSS PREPROCESSORS
45.
Optionally,yourmockupcouldbecome thebaseforfront-endproduction.
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
48.
Jekyll FOR EXAMPLE http://jekyllrb.com/
49.
Jekyll FOR EXAMPLE ~ $
gem install jekyll ~ $ jekyll new mymockup ~ $ cd mymockup ~/mymockup $ jekyll serve AVAILABLE AT LOCALHOST:4000
50.
Dexy FOR EXAMPLE http://dexy.it/
51.
Dexy FOR EXAMPLE ~ $
dexy gen --t [template] --d [directory] ~ $ cd mymockup ~/mymockup $ dexy ~/mymockup $ dexy serve AVAILABLE AT LOCALHOST:8085
52.
53.
Hi,mom.
54.
layout/gridhelpers FOR EXAMPLE: SUSY,
CSS, YOUR OWN THESE PROVIDE WAYS OF QUICKLY POSITIONING ELEMENTS TO AN UNDERLYING GRID
55.
Susy FOR EXAMPLE http://susy.oddbird.net/
56.
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/
57.
CSSpreprocessors FOR EXAMPLE: SASS,
LESS PROVIDE VARIABLES, MIXINS, & MUCH MORE
58.
THE TOOL RULE It’snotaboutthetools.
59.
THE TOOL RULE It’snotaboutthetools. It’sabouttheresults.
60.
do whatcanyou withweb-basedmockups onceyouhavethem?
61.
presentthem
62.
presentthem TO CLIENTS, DEVELOPERS,
BASICALLY ANYONE
63.
automatedscreenshots VISUAL ARCHIVE OF
THE ITERATION PROCESS ~ $ casperjs screenshots.js
64.
65.
66.
67.
livedemos ON ACTUAL DEVICES
68.
[usability]testing ON ACTUAL DEVICES
69.
usethemasabaseforastyleguide
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.
72.
Forgettheuseless “shoulddesignerscode”debate.
73.
Thisisabout lookingoutsideyourcomfortzone (andevenyourfield)forinspiration… howcanyoudothingsmoreeffectively?
74.
Youdon’thavetolearntocode. Butlearninganewapproach mightbenefityouinsomeway.
75.
more web-basedmockupsare thanaprettypicture.
76.
more web-basedmockupsare thanaprettypicture. CONSIDER THEM!
77.
havefun keeplearning THANK YOU! @stephenhay
Download now