Modern Web Concepts

Ryan Parsley
Ryan ParsleyDesigner at Linxter
Modern Web Concepts
             Ryan Parsley
             Linxter.com



2011.02.12
How Do You Work Now?
How Do You Work Now?




      • Designer works first

      • Developer works first

      • We don’t need no stinking designers
A Stitch In Time...

        • Less investment fosters more iterations

        • Process is not wasted time

        • Learn to let go

        • Reusability is overrated
Let Go, Let Cloud
Cloudy Thoughts
Think About Why Before How

               “If you don’t know where you are
              going, any road will get you there.”
                                           —Lewis Carroll

      • Identify your target audience

      • Identify with your target audience
User Centric?

       • Good design is the baseline

       • Great design is a feature

       • Customer’s goals... not your goals

       • Users probably don’t work for your company
Usability?
What Does The User Expect?

       • Consistency is great!

       • Cohesiveness is what you really need.

       • If you don’t fancy yourself a design expert... there is no
          shame in striving for obvious.

       • You don’t have to be *that* clever
Design Patterns




         “The only ‘intuitive’ interface is the nipple.
                 After that it’s all learned.”
                                             —Bruce Ediger
Beware The Antipatterns
Beware The Antipatterns
Beware The Antipatterns
Beware The Antipatterns
The Grid Is Your Friend




       • Logical solution for creating layouts

       • Consistency comes baked in

       • Great learning tool
Thoughts On Mobile
Thoughts On Mobile
Responsive Design




       • Augment grids

       • @media screen and (max-width:480px)

       • Every screen can have a custom feel
HTML5 Is Not A Myth




       • <!DOCTYPE html>

       • Focus on the structural bits first

       • Fill in the gaps with modernizer.js
Mind The Gap?




      • Progressive enhancement

      • Define “support”

      • There is no need to look the same in all browsers
Image Credits

       • http://www.flickr.com/photos/joeandy/147678902

       • http://www.flickr.com/photos/eliotreeves/3865454969

       • http://www.flickr.com/photos/24868561@
         N07/3981525301

       • http://www.flickr.com/photos/joshsimerman/3444223835

       • http://www.flickr.com/photos/adactio/1799116343/
Resources

       •   http://www.modernizr.com

       •   http://adactio.com/articles

       •   http://www.alistapart.com/articles/responsive-web-design

       •   http://www.alistapart.com/articles/taking-advantage-of-html5-and-css3-with-modernizr

       •   http://www.joelonsoftware.com/uibook/fog0000000249.html

       •   http://gettingreal.37signals.com/ch09_Interface_First.php

       •   http://thinkvitamin.com/business/how-to-increase-sign-ups-by-200-percent

       •   http://www-01.ibm.com/software/ucd/ucd.html

       •   http://blog.reybango.com/2010/09/21/how-to-create-html5-website-and-page-templates-for-
           visual-studio-2010
1 of 23

Recommended

2012 Usability Conference by
2012 Usability Conference2012 Usability Conference
2012 Usability Conferenceatlanticbtinc
279 views23 slides
Things I hate to do as a designer but do anyway by
Things I hate to do as a designer but do anywayThings I hate to do as a designer but do anyway
Things I hate to do as a designer but do anywayMatt Johnston
343 views18 slides
Collaborative Sketching for UX by
Collaborative Sketching for UXCollaborative Sketching for UX
Collaborative Sketching for UXRobert Stribley
3.5K views52 slides
Collaborative Sketching for UX - NYU 02/19/14 by
Collaborative Sketching for UX - NYU 02/19/14Collaborative Sketching for UX - NYU 02/19/14
Collaborative Sketching for UX - NYU 02/19/14Robert Stribley
13.9K views52 slides
How to build your one-man UX Army by
How to build your one-man UX ArmyHow to build your one-man UX Army
How to build your one-man UX ArmyYogesh B
615 views30 slides
Contextual user research handout part 2 by
Contextual user research handout part 2Contextual user research handout part 2
Contextual user research handout part 2Kai Chun Cheng
254 views29 slides

More Related Content

What's hot

