Designing in the open ato 2017
•
1 gefällt mir•895 views
"Designers, Don't Be Afraid of GitHub! Designing In The Open" presented by Serena Chechile Doyle & Catherine Robson at All Things Open 2017
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (12)
Ähnlich wie Designing in the open ato 2017
Ähnlich wie Designing in the open ato 2017 (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Designing in the open ato 2017
- 1. DESIGNING IN THE OPEN(Designers, Don’t Be Afraid of GitHub) PRESENTATION BY SERENA CHECHILE DOYLE & CATHERINE ROBSON
- 2. Serena Chechile Doyle UX Strategist, Red Hat @serenamarie125 Who Are We? Catherine Robson UX Strategist & Manager, Red Hat @catwrobson
- 4. Current Design Process Challenges Design created Not used Heavily modified
- 5. Current Design Process Challenges UI Implemented API Not Ready Docs, QE unclear about design & implementation
- 6. Or Type in www.wooclap.com/DESTOOLS Or Send @DESTOOLS once to (855) 910-9662 to connect to the event LIVE SURVEY
- 7. Tools we use in @RedHatUXD
- 8. “A person who never made a mistake never tried anything new” “
- 9. Designing in the Open Aren’t we supposed to be ? Aren’t we supposed to be designing in the open?
- 10. Open Process & ContentBeing Transparent Open Feedback So, what does “Designing in the Open” mean? Industry Best Tools
- 12. Enables transparency & collaboration Developers are comfortable with it Provides version control GitHub Can Help! Edit, push, and your changes are live
- 13. OPEN DESIGN WITH GITHUB METHOD 1 Site Powered by GitHub & Jekyll
- 14. It all starts with PatternFly All of our designs come from, and contribute to PatternFly, an open design system.
- 15. Create Mockups & Flows What does this process look like? Site Powered by GitHub & Jekyll Document the use cases and the design interactions We use markdown Put up a PR with new and modified files to get feedback from the community (Markdown + PNGs) Design mocks & docs are viewable on patternfly.org via Jekyll “In The Open” available for - Product Designers - Developers PatternFly is using this process
- 16. Site Powered by GitHub & Jekyll
- 17. OPEN DESIGN WITH GITHUB METHOD 2 GitHub Links to InVision Flows
- 18. What does this process look like? is using this process GitHub links to InVision Flows Design with Callouts (any tool can be used) Post to InVision Update GitHub .md file
- 19. GitHub links to InVision flows
- 20. Add one line in .md file for each row
- 21. Utilize InVision for flow, commenting, & review
- 22. Filterable, searchable reference for longevity and organization Very low barrier to entry for designers (don’t have to learn git) InVision files provide clickable prototype experience In Summary: GitHub links to InVision Flows Pros Team conversation about design can get lost in the issue Unless you regulate design file templates, designers can post anything to InVision Cons
- 23. OPEN DESIGN WITH GITHUB METHOD 3 Design Mocks & Docs in GitHub
- 24. Create Mockups & Flows What does this process look like? Design Mocks & Docs in GitHub Collaborate and review with Product Management & Development Document the flow & interaction and provide guidance on what PatternFly icons & patterns to utilize We use markdown Put up a PR with new and modified files (Markdown + PNGs) Design mocks & docs are viewable via GitHub Pages “In The Open” available for: - Development - QE - Documentation
- 25. What projects use this method today? Design Mocks & Docs in GitHub
- 26. Documented flows and behavior decreases assumptions Design artifacts are in the same location as the code repo GitHub provides filtering Pros Barrier to entry is high for some to learn git, but there are some tools, such as GitKraken & SourceTree that can help! Cons Design Mocks & Docs in GitHub Versioning, commenting and history are easily accessible by all Time consuming to get PRs accepted, but can access PR before merged Learning .md can be time consuming, but there are tools that can help
- 27. Design Mocks & Docs in GitHub Using atom as an editor for .md files
- 28. Including PatternFly dependencies in the design documentation helps developers They are part of the design lifecycle We’re more active with development teams throughout the process Developers are implementing as designed Referenceable documentation Shared understanding of the vision Teams have better communication about design In Conclusion Next we’ll consider how we merge multiple styles of Open Design using GitHub!
- 29. Resources Thanks to Chris Shinn for his great how-to videos: Contributing to GitHub with Gitkraken Contributing to GitHub with SourceTree Thanks to Jenny Haines for fantastic visual support Atom Balsamic GitHub InVision PatternFly Sketch GitKraken Sourcetree Adobe Credits