SlideShare une entreprise Scribd logo
1  sur  23
Télécharger pour lire hors ligne
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

Contenu connexe

Tendances

Stop motion ideas workshop
Stop motion ideas workshopStop motion ideas workshop
Stop motion ideas workshop
iain bruce
 

Tendances (20)

Collaborative Sketching for UX - Jumpstart Your Design!
Collaborative Sketching for UX -  Jumpstart Your Design!Collaborative Sketching for UX -  Jumpstart Your Design!
Collaborative Sketching for UX - Jumpstart Your Design!
 
How to Sell Design to Developers
How to Sell Design to DevelopersHow to Sell Design to Developers
How to Sell Design to Developers
 
Small Team, Big UX
Small Team, Big UXSmall Team, Big UX
Small Team, Big UX
 
What is ux design? A behind the scenes tour
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
 
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...
Avoiding the Heuristic Solution: Moving past functional and correct to joyful...
 
IIBA_ux_talk_sept2011
IIBA_ux_talk_sept2011IIBA_ux_talk_sept2011
IIBA_ux_talk_sept2011
 
Becoming a Web Design Champion
Becoming a Web Design ChampionBecoming a Web Design Champion
Becoming a Web Design Champion
 
Conversion Day 2015 - Usability Best Practices - Johan Verhaegen
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
TKG.com's Content Ideation Breakfast BootcampTKG.com's Content Ideation Breakfast Bootcamp
TKG.com's Content Ideation Breakfast Bootcamp
 
User Centered Design for Innovation
User Centered Design for InnovationUser Centered Design for Innovation
User Centered Design for Innovation
 
Summit 2012 - How Atlassian Uses Confluence
Summit 2012 - How Atlassian Uses ConfluenceSummit 2012 - How Atlassian Uses Confluence
Summit 2012 - How Atlassian Uses Confluence
 
Tactics for Recruiting Good Designers
Tactics for Recruiting Good DesignersTactics for Recruiting Good Designers
Tactics for Recruiting Good Designers
 
Bootstrapping User Research
Bootstrapping User ResearchBootstrapping User Research
Bootstrapping User Research
 
Lean UX Recipe Cards (set 01)
Lean UX Recipe Cards (set 01)Lean UX Recipe Cards (set 01)
Lean UX Recipe Cards (set 01)
 
A New Toolbox: Artifact Providence 2013
A New Toolbox: Artifact Providence 2013A New Toolbox: Artifact Providence 2013
A New Toolbox: Artifact Providence 2013
 
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...
UCD14 Talk - Kevin Fitzsimons - Aggressive Inclusivity: A Truly Team Approach...
 
Stop motion ideas workshop
Stop motion ideas workshopStop motion ideas workshop
Stop motion ideas workshop
 
Selling UX
Selling UXSelling UX
Selling UX
 
Building immersive experiences: Usability you can really use
Building immersive experiences: Usability you can really useBuilding immersive experiences: Usability you can really use
Building immersive experiences: Usability you can really use
 
Participatory Design: Discovering Unmet Needs & New Solutions
Participatory Design: Discovering Unmet Needs & New SolutionsParticipatory Design: Discovering Unmet Needs & New Solutions
Participatory Design: Discovering Unmet Needs & New Solutions
 

Similaire à Modern Web Concepts

responsive awareness
responsive awarenessresponsive awareness
responsive awareness
onehundred_be
 

Similaire à Modern Web Concepts (20)

Collaborative Sketching for UX - Razorfish 042115
Collaborative Sketching for UX - Razorfish 042115Collaborative Sketching for UX - Razorfish 042115
Collaborative Sketching for UX - Razorfish 042115
 
SharePoint Usability and Design Tips for Non Designers
SharePoint Usability and Design Tips for Non DesignersSharePoint Usability and Design Tips for Non Designers
SharePoint Usability and Design Tips for Non Designers
 
Collaborative Sketching for Secure & Usable Apps
Collaborative Sketching for Secure & Usable AppsCollaborative Sketching for Secure & Usable Apps
Collaborative Sketching for Secure & Usable Apps
 
IT/BPM Week 2020 Design Thinking
IT/BPM Week 2020 Design ThinkingIT/BPM Week 2020 Design Thinking
IT/BPM Week 2020 Design Thinking
 
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)
How to get your agile development team to love you (product camp, 3.14)
 
Unleash Your Inner Unicorn
Unleash Your Inner UnicornUnleash Your Inner Unicorn
Unleash Your Inner Unicorn
 
Prototyping like it is 2022
Prototyping like it is 2022 Prototyping like it is 2022
Prototyping like it is 2022
 
Better User Experience for WordPress Sites
Better User Experience for WordPress SitesBetter User Experience for WordPress Sites
Better User Experience for WordPress Sites
 
How Do I UX?
How Do I UX?How Do I UX?
How Do I UX?
 
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...
The hitchhiker's guide to UXing without a UXer - Chrissy Welsh - Codemotion M...
 
Swimming with the Sharks (ProductCamp Boston 2016)
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
Wireframing and Prototyping PresentationWireframing and Prototyping Presentation
Wireframing and Prototyping Presentation
 
Lean UX in an Agency Environment
Lean UX in an Agency EnvironmentLean UX in an Agency Environment
Lean UX in an Agency Environment
 
The human side of design
The human side of designThe human side of design
The human side of design
 
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"
Designing Intuitive SharePoint Sites: The Science of "Easy to Use"
 
responsive awareness
responsive awarenessresponsive awareness
responsive awareness
 
Build sh*t that matters
Build sh*t that matters Build sh*t that matters
Build sh*t that matters
 
Planning For design
Planning For designPlanning For design
Planning For design
 
