Aero-OM
Aero-OM is a corporate website developed for a pharmaceutical company.
I was responsible for the visual design and structure of the website, working within client-defined constraints.
Website: https://aero-om.pt
The Problem
The existing digital presence lacked clarity, structure, and a strong visual hierarchy.
Information was difficult to scan, and the user journey was not clearly defined.
Information Architecture
To improve clarity and navigation, a structured information architecture was defined based on the main user needs and content priorities.
The website was organized into three core areas: product-related content, educational resources, and user guidance. This separation allows users to either quickly find solutions or explore information in more depth.
Product categories were grouped logically to reduce complexity and make browsing more intuitive, while educational content was structured to support common user questions and concerns.
This approach aimed to create a clear and predictable navigation system, reducing cognitive load and helping users move efficiently through the website.
Color System
The color palette was designed to balance brand recognition, clarity, and usability.
🔵 Primary Colors
Blue (#0B87C9)
Used for primary actions, highlights, and key interface elements.
Helps guide user attention and reinforces trust.
Pink (#DE0075)
Used as a secondary brand color to add contrast and visual identity.
⚫ Neutral Colors
Black (#000000)
Used for main text to ensure high readability.
Grey (#858585)
- Used for secondary text and less prominent elements to create visual hierarchy.
🟠 Product Accent
Orange (#F9A634)
- Used specifically for the Aero-OM Rapid product to differentiate it visually and highlight its importance within the product range.
Contact
email@domain.com
000-000-000
Typography System
The typography system was designed to ensure clarity, readability, and a consistent visual hierarchy across the interface.
The chosen typeface supports a modern and accessible tone, aligning with the professional nature of the Aero-OM brand.
🅰️ Typeface
Quicksand was selected for its clean, geometric style and friendly yet professional appearance. Its versatility across different weights makes it suitable for both headings and body text.
🔷 Headings
Quicksand Bold (54–24px depending on level)
Used for page titles, section headers, and key messaging.
The strong weight ensures clear structure and immediate attention.
🔹 Subheadings
Quicksand Medium (20–16px)
Used to support content grouping and improve scanning of information.
Helps create clear separation between sections.
📝 Body Text
Quicksand Regular (16–14px)
Used for paragraphs, descriptions, and general content.
Optimized for readability across longer texts.
✏️ Captions / Supporting Text
Quicksand Regular (16–14px)
Used for paragraphs, descriptions, and general content.
Optimized for readability across longer texts.
High Fidelity Mockups
These high-fidelity mockups represent the final outcome of the design process, illustrating the proposed solution.
🧭 “Why Aero OM” Page
The “Why Aero OM” page was designed to strengthen brand credibility and communicate the core values of the company.
The main goal is to clearly present Aero OM’s purpose, mission, and key differentiators in a structured and easy-to-understand way.
The page follows a progressive narrative structure, guiding users from a general introduction to more detailed explanations of the brand’s benefits and values.
🌿 “Wellness Guide” Page
The “Wellness Guide” page was developed as an educational space focused on informing and supporting users with content related to well-being.
The structure prioritizes content discovery, allowing users to intuitively explore different topics based on their interests.
Information is grouped into clear sections to reduce cognitive load and improve scanning efficiency.
This page also acts as a support hub, helping build trust through accessible and informative content.
🖥️ Home/Main Page
The homepage was designed as the main entry point of the website, guiding users through the most important areas of the platform, including services, product offerings, and informational content.
Its structure prioritizes clarity and hierarchy, ensuring users can quickly understand the purpose of the brand and navigate to relevant sections with ease.
📦 Product Page
The product pages was designed with a focus on clarity, conversion, and fast information processing.
The main objective is to allow users to quickly understand the product, its benefits, and its key differentiators.
The layout follows a logical flow: product introduction, key benefits, detailed information and a clear call-to-action.
Special attention was given to visual hierarchy, ensuring that the most important elements naturally stand out through typography, spacing, and color.