Collaborative Sketching for UX - Jumpstart Your Design! by
Collaborative Sketching for UX -  Jumpstart Your Design!Collaborative Sketching for UX -  Jumpstart Your Design!
Collaborative Sketching for UX - Jumpstart Your Design!Robert Stribley
1.1K views69 slides
How to Sell Design to Developers by
How to Sell Design to DevelopersHow to Sell Design to Developers
How to Sell Design to DevelopersDave Stadler
16.6K views82 slides
Small Team, Big UX by
Small Team, Big UXSmall Team, Big UX
Small Team, Big UXDave Stadler
2.1K views47 slides
What is ux design? A behind the scenes tour by
What is ux design? A behind the scenes tourWhat is ux design? A behind the scenes tour
What is ux design? A behind the scenes tourNeil Turner
2.7K views30 slides
Avoiding the Heuristic Solution: Moving past functional and correct to joyful... by
Avoiding the Heuristic Solution: Moving past functional and correct to joyful...Avoiding the Heuristic Solution: Moving past functional and correct to joyful...
Avoiding the Heuristic Solution: Moving past functional and correct to joyful...Steven Hoober
4.2K views23 slides
IIBA_ux_talk_sept2011 by
IIBA_ux_talk_sept2011IIBA_ux_talk_sept2011
IIBA_ux_talk_sept2011russellsmithUX
339 views43 slides

What's hot(20)

Collaborative Sketching for UX - Jumpstart Your Design! by Robert Stribley
Collaborative Sketching for UX -  Jumpstart Your Design!Collaborative Sketching for UX -  Jumpstart Your Design!
Collaborative Sketching for UX - Jumpstart Your Design!
Robert Stribley1.1K views
How to Sell Design to Developers by Dave Stadler
How to Sell Design to DevelopersHow to Sell Design to Developers
How to Sell Design to Developers
Dave Stadler16.6K views
Small Team, Big UX by Dave Stadler
Small Team, Big UXSmall Team, Big UX
Small Team, Big UX
Dave Stadler2.1K views
What is ux design? A behind the scenes tour by Neil Turner
What is ux design? A behind the scenes tourWhat is ux design? A behind the scenes tour
What is ux design? A behind the scenes tour
Neil Turner2.7K views
Avoiding the Heuristic Solution: Moving past functional and correct to joyful... by Steven Hoober
Avoiding the Heuristic Solution: Moving past functional and correct to joyful...Avoiding the Heuristic Solution: Moving past functional and correct to joyful...
Avoiding the Heuristic Solution: Moving past functional and correct to joyful...
Steven Hoober4.2K views
Becoming a Web Design Champion by Meagan Fisher
Becoming a Web Design ChampionBecoming a Web Design Champion
Becoming a Web Design Champion
Meagan Fisher1K views
Conversion Day 2015 - Usability Best Practices - Johan Verhaegen by Human Interface Group
Conversion Day 2015 - Usability Best Practices - Johan VerhaegenConversion Day 2015 - Usability Best Practices - Johan Verhaegen
Conversion Day 2015 - Usability Best Practices - Johan Verhaegen
TKG.com's Content Ideation Breakfast Bootcamp by The Karcher Group
TKG.com's Content Ideation Breakfast BootcampTKG.com's Content Ideation Breakfast Bootcamp
TKG.com's Content Ideation Breakfast Bootcamp
The Karcher Group8.8K views
User Centered Design for Innovation by Kayla Block
User Centered Design for InnovationUser Centered Design for Innovation
User Centered Design for Innovation
Kayla Block1.4K views
Summit 2012 - How Atlassian Uses Confluence by waw325
Summit 2012 - How Atlassian Uses ConfluenceSummit 2012 - How Atlassian Uses Confluence
Summit 2012 - How Atlassian Uses Confluence
waw325404 views
Tactics for Recruiting Good Designers by Jason Putorti
Tactics for Recruiting Good DesignersTactics for Recruiting Good Designers
Tactics for Recruiting Good Designers
Jason Putorti10.2K views
Bootstrapping User Research by Aaron Irizarry
Bootstrapping User ResearchBootstrapping User Research
Bootstrapping User Research
Aaron Irizarry1.5K views
A New Toolbox: Artifact Providence 2013 by Kevin Sharon
A New Toolbox: Artifact Providence 2013A New Toolbox: Artifact Providence 2013
A New Toolbox: Artifact Providence 2013
Kevin Sharon445 views
UCD14 Talk - Kevin Fitzsimons - Aggressive Inclusivity: A Truly Team Approach... by UCD UK Ltd
UCD14 Talk - Kevin Fitzsimons - Aggressive Inclusivity: A Truly Team Approach...UCD14 Talk - Kevin Fitzsimons - Aggressive Inclusivity: A Truly Team Approach...
UCD14 Talk - Kevin Fitzsimons - Aggressive Inclusivity: A Truly Team Approach...
UCD UK Ltd859 views
Stop motion ideas workshop by iain bruce
Stop motion ideas workshopStop motion ideas workshop
Stop motion ideas workshop
iain bruce2.2K views
Building immersive experiences: Usability you can really use by X.commerce
Building immersive experiences: Usability you can really useBuilding immersive experiences: Usability you can really use
Building immersive experiences: Usability you can really use
X.commerce533 views
Participatory Design: Discovering Unmet Needs & New Solutions by Jennifer Briselli
Participatory Design: Discovering Unmet Needs & New SolutionsParticipatory Design: Discovering Unmet Needs & New Solutions
Participatory Design: Discovering Unmet Needs & New Solutions
Jennifer Briselli478 views

