12. Enables transparency & collaboration
Developers are comfortable with it
Provides version control
GitHub Can Help!
Edit, push, and your changes are live
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
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
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
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
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