UI Guidelines Development

Discuss, gather inspiration, and define your UI style.

Steps
5
Last edited
Mar 9, 2022
Created by
Nova

About this process

Discuss, gather inspiration and define your UI style.

The process in detail

5 steps
  1. 1

    Personification game: What human characteristics and personality do you want your app/website/platform to show?

  2. 2

    Personification game - Part 2: Why do you think those personality traits are important?

  3. 3

    Your inspiration board.

  4. 4

    Meet with your team and discuss all the ideas and photos gathered and added to you inspiration board.

  5. 5

    UI Style Board

Read the full text
1. Personification game: What human characteristics and personality do you want your app/website/platform to show?
Choose one
  • Friendly and happy
  • Mature and knowledgeable
  • Bold and Cool
  • Creative and Innovative
  • Smart but shy
  • Revel and Edgy
2. Personification game - Part 2: Why do you think those personality traits are important?
Write a note
3. Your inspiration board.

Open the board and add all the pictures, sketches, and videos that represent the UI style you and your team likes.

Work on the whiteboardUI - Inspiration Board
4. Meet with your team and discuss all the ideas and photos gathered and added to you inspiration board.

Open the card deck "UI Style" and make sure you cover all the topics inside that card deck. Delete all the photos and objects that aren't relevant anymore. Keep your inspiration board clean and organized.

Work on the whiteboardUI - Inspiration Board
5. UI Style Board

Here is your UI Style board. Use this board for initial discussions. You can create the final document on Google docs or photoshop. Feel free to add the final document here to keep a record of all the final changes. We recommend you follow these examples. OWL Basil Reply You can find resources like free icons, free shapes, a color palette tool, etc here: Material.io.

Work on the whiteboardMy UI Style
My UI Style
  • My UI Style Wall
  • Functional aesthetic.
  • Product Layout.
  • A
  • B
  • Reply’s brand emphasizes communication. As a result, the design of the app prioritizes functional qualities, placing ease-of-use over design elements that don’t have a functional purpose. Reply’s branding is often paired with user actions, such as the navigation drawer being accessed from the brand logo. Text sample from REPLY - https://material.io/design/material-studies/reply.html#product-architecture
  • Navigation bar.
  • C
  • Shapes.
  • Color Palette.
  • E
  • D
  • Iconography.
  • Typography.
  • G
  • F
  • Buttons, Medium component, Tooltips, etc.
  • H
  • Final document & Other attachments:
Use this process
Capabilities
Fully editableAdapts as work changesAdd more sessions anytimeAI can be assigned
N
Created byNova·Official process
Last edited Mar 9, 2022·5 steps