Operify AI
Technical UI breakdown of a complex Landing Page.
Colors
Fonts
Sticker Sheet
Grid
Hierarchy breakdown
High-Fidelity UI
Tablet & TV breakpoints
Project Description
AI optimization tool, the system will suggest small, easy to implement changes to make your business run better and smoother. Operify takes care of your orders and employees, lets you manage sales, marketing campaigns - easily and all in one place.
Colors
#2C8710
Main Accent
#2D4159
Main Text
#53658D
Secondary
#FFFFFF
Backgrounds
Font definitions
Plus Jakarta Sans
Aa
Primary
Regular
Plus Jakarta Sans
Aa
Actions
Bold
Plus Jakarta Sans
Aa
Headings
Bold
Heading
48, Regular
Medium secondary text
14, Regular
Large Text
20, Regular
Small text
12, Regular
Medium Text
16, Medium
Navigation labels
10, SemiBold
Sticker sheet
Primary button / CTA
Standard
Button label
Hover
Button label
Pressed
Button label
Disabled
Button label
Button label
16
16
Medium text
Button label
16
16
Logos & Icons
Operify
S A L E S
avotaco
analyseplus
+
myassembly
Graphic elements & Avatars


















Sticker sheet
Logical groups using Hierarchy Strips. This same logic is being applied to the entire landing page layout.

Main breakpoints: Desktop and Phone
It is important to maintain consistency and apply graphic elements subtly. The phone breakpoint should be slightly more dynamic to avoid a very large screen adaptation. It is crucial to remember that attention spans are lower on smaller screens.
Desktop
Mobile

Tablet view
This is an example of a tablet adaptation with a different layout variation.
Navigating a screen this size is generally more comfortable. However, it's crucial to strike a balance between desktop and phone screens.
The recommended resolution is usually 834x1194 pixels for both horizontal and vertical views.
TV view
It is important to scale the entire desktop view to the TV breakpoint since they share very similar scales when stretched.
It is also good to make the main CTAs more visible. This will be especially helpful when presenting on a TV or projector, particularly to stakeholders.
The recommended resolution is usually 1920x1080 pixels; anything higher is largely irrelevant, unless it’s a very particular screen like a vertical one.
Project summary
During the project, I managed to evaluate how to solve breakpoints differently, avoiding simply stretching or replicating every section of the main view for smaller screens. We should be creative in these scenarios; we can always override components to redesign them in a way that makes more sense in different views.
