SlideShare a Scribd company logo
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

More Related Content

What's hot

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!
Robert Stribley
 
How to Sell Design to Developers
How to Sell Design to DevelopersHow to Sell Design to Developers
How to Sell Design to Developers
Dave Stadler
 
Small Team, Big UX
Small Team, Big UXSmall Team, Big UX
Small Team, Big UX
Dave Stadler
 
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
Neil Turner
 
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...
Steven Hoober
 
IIBA_ux_talk_sept2011
IIBA_ux_talk_sept2011IIBA_ux_talk_sept2011
IIBA_ux_talk_sept2011
russellsmithUX
 
Becoming a Web Design Champion
Becoming a Web Design ChampionBecoming a Web Design Champion
Becoming a Web Design Champion
Meagan Fisher
 
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
Human Interface Group
 
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
The Karcher Group
 
User Centered Design for Innovation
User Centered Design for InnovationUser Centered Design for Innovation
User Centered Design for Innovation
Kayla Block
 
Summit 2012 - How Atlassian Uses Confluence
Summit 2012 - How Atlassian Uses ConfluenceSummit 2012 - How Atlassian Uses Confluence
Summit 2012 - How Atlassian Uses Confluence
waw325
 
Tactics for Recruiting Good Designers
Tactics for Recruiting Good DesignersTactics for Recruiting Good Designers
Tactics for Recruiting Good Designers
Jason Putorti
 
Bootstrapping User Research
Bootstrapping User ResearchBootstrapping User Research
Bootstrapping User Research
Aaron Irizarry
 
Lean UX Recipe Cards (set 01)
Lean UX Recipe Cards (set 01)Lean UX Recipe Cards (set 01)
Lean UX Recipe Cards (set 01)
Lane Goldstone
 
A New Toolbox: Artifact Providence 2013
A New Toolbox: Artifact Providence 2013A New Toolbox: Artifact Providence 2013
A New Toolbox: Artifact Providence 2013
Kevin Sharon
 
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...
UCD UK Ltd
 
Stop motion ideas workshop
Stop motion ideas workshopStop motion ideas workshop
Stop motion ideas workshop
iain bruce
 
Selling UX
Selling UXSelling UX
Selling UX
Robert Evans
 
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
X.commerce
 
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
Jennifer Briselli
 

What's hot (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
 

Similar to Modern Web Concepts

Collaborative Sketching for UX - Razorfish 042115
Collaborative Sketching for UX - Razorfish 042115Collaborative Sketching for UX - Razorfish 042115
Collaborative Sketching for UX - Razorfish 042115
Robert Stribley
 
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
Wendy Neal
 
Collaborative Sketching for Secure & Usable Apps
Collaborative Sketching for Secure & Usable AppsCollaborative Sketching for Secure & Usable Apps
Collaborative Sketching for Secure & Usable Apps
Robert Stribley
 
IT/BPM Week 2020 Design Thinking
IT/BPM Week 2020 Design ThinkingIT/BPM Week 2020 Design Thinking
IT/BPM Week 2020 Design Thinking
Nipuna Silva
 
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)
Ron Lichty
 
Unleash Your Inner Unicorn
Unleash Your Inner UnicornUnleash Your Inner Unicorn
Unleash Your Inner Unicorn
Matt Baxter
 
Prototyping like it is 2022
Prototyping like it is 2022 Prototyping like it is 2022
Prototyping like it is 2022
Michael Yagudaev
 
Better User Experience for WordPress Sites
Better User Experience for WordPress SitesBetter User Experience for WordPress Sites
Better User Experience for WordPress Sites
aungstad
 
How Do I UX?
How Do I UX?How Do I UX?
How Do I UX?
Dave Stadler
 
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...
Codemotion
 
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)
ProductCamp Boston
 
Wireframing and Prototyping Presentation
Wireframing and Prototyping PresentationWireframing and Prototyping Presentation
Wireframing and Prototyping Presentation
Mike Carson
 
Lean UX in an Agency Environment
Lean UX in an Agency EnvironmentLean UX in an Agency Environment
Lean UX in an Agency Environment
Jef Bekes
 
The human side of design
The human side of designThe human side of design
The human side of design
Max Soe
 
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"
Marcy Kellar
 
responsive awareness
responsive awarenessresponsive awareness
responsive awareness
onehundred_be
 
Build sh*t that matters
Build sh*t that matters Build sh*t that matters
Build sh*t that matters
Nick Chickinelli
 
Planning For design
Planning For designPlanning For design
Planning For design
Cantina
 
COMP 4026 - Lecture 1
COMP 4026 - Lecture 1COMP 4026 - Lecture 1
COMP 4026 - Lecture 1
Mark Billinghurst
 
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...
Ruven Gotz
 

Similar to 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...
 

Recently uploaded

Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
pmgdscunsri
 
定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样
qo1as76n
 
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdfAHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
talaatahm
 
一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样
tobbk6s8
 
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
9lq7ultg
 
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
wkip62b
 
Heuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdfHeuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdf
Jaime Brown
 
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
qo1as76n
 
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
hw2xf1m
 
LGBTQIA Pride Month presentation Template
LGBTQIA Pride Month presentation TemplateLGBTQIA Pride Month presentation Template
LGBTQIA Pride Month presentation Template
DakshGudwani
 
International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4
Kyungeun Sung
 
Graphic Design Tools and Software .pptx
Graphic Design Tools and Software   .pptxGraphic Design Tools and Software   .pptx
Graphic Design Tools and Software .pptx
Virtual Real Design
 
CocaCola_Brand_equity_package_2012__.pdf
CocaCola_Brand_equity_package_2012__.pdfCocaCola_Brand_equity_package_2012__.pdf
CocaCola_Brand_equity_package_2012__.pdf
PabloMartelLpez
 
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdfSECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
eloprejohn333
 
Impact of Fonts: in Web and Apps Design
Impact of Fonts:  in Web and Apps DesignImpact of Fonts:  in Web and Apps Design
Impact of Fonts: in Web and Apps Design
contactproperweb2014
 
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
881evgn0
 
Virtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburghVirtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburgh
millarj46
 
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
21uul8se
 
ARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdfARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdf
Knight Moves
 
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANEEASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
Febless Hernane
 

Recently uploaded (20)

Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
 
定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样
 
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdfAHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
 
一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样
 
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
 
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
 
Heuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdfHeuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdf
 
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
 
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
 
LGBTQIA Pride Month presentation Template
LGBTQIA Pride Month presentation TemplateLGBTQIA Pride Month presentation Template
LGBTQIA Pride Month presentation Template
 
International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4
 
Graphic Design Tools and Software .pptx
Graphic Design Tools and Software   .pptxGraphic Design Tools and Software   .pptx
Graphic Design Tools and Software .pptx
 
CocaCola_Brand_equity_package_2012__.pdf
CocaCola_Brand_equity_package_2012__.pdfCocaCola_Brand_equity_package_2012__.pdf
CocaCola_Brand_equity_package_2012__.pdf
 
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdfSECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
 
Impact of Fonts: in Web and Apps Design
Impact of Fonts:  in Web and Apps DesignImpact of Fonts:  in Web and Apps Design
Impact of Fonts: in Web and Apps Design
 
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
 
Virtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburghVirtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburgh
 
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
 
ARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdfARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdf
 
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANEEASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
 

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