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.

Visual interface definitions

Visual interface

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

Button label

Logos & Icons

Operify

S A L E S

avotaco

analyseplus

+

myassembly

Graphic elements & Avatars

Sticker sheet

Hierarchy

Visual interface

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

High-Fidelity UI

Visual interface

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 & TV breakpoints

Visual interface

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.

It's also important to design sections with features like adding a Segmented control component to dynamically switch between sections when navigating on a smaller screen, as we don't want the user to endlessly scroll.

It’s also important to design sections with features like adding a Segmented control component to dynamically switch between sections when navigating on a smaller screen, as we don't want the user to endlessly scroll.