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
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
Pooja Nehwal
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
Slack Application Development 101 Slides
Slack Application Development 101 Slides
praypatel2
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
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
debabhi2
🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘
RTylerCroy
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
The Digital Insurer
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
gurkirankumar98700
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
Principled Technologies
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
wesley chun
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
Michael W. Hawkins
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
Earley Information Science
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
Puma Security, LLC
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
Gabriella Davis
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
Delhi Call girls
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
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
Roshan Dwivedi
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Drew Madelung
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen Frames
Sinan KOZAK
Kürzlich hochgeladen
(20)
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
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...
Slack Application Development 101 Slides
Slack Application Development 101 Slides
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
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...
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen Frames
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