Similar to Modern Web Concepts

Collaborative Sketching for UX - Razorfish 042115 by
Collaborative Sketching for UX - Razorfish 042115Collaborative Sketching for UX - Razorfish 042115
Collaborative Sketching for UX - Razorfish 042115Robert Stribley
6.6K views60 slides
SharePoint Usability and Design Tips for Non Designers by
SharePoint Usability and Design Tips for Non DesignersSharePoint Usability and Design Tips for Non Designers
SharePoint Usability and Design Tips for Non DesignersWendy Neal
2.4K views44 slides
Collaborative Sketching for Secure & Usable Apps by
Collaborative Sketching for Secure & Usable AppsCollaborative Sketching for Secure & Usable Apps
Collaborative Sketching for Secure & Usable AppsRobert Stribley
376 views45 slides
IT/BPM Week 2020 Design Thinking by
IT/BPM Week 2020 Design ThinkingIT/BPM Week 2020 Design Thinking
IT/BPM Week 2020 Design ThinkingNipuna Silva
231 views83 slides
How to get your agile development team to love you (product camp, 3.14) by
How to get your agile development team to love you (product camp, 3.14)How to get your agile development team to love you (product camp, 3.14)
How to get your agile development team to love you (product camp, 3.14)Ron Lichty
2.4K views38 slides
Unleash Your Inner Unicorn by
Unleash Your Inner UnicornUnleash Your Inner Unicorn
Unleash Your Inner UnicornMatt Baxter
828 views129 slides

Similar to Modern Web Concepts(20)

