SlideShare a Scribd company logo
1 of 101
Download to read offline
Helpful Resources to Make Your Life Easier

       THE WEB DESIGNER’S TOOL KIT




Monday, October 22, 12
Hello.
                          Diana Frurip | Visual Designer @dianadianadiana
                          Sean Kelly | Senior Visual Designer @deamplified
                         Phil Robinson | Experience Design Director @pzilla



Monday, October 22, 12
Hello.
                         Mobile and Social Platforms



Monday, October 22, 12
Before We Begin

Monday, October 22, 12
PART 1: GETTING STARTED
        1. A Compass
        2. A Better Process
        3. Insights

        PART 2: TOOLS TO USE
        4. Sketching
        5. Prototyping
        6. Creating and Testing

        PART 3: CONCLUSION
Monday, October 22, 12
Part 1
                          Getting Started




Monday, October 22, 12
PART 1: GETTING STARTED
        1. A Compass
        2. A Better Process
        3. Insights

        PART 2: TOOLS TO USE
        4. Sketching
        5. Prototyping
        6. Creating and Testing

        PART 3: CONCLUSION
Monday, October 22, 12
THE YEAR OF MOBILE?




Monday, October 22, 12
THE YEAR OF MOBILE?




Monday, October 22, 12
THE YEAR OF MOBILE?




Monday, October 22, 12
THE YEAR OF MOBILE?




Monday, October 22, 12
THE YEAR OF MOBILE?




Monday, October 22, 12
THE YEAR OF MOBILE?




Monday, October 22, 12
THE YEAR OF MOBILE?




Monday, October 22, 12
THE YEAR OF MOBILE?




Monday, October 22, 12
THE YEAR OF MOBILE?




Monday, October 22, 12
THE YEAR OF MOBILE?




Monday, October 22, 12
THE YEAR OF MOBILE?




Monday, October 22, 12
THE YEAR OF MOBILE?




Monday, October 22, 12
THE YEAR OF MOBILE?




Monday, October 22, 12
THE YEAR OF MOBILE?




Monday, October 22, 12
THE YEAR OF MOBILE?




Monday, October 22, 12
“   25% of US internet users only access
                             the web through a mobile device.
                                                             ”
                             –MobiThinking




Monday, October 22, 12
“   "Mobile devices now make up about

                                                        ”
                             20 percent of U.S. web traffic"
                             –All Things D




Monday, October 22, 12
THINK GLOBALLY




        Mobile Operating System Market Share February 2012
        via iCrossing


Monday, October 22, 12
THIS ISN’T RESPONSIVE




Monday, October 22, 12
Monday, October 22, 12
PART 1: GETTING STARTED
        1. A Compass
        2. A Better Process
        3. Insights

        PART 2: TOOLS TO USE
        4. Sketching
        5. Prototyping
        6. Creating and Testing

        PART 3: CONCLUSION

Monday, October 22, 12
THEN...

                         Website




                                   UX   Visual   Development




Monday, October 22, 12
RECENTLY...
     Mobile Version

                         Website




                                   UX   Visual   Development




Monday, October 22, 12
NOW...

               Oh noes!




                          UX   Visual   Development




Monday, October 22, 12
Photo: R. Baum




              THE LANDSCAPE CHANGED QUICKLY
Monday, October 22, 12
Photo: Asher Trafford




       BUT WE CAN
       ADAPT
Monday, October 22, 12
“   Instead of viewing ourselves in
                             terms of discrete roles, we should
                             instead look to emphasize our range
                             of abilities, and work with others
                             whose skills are complimentary.
                             –Paul Robert Lloyd, 24 Ways    ”
Monday, October 22, 12
SUPER TEAMS ASSEMBLE!
Monday, October 22, 12
A BETTER WAY

                     Development


               Visual        UX




Monday, October 22, 12
Monday, October 22, 12
GET COMFORTABLE
                         BEING OUT OF
                                 AND
                         ADAPT TO CHANGES

Monday, October 22, 12
It’s not the document you’re making,
                         it’s the input you’re giving.




Monday, October 22, 12
PART 1: GETTING STARTED
        1. A Compass
        2. A Better Process
        3. Insights

        PART 2: TOOLS TO USE
        4. Sketching
        5. Prototyping
        6. Creating and Testing

        PART 3: CONCLUSION
Monday, October 22, 12
OBJECTIVES FIRST




Monday, October 22, 12
“   Content informs design – design
                             without content is decoration
                                                           ”
                             –Jeffrey Zeldman, Happy Cog



Monday, October 22, 12
ONE SIZE DOESN’T FIT ALL