COMP 4026 - Lecture 1
COMP 4026 - Lecture 1COMP 4026 - Lecture 1
COMP 4026 - Lecture 1
 
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...
Visual tools and innovation games - full day workshop - sp intersections - no...
 

Dernier

RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
amitlee9823
 
➥🔝 7737669865 🔝▻ jhansi Call-girls in Women Seeking Men 🔝jhansi🔝 Escorts S...
➥🔝 7737669865 🔝▻ jhansi Call-girls in Women Seeking Men  🔝jhansi🔝   Escorts S...➥🔝 7737669865 🔝▻ jhansi Call-girls in Women Seeking Men  🔝jhansi🔝   Escorts S...
➥🔝 7737669865 🔝▻ jhansi Call-girls in Women Seeking Men 🔝jhansi🔝 Escorts S...
amitlee9823
 
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
amitlee9823
 
Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)
amitlee9823
 
➥🔝 7737669865 🔝▻ dehradun Call-girls in Women Seeking Men 🔝dehradun🔝 Escor...
➥🔝 7737669865 🔝▻ dehradun Call-girls in Women Seeking Men  🔝dehradun🔝   Escor...➥🔝 7737669865 🔝▻ dehradun Call-girls in Women Seeking Men  🔝dehradun🔝   Escor...
➥🔝 7737669865 🔝▻ dehradun Call-girls in Women Seeking Men 🔝dehradun🔝 Escor...
amitlee9823
 
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
nirzagarg
 
Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard ...
Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard  ...Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard  ...
Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard ...
nirzagarg
 
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman MuscatAbortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion pills in Kuwait Cytotec pills in Kuwait
 
Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...
Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...
Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...
sriharipichandi
 

Dernier (20)

RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
 
➥🔝 7737669865 🔝▻ jhansi Call-girls in Women Seeking Men 🔝jhansi🔝 Escorts S...
➥🔝 7737669865 🔝▻ jhansi Call-girls in Women Seeking Men  🔝jhansi🔝   Escorts S...➥🔝 7737669865 🔝▻ jhansi Call-girls in Women Seeking Men  🔝jhansi🔝   Escorts S...
➥🔝 7737669865 🔝▻ jhansi Call-girls in Women Seeking Men 🔝jhansi🔝 Escorts S...
 
Sector 104, Noida Call girls :8448380779 Model Escorts | 100% verified
Sector 104, Noida Call girls :8448380779 Model Escorts | 100% verifiedSector 104, Noida Call girls :8448380779 Model Escorts | 100% verified
Sector 104, Noida Call girls :8448380779 Model Escorts | 100% verified
 
VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...
VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...
VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...
 
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
 
Sweety Planet Packaging Design Process Book.pptx
Sweety Planet Packaging Design Process Book.pptxSweety Planet Packaging Design Process Book.pptx
Sweety Planet Packaging Design Process Book.pptx
 
Hire 💕 8617697112 Meerut Call Girls Service Call Girls Agency
Hire 💕 8617697112 Meerut Call Girls Service Call Girls AgencyHire 💕 8617697112 Meerut Call Girls Service Call Girls Agency
Hire 💕 8617697112 Meerut Call Girls Service Call Girls Agency
 
Lecture 01 Introduction To Multimedia.pptx
Lecture 01 Introduction To Multimedia.pptxLecture 01 Introduction To Multimedia.pptx
Lecture 01 Introduction To Multimedia.pptx
 
Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)
 
➥🔝 7737669865 🔝▻ dehradun Call-girls in Women Seeking Men 🔝dehradun🔝 Escor...
➥🔝 7737669865 🔝▻ dehradun Call-girls in Women Seeking Men  🔝dehradun🔝   Escor...➥🔝 7737669865 🔝▻ dehradun Call-girls in Women Seeking Men  🔝dehradun🔝   Escor...
➥🔝 7737669865 🔝▻ dehradun Call-girls in Women Seeking Men 🔝dehradun🔝 Escor...
 
Q4-W4-SCIENCE-5 power point presentation
Q4-W4-SCIENCE-5 power point presentationQ4-W4-SCIENCE-5 power point presentation
Q4-W4-SCIENCE-5 power point presentation
 
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
 
Call Girls Jalgaon Just Call 8617370543Top Class Call Girl Service Available
Call Girls Jalgaon Just Call 8617370543Top Class Call Girl Service AvailableCall Girls Jalgaon Just Call 8617370543Top Class Call Girl Service Available
Call Girls Jalgaon Just Call 8617370543Top Class Call Girl Service Available
 
Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard ...
Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard  ...Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard  ...
Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard ...
 
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman MuscatAbortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
 
call girls in Vasundhra (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...
call girls in Vasundhra (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...call girls in Vasundhra (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...
call girls in Vasundhra (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...
 
Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...
Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...
Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...
 
UI:UX Design and Empowerment Strategies for Underprivileged Transgender Indiv...
UI:UX Design and Empowerment Strategies for Underprivileged Transgender Indiv...UI:UX Design and Empowerment Strategies for Underprivileged Transgender Indiv...
UI:UX Design and Empowerment Strategies for Underprivileged Transgender Indiv...
 
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
 
💫✅jodhpur 24×7 BEST GENUINE PERSON LOW PRICE CALL GIRL SERVICE FULL SATISFACT...
💫✅jodhpur 24×7 BEST GENUINE PERSON LOW PRICE CALL GIRL SERVICE FULL SATISFACT...💫✅jodhpur 24×7 BEST GENUINE PERSON LOW PRICE CALL GIRL SERVICE FULL SATISFACT...
💫✅jodhpur 24×7 BEST GENUINE PERSON LOW PRICE CALL GIRL SERVICE FULL SATISFACT...
 

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