Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Browser’s Castle: Defend Your Code Like a Designer

182 views

Published on

Presented at Web Unleashed 2017
More info at www.fitc.ca/webu

presented by Liam Oscar Thurston, TWG
and Ksenija Gogic, TWG

Overview

When your designer’s not available, or – better yet – you’re the designer, you need to defend your code… and your designs. In this talk, Liam will cover Design Principles 101, Sketch 101 for Front-End, How to Defend Your Work, and lots more. Over a decade of leading design and engineering teams to achieve collaborative glory, Liam has learned how to help both succeed. Ksenija Gogic, front-end superhero of TWG fame will join Liam to regale you with tips from both sides of the struggle.

Objective

To empower all front-end developers to succeed as designers and defenders while creating pure beauty in the browser.

Target Audience

Front-end developers, designers, product managers

Assumed Audience Knowledge

Junior understanding of design tools, intermediate + understanding of front-end frameworks.

Five Things Audience Members Will Learn

Design Principles 101
Sketch 101 for Front-end
How to Defend Your Work
Lessons From the Front-End
How to Get Along With Your Team

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Browser’s Castle: Defend Your Code Like a Designer

  1. 1. Browser’s Castle
  2. 2. Developer Ksenija Gogic Designer Liam Thurston Suh Due @kseninja @liamthurston
  3. 3. Developer Ksenija Gogic Designer Liam Thurston Suh Due You! The User @kseninja @liamthurston
  4. 4. Working together better Making better products = We believe
  5. 5. Give you some tips and tools for better collaboration Our goal
  6. 6. 1. Empathy Building 2. Active Collaboration 3. Candid Communication 4. The Results Today’s agenda: • The Working Agreement • The Project Roadmap • The Moodboard • Design to Align • Playing in a Sandbox • Radical Candor
  7. 7. Empathy Building Empathy Building
  8. 8. The Working Agreement Resource 1.
  9. 9. The Working Agreement Resource 1. Why to do it • Set clear expectations within your team
  10. 10. The Working Agreement Resource 1. Why to do it When to do it • Project kickoff, tension points, retrospective • Set clear expectations within your team
  11. 11. The Working Agreement Resource 1. Why to do it When to do it • Project kickoff, tension points, retrospective • Set clear expectations within your team The results • Build more trust and play to your strengths as a team
  12. 12. The Working Agreement Resource 1. #Realtalk
  13. 13. The Project Roadmap Resource 2.
  14. 14. The Project Roadmap Resource 2. Why to do it • Schedule key activities to ensure a project comes to completion smoothly 👌
  15. 15. The Project Roadmap Resource 2. When to do it • Project kickoff, sprint planning, daily grooming Why to do it • Schedule key activities to ensure a project comes to completion smoothly 👌
  16. 16. The Project Roadmap Resource 2. The results • Keeps the team organized, aligned on project progress When to do it • Project kickoff, sprint planning, daily grooming Why to do it • Schedule key activities to ensure a project comes to completion smoothly 👌
  17. 17. The Project Roadmap Resource 2. #Realtalk
  18. 18. Active Collaboration
  19. 19. The Moodboard Resource 3.
  20. 20. The Moodboard(s) Resource 3. Why to do it • Establish visual direction and inspiration
  21. 21. The Moodboard(s) Resource 3. Why to do it When to do it • After some discussion of key features and user flows • Establish visual direction and inspiration
  22. 22. The Moodboard(s) Resource 3. Why to do it When to do it • After some discussion of key features and user flows • Establish visual direction and inspiration The results • Excitement and clarity for the project’s appearance
  23. 23. The Moodboard(s) Resource 3. #Realtalk
  24. 24. Design to Align Resource 4.
  25. 25. Design to Align Resource 4. Why to do it • Get your ideas out of your head and collaborate on page structure
  26. 26. Design to Align Resource 4. Why to do it When to do it • Once you’ve established goals, roadmap, and gotten inspired • Get your ideas out of your head and collaborate on page structure
  27. 27. Design to Align Resource 4. Why to do it When to do it • Once you’ve established goals, roadmap, and gotten inspired • Get your ideas out of your head and collaborate on page structure The results • Frankenstein wireframes that everybody contributed to
  28. 28. Design to Align Resource 4. #Realtalk
  29. 29. Build The Castle
  30. 30. Candid Communication
  31. 31. Dare to Pair Resource 5.
  32. 32. Should we use a gif here? A snapshot of something we “pair” on?
  33. 33. Resource 5. Why to do it Play in the Sandbox • Quickly solution and improve existing features together
  34. 34. Resource 5. Why to do it When to do it Pair Programming • Quickly solution and improve existing features together • When it’s faster and more effective to iterate in person
  35. 35. Resource 5. Why to do it • Quickly solution and improve existing features together Creative Coding The results • Solving problems together in the browser, moving on When to do it • When it’s faster and more effective to iterate in person
  36. 36. Resource 5. Dare to Pair #Realtalk
  37. 37. Radical Candor Resource 6.
  38. 38. Radical Candor Resource 6. Why to do it • Get real with yourself and eachother, and resolve issues as they happen
  39. 39. Radical Candor Resource 6. Why to do it When to do it • All the time, forever: identify, discuss, solve • Get real with yourself and eachother, and resolve issues as they happen
  40. 40. Radical Candor Resource 6. Why to do it When to do it • All the time, forever: identify, discuss, solve • Get real with yourself and eachother, and resolve issues as they happen The results • Honesty, integrity, transparency & trust
  41. 41. Radical Candor Resource 6. #Realtalk
  42. 42. WHAT.
  43. 43. twg.io/browsers-castle/

×