Monday, October 22, 12
ONE SIZE DOESN’T FIT ALL




Monday, October 22, 12
DELEGATE PHILOSOPHERS




Monday, October 22, 12
THINK BIG PICTURE




Monday, October 22, 12
Part 2
                          Tools to Use




Monday, October 22, 12
PART 1: GETTING STARTED
        1. A Compass
        2. A Better Process
        3. Insights

        PART 2: TOOLS TO USE
        4. Sketching
        5. Prototyping
        6. Creating and Testing

        PART 3: CONCLUSION
Monday, October 22, 12
GET INSPIRED
         patterntap.com




Monday, October 22, 12
GET INSPIRED
         lovelyui.com




Monday, October 22, 12
GET INSPIRED
         androidpatterns.com




Monday, October 22, 12
GET INSPIRED
         responsive.rga.com




Monday, October 22, 12
GET INSPIRED
         mediaqueri.es




Monday, October 22, 12
GET INSPIRED
         bradfrost.github.com/this-is-responsive/patterns.html




Monday, October 22, 12
GET INSPIRED
         bradfrost.github.com/this-is-responsive/patterns.html




Monday, October 22, 12
GET INSPIRED
         starbucks.com/static/reference/styleguide/




Monday, October 22, 12
START WITH A SYSTEM




Monday, October 22, 12
STYLE TILES




Monday, October 22, 12
STYLE TILES




Monday, October 22, 12
STYLE TILES




Monday, October 22, 12
SKETCH WITH PAPER
         via UX Magazine




Monday, October 22, 12
SKETCH ON DEVICES
         via UX Magazine




Monday, October 22, 12
SKETCH ON DEVICES




                            Dropbox   Android File
                                       Transfer



Monday, October 22, 12
SKETCH ON DEVICES




                         LiveView   Android Design
                                       Preview



Monday, October 22, 12
SKETCH ON DEVICES



                            Adobe Edge
                              Inspect




Monday, October 22, 12
PART 1: GETTING STARTED
        1. A Compass
        2. A Better Process
        3. Insights

        PART 2: TOOLS TO USE
        4. Sketching
        5. Prototyping
        6. Creating and Testing

        PART 3: CONCLUSION
Monday, October 22, 12
THEN...




Monday, October 22, 12
NOW...




Monday, October 22, 12
PRESENT BETTER




Monday, October 22, 12
CHOOSE YOUR TOOLS WISELY

         disposable                                                                                                                              evolving
         d.i.y                                                                                                                              collaborative




              PAPER      MOTION TEST              SCRIPTED              RESPONSIVE           DATA/CONTENT                VIDEO               FUNCTIONAL
                         (Keynote, Flash, AE)    PROTOTYPE              PROTOTYPE             PROTOTYPE            (iMovie, AfterEffects)    PROTOTYPE
                                                   (TAP, HTML,          (HTML,Bootstrap,        (HTML, iOS,                                 (HTML, iOS, Android,
                                                Keynote, Fireworks,   Codepen, Adobe Edge)   Android, Flash/AIR)                              Flash/AIR, Cinder)
                                                     Flash/AIR)




Monday, October 22, 12
INTERFACE ORIGAMI
         via Tack Mobile




Monday, October 22, 12
CONTENT HIERARCHY




Monday, October 22, 12
EXPERIENCE DESIGN




Monday, October 22, 12
PROTOTYPES FOR CLIENTS




                                 TAP by unitid.nl




Monday, October 22, 12
PROTOTYPES FOR CLIENTS




                                 TAP by unitid.nl




Monday, October 22, 12
PROTOTYPES FOR CLIENTS




                                 Prototypes App




Monday, October 22, 12
MOTION PROTOTYPES
         via Punchcut




                            After Effects




                            Keynote
Monday, October 22, 12
PART 1: GETTING STARTED
        1. A Compass
        2. A Better Process
        3. Insights

        PART 2: TOOLS TO USE
        4. Sketching
        5. Prototyping
        6. Creating and Testing

        PART 3: CONCLUSION
Monday, October 22, 12
“   Those PSDs are an artifact of the
                             design process, and very likely do
                             not reflect the final decisions made
                             in the coding process. The code is
                             the deliverable, the PSDs are not.
                             –David McCreath, Mule Design      ”
Monday, October 22, 12
KNOW THE MEDIUM




Monday, October 22, 12
YOUR BEST NEW DESIGN TOOL




         image via Kuswanto, Petshop Box Studio

Monday, October 22, 12
CONTENT DICTATES BREAKPOINTS




Monday, October 22, 12
VISUAL TO CODE




                         Subtle Patterns




