Beyond Static: The New Design System

In today’s mobile world, providing design deliverables within the browser creates a more productive experience for your clients and your team. And while this means a shift from Photoshop to Sublime, it isn’t just a code shift. The design process remains integral and informs every web-based deliverable. Using a real client case study, Lea will explore Bright Umbrella’s design deliverables in and out of the browser and explain how their in-house “framework” has ultimately saved them time and money.

Transcript

1. Some rights reserved Beyond Static: The New Design System Lea Alcantara for Web Afternoon AUG 28, 2015
2. Sounds like that Princess Lead Designer 
 abrightumbrella.com Co-host, CTRL+CLICK CAST ctrlclickcast.com Canadian edmonton, alberta 2 source: dailymail.co.uk http://abrightumbrella.com/about/lea-alcantara
3. Seattle, WA abrightumbrella.com/visas
5. Reviewing Processes • We needed to standardize how we work • Time to experiment is at a premium • Need to agree quickly and get on the right path sooner • Still want to do high quality work 5
6. 6 Beyond Static: The New Design System Lea Alcantara for Web Afternoon AUG 28, 2015
7. 7 Time Is Money Lea Alcantara for Web Afternoon AUG 28, 2015
8. 8 Real Talk What works for us http://abrightumbrella.com/blog/create-your-own-starter-files
10. “Old-School” Way 10
11. 11 Evolution of Man & Device source: http://www.stephendale.com/2012/11/30/the-evolution-of-social-media/
12. 12 http://bradfrost.com/blog/post/techcrunch/ source:
13. Evolution of Design Deliverables 13
14. Page-Based vs Systems • 20+ (or more?!) pixel-perfect Photoshop comps later > hand to front-end developer 14 • if conscientious, would create a document outlining fonts and colors and hex/rgb codes • labelling all folders and names • extracting all the images for the dev
16. Confusion! @_@ 16 • What about hovers? Or animation? Or any interaction? • Viewport changes? • Lots of communication issues abound
17. 17 Our First Collaborative Responsive Project CASE STUDY ONE
18. Enter Dynamic Deliverables! 18 http://styletil.es/ http://www.agnostic.io/livewires/ http://seesparkbox.com/foundry/our_new_responsive_design_deliverable_the_style_prototype
20. Dynamic Style Tile • Fast-and-dirty coding and didn’t browser check. Inconsistencies = client confusion • Ended up sending them a static screenshot of what I saw for them to see the direction 20 Attempt 1
22. Dynamic Live Wires • Just black-and-white • Quick initial sketches > straight to browser • Not much “real” text, just content areas • Helped a lot! 22 ὑ Attempt 1
28. THE BIG BUT… 28
31. 31 I’ve made a huge mistake. Gob Bluth, Arrested Development
32. 32 And that didn’t even address the “squishy middle.” http://seesparkbox.com/foundry/there_is_no_breakpoint
33. 33 Still, the design is approved. What’s next?
34. Front-End Starts 34 Remember Live Wires?
35. Beyond Static 35
36. A Hybrid Approach aka Starter Files! 36 http://abrightumbrella.com/blog/create-your-own-starter-files
37. Time = Investment 37
38. 38 Static AND Dynamic The Best of Both Worlds • But how to decide what stays in the browser or on screen vs what should/can stay static?
39. 39 Family Friend Poems CASE STUDY TWO …and other stuff.
40. Before jumping in… 40
41. Identify internal & external/client deliverables 41
42. Set expectations with your client 42
43. Then decide what should be static and what should be dynamic 43
44. Our Static Deliverables 44 • http://www.wired.com/2014/05/reading-on-screen-versus-paper/ • http://www.theguardian.com/books/2014/aug/19/readers-absorb-less- kindles-paper-study-plot-ereader-digitisation
45. Internally • Rough initial wireframes sketches • Paper & Photoshop • Maybe a few tablet comps of key pages 45
46. Clients • Content Prioritization doc (after content audit) • Site Map • Content Diagram • If project includes a branding exercise, a 1-page visual branding summary as a PDF/ PNG • Key pages to be made into static design comps 46
47. Brand Identity Summary • Our version is super simplified • Simply just the starting color scheme and typefaces • Sample imagery • This will eventually inform the Element Collage and Style Guide 47
48. I Still Use Photoshop! 48 ὑ …and Illustrator!
49. What Comps? How many? • Include smallest mobile view • Tablet view to show clients at this stage too variable—don’t want to set expectations yet • Usually the homepage and 2-3 main internal pages, if necessary—also dependent on budget and timeline 49
51. Do as I say, Not as a I do. 51 AKA sometimes we still need more static comps
52. Our Dynamic Deliverables 52
53. Clients • Element Collage • Live Wires 53 • Front-end Templates • Style Guides
54. 54 Old Element Collage
55. New Element Collage • Our version of this is starting to apply the design concepts into parts of the content • No layouts at this stage • Navigation and specific module styling begins here 55
56. Live Wires • The wireframes • Already responsive • Customized for our own framework • The base of the final development 56
57. Integrated System Live Wires + Element Collage
58. In-Context Feedback! • Allows clients to: • see proportions and priorities • test in their mobile devices without confusion • focus on content areas than design specifics 58 Easier to Make Changes!
59. Design in the Browser • The designer (i.e. me) needs to have active communication with the developer • The developer needs to make smart design decisions “in between” — then verify with designer • You have to accept imperfections: there is no such thing as pixel perfection 59
60. Integrated System = Front-end templates
61. Testing & Q/A • Possibly unpopular opinion: test only approved amount of views. 61
62. 62 Time Is Money Lea Alcantara for Web Afternoon AUG 28, 2015
63. Style Guides • When final development is done • Provided post-site launch 63
64. Integrated System = Style Guide
65. 65 Design systems, not pages! • Initial investment is worth it:
 speed and quality of work improves • There is still room for static deliverables • Process should always be flexible and evolve • Do what works for you!
66. 66 Be Flexible! • Every project and client is different • Not all projects need ALL these deliverables • Improve each deliverable on a new project
67. Questions? • @lealea • @abrightumbrella | abrightumbrella.com • @ctrlclickcast | ctrlclickcast.com • dribbble.com/lealea • speakerdeck.com/lealea 67