Developing Design Systems: Patterns, Prototypes, and People (Dennis Kardys)
-
Upload
future-insights -
Category
Technology
-
view
1.004 -
download
0
Transcript of Developing Design Systems: Patterns, Prototypes, and People (Dennis Kardys)
DevelopingDesign Systems
Dennis Kardys @dkardys #FiLive
PATTERNS, PROTOTYPES, AND PEOPLE
CC license: @matt_j https://flic.kr/p/fksgQJ
the patterns in an environment shape patterns
of behavior
[a horrible story about birds]
“designing systems of components…
-Stephen Hay
“stitching atoms, molecules, and organisms together to form templates and pages. -Brad Frost
“bootstrap style systems for every client…
-Dave Rupert
a modular set of guidelines and components to improve consistency, efficiency,
sustainability
Design Systems taking first steps
1. interface inventory
2. organize your code.
CSS, Sass, SCSS, Compass, Less, BEM, SMACSS, OOCSS, ACSS, CCSS, etc…
Front End Frameworks and Preprocessors
(Do Not Repeat Yourself—so, whatever works for you!)
3. create useful documentation.
image courtesy Dean Hochman: https://flic.kr/p/nXSUzA
design shangri-la our innermost desires projected
or glamorized reference docs?
should not be static should not be incomplete can’t be a developer’s problem
xxx
what does it mean to build a living design system?
Understanding Systems A set of interacting or interdependent components
forming an integrated whole.
delineated by boundaries, surrounded and influenced by its environment, described by its
structure and purpose, expressed in its functioning.
http://blog.noupsi.de/post/44607342301/open-judge
image courtesy Richard Hefner: https://flic.kr/p/quWY6H
you can’t design interconnectivity when
you are inside a silo
What are your system boundaries?
page to page viewport to viewport across platforms across channels
patterns are language.many expressions out of simple rules and structures.
each patterns we design foster patterns of behavior
element + environment + experience
to the design/development/authoring teams:
we need to generate behaviors, not specify
behaviors.
1. avoid colliding with its immediate neighbors 2. be generally attracted to others of its kind 3. move in the same direction as the rest of the
group.
Flocking Logic
Each simply coordinates its movements with those of its neighbors.
The 1 Simple Rule
“the chorus line hypothesis”
Look left. Look right.
the ultimate team skill is the ability to choreograph actions at a
variety of scale.
CC image: @melfoody - https://flic.kr/p/ea5DSh
systems require rules.
with the right laws in place, order (rather than disorder) will increase over time.
imagine no rules. freedom vs. flexibility
“we want drag and drop.”
systems require rules.
prescriptive specifying what you should do
proscriptive identifying only what you should not.
system rules what the system permits and restricts
you from doing.
editorial/design rules guidelines for how you should use
different elements.
principles the rules the capture the system’s intent
and purpose.
Weave it all together. how will you design without seams?
Ideation
Modeling
Mapping
Refining
Ideation
ideation coming up with ideas
iteration refining ideas
Design Charrettes
1. Work with a blended group. 2. Generate the maximum number of ideas. 3. Alternate between solo and group ideation. 4. Surface conflict and build consenus. 5. Inspire
DESIGN CHARRETTES
Centerpointthe core patterns and behaviors that define
your system.
Inspiration Documents
1. A tool to provoke conversation. 2. Use it to answer YOUR questions. 3. Describe rationale not “design options”.
VISUAL INSPIRATION
Sketching
1. Show multiple sketches. 2. Make each sketch unique in concept. 3. Discuss viability of concept and direction. 4. Never let your stakeholder hold on to them. 5. Avoid iteration.
SKETCHING (for presentations)
modeling(shaping the elements)
Element Collages / Style Tiles
Element Collages / Style Tiles
Element Collages / Style Tiles
Paper Prototypes
Structured Content
Content Patterns (templates)
layout (pages)
Navigational Patterns & Flows
mapping(find the points of intersection)
structured content objects feed the data
model
data model helps define patterns and components
styleguide
refining and iterating
• purpose • intended behavior • examples of states • system or editorial rules • use cases • data source • performance requirements
Documenting Patterns
stress testing
too much content. too little content. poorly formatted image.
the story of Coyote and the Frybread.
http://www.flickr.com/photos/thaths/6200904390/
http://blog.noupsi.de/post/44607342301/open-judge
image courtesy Richard Hefner: https://flic.kr/p/quWY6H
How can you extend your influence beyond
your sphere?
Thanks! Dennis Kardys
@dkardys #filive