Monday, October 22, 12
VISUAL TO CODE




                         Dev Rocket




Monday, October 22, 12
VISUAL TO CODE



                          Slicy




                         CSS Hat
Monday, October 22, 12
VISUAL TO CODE
         css3gen.com/box-shadow/




Monday, October 22, 12
DEVELOPER TOOLS




Monday, October 22, 12
EMULATORS




    Opera Mobile Emulator   Android SDK   XCode iOS Simulator

Monday, October 22, 12
TESTING
        *Responsinator
        *Responsive.is
        *Screen Queries
        Resize My Browser
        Responsive PX
        Responsive Design Bookmarklet
        Screenfly
        Adobe Edge



Monday, October 22, 12
PART 1: GETTING STARTED
        1. A Compass
        2. A Better Process
        3. Insights

        PART 2: TOOLS TO USE
        4. Sketching
        5. Prototyping
        6. Creating and Testing

        PART 3: CONCLUSION
Monday, October 22, 12
Conclusion
                            You’ve got this.




Monday, October 22, 12
FUTURE FACING




Monday, October 22, 12
BE PROACTIVE




Monday, October 22, 12
TEST ON DEVICE




Monday, October 22, 12
SAME JOB, NEW TOOLS




Monday, October 22, 12
BEYOND THE CREATIVE SUITE




Monday, October 22, 12
If it’s not working, figure out a
                         new process.




Monday, October 22, 12
SAVE TIME AND MONEY




Monday, October 22, 12
BE WATER, MY FRIEND




Monday, October 22, 12
Monday, October 22, 12
Thank You.
                            slideshare.net/RGA




Monday, October 22, 12

More Related Content

Viewers also liked

The Sports Fan in 2015 - Richard Ting and Kyle Bunch, R/GA
The Sports Fan in 2015 - Richard Ting and Kyle Bunch, R/GAThe Sports Fan in 2015 - Richard Ting and Kyle Bunch, R/GA
The Sports Fan in 2015 - Richard Ting and Kyle Bunch, R/GAR/GA
 
Does Your Product Have a Plot - David Womack, R/GA
Does Your Product Have a Plot - David Womack, R/GADoes Your Product Have a Plot - David Womack, R/GA
Does Your Product Have a Plot - David Womack, R/GAR/GA
 
I May Like You, But I'm Not In LIke With You - Chloe Gottlieb, R/GA
I May Like You, But I'm Not In LIke With You - Chloe Gottlieb, R/GAI May Like You, But I'm Not In LIke With You - Chloe Gottlieb, R/GA
I May Like You, But I'm Not In LIke With You - Chloe Gottlieb, R/GAR/GA
 
I can smell your CMS
I can smell your CMSI can smell your CMS
I can smell your CMSR/GA
 
Adapting to the Unknown
Adapting to the UnknownAdapting to the Unknown
Adapting to the UnknownR/GA
 
Taking Hollywood Out of Production
Taking Hollywood Out of ProductionTaking Hollywood Out of Production
Taking Hollywood Out of ProductionR/GA
 
Why Your 5-Year-Old is More Digital Than Most CMOs - Sean Miller, R/GA and J...
Why Your 5-Year-Old is More Digital Than Most CMOs -  Sean Miller, R/GA and J...Why Your 5-Year-Old is More Digital Than Most CMOs -  Sean Miller, R/GA and J...
Why Your 5-Year-Old is More Digital Than Most CMOs - Sean Miller, R/GA and J...R/GA
 
SXSW Business Case Workshop 2015
SXSW Business Case Workshop 2015SXSW Business Case Workshop 2015
SXSW Business Case Workshop 2015R/GA
 
Brainstorming Technology First
Brainstorming Technology First Brainstorming Technology First
Brainstorming Technology First R/GA
 

Viewers also liked (9)

The Sports Fan in 2015 - Richard Ting and Kyle Bunch, R/GA
The Sports Fan in 2015 - Richard Ting and Kyle Bunch, R/GAThe Sports Fan in 2015 - Richard Ting and Kyle Bunch, R/GA
The Sports Fan in 2015 - Richard Ting and Kyle Bunch, R/GA
 
Does Your Product Have a Plot - David Womack, R/GA
Does Your Product Have a Plot - David Womack, R/GADoes Your Product Have a Plot - David Womack, R/GA
Does Your Product Have a Plot - David Womack, R/GA
 
I May Like You, But I'm Not In LIke With You - Chloe Gottlieb, R/GA
I May Like You, But I'm Not In LIke With You - Chloe Gottlieb, R/GAI May Like You, But I'm Not In LIke With You - Chloe Gottlieb, R/GA
I May Like You, But I'm Not In LIke With You - Chloe Gottlieb, R/GA
 
