SlideShare una empresa de Scribd logo
1 de 21
Descargar para leer sin conexión
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.
is setting standards for 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
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
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
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
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
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
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
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
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?
Handsome UI Kit
HOW TO CREATE A UI KIT
✦ 12
is setting standards for UI Kits
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.
is setting standards for 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
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
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
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
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
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
Part 1
SUMMARY
✦ 20
is setting standards for 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

Más contenido relacionado

Similar a Handsome UI KIts

IxDA Helsinki meet-up at Smartly.io, Thu, 25th August 2016
IxDA Helsinki meet-up at Smartly.io, Thu, 25th August 2016IxDA Helsinki meet-up at Smartly.io, Thu, 25th August 2016
IxDA Helsinki meet-up at Smartly.io, Thu, 25th August 2016Pekka Hartikainen
 
15 tips for bullet proof requirements analysis on SharePoint projects
15 tips for bullet proof requirements analysis on SharePoint projects15 tips for bullet proof requirements analysis on SharePoint projects
15 tips for bullet proof requirements analysis on SharePoint projectsDocFluix, LLC
 
Implementing Modernization by Trevor Perry
Implementing Modernization by Trevor PerryImplementing Modernization by Trevor Perry
Implementing Modernization by Trevor PerryFresche Solutions
 
First users: Heuristics for designer/developer collaboration
First users: Heuristics for designer/developer collaborationFirst users: Heuristics for designer/developer collaboration
First users: Heuristics for designer/developer collaborationJonathan Abbett
 
Responsive Design for SavvyMoney Credit Score
Responsive Design for SavvyMoney Credit ScoreResponsive Design for SavvyMoney Credit Score
Responsive Design for SavvyMoney Credit ScoreWendy Fischer
 
Build Key UI Elements in High Fidelity
Build Key UI Elements in High FidelityBuild Key UI Elements in High Fidelity
Build Key UI Elements in High FidelitySV.CO
 
Building Beautiful and Highly Usable Products by Simon Vallee
Building Beautiful and Highly Usable Products by Simon ValleeBuilding Beautiful and Highly Usable Products by Simon Vallee
Building Beautiful and Highly Usable Products by Simon ValleeProductHuntTO
 
Wireframe and MVP
Wireframe and MVPWireframe and MVP
Wireframe and MVPLian Xun
 
FLUTTER ROAD MAP.pdf
FLUTTER ROAD MAP.pdfFLUTTER ROAD MAP.pdf
FLUTTER ROAD MAP.pdfEmmaSofia5
 
Full stack conference talk slides
Full stack conference talk slidesFull stack conference talk slides
Full stack conference talk slidesSameer Al-Sakran
 
Good Code / Bad Code
Good Code / Bad CodeGood Code / Bad Code
Good Code / Bad CodeKelly Harrop
 
Stanislav Khorunzhyi, "Front-end it like a PRO"
Stanislav Khorunzhyi, "Front-end it like a PRO"Stanislav Khorunzhyi, "Front-end it like a PRO"
Stanislav Khorunzhyi, "Front-end it like a PRO"Sigma Software
 
essentials-of-ui-design.pdf
essentials-of-ui-design.pdfessentials-of-ui-design.pdf
essentials-of-ui-design.pdfSandeshGyawali2
 
Good vs Evil SharePoint Customizing
Good vs Evil SharePoint CustomizingGood vs Evil SharePoint Customizing
Good vs Evil SharePoint CustomizingStacy Deere
 
How to make change happen in your organisation by talking your devs language
How to make change happen in your organisation by talking your devs languageHow to make change happen in your organisation by talking your devs language
How to make change happen in your organisation by talking your devs languageBuiltvisible
 
FRU Kathmandu: 7 ways a Developer and Designer can make each other's lives ea...
FRU Kathmandu: 7 ways a Developer and Designer can make each other's lives ea...FRU Kathmandu: 7 ways a Developer and Designer can make each other's lives ea...
FRU Kathmandu: 7 ways a Developer and Designer can make each other's lives ea...Leapfrog Technology Inc.
 
05 DIGI CREATIVE people&process
05 DIGI CREATIVE people&process05 DIGI CREATIVE people&process
05 DIGI CREATIVE people&processSheSaysCREATIVE
 
Flow: A living full-stack framework for the web
Flow: A living full-stack framework for the webFlow: A living full-stack framework for the web
Flow: A living full-stack framework for the websebastian sastre
 
Why Strategy Matters – How to Interpret and Challenge Stakeholder Needs.pdf
Why Strategy Matters – How to Interpret and Challenge Stakeholder Needs.pdfWhy Strategy Matters – How to Interpret and Challenge Stakeholder Needs.pdf
Why Strategy Matters – How to Interpret and Challenge Stakeholder Needs.pdfCyber-Duck
 

Similar a Handsome UI KIts (20)

