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
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
Hervé Boutemy
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
Dubai Multi Commodity Centre
Advanced Computer Architecture – An Introduction
Advanced Computer Architecture – An Introduction
Dilum Bandara
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
Alex Barbosa Coqueiro
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdf
RankYa
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
null - The Open Security Community
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
Fwdays
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Mark Simos
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
Commit University
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test Suite
DianaGray10
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024
Scott Keck-Warren
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024
Enterprise Knowledge
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
2toLead Limited
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project Setup
Florian Wilhelm
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Zilliz
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
Stephanie Beckett
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
Precisely
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.
Curtis Poe
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easy
Alfredo García Lavilla
Kürzlich hochgeladen
(20)
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
Advanced Computer Architecture – An Introduction
Advanced Computer Architecture – An Introduction
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdf
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test Suite
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project Setup
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easy
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