I can smell your CMS
I can smell your CMSI can smell your CMS
I can smell your CMS
 
Adapting to the Unknown
Adapting to the UnknownAdapting to the Unknown
Adapting to the Unknown
 
Taking Hollywood Out of Production
Taking Hollywood Out of ProductionTaking Hollywood Out of Production
Taking Hollywood Out of Production
 
Why Your 5-Year-Old is More Digital Than Most CMOs - Sean Miller, R/GA and J...
Why Your 5-Year-Old is More Digital Than Most CMOs -  Sean Miller, R/GA and J...Why Your 5-Year-Old is More Digital Than Most CMOs -  Sean Miller, R/GA and J...
Why Your 5-Year-Old is More Digital Than Most CMOs - Sean Miller, R/GA and J...
 
SXSW Business Case Workshop 2015
SXSW Business Case Workshop 2015SXSW Business Case Workshop 2015
SXSW Business Case Workshop 2015
 
Brainstorming Technology First
Brainstorming Technology First Brainstorming Technology First
Brainstorming Technology First
 

Similar to The Web Designers Toolkit

Architecting large Node.js applications
Architecting large Node.js applicationsArchitecting large Node.js applications
Architecting large Node.js applicationsSergi Mansilla
 
Ux design bar camp
Ux design   bar campUx design   bar camp
Ux design bar campRatha Hin
 
NCDevCon2012_designing the mobile experience
NCDevCon2012_designing the mobile experienceNCDevCon2012_designing the mobile experience
NCDevCon2012_designing the mobile experienceDee Sadler
 
UXmas Cocktail Hours - Iskander Smit
UXmas Cocktail Hours - Iskander SmitUXmas Cocktail Hours - Iskander Smit
UXmas Cocktail Hours - Iskander SmitIskander Smit
 
UX Cocktail Hour
UX Cocktail HourUX Cocktail Hour
UX Cocktail HourInfo.nl
 
Html5 new sword for interactive app
Html5 new sword for interactive appHtml5 new sword for interactive app
Html5 new sword for interactive appYohan Totting
 
Android - CodeMiner 42 Tech Talk
Android - CodeMiner 42 Tech TalkAndroid - CodeMiner 42 Tech Talk
Android - CodeMiner 42 Tech TalkJonas Alves
 
2012 Products Are Hard Keynote Address
2012 Products Are Hard Keynote Address2012 Products Are Hard Keynote Address
2012 Products Are Hard Keynote AddressJanice Fraser
 
Using Google Cloud Infrastructure for twindly
Using Google Cloud Infrastructure for twindly Using Google Cloud Infrastructure for twindly
Using Google Cloud Infrastructure for twindly Astrid Paramita Mochtarram
 
REST & Hypermedia: the missing links and why you need them - Ruby Hoedown 2012
REST & Hypermedia: the missing links and why you need them - Ruby Hoedown 2012REST & Hypermedia: the missing links and why you need them - Ruby Hoedown 2012
REST & Hypermedia: the missing links and why you need them - Ruby Hoedown 2012Phil Harvey
 
LUXr 1-day workshop, August 15, 2012 [San Francisco]
LUXr 1-day workshop, August 15, 2012 [San Francisco]LUXr 1-day workshop, August 15, 2012 [San Francisco]
LUXr 1-day workshop, August 15, 2012 [San Francisco]LUXr
 
Sustainability Jam Heidelberg - Co-Innovation and saving the World in 48 Hours
Sustainability Jam Heidelberg - Co-Innovation and saving the World in 48 HoursSustainability Jam Heidelberg - Co-Innovation and saving the World in 48 Hours
Sustainability Jam Heidelberg - Co-Innovation and saving the World in 48 HoursMauro Rego
 
Bdd intro for Microsoft, 29 Nov 2012
Bdd intro for Microsoft, 29 Nov 2012Bdd intro for Microsoft, 29 Nov 2012
Bdd intro for Microsoft, 29 Nov 2012Aliaksandr Ikhelis
 
Apps, Timeline and Facepile: Making Sense of Facebook as a Non-Developer
Apps, Timeline and Facepile:  Making Sense of Facebook as a Non-DeveloperApps, Timeline and Facepile:  Making Sense of Facebook as a Non-Developer
Apps, Timeline and Facepile: Making Sense of Facebook as a Non-Developerlinds313
 
