Pro design language

What is pro?

"Pro", in Shopify's context, refers to a design language that prioritizes efficiency and intuitive interactions, catering to the daily tasks merchants perform everyday.

It involves using space efficiently to allow merchants to view more data at once. It's about avoiding being verbose and making the interface action-driven with intuitive icons for swift navigation.

It also means combining motion, color, and depth to create a responsive and dynamic interface, with clear affordances, that enable intuitive interaction without confusion about interactivity.

Assign meaning

Visual language is clear for merchants.

Strong meaning is associated when using color. Red means danger, green means go. Color roles are heightened in the interface and add a layer of detail that merchants can quickly understand and master.

Leveraging established symbols to identify key functionality helps merchants understand the admin at first glance. Using clear icons that are widely recognized creates a clear and predictable experience.

Every visual in the admin plays a role in helping merchants scan information and perform tasks without unnecessary distractions.

Increase density

Space is optimized while maintaining high usability.

Density in the interface adapts to the task: high density is used in data-rich environments, while low density is employed in focused, detailed areas.

Information is structured in a clear visual hierarchy, emphasizing important details through variants like size, weight, and color.

Space is used to create groups of related information. Color adds or removes emphasis to make the interface easier to scan and enables efficient decision making.

Craft juicy interactions

Interfaces incorporate a sense of realness.

Primary interaction points provide a dramatic visual response to interaction. Variables like position and lighting change to mimic how physical buttons react when pressed. A hover transition is smooth and unobtrusive, whilst feedback from a click feels more dramatic and visceral.

Interactions are quick and user-actions provide instant feedback that feels almost life-like. Transitions are seamless and help create an intuitive navigation experience.

Detailed interactions, such as animating a checkbox when it is ticked, create a sense of familiarity and reference how merchants interact with real-world objects. These animations contribute to making the admin interface feel dynamic and alive, whilst making merchants feel more comfortable and confident in their interactions.

Make it predictable

Objects with similar appearance share a common behavior.

Elements that are visually similar behave consistently throughout the interface. Consistency in behavior reduces confusion and cognitive load for merchants.

By using consistent signifiers throughout the user experience, merchants can effectively apply the concepts they learn as they navigate the admin. This enables a smoother learning curve and makes the interface progressively easier to use.