Embed Size (px)
DESCRIPTION
As we move further into the future of digital design, web design is no longer just about creating a single great desktop browsing experience. The interactive design industry is at a crossroads; mobile and tablet devices continue to propagate and fuel new interactions, and the web is now found on more devices than ever. So, how do we adjust accordingly? More often than not, designers and programmers use old methodologies to tackle new problems. The real tool kit of a great web designer starts off-line and off-screen. This lecture will showcase important skills that will prepare flexible designs for future facing web projects. We will outline a set of new philosophies, collaborative processes and custom tools that enable productivity in this ever-changing world. We'll also cover the importance of creating your own tools and adapting to new needs, so you can stay ahead of the game. By demonstrating the right workflow, the right tools and a future facing philosophy, this talk aims to help anyone who has thought to themselves: 'there has to be a better way'. The future isn't 12-column grids and pixel perfect PSDs. It's a flexible thinking model that relies on your understanding of development and a strong design philosophy.
Citation preview
THE WEB DESIGNER’S TOOL KIT
Helpful Resources to Make Your Life Easier
Monday, October 22, 12
Diana Frurip | Visual Designer @dianadianadiana
Sean Kelly | Senior Visual Designer @deamplified
Phil Robinson | Experience Design Director @pzilla
Hello.
Monday, October 22, 12
Mobile and Social Platforms
Hello.
Monday, October 22, 12
Before We Begin
Monday, October 22, 12
PART 1: GETTING STARTED1. A Compass2. A Better Process3. Insights
PART 2: TOOLS TO USE
PART 3: CONCLUSION
4. Sketching5. Prototyping6. Creating and Testing
Monday, October 22, 12
Part 1Getting Started
Monday, October 22, 12
PART 1: GETTING STARTED1. A Compass2. A Better Process3. Insights
PART 2: TOOLS TO USE
PART 3: CONCLUSION
4. Sketching5. Prototyping6. Creating and Testing
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 2012via iCrossing
Monday, October 22, 12
THIS ISN’T RESPONSIVE
Monday, October 22, 12
Monday, October 22, 12
PART 1: GETTING STARTED1. A Compass2. A Better Process3. Insights
PART 2: TOOLS TO USE
PART 3: CONCLUSION
4. Sketching5. Prototyping6. Creating and Testing
Monday, October 22, 12
Website
UX Visual Development
THEN...
Monday, October 22, 12
UX Visual Development
Website
Mobile Version
RECENTLY...
Monday, October 22, 12
Oh noes!
UX Visual Development
NOW...
Monday, October 22, 12
THE LANDSCAPE CHANGED QUICKLY
Photo: R. Baum
Monday, October 22, 12
BUT WE CAN
ADAPT
Photo: Asher Trafford
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
UXVisual
Development
A BETTER WAY
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 STARTED1. A Compass2. A Better Process3. Insights
PART 2: TOOLS TO USE
PART 3: CONCLUSION
4. Sketching5. Prototyping6. Creating and Testing
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 2Tools to Use
Monday, October 22, 12
PART 1: GETTING STARTED1. A Compass2. A Better Process3. Insights
PART 2: TOOLS TO USE
PART 3: CONCLUSION
4. Sketching5. Prototyping6. Creating and Testing
Monday, October 22, 12
GET INSPIREDpatterntap.com
Monday, October 22, 12
GET INSPIREDlovelyui.com
Monday, October 22, 12
GET INSPIREDandroidpatterns.com
Monday, October 22, 12
GET INSPIREDresponsive.rga.com
Monday, October 22, 12
GET INSPIREDmediaqueri.es
Monday, October 22, 12
GET INSPIREDbradfrost.github.com/this-is-responsive/patterns.html
Monday, October 22, 12
GET INSPIREDbradfrost.github.com/this-is-responsive/patterns.html
Monday, October 22, 12
GET INSPIREDstarbucks.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 PAPERvia UX Magazine
Monday, October 22, 12
SKETCH ON DEVICESvia UX Magazine
Monday, October 22, 12
SKETCH ON DEVICES
Android File Transfer
Dropbox
Monday, October 22, 12
SKETCH ON DEVICES
Android DesignPreview
LiveView
Monday, October 22, 12
SKETCH ON DEVICES
Adobe EdgeInspect
Monday, October 22, 12
PART 1: GETTING STARTED1. A Compass2. A Better Process3. Insights
PART 2: TOOLS TO USE
PART 3: CONCLUSION
4. Sketching5. Prototyping6. Creating and Testing
Monday, October 22, 12
THEN...
Monday, October 22, 12
NOW...
Monday, October 22, 12
PRESENT BETTER
Monday, October 22, 12
CHOOSE YOUR TOOLS WISELY
PAPER MOTION TEST (Keynote, Flash, AE)
DATA/CONTENT PROTOTYPE
(HTML, iOS, Android, Flash/AIR)
RESPONSIVE PROTOTYPE (HTML,Bootstrap,
Codepen, Adobe Edge)
FUNCTIONAL PROTOTYPE
(HTML, iOS, Android, Flash/AIR, Cinder)
SCRIPTED PROTOTYPE
(TAP, HTML, Keynote, Fireworks,
Flash/AIR)
VIDEO (iMovie, AfterEffects)
disposable d.i.y
evolving collaborative
Monday, October 22, 12
INTERFACE ORIGAMIvia 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
After Effects
Keynote
via Punchcut
Monday, October 22, 12
PART 1: GETTING STARTED1. A Compass2. A Better Process3. Insights
PART 2: TOOLS TO USE
PART 3: CONCLUSION
4. Sketching5. Prototyping6. Creating and Testing
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 CODEcss3gen.com/box-shadow/
Monday, October 22, 12
DEVELOPER TOOLS
Monday, October 22, 12
XCode iOS SimulatorAndroid SDKOpera Mobile Emulator
EMULATORS
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 STARTED1. A Compass2. A Better Process3. Insights
PART 2: TOOLS TO USE
PART 3: CONCLUSION
4. Sketching5. Prototyping6. Creating and Testing
Monday, October 22, 12
ConclusionYou’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
slideshare.net/RGA
Thank You.
Monday, October 22, 12
