Shrine

Shrine is a retail app that uses Material Design components and Material Theming to express branding for a variety of fashion and lifestyle items.


About Shrine

The Shrine app provides an online marketplace featuring lifestyle and fashion items from promoted labels. Shrine’s brand aesthetic is modern, elegant, and sophisticated. Shrine is the unifying concept behind the various brands and products showcased.


Minimal aesthetic

Shrine uses a minimalist aesthetic, creating an experience where content and actions take the forefront of the user experience. Shrine’s brand plays an important role...

Read More

Shrine uses a minimalist aesthetic, creating an experience where content and actions take the forefront of the user experience. Shrine’s brand plays an important role as the central, unifying scaffolding for the variety of products and brands showcased.

Visual themes

Angled cuts are a visual theme in the Shrine app, and are used on various components and elements. They reflect the shape of the Shrine...

Read More

Angled cuts

Angled cuts are a visual theme in the Shrine app, and are used on various components and elements. They reflect the shape of the Shrine logo, and act as an extension of the Shrine brand.

The Shrine logo and examples of angled cuts in the Shrine UI

Overlapping sheets

The underlying theme of Shrine’s interaction model is that of three overlapping sheets. The bottom sheet has the navigation and branding elements; the middle sheet has the main content; and the top sheet has the shopping cart.

1. Bottom sheet, 2. Middle sheet, 3. Top sheet



Product architecture

The Shrine app’s information architecture has a catalog structure. A catalog contains categorized data, with a top level consisting of peers which may contain subordinate items. Shrine’s top level categories group types of items (shoes, accessories, dresses), so they can be seen in relation to each other.


Adopting a catalog structure allows users to browse an area of interest, compare items to each other, and view the details of a specific item.

Navigation

Shrine uses different types of navigation for mobile, tablet, and desktop. Navigation drawers provide access to the navigation destinations of your app. Related Article arrow_downward...

Read More

Shrine uses different types of navigation for mobile, tablet, and desktop.

  • Mobile places navigation items in the back layer of a backdrop component
  • Tablet uses tabs for navigation
  • Desktop uses a standard navigation drawer

Although different navigation patterns are used, they share key consistencies that ensure ease of use between them.

Selection indicators

All navigation patterns share the same selected state: when a navigation item is selected, a triangular shape appears behind it. These selection indicators ensure the user knows which section they are in.

Shrine’s selection indicators use darker text and a triangular shape

Shopping cart

The shopping cart can be accessed through a sheet found at the bottom right of the screen. As items are added or removed from the...

Read More

The shopping cart can be accessed through a sheet found at the bottom right of the screen. As items are added or removed from the cart, the sheet dynamically updates to reflect the changes.

This sheet can expand to show its content, or take the user to the shopping cart screen by clicking the cart icon.

Shopping cart


Layout

Grid system

Shrine uses a responsive grid system, allowing padding and column size to change between mobile, tablet, and desktop. The Material Design responsive layout grid adapts...

Read More

Shrine uses a responsive grid system, allowing padding and column size to change between mobile, tablet, and desktop.

Shrine’s grid system. Scaled down to 50%

Horizontal grid

Shrine’s mobile and tablet layout grid is customized to scroll horizontally. Columns, gutters, and margins are laid out from left to right, rather than top to bottom.

Scaled down to 50%


Color

Shrine’s color theme is monochromatic, using light and dark variations of the primary color Shrine Pink. Shrine’s primary color (Shrine Pink 100) fills the back layer, and the secondary color (Shrine Pink 50) fills the bottom sheet. The main content is on white, and the dark Shrine Pink 900 is used for typography and iconography.

Shrine’s color palette


1. Shrine Pink 100 is used for the “add to cart” button to ensure it is prominent.
2. Shrine Pink 100 is used to outline unselected chips, 900 is used for selected chips.


Color and image

Shrine uses image treatments to indicate a change of state (such as selection), or as a scrim. Custom image treatments are a way of reinforcing the Shrine brand.

Image treatments are used to indicate state changes, such as selection.

The scrim used below dialogs is customized to use Shrine Pink.


Typography

Type scale

Shrine’s type scale provides the typographic variety necessary for the app content. All items in the type scale use Rubik as the typeface, including Rubik...

Read More

Rubik

Shrine uses Rubik for its typeface. Rubik is a sans serif typeface with slightly rounded corners and many weights to choose from. Rubik is a...

Read More

Shrine uses Rubik for its typeface. Rubik is a sans serif typeface with slightly rounded corners and many weights to choose from. Rubik is a good fit for Shrine because it is a legible, stylish, contemporary typeface, with rounded corners that give it a warm, friendly, and fun character.

Rubik’s letterforms

Rubik compared to Roboto


Iconography

Shrine uses Material Design’s default iconography system. These icons are constructed to remain legible and clear at small sizes.

1. To create consistency, all of Shrine’s icons share the same underlying grid structure. 2. A collection of Shrine’s icons.


Shape

Components are grouped into shape categories based on their size. Shape categories let you set multiple component values at once. Shape categories include:

  • Small components
  • Medium components
  • Large components

