Keeping Okta's brand value intact, How can we redefine the web page of world’s identity company and make it bold and expressive?
About Okta's Visual brand language
Primary color palette
Primary colors are more frequently used across your UI and imparts a distinct identity to the Okta. Okta Blue is the colors that sets as Okta’s brand identity, It’s a strong, vibrant blue that signifies trust and reliability.
Secondary color palette
Secondary colors are typically used to create visual hierarchy and contrast, making it easier for users to navigate and absorb content.
Typography
Comprehensive Elements of Typography for Enhanced Design and Readability
Typography includes typeface, font, font size, line height, letter spacing, word spacing, kerning, alignment, hierarchy, color, emphasis, and white space. These elements work together to create visually appealing and readable text, enhancing design and user experience. Here, I have used similar looking font but not the original one.
Brand value alignment to design variable
To align Okta's brand values with design variables in Figma, I first understand the core values that define Okta's identity: "Love Our Customers," "Always Secure. Always On.," "Build and Own It," and "Drive What’s Next." By integrating these values into design system, I created design variables that reflect Okta's essence and ensure consistency
Aligning Okta's Brand Values with Figma Design Variables for Consistency
Variable mapping
Mapping Okta's Color Palette to Figma Variables for Consistent Design
Mapping in Figma refers to the process of associating design elements with specific variables. I mapped Okta's color palette to color variables, ensuring that whenever we use a color in design, it's consistently applied. This makes it easy to update colors across your entire project by simply changing the variable value.
Variable aliases
Assigning Aliases for Clearer Communication and Efficient Design Management
Aliases are alternative names or labels for your design variables. By creating aliases, I assigned meaningful and context-specific names to variables, making them easier to understand and manage within the design system. This approach ensures that design variables are intuitively named, facilitating clearer communication and more efficient design management.
Responsive Variable
Enhancing Typeface Clarity and Functionality with Responsive Variable Names in Figma
By creating responsive variable names for typeface in Figma enhances clarity and functionality within your design system. Responsive variable names like responsive Font Size adjust font sizes for different devices, while responsive Line Height modifies line spacing based on screen sizes. Responsive FontWeight adapts font weights to ensure readability across various contexts, and responsive Letter Spacing changes letter spacing for optimal legibility. These names ensure typeface is adaptable and consistent across different contexts, improving user experience and maintaining a cohesive visual identity.
Grid
Consistency, Efficiency, Alignment, Responsiveness
A 4pt grid system is a design framework that uses a consistent 4-pixel increment for spacing, sizing, and alignment, ensuring consistency and alignment in design elements. It simplifies the design process by reducing decision fatigue, speeds up production, and adapts well to various screen sizes, maintaining visual harmony. This system helps create clean, organized, and visually appealing designs that are easy to maintain and scale.
Implementation and comparison
Enhanced Visual Appeal, User Experience, and Brand Alignment
The new landing page design significantly enhances visual appeal, user experience, and functionality compared to the old design. It truly implements Okta's modern color palette, typography, and new design elements that improve aesthetics. The user experience is more intuitive, with clearer navigation and a better information hierarchy. Additionally, the new design aligns more closely with Okta's brand identity, using consistent colors, fonts, and design elements that reflect the brand's core values. Overall, the new design offers a cohesive and visually appealing upgrade over the old landing page.
New Design: Web experience
Old vs New landing page- Mobile experience
