Google : Reply UI UX
Reply is an email app that uses Material Design components and Material Theming to create an on-brand communication experience.
About Reply:
Reply is an app that helps individuals and groups communicate. It’s designed for clarity, legibility, intuition, and ease of use.
Reply’s brand projects friendliness, competence, and a hint of quirkiness.
Get Complete Source code:
Functional aesthetic
Reply’s brand emphasizes communication. As a result, the design of the app prioritizes functional qualities, placing ease-of-use over design elements that don’t have a functional purpose.
Reply’s branding is often paired with user actions, such as the navigation drawer being accessed from the brand logo.
Product architecture
Reply uses a product architecture similar to other email apps: an inbox that contains new and archived messages, and a UI structured around organizing and taking actions related to those messages. Messages can be starred, sent, deleted, marked as spam, or organized in custom ways set up by the user.
A focus on user tasks
Because user tasks mostly involve content generation and consumption, screen space is dedicated to content over other UI elements. To ensure there is enough space for both content and navigation, Reply uses different navigation patterns for desktop, tablet, and mobile.
Navigation drawer
On desktop, Reply uses a standard navigation drawer. Drawer destinations are represented using both icons and text. The top of the navigation drawer incorporates settings,...
On desktop, Reply uses a standard navigation drawer.
Drawer organization
Drawer destinations are represented using both icons and text. The top of the navigation drawer incorporates settings, an account switcher, and a caret (or arrow) paired with the Reply logo.
Drawer interactions
When tapped, the logo collapses the drawer into a rail.
Bottom app bar
On mobile, Reply uses a bottom app bar to launch navigation. When the Reply logo is tapped, it reveals a bottom navigation drawer with a...
On mobile, Reply uses a bottom app bar to launch navigation.
Bottom app bar interactions
When the Reply logo is tapped, it reveals a bottom navigation drawer with a settings icon and account avatar (which can be tapped to switch accounts).
When the Reply logo is tapped again, the navigation closes and the bottom app bar returns to its default state.
Rail navigation
On tablet, Reply uses rail navigation, in which each destination is represented by an icon. The rail can open to a standard navigation drawer by...
On tablet, Reply uses rail navigation, in which each destination is represented by an icon.
Rail interactions
The rail can open to a standard navigation drawer by tapping the Reply logo. An arrow displayed next to the logo makes it clear that the logo is interactive.
Rail navigation is ideal for use on tablet because it can show a large number of destinations while taking up very little space. Customized folders are shown when the rail navigation has been opened, allowing the user to read the folder title text.
When collapsed, the rail doesn’t include customized folders created by the user. This is because customized folders all use the same icon, so they can’t be distinguished by icon alone.
Layout
Grid system
Reply uses a responsive grid, allowing padding and column size to change across mobile, tablet, and desktop. Content is placed in a column, where messages...
Reply uses a responsive grid, allowing padding and column size to change across mobile, tablet, and desktop. Content is placed in a column, where messages expand and contract upon interaction..
Elevation
Reply uses color to create distinction between components. For example, the container of a card is visible because cards have a white surface color, while...
Reply uses color to create distinction between components. For example, the container of a card is visible because cards have a white surface color, while the app background is grey.
Denser layout
Because Reply sometimes displays dense content, removing shadows helps decrease visual complexity. It also allows items to have smaller padding between each other, leaving more space for content.
Color
Color theme
Reply’s color theme uses a primary color (dark blue-grey) and a secondary color (orange). Because the secondary color is rarely used, Reply’s UI is often...
Reply’s color theme uses a primary color (dark blue-grey) and a secondary color (orange).
Because the secondary color is rarely used, Reply’s UI is often monochromatic, using variations of its primary color. This subtle color theme allows content to be easily read without distraction, and photographic avatars to be easily seen.
Whenever Reply’s secondary color is used, it has a pronounced impact.
Typography
Type scale
Reply’s uses Work Sans as the typeface. All items in the type scale provide the typographic variety necessary for Reply’s content. The type scale makes...
Reply’s uses Work Sans as the typeface. All items in the type scale provide the typographic variety necessary for Reply’s content.
The type scale makes use of the variety of weights available by using six weights of Work Sans: Light, Regular, Medium, SemiBold, and Bold.
Work Sans’ letterforms
Iconography
Reply’s iconography has subtle styling, which expresses brand while focusing on icon recognition and functionality.
Shape
Categories
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
Comments
Post a Comment