Shrine’s shape categories

(1) Small components, (2) medium components, (3) large components

Small components

Extended FABs are in the small shape category. Their corners have a cut shape that is 4dp long. Component Category Attribute Value Extended FAB Small...

Read More

Extended FABs are in the small shape category. Their corners have a cut shape that is 4dp long.

Component

Category

Attribute

Value

Extended FAB

Small components

Family

Size

Cut

4; 4; 4; 4dp

Medium components

Menus are in the medium shape category. Their corners have a cut shape that is 8dp long. Component Category Attribute Value Menus Medium components Family...

Read More

Menus are in the medium shape category. Their corners have a cut shape that is 8dp long.

Component

Category

Attribute

Value

Menus

Medium components

Family

Size

Cut

8; 8; 8; 8dp

Large components

A backdrop is in the large shape category. Its corners have an asymmetrical cut shape, with these values: 24;0; n/a; n/a dp. Component Category Attribute...

Read More

A backdrop is in the large shape category. Its corners have an asymmetrical cut shape, with these values: 24;0; n/a; n/a dp.

Component

Category

Attribute

Value

Backdrop

Large components

Family

Size

Cut

24; 0; n/a; n/a dp*

*Bottom sheets can only shape the top-left and top-right corners.


Components

Buttons

Shrine’s text buttons adopt the background color of the screen and have no elevation. Shrine’s contained buttons use custom color and typography. They’ve been modified...

Read More

Text buttons

Shrine’s text buttons adopt the background color of the screen and have no elevation.

Shrine’s low emphasis buttons have no container and no elevation.

A text button that has not been customized

Shrine’s text buttons use custom color and typography.

Contained buttons

Shrine’s contained buttons use custom color and typography. They’ve been modified to include:

  • Angled corners
  • Elongated width

Shrine’s contained buttons use the primary color Shrine Pink 100, with elevation.

A contained button that has not been customized

Shrine’s contained buttons use custom shape, color, and typography.

Chips

Shrine uses choice chips on product detail pages. These chips remain distinct from buttons by always having rounded edges.

Read More

Shrine uses choice chips on product detail pages. These chips remain distinct from buttons by always having rounded edges.

Shrine’s customized choice chips

A choice chip that has not been customized

Shrine’s choice chips use custom shape, color, typography, and states. Selected choice chips change their color and type size.

Tabs

Shrine uses tabs for navigation on desktop and tablet. They use custom color, typography, and states. Buttons allow users to take actions with a single...

Read More

Shrine uses tabs for navigation on desktop and tablet. They use custom color, typography, and states.

(Zoomed at 200%)

To indicate an active tab, a custom shape is placed behind the tab.

1. Tabs that have not been customized. 2. Shrine’s tabs use custom shape, color, typography, and states.

Navigation drawer and backdrop

Shrine uses a customized navigation drawer on mobile. It can be accessed by tapping the back layer of the backdrop component. Shrine’s navigation drawer uses...

Read More

Shrine uses a customized navigation drawer on mobile. It can be accessed by tapping the back layer of the backdrop component.

Shrine’s navigation drawer uses custom typography, color, and states. The center-aligned type is another custom feature.

Shrine’s backdrop uses custom color and shape. The back layer uses the app’s primary color; and the front layer’s top left corner has a custom angle cut.

Shrine’s backdrop and customized navigation drawer

Image list

Shrine uses a weaved image list to showcase content. Weaved image lists use alternating container sizes (at specific ratios) to create a rhythmic layout, and...

Read More

Weaved image list

Shrine uses a weaved image list to showcase content. Weaved image lists use alternating container sizes (at specific ratios) to create a rhythmic layout, and are best suited to casual browsing of peer content.

A weaved image list is ideal for Shrine’s content because it heightens the focus and novelty of each item, keeping the user from scanning content too quickly.

Shrine’s weaved image list, scaled down to 50%

Sheet

Shrine uses an expanding bottom sheet for easy access to the shopping cart.

Read More

Shrine uses an expanding bottom sheet for easy access to the shopping cart.

Sheet


Motion

Shrine’s motion design uses emphasized easing, longer durations, and staggering to establish an elegant and delightful tone.

Launch screen

Shrine’s product icon animation plays off the geometric forms of its logo. Motion can be customized to express a distinct style and personality. Related Article...

Read More

Animated icons

Animated icons add delight while also guiding the user’s journey.

Read More

Animated icons add delight while also guiding the user’s journey.

Shrine’s animated icons

Navigation transitions

Shrine’s navigation transitions use emphasized easing and long durations to achieve a relaxed and elegant tone. Temporal offsets are used to call attention to important...

Read More

Shrine’s navigation transitions use emphasized easing and long durations to achieve a relaxed and elegant tone. Temporal offsets are used to call attention to important elements like the cart and checkout button. A staggered fade is used on back layer content to create a cascading effect.

Shrine’s navigation transitions

User education

When adding an item to the cart for the first time, an educational animation displays the location of items in the cart.

Read More

When adding an item to the cart for the first time, an educational animation displays the location of items in the cart.

Educational animation in Shrine