+ All Categories
Home > Design > Handsome UI KIts

Handsome UI KIts

Date post: 02-Jul-2015
Category:
Upload: jonathan-lewis
View: 633 times
Download: 0 times
Share this document with a friend
21
Handsome UI KITS 1 is setting standards for UI Kits
Transcript
Page 1: Handsome UI KIts

Handsome

UI KITS

✦ 1

is setting standards for UI Kits

Page 2: Handsome 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.

is setting standards for UI Kits

Page 3: Handsome UI KIts

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

is setting standards for UI Kits

Page 4: Handsome UI KIts

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.

!!

is setting standards for UI Kits

Page 5: Handsome UI KIts

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

is setting standards for UI Kits

Page 6: Handsome UI KIts

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.

is setting standards for UI Kits

Page 7: Handsome UI KIts

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.

is setting standards for UI Kits

Page 8: Handsome UI KIts

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

is setting standards for UI Kits

Page 9: Handsome UI KIts

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.

is setting standards for UI Kits

Page 10: Handsome UI KIts

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

is setting standards for UI Kits

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

Page 11: Handsome UI KIts

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?

is setting standards for UI Kits

How will it be used? • Will designers and developers always be

working next to each other and closely collaborating?

Page 12: Handsome UI KIts

Handsome UI Kit

HOW TO CREATE A UI KIT

✦ 12

is setting standards for UI Kits

Page 13: Handsome UI KIts

t

CREATING A UI KIT (VERSION 1)

✦ 13

UI Kit

Designing interfaces

Building the UI KitFully 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.

is setting standards for UI Kits

Page 14: Handsome UI KIts

t

CREATING A UI KIT (VERSION 1)

✦ 14

UI Kit

Designing interfaces

Building the UI Kit Fully designed UX with accompanying

rules and documentation

• 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.

!!

is setting standards for UI Kits

Page 15: Handsome UI KIts

t

CREATING A UI KIT (VERSION 1)

✦ 15

UI Kit

Designing interfaces

Building the UI Kit Fully designed UX with accompanying

rules and documentation

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.

!!

is setting standards for UI Kits

Page 16: Handsome UI KIts

CREATING A UI KIT (VERSION 2)

✦ 16

{

UI Kit

Designing interfaces

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.

is setting standards for UI Kits

Page 17: Handsome UI KIts

CREATING A UI KIT (VERSION 2)

✦ 17

{

UI Kit

Designing interfaces

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

• 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.

!!

is setting standards for UI Kits

Page 18: Handsome UI KIts

CREATING A UI KIT (VERSION 2)

✦ 18

{

UI Kit

Designing interfaces

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

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.

!!

is setting standards for UI Kits

Page 19: Handsome UI KIts

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?

is setting standards for UI Kits

Page 20: Handsome UI KIts

Part 1

SUMMARY

✦ 20

is setting standards for UI Kits

Page 21: Handsome UI KIts

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.

is setting standards for UI Kits


Recommended