Collaborative Sketching for UX - Razorfish 042115 by Robert Stribley
Collaborative Sketching for UX - Razorfish 042115Collaborative Sketching for UX - Razorfish 042115
Collaborative Sketching for UX - Razorfish 042115
Robert Stribley6.6K views
SharePoint Usability and Design Tips for Non Designers by Wendy Neal
SharePoint Usability and Design Tips for Non DesignersSharePoint Usability and Design Tips for Non Designers
SharePoint Usability and Design Tips for Non Designers
Wendy Neal2.4K views
Collaborative Sketching for Secure & Usable Apps by Robert Stribley
Collaborative Sketching for Secure & Usable AppsCollaborative Sketching for Secure & Usable Apps
Collaborative Sketching for Secure & Usable Apps
Robert Stribley376 views
IT/BPM Week 2020 Design Thinking by Nipuna Silva
IT/BPM Week 2020 Design ThinkingIT/BPM Week 2020 Design Thinking
IT/BPM Week 2020 Design Thinking
Nipuna Silva231 views
How to get your agile development team to love you (product camp, 3.14) by Ron Lichty
How to get your agile development team to love you (product camp, 3.14)How to get your agile development team to love you (product camp, 3.14)
How to get your agile development team to love you (product camp, 3.14)
Ron Lichty2.4K views
Unleash Your Inner Unicorn by Matt Baxter
Unleash Your Inner UnicornUnleash Your Inner Unicorn
Unleash Your Inner Unicorn
Matt Baxter828 views
Better User Experience for WordPress Sites by aungstad
Better User Experience for WordPress SitesBetter User Experience for WordPress Sites
Better User Experience for WordPress Sites
aungstad1.3K views
The hitchhiker's guide to UXing without a UXer - Chrissy Welsh - Codemotion M... by Codemotion
The hitchhiker's guide to UXing without a UXer - Chrissy Welsh - Codemotion M...The hitchhiker's guide to UXing without a UXer - Chrissy Welsh - Codemotion M...
The hitchhiker's guide to UXing without a UXer - Chrissy Welsh - Codemotion M...
Codemotion535 views
Swimming with the Sharks (ProductCamp Boston 2016) by ProductCamp Boston
Swimming with the Sharks (ProductCamp Boston 2016)Swimming with the Sharks (ProductCamp Boston 2016)
Swimming with the Sharks (ProductCamp Boston 2016)
Wireframing and Prototyping Presentation by Mike Carson
Wireframing and Prototyping PresentationWireframing and Prototyping Presentation
Wireframing and Prototyping Presentation
Mike Carson1.2K views
Lean UX in an Agency Environment by Jef Bekes
Lean UX in an Agency EnvironmentLean UX in an Agency Environment
Lean UX in an Agency Environment
Jef Bekes1.8K views
The human side of design by Max Soe
The human side of designThe human side of design
The human side of design
Max Soe350 views
Designing Intuitive SharePoint Sites: The Science of "Easy to Use" by Marcy Kellar
Designing Intuitive SharePoint Sites: The Science of "Easy to Use" Designing Intuitive SharePoint Sites: The Science of "Easy to Use"
Designing Intuitive SharePoint Sites: The Science of "Easy to Use"
Marcy Kellar9.3K views
Planning For design by Cantina
Planning For designPlanning For design
Planning For design
Cantina181 views
Visual tools and innovation games - full day workshop - sp intersections - no... by Ruven Gotz
Visual tools and innovation games - full day workshop - sp intersections - no...Visual tools and innovation games - full day workshop - sp intersections - no...
Visual tools and innovation games - full day workshop - sp intersections - no...
Ruven Gotz663 views

Recently uploaded

type book PDF to PPT.pptx by
type book PDF to PPT.pptxtype book PDF to PPT.pptx
type book PDF to PPT.pptxsamboggiano
6 views54 slides
Sudden Deafness Design Document by
Sudden Deafness Design DocumentSudden Deafness Design Document
Sudden Deafness Design Documentwyfangherman
53 views19 slides
A.K DESIGNS by
A.K DESIGNSA.K DESIGNS
A.K DESIGNSnikitasingh113603
6 views4 slides
Subzero Report (1).pdf by
Subzero Report (1).pdfSubzero Report (1).pdf
Subzero Report (1).pdfsidhantkhanna8
9 views21 slides
JAWARK Inside Company Profile 2024 by
JAWARK Inside Company Profile 2024JAWARK Inside Company Profile 2024
JAWARK Inside Company Profile 2024mostafareda1994
12 views45 slides
EL FODA.pdf by
EL FODA.pdfEL FODA.pdf
EL FODA.pdfestefanimilenca
16 views1 slide

Recently uploaded(20)

