Designer Developer Collaboration

Learn how to create better work, faster, by increasing team collaboration.

We are building more web and mobile applications than ever and clients continue to push deadlines up while still expecting high quality. In this talk, we will discuss tools to help increase collaboration, agile workflow, and other ways to improve handoffs.

This talk will be based off of this blog: https://medium.com/re-write/8-ways-to-increase-designer-developer-collaboration-42da0ebb238a#.iur8sj5eg

Transcript

1. Designer / Developer Collaboration Benton Rochester Partner + Developer @bauscode
2. Game plan • About Me • How the marketplace has changed • Problem • Tools & Strategies • Q&A
3. About me • Vim over emacs • Spaces over tabs • Sketch over Photoshop • Design systems over unique styles
4. Since 2013 the web has grown by more than one third to over 850 million websites. http://www.internetlivestats.com/total-number-of-websites/
5. History http://www.internetlivestats.com/total-number-of-websites/
6. http://www.internetlivestats.com/total-number-of-websites/
7. www.statista.com/statistics/263795/number-of-available-apps-in-the-apple-app-store/
9. Cause and effect.
10. Competitive markets and a global workforce has forced designers & developers to build applications faster, stronger, better, and cheaper. Problem
11. http://opensignal.com/reports/2015/08/android-fragmentation/ Android Fragmentation Visualized
12. • Designers who know how to Code • Developers who know how to design
14. • Better Tooling • Emerging markets/niches • Growing communities There’s good news.
15. What are some actionable items?
16. • Blow-up your work flow • Change team dynamics • Explore new tools • Rebuild your process
17. Blow up your workflow
20. Style Tiles Style Tiles are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web.
21. Style Tiles https://dribbble.com/shots/2319863-Style-Tilin
22. Style Guides Design systems increase speed of feature development, application performance and design consistency.
23. Style guides www.sephora.com/styleguide/
24. Style guides – CSS Stats CSSStats – getBootstrap.com CSSStats – applebees.com
27. Atomic Design “As the craft of Web design continues to evolve, we’re recognizing the need to develop thoughtful design systems, rather than creating simple collections of web pages.“ — Brad Frost
28. Atomic Design http://bradfrost.com/blog/post/atomic-web-design/
29. Atomic Design http://patternlab.io/
30. Atomic Design https://nordnet.github.io/nordnet-ui-kit o
31. Naming Conventions BEM is a naming mythology. Block – higher level of an abstraction or component Element – represents a descendent of .block that helps form .block as a whole. Modifier – represents a different state or version of block
32. BEM syntax
33. Naming Conventions – BEM https://nordnet.github.io/nordnet-ui-kit o
35. Change Team Dynamics
36. The Design Sprint A five-day process for answering critical business questions through design, prototyping, and testing ideas with customers
37. Team Sport – Design Sprints research sketch decide prototype test
38. Coordinate Execution Communicating execution strategies can allow teams to coordinate formats, styles, and solutions.
39. Coordinate Execution
40. Integrate your teams
42. Tools Matter New tools are being created everyday. Some are game changes, some… are not.
43. Tooling
44. Tooling
45. Tooling
46. Tooling
47. Version Control Version control for everyone!
48. Version Control
49. Version Control • Pixelapse • Sketch plugin • Another sketch plugin • GitHub design version control.
50. Prototyping Validate an idea, explain a direction, discover unknowns.
51. Prototyping
52. Prototyping • CodePen • InVision • FramerJS • Facebook’s Origami
53. Rebuild your process Individuals and interactions over processes and tools Working software over comprehensive documentation Customer collaboration over contract negotiation Responding to change over following a plan
55. Make sprints a team sport By giving designers and developers an insight into each others agile boards, they can coordinate, estimate, and collaborate easier.
56. Team Sport – Sprint Boards
57. Share Often
58. • Blow-up your work flow • Change team dynamics • Explore new tools • Rebuild your process TLDR:
59. Thank you Email: benton@bauscode.com Twitter: twitter.com/im_Benton Medium: medium.com/@im_benton