Apps, Timeline and Facepile: Making Sense of Facebook as a Non-Developer
Apps, Timeline and Facepile: Making Sense of Facebook as a Non-DeveloperApps, Timeline and Facepile: Making Sense of Facebook as a Non-Developer
Apps, Timeline and Facepile: Making Sense of Facebook as a Non-DeveloperEngauge
 
Iste leadership2012 nonotes
Iste leadership2012 nonotesIste leadership2012 nonotes
Iste leadership2012 nonotesJason Ohler
 
User-Centred Design - Taking the U out of User
User-Centred Design - Taking the U out of UserUser-Centred Design - Taking the U out of User
User-Centred Design - Taking the U out of UserJacqueline (Jax) Wechsler
 

Similar to The Web Designers Toolkit (20)

Architecting large Node.js applications
Architecting large Node.js applicationsArchitecting large Node.js applications
Architecting large Node.js applications
 
Ux design bar camp
Ux design   bar campUx design   bar camp
Ux design bar camp
 
The Design of Everyday Things
The Design of Everyday ThingsThe Design of Everyday Things
The Design of Everyday Things
 
Agile V2
Agile V2Agile V2
Agile V2
 
NCDevCon2012_designing the mobile experience
NCDevCon2012_designing the mobile experienceNCDevCon2012_designing the mobile experience
NCDevCon2012_designing the mobile experience
 
UXmas Cocktail Hours - Iskander Smit
UXmas Cocktail Hours - Iskander SmitUXmas Cocktail Hours - Iskander Smit
UXmas Cocktail Hours - Iskander Smit
 
UX Cocktail Hour
UX Cocktail HourUX Cocktail Hour
UX Cocktail Hour
 
Html5 new sword for interactive app
Html5 new sword for interactive appHtml5 new sword for interactive app
Html5 new sword for interactive app
 
Android - CodeMiner 42 Tech Talk
Android - CodeMiner 42 Tech TalkAndroid - CodeMiner 42 Tech Talk
Android - CodeMiner 42 Tech Talk
 
2012 Products Are Hard Keynote Address
2012 Products Are Hard Keynote Address2012 Products Are Hard Keynote Address
2012 Products Are Hard Keynote Address
 
Using Google Cloud Infrastructure for twindly
Using Google Cloud Infrastructure for twindly Using Google Cloud Infrastructure for twindly
Using Google Cloud Infrastructure for twindly
 
REST & Hypermedia: the missing links and why you need them - Ruby Hoedown 2012
REST & Hypermedia: the missing links and why you need them - Ruby Hoedown 2012REST & Hypermedia: the missing links and why you need them - Ruby Hoedown 2012
REST & Hypermedia: the missing links and why you need them - Ruby Hoedown 2012
 
LUXr 1-day workshop, August 15, 2012 [San Francisco]
LUXr 1-day workshop, August 15, 2012 [San Francisco]LUXr 1-day workshop, August 15, 2012 [San Francisco]
LUXr 1-day workshop, August 15, 2012 [San Francisco]
 
121015INTRODUCTION
121015INTRODUCTION121015INTRODUCTION
121015INTRODUCTION
 
Sustainability Jam Heidelberg - Co-Innovation and saving the World in 48 Hours
Sustainability Jam Heidelberg - Co-Innovation and saving the World in 48 HoursSustainability Jam Heidelberg - Co-Innovation and saving the World in 48 Hours
Sustainability Jam Heidelberg - Co-Innovation and saving the World in 48 Hours
 
Bdd intro for Microsoft, 29 Nov 2012
Bdd intro for Microsoft, 29 Nov 2012Bdd intro for Microsoft, 29 Nov 2012
Bdd intro for Microsoft, 29 Nov 2012
 
Apps, Timeline and Facepile: Making Sense of Facebook as a Non-Developer
Apps, Timeline and Facepile:  Making Sense of Facebook as a Non-DeveloperApps, Timeline and Facepile:  Making Sense of Facebook as a Non-Developer
Apps, Timeline and Facepile: Making Sense of Facebook as a Non-Developer
 
Apps, Timeline and Facepile: Making Sense of Facebook as a Non-Developer
Apps, Timeline and Facepile: Making Sense of Facebook as a Non-DeveloperApps, Timeline and Facepile: Making Sense of Facebook as a Non-Developer
Apps, Timeline and Facepile: Making Sense of Facebook as a Non-Developer
 
Iste leadership2012 nonotes
Iste leadership2012 nonotesIste leadership2012 nonotes
Iste leadership2012 nonotes
 
User-Centred Design - Taking the U out of User
User-Centred Design - Taking the U out of UserUser-Centred Design - Taking the U out of User
User-Centred Design - Taking the U out of User
 

The Web Designers Toolkit