Suche senden
Hochladen
The New Photoshop, Part 2: The Revenge of the Web (FEC13)
•
37 gefällt mir
•
11,540 views
Stephen Hay
Folgen
Slides for my talk at FrontendConf (CH) in Zürich.
Weniger lesen
Mehr lesen
Technologie
Design
Melden
Teilen
Melden
Teilen
1 von 77
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
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
Empfohlen
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
Weitere ähnliche Inhalte
Andere mochten auch
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
Andere mochten auch
(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
Ähnlich wie 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
Ähnlich wie 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, ...
Mehr von 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
Mehr von 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
Kürzlich hochgeladen
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
The Digital Insurer
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
Principled Technologies
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
HampshireHUG
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
Pixlogix Infotech
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
Antenna Manufacturer Coco
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
Gabriella Davis
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
wesley chun
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
Anna Loughnan Colquhoun
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024
Results
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Neo4j
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
Maria Levchenko
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
The Digital Insurer
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
The Digital Insurer
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Igalia
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
Malak Abu Hammad
🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘
RTylerCroy
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Katpro Technologies
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
Radu Cotescu
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
Earley Information Science
Kürzlich hochgeladen
(20)
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
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
Jetzt herunterladen