type book PDF to PPT.pptx by samboggiano
type book PDF to PPT.pptxtype book PDF to PPT.pptx
type book PDF to PPT.pptx
samboggiano6 views
Sudden Deafness Design Document by wyfangherman
Sudden Deafness Design DocumentSudden Deafness Design Document
Sudden Deafness Design Document
wyfangherman53 views
BeatsFest Brand Guidelines Final.pdf by EddiePena9
BeatsFest Brand Guidelines Final.pdfBeatsFest Brand Guidelines Final.pdf
BeatsFest Brand Guidelines Final.pdf
EddiePena97 views
Cocktail Merchandise by nyhapedraza
Cocktail MerchandiseCocktail Merchandise
Cocktail Merchandise
nyhapedraza35 views
Indian wedding dresses design.pdf by Aur Dikhao
Indian wedding dresses design.pdfIndian wedding dresses design.pdf
Indian wedding dresses design.pdf
Aur Dikhao5 views
Legal PPT Presentation.pptx by 125071063
Legal PPT Presentation.pptxLegal PPT Presentation.pptx
Legal PPT Presentation.pptx
1250710635 views
Canned Cocktail Flat Labels by nyhapedraza
Canned Cocktail Flat LabelsCanned Cocktail Flat Labels
Canned Cocktail Flat Labels
nyhapedraza38 views
Free International civil aviation day template from best presentation design ... by slideceotemplates
Free International civil aviation day template from best presentation design ...Free International civil aviation day template from best presentation design ...
Free International civil aviation day template from best presentation design ...
Using Experiential Design to Understand the Future of AI & Immersive Storytel... by Kent Bye
Using Experiential Design to Understand the Future of AI & Immersive Storytel...Using Experiential Design to Understand the Future of AI & Immersive Storytel...
Using Experiential Design to Understand the Future of AI & Immersive Storytel...
Kent Bye20 views
DR Portfolio.pptx by robertsd2
DR Portfolio.pptxDR Portfolio.pptx
DR Portfolio.pptx
robertsd221 views
Samsung Galaxy Watch 5 Presentation by aryasheel1
Samsung Galaxy Watch 5 PresentationSamsung Galaxy Watch 5 Presentation
Samsung Galaxy Watch 5 Presentation
aryasheel113 views

Modern Web Concepts

  • 1. Modern Web Concepts Ryan Parsley Linxter.com 2011.02.12
  • 2. How Do You Work Now?
  • 3. How Do You Work Now? • Designer works first • Developer works first • We don’t need no stinking designers
  • 4. A Stitch In Time... • Less investment fosters more iterations • Process is not wasted time • Learn to let go • Reusability is overrated
  • 5. Let Go, Let Cloud
  • 7. Think About Why Before How “If you don’t know where you are going, any road will get you there.” —Lewis Carroll • Identify your target audience • Identify with your target audience
  • 8. User Centric? • Good design is the baseline • Great design is a feature • Customer’s goals... not your goals • Users probably don’t work for your company
  • 10. What Does The User Expect? • Consistency is great! • Cohesiveness is what you really need. • If you don’t fancy yourself a design expert... there is no shame in striving for obvious. • You don’t have to be *that* clever
  • 11. Design Patterns “The only ‘intuitive’ interface is the nipple. After that it’s all learned.” —Bruce Ediger
  • 16. The Grid Is Your Friend • Logical solution for creating layouts • Consistency comes baked in • Great learning tool
  • 19. Responsive Design • Augment grids • @media screen and (max-width:480px) • Every screen can have a custom feel
  • 20. HTML5 Is Not A Myth • <!DOCTYPE html> • Focus on the structural bits first • Fill in the gaps with modernizer.js
  • 21. Mind The Gap? • Progressive enhancement • Define “support” • There is no need to look the same in all browsers
  • 22. Image Credits • http://www.flickr.com/photos/joeandy/147678902 • http://www.flickr.com/photos/eliotreeves/3865454969 • http://www.flickr.com/photos/24868561@ N07/3981525301 • http://www.flickr.com/photos/joshsimerman/3444223835 • http://www.flickr.com/photos/adactio/1799116343/
  • 23. Resources • http://www.modernizr.com • http://adactio.com/articles • http://www.alistapart.com/articles/responsive-web-design • http://www.alistapart.com/articles/taking-advantage-of-html5-and-css3-with-modernizr • http://www.joelonsoftware.com/uibook/fog0000000249.html • http://gettingreal.37signals.com/ch09_Interface_First.php • http://thinkvitamin.com/business/how-to-increase-sign-ups-by-200-percent • http://www-01.ibm.com/software/ucd/ucd.html • http://blog.reybango.com/2010/09/21/how-to-create-html5-website-and-page-templates-for- visual-studio-2010