IxDA Helsinki meet-up at Smartly.io, Thu, 25th August 2016
IxDA Helsinki meet-up at Smartly.io, Thu, 25th August 2016IxDA Helsinki meet-up at Smartly.io, Thu, 25th August 2016
IxDA Helsinki meet-up at Smartly.io, Thu, 25th August 2016
 
15 tips for bullet proof requirements analysis on SharePoint projects
15 tips for bullet proof requirements analysis on SharePoint projects15 tips for bullet proof requirements analysis on SharePoint projects
15 tips for bullet proof requirements analysis on SharePoint projects
 
Implementing Modernization by Trevor Perry
Implementing Modernization by Trevor PerryImplementing Modernization by Trevor Perry
Implementing Modernization by Trevor Perry
 
First users: Heuristics for designer/developer collaboration
First users: Heuristics for designer/developer collaborationFirst users: Heuristics for designer/developer collaboration
First users: Heuristics for designer/developer collaboration
 
Responsive Design for SavvyMoney Credit Score
Responsive Design for SavvyMoney Credit ScoreResponsive Design for SavvyMoney Credit Score
Responsive Design for SavvyMoney Credit Score
 
Build Key UI Elements in High Fidelity
Build Key UI Elements in High FidelityBuild Key UI Elements in High Fidelity
Build Key UI Elements in High Fidelity
 
Building Beautiful and Highly Usable Products by Simon Vallee
Building Beautiful and Highly Usable Products by Simon ValleeBuilding Beautiful and Highly Usable Products by Simon Vallee
Building Beautiful and Highly Usable Products by Simon Vallee
 
Wireframe and MVP
Wireframe and MVPWireframe and MVP
Wireframe and MVP
 
IoT Product Design and Prototyping
IoT Product Design and PrototypingIoT Product Design and Prototyping
IoT Product Design and Prototyping
 
FLUTTER ROAD MAP.pdf
FLUTTER ROAD MAP.pdfFLUTTER ROAD MAP.pdf
FLUTTER ROAD MAP.pdf
 
Full stack conference talk slides
Full stack conference talk slidesFull stack conference talk slides
Full stack conference talk slides
 
Good Code / Bad Code
Good Code / Bad CodeGood Code / Bad Code
Good Code / Bad Code
 
Stanislav Khorunzhyi, "Front-end it like a PRO"
Stanislav Khorunzhyi, "Front-end it like a PRO"Stanislav Khorunzhyi, "Front-end it like a PRO"
Stanislav Khorunzhyi, "Front-end it like a PRO"
 
essentials-of-ui-design.pdf
essentials-of-ui-design.pdfessentials-of-ui-design.pdf
essentials-of-ui-design.pdf
 
Good vs Evil SharePoint Customizing
Good vs Evil SharePoint CustomizingGood vs Evil SharePoint Customizing
Good vs Evil SharePoint Customizing
 
How to make change happen in your organisation by talking your devs language
How to make change happen in your organisation by talking your devs languageHow to make change happen in your organisation by talking your devs language
How to make change happen in your organisation by talking your devs language
 
FRU Kathmandu: 7 ways a Developer and Designer can make each other's lives ea...
FRU Kathmandu: 7 ways a Developer and Designer can make each other's lives ea...FRU Kathmandu: 7 ways a Developer and Designer can make each other's lives ea...
FRU Kathmandu: 7 ways a Developer and Designer can make each other's lives ea...
 
05 DIGI CREATIVE people&process
05 DIGI CREATIVE people&process05 DIGI CREATIVE people&process
05 DIGI CREATIVE people&process
 
Flow: A living full-stack framework for the web
Flow: A living full-stack framework for the webFlow: A living full-stack framework for the web
Flow: A living full-stack framework for the web
 
Why Strategy Matters – How to Interpret and Challenge Stakeholder Needs.pdf
Why Strategy Matters – How to Interpret and Challenge Stakeholder Needs.pdfWhy Strategy Matters – How to Interpret and Challenge Stakeholder Needs.pdf
Why Strategy Matters – How to Interpret and Challenge Stakeholder Needs.pdf
 

Último

Models of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa LetšosaModels of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa Letšosaannemarleenolthof1
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaAMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaBarusRa
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
UI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessUI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessThink 360 Studio
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfUnlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfIBM
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 

Último (18)

Models of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa LetšosaModels of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaAMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
UI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessUI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design Success
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfUnlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 

Handsome UI KIts

  • 1. Handsome UI KITS ✦ 1 is setting standards for UI Kits
  • 2. 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
  • 3. 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
  • 4. 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
  • 5. 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
  • 6. 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
  • 7. 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
  • 8. 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
  • 9. 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
  • 10. 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
  • 11. 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?
  • 12. Handsome UI Kit HOW TO CREATE A UI KIT ✦ 12 is setting standards for UI Kits
  • 13. 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. is setting standards for UI Kits
  • 14. 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
  • 15. 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
  • 16. 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
  • 17. 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
  • 18. 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
  • 19. 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
  • 20. Part 1 SUMMARY ✦ 20 is setting standards for UI Kits
  • 21. 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