Handsome UI KIts

Handsome
UI KITS
✦ 1
is setting standards for UI Kits

You’re probably wondering
WHAT’S THE POINT OF THIS DECK?
✦ 2
To answer the questions:
• What is a UI kit and when are they useful?
• How do you create a UI kit and what variables affect
the process of creation?
!
To show:
• A smorgasbord of elements that could go in a UI kit
and may serve as a catalyst for design and planning.

What’s a long deck without a
TABLE OF CONTENTS
✦ 3
1. What is a UI kit?
2. When are they appropriate?
3. Why can they be VERY challenging?
4. General rules and potential gotchas.
5. What details should you include?
6. Questions to ask before you get started
7. Parts of the UI kit creation process?
8. Review cadence

First things first.
WHAT IS A UI KIT?
✦ 4
Is…
• An appropriate set of components and rules
a company can use to rapidly design and
develop their digital platform(s) and/or
product(s).
• Built based on who is going to be using it,
and how it is going to be used.
!
!
Is not…
• A list of every possible element a company
may use forever and ever and ever and ever
and ever in the history of the world.
• Solely a designers’ comps with only red
lines of specs, with no supporting context,
rules, or explanations.
• A one size fits all solution.
!
!

UI Kits
WHY CAN THEY BE USEFUL?
✦ 5
• Allow for rapid and efficient development and
expansion.
!
• Create a consistent vocabulary.
!
• Establish an environment for governance and
accountability.
!
• Ensure design vision is maintained.
!
• SAVE time and money

UI Kits
WHEN ARE THEY NOT APPROPRIATE?
✦ 6
• Early stage startups that could use a ready made UI kit
or component library such as Twitter Bootstrap rather
than developing their own.
!
• Early stage agile or lean product teams that have yet to
prove there is a demand for their product.

UI Kits
WHY CAN THEY BE CHALLENGING?
✦ 7
• Requires an extreme eye for detail and often thorough documentation.
!
• Getting every element approved by the right people can be arduous.
!
• Agencies often have to build a UI kit in line with a future designs that do
not exist yet.
!
• For situations where a UI kit is not designed with every interface, it can
be tough to forecast and thus prioritize what a company needs in their
UI kit.
!
• You have to balance what looks best for design with what is most
efficient for future design/development. This often results in a lot of
back and forth between designer, product owner and developer.

Let’s test your eyesight…
RULES & GOTCHAS
✦ 8
1. Build the UI kit based on the needs of the company and
the people who will be building it.
2. Don’t simply red-line design comps. Design comps should
be used to provide context and to show how basic
components are implemented.
3. Start with basic components, then abstract how those
components can be applied to a specific interface.
4. If it’s not your development team building it, don’t
assume other developers have ANY eye for aesthetic
detail, layout or hierarchy. While front-end developers
may copy what is spec’d out in the photoshop file, they
may glance over details designers know are important.
Speccing out details help developers and designers know
what details they should be paying attention to.
4. Focus on default style/layout first
5. Stick to what you prioritized during the initial audit, and
don’t just pull from already designed interfaces and
assume it will cover everything.
6. When necessary your library should also include
explanations on when to use components and include
notes directly to developers including code-snippets or
references to default plugins or styles.
1. Focusing on the complex, neglecting the simple.
It’s easy for designers to get caught up in the details.
Remember everything you design, should be based off of
rules others can follow. For that reason always include
common elements and rules for those common elements.
2. So many states, so little time. Don’t forget hover
states, depressed states, inactive states and any animation
rules.
3. Platforms and contexts. Is it on iOS or Android?
What if it’s held portrait (or landscape)?
4. Designing with blinders. Most people will say design
should not be a slave to a UI kit, and that’s TRUE. A UI
kit should 99% of the time follow design inspiration. But
make sure when you design you are thinking of not only
the elements that look best on that screen, but also
elements, conventions and patterns that will create the
best experience across all interfaces.
5. Ignoring the future. If you create a UI kit that is not
flexible, and is difficult to design future pages off of, it will
be cast aside.
6. Giving only rules and no frameworks. Frameworks
help people make responsible and appropriate decisions.
Just writing rules, limits the flexibility of your UI kit.
RULES GOTCHAS

UI Kit
SHOULD I SPEC OUT THIS DETAIL?
✦ 9
THE ANSWER IS YES IF…
!
1. The component is being developed by
someone who is not on your team.
2. The component is being developed after a
contract has ended.
3. Being able to quickly identify that detail will
make design decisions 3 months down the
line easier.
4. The component is flexible depending on the
size of elements (i.e. test, tables/buttons).
5. Getting a detail wrong will result in a design
you would not be proud of.
THE ANSWER IS NO IF…
!
1. Your team is handling the development and
it is just a matter of copying and pasting
code. In this case just refer to where
someone could find the exact element in a
code library.
2. It is standard convention of an outside
component library such as Twitter bootstrap.
3. The design will not be affected if a detail is
not followed.
4. You will collaborate closely with developers
for the foreseeable future of the product.

