<aside> 👋🏻 This Notion template is designed to help you effectively manage user interface (UI) design projects. It provides an organized structure for you to keep detailed track of your UI projects and collaborate more efficiently with your team.

</aside>

Information

<aside> <img src="/icons/private_red.svg" alt="/icons/private_red.svg" width="40px" /> Advice: Use this template as a guide to outline each part of your new project. However, before you begin working, complete the table with project information (project name, start date, and a brief description). This information will help keep the team on the same page and facilitate project management.

</aside>

PARTS

<aside> ☑️ VISUAL LANGUAGE

Add a note or comment about the section here. Note:

• [ ] Color

  • [ ] Palettes, by category
  • [ ] Contrast
  • [ ] Meaning
  • [ ] Swaches

• [ ] Tipography

  • [ ] Hierachy
  • [ ] Weights / types
  • [ ] Web fonts
  • [ ] Baseline grid

• [ ] Iconography

  • [ ] Pictograms
  • [ ] Illustration
  • [ ] Icon fonts
  • [ ] Alignment

• [ ] Motion

  • [ ] Principles
  • [ ] Timing
  • [ ] Types
  • [ ] Transitions

• [ ] Space

  • [ ] Units / measurments
  • [ ] Metrics and keyline
  • [ ] Structure

• [ ] Photography

</aside>

<aside> ☑️ UI ELEMENTS

Add a note or comment about the section here. Note:

• [ ] Paragraph

• [ ] Lead paragraph

• [ ] Block quote

• [ ] Headers (H1 - H6)

• [ ] List

• [ ] Links

• [ ] Code

• [ ] Buttons

  • [ ] Primary
  • [ ] Secondary
  • [ ] Button groups
  • [ ] Menu buttons
  • [ ] Split button
  • [ ] FAB (floating action)

• [ ] Form controls

  • [ ] Text
  • [ ] Variants (email, etc)
  • [ ] Text area
  • [ ] Radio
  • [ ] Checkbox
  • [ ] Select

Form controls, cont’d

• [ ] File upload
• [ ] Labels
• [ ] Floating labels
• [ ] Microcopy
• [ ] Required
• [ ] Validation
• [ ] Divider / rule
• [ ] Swtch
• [ ] Slider
• [ ] Image
  • [ ] Block
  • [ ] Full bleed
  • [ ] Inline with positions

</aside>

<aside> ☑️ UI COMPONENTS

Add a note or comment about the section here. Note:

• [ ] Action bar / sheet

• [ ] Back to top

• [ ] Badges

• [ ] Breadcrumbs

• [ ] Calendar picker

• [ ] Caption

• [ ] Cards

• [ ] Chat (live)

• [ ] Code block

• [ ] Comments

• [ ] Contact us

• [ ] Cookis notification

• [ ] Data tables

• [ ] Dialog

• [ ] Drawer / accordion

• [ ] Filters

• [ ] Footer

• [ ] Footnotes

• [ ] Header

• [ ] Hero billboard

• [ ] Hero carousel

• [ ] Legend

• [ ] Loading / spinner

• [ ] Local navigation

• [ ] Maps

• [ ] Menu

• [ ] Messaging

• [ ] Modal

• [ ] Nav Megamenu

• [ ] Pagination

• [ ] Progress bar

• [ ] Pull quote

• [ ] Ratings

• [ ] Reviwes

• [ ] Rich text editor

• [ ] Search

• [ ] Sidebar

• [ ] Site / App navigation

• [ ] Social networking

• [ ] Status (alpha, beta,…)

• [ ] Tabs

• [ ] Tags / chips / pills

• [ ] Thumbnails / #-ups

• [ ] Tips / tutorial

• [ ] Toolbar

• [ ] Tooltips

• [ ] Video & media

</aside>

<aside> ☑️ UI PATTERNS

</aside>

<aside> ☑️ PAGE TEPLATES

</aside>

<aside> ☑️ LAYOUT SYSTEMS

</aside>

| --- | --- |