The Web Designers Toolkit
Upcoming SlideShare
Loading in...5
×
 

The Web Designers Toolkit

on

  • 9,834 views

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

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.

Statistics

Views

Total Views
9,834
Views on SlideShare
5,966
Embed Views
3,868

Actions

Likes
70
Downloads
212
Comments
1

16 Embeds 3,868

http://arquiteturadeinformacao.com 3076
http://julianaconstantino.wordpress.com 370
http://technochicblog.wordpress.com 343
http://395ux.blogspot.com 25
http://eventifier.co 11
https://twitter.com 10
https://www.facebook.com 9
http://www.scoop.it 7
http://www.facebook.com 6
http://www.techgig.com 3
http://translate.googleusercontent.com 2
http://pinterest.com 2
http://newsblur.com 1
https://si0.twimg.com 1
http://core.traackr.com 1
http://abtasty.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

The Web Designers Toolkit The Web Designers Toolkit Presentation Transcript

  • Helpful Resources to Make Your Life Easier THE WEB DESIGNER’S TOOL KITMonday, October 22, 12
  • Hello. Diana Frurip | Visual Designer @dianadianadiana Sean Kelly | Senior Visual Designer @deamplified Phil Robinson | Experience Design Director @pzillaMonday, October 22, 12
  • Hello. Mobile and Social PlatformsMonday, October 22, 12
  • Before We BeginMonday, 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: CONCLUSIONMonday, October 22, 12
  • Part 1 Getting StartedMonday, 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: CONCLUSIONMonday, 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. ” –MobiThinkingMonday, October 22, 12
  • “ "Mobile devices now make up about ” 20 percent of U.S. web traffic" –All Things DMonday, October 22, 12
  • THINK GLOBALLY Mobile Operating System Market Share February 2012 via iCrossingMonday, October 22, 12
  • THIS ISN’T RESPONSIVEMonday, 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: CONCLUSIONMonday, October 22, 12
  • THEN... Website UX Visual DevelopmentMonday, October 22, 12
  • RECENTLY... Mobile Version Website UX Visual DevelopmentMonday, October 22, 12
  • NOW... Oh noes! UX Visual DevelopmentMonday, October 22, 12
  • Photo: R. Baum THE LANDSCAPE CHANGED QUICKLYMonday, October 22, 12
  • Photo: Asher Trafford BUT WE CAN ADAPTMonday, 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 UXMonday, October 22, 12
  • Monday, October 22, 12
  • GET COMFORTABLE BEING OUT OF AND ADAPT TO CHANGESMonday, 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: CONCLUSIONMonday, October 22, 12
  • OBJECTIVES FIRSTMonday, October 22, 12
  • “ Content informs design – design without content is decoration ” –Jeffrey Zeldman, Happy CogMonday, October 22, 12
  • ONE SIZE DOESN’T FIT ALLMonday, October 22, 12
  • ONE SIZE DOESN’T FIT ALLMonday, October 22, 12
  • DELEGATE PHILOSOPHERSMonday, October 22, 12
  • THINK BIG PICTUREMonday, October 22, 12
  • Part 2 Tools to UseMonday, 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: CONCLUSIONMonday, October 22, 12
  • GET INSPIRED patterntap.comMonday, October 22, 12
  • GET INSPIRED lovelyui.comMonday, October 22, 12
  • GET INSPIRED androidpatterns.comMonday, October 22, 12
  • GET INSPIRED responsive.rga.comMonday, October 22, 12
  • GET INSPIRED mediaqueri.esMonday, October 22, 12
  • GET INSPIRED bradfrost.github.com/this-is-responsive/patterns.htmlMonday, October 22, 12
  • GET INSPIRED bradfrost.github.com/this-is-responsive/patterns.htmlMonday, October 22, 12
  • GET INSPIRED starbucks.com/static/reference/styleguide/Monday, October 22, 12
  • START WITH A SYSTEMMonday, October 22, 12
  • STYLE TILESMonday, October 22, 12
  • STYLE TILESMonday, October 22, 12
  • STYLE TILESMonday, October 22, 12
  • SKETCH WITH PAPER via UX MagazineMonday, October 22, 12
  • SKETCH ON DEVICES via UX MagazineMonday, October 22, 12
  • SKETCH ON DEVICES Dropbox Android File TransferMonday, October 22, 12
  • SKETCH ON DEVICES LiveView Android Design PreviewMonday, October 22, 12
  • SKETCH ON DEVICES Adobe Edge InspectMonday, 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: CONCLUSIONMonday, October 22, 12
  • THEN...Monday, October 22, 12
  • NOW...Monday, October 22, 12
  • PRESENT BETTERMonday, 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 MobileMonday, October 22, 12
  • CONTENT HIERARCHYMonday, October 22, 12
  • EXPERIENCE DESIGNMonday, October 22, 12
  • PROTOTYPES FOR CLIENTS TAP by unitid.nlMonday, October 22, 12
  • PROTOTYPES FOR CLIENTS TAP by unitid.nlMonday, October 22, 12
  • PROTOTYPES FOR CLIENTS Prototypes AppMonday, October 22, 12
  • MOTION PROTOTYPES via Punchcut After Effects KeynoteMonday, 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: CONCLUSIONMonday, 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 MEDIUMMonday, October 22, 12
  • YOUR BEST NEW DESIGN TOOL image via Kuswanto, Petshop Box StudioMonday, October 22, 12
  • CONTENT DICTATES BREAKPOINTSMonday, October 22, 12
  • VISUAL TO CODE Subtle PatternsMonday, October 22, 12
  • VISUAL TO CODE Dev RocketMonday, October 22, 12
  • VISUAL TO CODE Slicy CSS HatMonday, October 22, 12
  • VISUAL TO CODE css3gen.com/box-shadow/Monday, October 22, 12
  • DEVELOPER TOOLSMonday, October 22, 12
  • EMULATORS Opera Mobile Emulator Android SDK XCode iOS SimulatorMonday, October 22, 12
  • TESTING *Responsinator *Responsive.is *Screen Queries Resize My Browser Responsive PX Responsive Design Bookmarklet Screenfly Adobe EdgeMonday, 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: CONCLUSIONMonday, October 22, 12
  • Conclusion You’ve got this.Monday, October 22, 12
  • FUTURE FACINGMonday, October 22, 12
  • BE PROACTIVEMonday, October 22, 12
  • TEST ON DEVICEMonday, October 22, 12
  • SAME JOB, NEW TOOLSMonday, October 22, 12
  • BEYOND THE CREATIVE SUITEMonday, October 22, 12
  • If it’s not working, figure out a new process.Monday, October 22, 12
  • SAVE TIME AND MONEYMonday, October 22, 12
  • BE WATER, MY FRIENDMonday, October 22, 12
  • Monday, October 22, 12
  • Thank You. slideshare.net/RGAMonday, October 22, 12