UI Design: Tabs

My role as a UI designer

  • Apply the visual design to wireframes
  • Work closely with accessibility and content where necessary
  • Collaborate with the software developer to ensure a seamless handover
  • Validate the component against successive builds

Client

Wells Fargo, San Francisco CA

My role

UI Designer

Team

UX designer, developer, content strategist and accessibility.

Tools

Adobe Illustrator

Date

2015

Tabs

Wireframe • Anatomy • States • Specifications

Wireframe

Anatomy — fixed tabs

Fixed tabs display all tabs on one screen, with each tab at a fixed width. The width of each tab is determined by dividing the number of tabs by the screen width. They don’t scroll to reveal more tabs; the visible tab set represents the only tabs available.

Anatomy — scrollable tabs

Specifications — fixed tabs

Specifications — scrollable tabs