UI Kit
DETAILS ONE COULD INCLUDE
✦ 10
1. Length
2. Height
3. Width
4. Padding - Top, Right, Left,
Bottom
5. Alignment
6. Corner radios
7. Color name
8. Color hex code
9. Font library
10. Plugins
11. Pre-built component library to
include
12. Drop shadow
13. Font size
14. Font style
15. Font weight
16. Hoover state
17. Depressed state
18. Inactive state

We recommend you answer these
QUESTIONS BEFORE YOU GET STARTED
✦ 11
Who will use it?
• Developers? Product Managers? QA
Marketing personnel?
What will it be used for?
• Only desktop? Only mobile?
• Will the style be translated to print?
When will it be used?
• For a specific re-design?
• For the next 2-4 years?
• For only one project?
Where will it be used?
• Will it exist as a pdf?
• A code base?
• Will it manifest itself as a physical copy on
people’s desks?
• Will it be used in presentations?
Why is a style guide needed?
• Do they not have people on their team with
a design aesthetic?
• Are they a big company looking to have a
consistent UI?
• Are they looking for tools to build out an
entire experience rather than pay you to do
it all?
• Speed up development & design time?
How will it be used?
• Will designers and developers always be
working next to each other and closely
collaborating?

Handsome UI Kit
HOW TO CREATE A UI KIT
✦ 12

t
CREATING A UI KIT (VERSION 1)
✦ 13
UI Kit
Designing interfaces
Building the UI Kit
Fully designed
UX with accompanying
rules and documentation
The UI Kit is created in conjunction with designing the interfaces of the application.
The UI Kit grows and changes as a result of design decisions.

t
✦ 14
UI Kit
Building the UI Kit Fully designed
• Occurs with larger clients, bigger budgets and
extended timelines.
• All UI Kit elements organically built because
of the expansiveness of the interfaces being
designed.
• End result is a very fluid experience and a UI
kit that was built taking into account all
problems across all interfaces.
• In vivo changes to interface elements can lead
to numerous retroactive changes. (Example: I
create buttons while designing interfaces A, B,
and C we decide to change buttons on
interface L…A-K now need to be changed).
• Requires less UI Kit planning on the front end.
!
!

t
✦ 15
UI Kit
Building the UI Kit Fully designed
Steps
1. Start designing interfaces
2. Iteratively populate the UI kit making sure
all decision makers approve every new or
updated element as they approve each
interface.
3. Use elements that have been made to
design future interfaces.
4. Towards the end of the engagement, start
cleaning up the UI kit. Clearly document
and explain general rules and principles
and how they are applied to interfaces
you’ve designed.
!
!

✦ 16
{
UI Kit
Building the UI Kit
Things you design
What you’re not designing
UI Kit and
Guidelines for pages
that will soon be designed
by someone else
At the beginning of a contract, you determine which screens you will build, and
then produce a UI kit as a separate deliverable for the dev team to use as a guide for
building all remaining interfaces.

✦ 17
{
UI Kit
Building the UI Kit
Things you design
UI Kit and
Guidelines for pages
by someone else
• This type of creation process occurs with
smaller clients with limited budgets,
shorter timeline and a keen awareness
around future features that will need to be
built immediately.
• UI Kits are assembled primarily after key
screen design.
• Can be challenging if the key screens do not
lend themselves to common components
and rules.
• Requires more planning and auditing at the
beginning of the process.
!
!

✦ 18
{
UI Kit
Building the UI Kit
Things you design
UI Kit and
guidelines for pages
by someone else
Steps
1. Audit the application, choose the key
interfaces you will design and list the
primary components needed to build the
majority of other interfaces.
2. Iteratively build the UI kit along with the
few key interfaces with appropriate
checkins and approvals (like version 1).
3. Compare the UI kit with the list you made
in Step 1 and make sure nothing has been
left out.
!
!

REVIEW CADENCE
✦ 19
Both versions need a
1. Who are the decision makers that need to review each
component?
2. Where will feedback be tracked and documented?
3. How often will reviews take place?
4. Where can the entire design team find final/approved
elements?

Part 1
SUMMARY
✦ 20

SUMMARY
✦ 21
Part 1
• UI Kits are helpful in the appropriate context but can be challenging.
They require intentional planning and execution.
!
• Focus on common elements then expand and abstract from there.
!
• They are (at least currently) critical for systematic and intentional design
and development across large and/or rapidly expanding digital products.
!
• There is no one size fits all solution. The format and
components of a UI Kit depend on how the style guide will be
implemented and how the product will be maintained.

Handsome UI KIts

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Handsome UI KIts

Semelhante a Handsome UI KIts (20)

Último

Último (20)

Handsome UI KIts