Suche senden
Hochladen
Web-based Mockups Represent Designs Effectively in the Browser
•
37 gefällt mir
•
11,540 views
Durch KI verbesserter Titel
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 Web-based Mockups Represent Designs Effectively in the Browser
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 Web-based Mockups Represent Designs Effectively in the Browser
(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
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...
Rick Flair
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
Alex Barbosa Coqueiro
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
gvaughan
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024
Lonnie McRorey
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
mohitsingh558521
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
Fwdays
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
LoriGlavin3
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024
Lorenzo Miniero
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
BookNet Canada
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
LoriGlavin3
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
Stephanie Beckett
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
Manik S Magar
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
BookNet Canada
Training state-of-the-art general text embedding
Training state-of-the-art general text embedding
Zilliz
What is Artificial Intelligence?????????
What is Artificial Intelligence?????????
blackmambaettijean
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
BookNet Canada
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
Sergiu Bodiu
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
Alan Dix
unit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptx
BkGupta21
Kürzlich hochgeladen
(20)
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Training state-of-the-art general text embedding
Training state-of-the-art general text embedding
What is Artificial Intelligence?????????
What is Artificial Intelligence?????????
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
unit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptx
Web-based Mockups Represent Designs Effectively in the Browser
1.
Revenge THE NEW PHOTOSHOP,
PART 2 Web STEPHEN HAY FRONTENDCONF 2013 ZURICH of the the
2.
PSD
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