Avotaco
Colors
Fonts
Components
Hierarchy Strips
Design Decisions
Spacing
Font measurements
Color Definition
High-Fidelity Screens
Accessibility evaluation
Project Description
Colors
#2C8710
Main Accent
#D6E552
Secondary
#2C2C2C
Main Text
#75757575
Secondary
#FFFFFF
Backgrounds
Gradient
#1A4FE5
#2C8710
Font definitions
Satoshi
Aa
Primary
Regular
Satoshi
Aa
Actions
Bold
Satoshi
Aa
Headings
Bold
Heading
20, Bold
Medium secondary text
14, Regular
Large Text
16, SemiBold
Small text
12, Regular
Medium Text
14, Semibold
Navigation labels
10, SemiBold
Primary button / CTA
Standard
Button label
Hover
Button label
Pressed
Button label
Disabled
Button label
Medium text
Button label
16
16
Button label
16
16
Design decisions
The idea behind this divisions is that the context summary is the least useful part for more users, as they mostly focus on the title, additional info. and map to reach their goal. I added clear separations to enforce that division is clear and form logical groups.
Spacing
Grid: 8 point
8
16
24
32
Font measurements
Font: Satoshi
12
14
24
Color definition
Color palette and its application
Contrast checks
Accessibility evaluation
Main navigational flow
Login (Desktop)
Login (Mobile)
Dashboard (Desktop)
Dashboard (Mobile)
Orders (Desktop)
Orders (Mobile)
Restaurants (Desktop)
Restaurants (Mobile)
Poducts (Desktop)
Poducts (Mobile)
Popup (Desktop)
Popup (Mobile)
Drivers (Desktop)
Drivers (Mobile)
Project summary
During the project, I managed to evaluate and design with a consistent use of colors and fonts, respecting the grid and spacing, with the hierarchy strips technique, and evaluating complex a component to showcase the design of every screen; while respecting the laws of technical UI.
Avotaco dives into its SaaS product for chain restaurants, spotlighting a user-friendly web app with features like sales tracking, order management, and driver coordination.
