SlideShare une entreprise Scribd logo
1  sur  44
The world has gone mobile.
But has your web experience?
@petesena
#rwdCADC
A little about me.
Hi there. I’m @petesena
You would expect a fancy bio of me to go here or
something but that would just be douchey. You should
follow me on twitter. I tweet about the intersection
of design and technology in marketing. Cool tools,
trends, tutorials and all that jazz. If this presentation
has been useful for you please share it with someone.
Responsive Web Design Process
Responsive Web Design Process
This is the web today.
77% of people use smart phones as
their preferred medium for searching.
-Google / Nielsen
mobile search moments march 2013
WTF! I just want
to get information
on admissions.
Where did responsive design come from?
So what the hell is responsive design?
flexible grid flexible media media queries
It means you are device agnostic!
Why responsive?
• One application to maintain which runs everywhere
• Improve SEO and user confusion with one set of URLs
• Such a variety of devices, platforms and browsers
• Mobile and desktop simply isn’t enough
• Don’t discriminate, one site for all devices
• Future proof and ready for the next device
Breaking some old habits.
The old waterfall web design process
Discovery
Strategy &
Planning
Design Development Optimize
It’s time to evolve.
Evolving to a new iterative process
Project
Planning!
Discovery
(Immersion)!
Strategy! Content
Strategy!
UX & IA! Design! Development! Post
Launch!
A new web design process
A new web design process
Strategy
A new web design process
Sketching
Review Validate
Prototyping
DesignWireframe
Strategy
A new web design process
Sketching
Review Validate
Prototyping
DesignWireframe
Strategy Outcome
Responsive Web Design Process
Not content first.
Not content first.
Not mobile first.
Not content first.
Not mobile first.
Context first.
sketchearly.
Responsive Web Design Process
Responsive Web Design Process
Responsive Web Design Process
Responsive Web Design Process
Some handy UserExperiencedesigntools
Design systems. Not comps.
What makes up a
design system?
•Content
•Grid & Visual Hierarchy
•Typography
•Color Palette
•Iconography / Shape / Form
•Imagery
What makes up a
design system?
•Content
•Grid & Visual Hierarchy
•Typography
•Color Palette
•Iconography / Shape / Form
•Imagery
What makes up a
design system?
•Content
•Grid & Visual Hierarchy
•Typography
•Color Palette
•Iconography / Shape / Form
•Imagery
Responsive
web design
resources
• Style Tiles (http://styletil.es/)
• Gumby grid & UI Kit templates
(gumbyframework.com)
• Sketchsheets (sneakpeekit.com)
• Modular Scale (balanced typography)
A photoshop UI kit
A photoshop user interface kit can be very helpful as a
starting place. It will contain virtually all HTML elements
which will be a great reference asset for when it comes
time for building the markup/css. Gumby Framework
includes all the grid photoshop files as well as the
interface elements.
Analog & digital grids
Resources for web typography
Fonts
Resources for front-end development
The best advice ever.
wait for it...
Learn to code.
</>
Where to learn front-end development ?
If you enjoyed this gimme a shout on twitter
@petesena.
Go make something.

Contenu connexe

En vedette

PSFK Future Of Light Report
PSFK Future Of Light ReportPSFK Future Of Light Report
PSFK Future Of Light ReportPSFK
 
Акция «доброе дело» — ликвидируем цифровое неравеснство
Акция «доброе дело» — ликвидируем цифровое неравеснствоАкция «доброе дело» — ликвидируем цифровое неравеснство
Акция «доброе дело» — ликвидируем цифровое неравеснствоMaxim Karakulov
 
The shift: UX Designers as Business Consultants
The shift: UX Designers as Business ConsultantsThe shift: UX Designers as Business Consultants
The shift: UX Designers as Business ConsultantsErin 'Folletto' Casali
 
Why use responsive web design?
Why use responsive web design?Why use responsive web design?
Why use responsive web design?SoDA Speaks
 
The 4 Must-Haves and Must-Nots for Pitch Deck Presentations
The 4 Must-Haves and Must-Nots for Pitch Deck PresentationsThe 4 Must-Haves and Must-Nots for Pitch Deck Presentations
The 4 Must-Haves and Must-Nots for Pitch Deck PresentationsEthos3
 
SXSW: Designing Smart Objects for Emotional People
SXSW: Designing Smart Objects for Emotional PeopleSXSW: Designing Smart Objects for Emotional People
SXSW: Designing Smart Objects for Emotional Peoplefrog
 
UX in Automobiles: Balancing effective UI design & driver safety
UX in Automobiles: Balancing effective UI design & driver safetyUX in Automobiles: Balancing effective UI design & driver safety
UX in Automobiles: Balancing effective UI design & driver safetyJake Zukowski
 
Master in Architettura dell'Informazione IED 2012
Master in Architettura dell'Informazione IED 2012Master in Architettura dell'Informazione IED 2012
Master in Architettura dell'Informazione IED 2012Marzia Bianchi
 
Tech Trends 2014
Tech Trends 2014 Tech Trends 2014
Tech Trends 2014 frog
 
Motion detection in JS for Gesture based interaction
Motion detection in JS for Gesture based interactionMotion detection in JS for Gesture based interaction
Motion detection in JS for Gesture based interactionNeev Technologies
 
American Banking Association Marketing Conference - Modern Consumers
American Banking Association Marketing Conference - Modern ConsumersAmerican Banking Association Marketing Conference - Modern Consumers
American Banking Association Marketing Conference - Modern ConsumersMathew Sweezey
 

En vedette (15)

The Mobile Frontier
The Mobile FrontierThe Mobile Frontier
The Mobile Frontier
 
Hello I'm Taylor!
Hello I'm Taylor!Hello I'm Taylor!
Hello I'm Taylor!
 
PSFK Future Of Light Report
PSFK Future Of Light ReportPSFK Future Of Light Report
PSFK Future Of Light Report
 
UX Fundamentals for Beginners
UX Fundamentals for BeginnersUX Fundamentals for Beginners
UX Fundamentals for Beginners
 
Акция «доброе дело» — ликвидируем цифровое неравеснство
Акция «доброе дело» — ликвидируем цифровое неравеснствоАкция «доброе дело» — ликвидируем цифровое неравеснство
Акция «доброе дело» — ликвидируем цифровое неравеснство
 
The shift: UX Designers as Business Consultants
The shift: UX Designers as Business ConsultantsThe shift: UX Designers as Business Consultants
The shift: UX Designers as Business Consultants
 
Why use responsive web design?
Why use responsive web design?Why use responsive web design?
Why use responsive web design?
 
The 4 Must-Haves and Must-Nots for Pitch Deck Presentations
The 4 Must-Haves and Must-Nots for Pitch Deck PresentationsThe 4 Must-Haves and Must-Nots for Pitch Deck Presentations
The 4 Must-Haves and Must-Nots for Pitch Deck Presentations
 
SXSW: Designing Smart Objects for Emotional People
SXSW: Designing Smart Objects for Emotional PeopleSXSW: Designing Smart Objects for Emotional People
SXSW: Designing Smart Objects for Emotional People
 
UX in Automobiles: Balancing effective UI design & driver safety
UX in Automobiles: Balancing effective UI design & driver safetyUX in Automobiles: Balancing effective UI design & driver safety
UX in Automobiles: Balancing effective UI design & driver safety
 
Master in Architettura dell'Informazione IED 2012
Master in Architettura dell'Informazione IED 2012Master in Architettura dell'Informazione IED 2012
Master in Architettura dell'Informazione IED 2012
 
Tech Trends 2014
Tech Trends 2014 Tech Trends 2014
Tech Trends 2014
 
The Other #WorldCup #FIFA
The Other #WorldCup #FIFAThe Other #WorldCup #FIFA
The Other #WorldCup #FIFA
 
Motion detection in JS for Gesture based interaction
Motion detection in JS for Gesture based interactionMotion detection in JS for Gesture based interaction
Motion detection in JS for Gesture based interaction
 
American Banking Association Marketing Conference - Modern Consumers
American Banking Association Marketing Conference - Modern ConsumersAmerican Banking Association Marketing Conference - Modern Consumers
American Banking Association Marketing Conference - Modern Consumers
 

Plus de Digital Surgeons

Navigating Your Brand Through Covid-19
Navigating Your Brand Through Covid-19Navigating Your Brand Through Covid-19
Navigating Your Brand Through Covid-19Digital Surgeons
 
Creating great decks: The Origins, the "Why", and 12 Tips to Make Yours Better.
Creating great decks: The Origins, the "Why", and 12 Tips to Make Yours Better.Creating great decks: The Origins, the "Why", and 12 Tips to Make Yours Better.
Creating great decks: The Origins, the "Why", and 12 Tips to Make Yours Better.Digital Surgeons
 
The Science of Story: How Brands Can Use Storytelling To Get More Customers
The Science of Story: How Brands Can Use Storytelling To Get More CustomersThe Science of Story: How Brands Can Use Storytelling To Get More Customers
The Science of Story: How Brands Can Use Storytelling To Get More CustomersDigital Surgeons
 
In Content Strategy, L.E.S.S. is More
In Content Strategy, L.E.S.S. is MoreIn Content Strategy, L.E.S.S. is More
In Content Strategy, L.E.S.S. is MoreDigital Surgeons
 
Unlock Your Organization Through Digital Transformation
Unlock Your Organization Through Digital TransformationUnlock Your Organization Through Digital Transformation
Unlock Your Organization Through Digital TransformationDigital Surgeons
 
Radical Candor: No BS, helping your team create better work.
Radical Candor: No BS, helping your team create better work.Radical Candor: No BS, helping your team create better work.
Radical Candor: No BS, helping your team create better work.Digital Surgeons
 
Unlocking Creativity: How to Harness the Powers of Design, Art Direction & Cr...
Unlocking Creativity: How to Harness the Powers of Design, Art Direction & Cr...Unlocking Creativity: How to Harness the Powers of Design, Art Direction & Cr...
Unlocking Creativity: How to Harness the Powers of Design, Art Direction & Cr...Digital Surgeons
 
Fight for Yourself: How to Sell Your Ideas and Crush Presentations
Fight for Yourself: How to Sell Your Ideas and Crush PresentationsFight for Yourself: How to Sell Your Ideas and Crush Presentations
Fight for Yourself: How to Sell Your Ideas and Crush PresentationsDigital Surgeons
 
Typecurious: A Typography Crash Course
Typecurious: A Typography Crash CourseTypecurious: A Typography Crash Course
Typecurious: A Typography Crash CourseDigital Surgeons
 
Better Twitch Broadcasting through Rapid Prototyping & Human Centered Design
Better Twitch Broadcasting through Rapid Prototyping & Human Centered DesignBetter Twitch Broadcasting through Rapid Prototyping & Human Centered Design
Better Twitch Broadcasting through Rapid Prototyping & Human Centered DesignDigital Surgeons
 
How to Stream Video Games: A Primer on Twitch.tv
How to Stream Video Games: A Primer on Twitch.tvHow to Stream Video Games: A Primer on Twitch.tv
How to Stream Video Games: A Primer on Twitch.tvDigital Surgeons
 
Art, Meet Copy: A Copywriting Primer for Designers
Art, Meet Copy: A Copywriting Primer for Designers Art, Meet Copy: A Copywriting Primer for Designers
Art, Meet Copy: A Copywriting Primer for Designers Digital Surgeons
 
Creating Powerful Customer Experiences
Creating Powerful Customer ExperiencesCreating Powerful Customer Experiences
Creating Powerful Customer ExperiencesDigital Surgeons
 
How to Build a Brand Voice Toolkit
How to Build a Brand Voice ToolkitHow to Build a Brand Voice Toolkit
How to Build a Brand Voice ToolkitDigital Surgeons
 
Design Thinking: The one thing that will transform the way you think
Design Thinking: The one thing that will transform the way you thinkDesign Thinking: The one thing that will transform the way you think
Design Thinking: The one thing that will transform the way you thinkDigital Surgeons
 
What You Need to Know About the Future of Wearable Technology
What You Need to Know About the Future of Wearable TechnologyWhat You Need to Know About the Future of Wearable Technology
What You Need to Know About the Future of Wearable TechnologyDigital Surgeons
 

Plus de Digital Surgeons (20)

Navigating Your Brand Through Covid-19
Navigating Your Brand Through Covid-19Navigating Your Brand Through Covid-19
Navigating Your Brand Through Covid-19
 
SVG Animations
SVG AnimationsSVG Animations
SVG Animations
 
CSS Grid
CSS GridCSS Grid
CSS Grid
 
Machine learning
Machine learningMachine learning
Machine learning
 
CraftCMS 3.x Deep Dive
CraftCMS 3.x Deep DiveCraftCMS 3.x Deep Dive
CraftCMS 3.x Deep Dive
 
Creating great decks: The Origins, the "Why", and 12 Tips to Make Yours Better.
Creating great decks: The Origins, the "Why", and 12 Tips to Make Yours Better.Creating great decks: The Origins, the "Why", and 12 Tips to Make Yours Better.
Creating great decks: The Origins, the "Why", and 12 Tips to Make Yours Better.
 
The Science of Story: How Brands Can Use Storytelling To Get More Customers
The Science of Story: How Brands Can Use Storytelling To Get More CustomersThe Science of Story: How Brands Can Use Storytelling To Get More Customers
The Science of Story: How Brands Can Use Storytelling To Get More Customers
 
In Content Strategy, L.E.S.S. is More
In Content Strategy, L.E.S.S. is MoreIn Content Strategy, L.E.S.S. is More
In Content Strategy, L.E.S.S. is More
 
Unlock Your Organization Through Digital Transformation
Unlock Your Organization Through Digital TransformationUnlock Your Organization Through Digital Transformation
Unlock Your Organization Through Digital Transformation
 
Radical Candor: No BS, helping your team create better work.
Radical Candor: No BS, helping your team create better work.Radical Candor: No BS, helping your team create better work.
Radical Candor: No BS, helping your team create better work.
 
Unlocking Creativity: How to Harness the Powers of Design, Art Direction & Cr...
Unlocking Creativity: How to Harness the Powers of Design, Art Direction & Cr...Unlocking Creativity: How to Harness the Powers of Design, Art Direction & Cr...
Unlocking Creativity: How to Harness the Powers of Design, Art Direction & Cr...
 
Fight for Yourself: How to Sell Your Ideas and Crush Presentations
Fight for Yourself: How to Sell Your Ideas and Crush PresentationsFight for Yourself: How to Sell Your Ideas and Crush Presentations
Fight for Yourself: How to Sell Your Ideas and Crush Presentations
 
Typecurious: A Typography Crash Course
Typecurious: A Typography Crash CourseTypecurious: A Typography Crash Course
Typecurious: A Typography Crash Course
 
Better Twitch Broadcasting through Rapid Prototyping & Human Centered Design
Better Twitch Broadcasting through Rapid Prototyping & Human Centered DesignBetter Twitch Broadcasting through Rapid Prototyping & Human Centered Design
Better Twitch Broadcasting through Rapid Prototyping & Human Centered Design
 
How to Stream Video Games: A Primer on Twitch.tv
How to Stream Video Games: A Primer on Twitch.tvHow to Stream Video Games: A Primer on Twitch.tv
How to Stream Video Games: A Primer on Twitch.tv
 
Art, Meet Copy: A Copywriting Primer for Designers
Art, Meet Copy: A Copywriting Primer for Designers Art, Meet Copy: A Copywriting Primer for Designers
Art, Meet Copy: A Copywriting Primer for Designers
 
Creating Powerful Customer Experiences
Creating Powerful Customer ExperiencesCreating Powerful Customer Experiences
Creating Powerful Customer Experiences
 
How to Build a Brand Voice Toolkit
How to Build a Brand Voice ToolkitHow to Build a Brand Voice Toolkit
How to Build a Brand Voice Toolkit
 
Design Thinking: The one thing that will transform the way you think
Design Thinking: The one thing that will transform the way you thinkDesign Thinking: The one thing that will transform the way you think
Design Thinking: The one thing that will transform the way you think
 
What You Need to Know About the Future of Wearable Technology
What You Need to Know About the Future of Wearable TechnologyWhat You Need to Know About the Future of Wearable Technology
What You Need to Know About the Future of Wearable Technology
 

Dernier

The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 

Dernier (19)

The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 

Responsive Web Design Process

  • 1. The world has gone mobile. But has your web experience? @petesena #rwdCADC
  • 3. Hi there. I’m @petesena You would expect a fancy bio of me to go here or something but that would just be douchey. You should follow me on twitter. I tweet about the intersection of design and technology in marketing. Cool tools, trends, tutorials and all that jazz. If this presentation has been useful for you please share it with someone.
  • 6. This is the web today.
  • 7. 77% of people use smart phones as their preferred medium for searching. -Google / Nielsen mobile search moments march 2013
  • 8. WTF! I just want to get information on admissions.
  • 9. Where did responsive design come from?
  • 10. So what the hell is responsive design? flexible grid flexible media media queries
  • 11. It means you are device agnostic!
  • 12. Why responsive? • One application to maintain which runs everywhere • Improve SEO and user confusion with one set of URLs • Such a variety of devices, platforms and browsers • Mobile and desktop simply isn’t enough • Don’t discriminate, one site for all devices • Future proof and ready for the next device
  • 13. Breaking some old habits.
  • 14. The old waterfall web design process Discovery Strategy & Planning Design Development Optimize
  • 15. It’s time to evolve.
  • 16. Evolving to a new iterative process Project Planning! Discovery (Immersion)! Strategy! Content Strategy! UX & IA! Design! Development! Post Launch!
  • 17. A new web design process
  • 18. A new web design process Strategy
  • 19. A new web design process Sketching Review Validate Prototyping DesignWireframe Strategy
  • 20. A new web design process Sketching Review Validate Prototyping DesignWireframe Strategy Outcome
  • 23. Not content first. Not mobile first.
  • 24. Not content first. Not mobile first. Context first.
  • 32. What makes up a design system? •Content •Grid & Visual Hierarchy •Typography •Color Palette •Iconography / Shape / Form •Imagery
  • 33. What makes up a design system? •Content •Grid & Visual Hierarchy •Typography •Color Palette •Iconography / Shape / Form •Imagery
  • 34. What makes up a design system? •Content •Grid & Visual Hierarchy •Typography •Color Palette •Iconography / Shape / Form •Imagery
  • 35. Responsive web design resources • Style Tiles (http://styletil.es/) • Gumby grid & UI Kit templates (gumbyframework.com) • Sketchsheets (sneakpeekit.com) • Modular Scale (balanced typography)
  • 36. A photoshop UI kit A photoshop user interface kit can be very helpful as a starting place. It will contain virtually all HTML elements which will be a great reference asset for when it comes time for building the markup/css. Gumby Framework includes all the grid photoshop files as well as the interface elements.
  • 38. Resources for web typography Fonts
  • 39. Resources for front-end development
  • 43. Where to learn front-end development ?
  • 44. If you enjoyed this gimme a shout on twitter @petesena. Go make something.