[Template] User Interface Inventory

This page is focused on enabling productivity in the design field. Use the template instead of starting from scratch. I have formed a template from take away information I have saved from articles read focused on design methods.

Take Away:

(Download PDF)

  • Benefits of UI Inventory
  • Lays the groundwork to a sound design system
  • Convince your boss/client/organization
  • Promote consistency
  • Ensures all interface components are accounted for
  • Responsive Retrofitting

Global
Headers, footers, and other global elements

Navigation
Primary navigation, footer nav, pagination, breadcrumbs, etc

Image Types
Logos, heros, avatars, thumbnails, etc

Icons
Magnifying glasses, social icons, spinners, favicons, hamburgers, arrows, etc

Forms
Inputs, textareas, select menus, checkboxes, radios, and more

Buttons
Big, small, primary, secondary, progress, etc

Interactive Components
Accordions, tabs, carousels, anything with moving parts

Media
Video players, audio players, etc

Messaging
Alerts, success, errors, warnings, errors, validation

Media
Video players, audio players, etc

Headings
h1, h2, h3, h4, h5, h6 and variations of typographic headings

Lists
Unordered, ordered, definition lists, bulleted, lined, etc

3rd Party
Widgets, iframes, stock tickers, social buttons, anything that isn’t hosted on your domain

Advertising
Ad units

“Blocks”
Combination of images, headlines, excerpts

Animation
Capture videos of interface animation

Color
Unique colors represented in the UI