Overture - Landing Page Project
Welcome to Overture! A high end online fashion retailer with a minimalist and sophisticated design .
To start, I explored several high-end retail websites such as Versace, Hermès, Net-A-Porter, and Ralph Lauren. My goal was to not only analyse competitors but also to gather inspiration for my own design. I paid close attention to key elements like icons, imagery, layout composition, tone, and the overall aesthetic and user experience.
I observed consistent patterns across the sites, especially with icons such as search, account, wishlist (heart), and shopping bag. Seeing these common design elements reinforced my confidence in the direction I was heading and helped solidify my vision for crafting a cohesive and intuitive design.
I began by sketching out initial layout ideas before translating them into a wireframe. Using a grid for structure, I refined the design step by step until I achieved a layout that met my vision. Throughout the process, I continuously referenced competitor sites to ensure my approach was both relevant and competitive.
The Wireframe
When it came to the creation of the high fidelity version I found myself making adjustments as I ran into some obstacles especially with the footer section the values section. Specifically alignment of imagery and text.
One focus of the design is highlighting the company's core values. As the world moves toward a more sustainable future, I focused on showcasing the company's dedication to sustainability, diversity, inclusion, and community engagement. These values are thoughtfully summarised further down to give users a clear understanding of the brand's mission.
Hi-Fidelity Design
Font, Typefaces and Colours
I explored various typefaces, considering those used by other companies for reference. While I noticed some common trends, I ultimately chose Futura for headings for its alignment with the look and tone I was aiming for. To complement it, I paired Futura with Lato for the body and link text, as the combination provided a balanced and visually appealing contrast.
I aimed for a simple colour palette with six key options. I selected two off-white shades for the primary background, light text, and social icons, along with two off-black shades for dark text, buttons, and secondary backgrounds. Additionally, I chose two grays—one for text hover and another for an extra background color. This curated palette ensures a clean and cohesive aesthetic.
Colour Contrast Tests
To make sure my palette was compliant with WCAG, I ran my choices through contrast testing. Before I settled on my final colours I made sure they at least met AA standards.
Tools used
From brief
Topics
Share
Reviews
2 reviews
The minimalist style gives a luxurious look and feel, and I like how your design choices reflect that. You've researched similar brands that simplify elements to emphasize product presentation. The use of high-end imagery works well for brand positioning. Still, it's important to note that stock images can't match the impact of genuine high-value items like those from Versace and Hermes, where the value is immediately apparent. Custom imagery crafted specifically for these brands is hard to replicate.
Highlighting core brand values is a great touch, especially focusing on sustainability and diversity. It resonates well with consumers, and I like how it is clearly summarized. However, it might be worth exploring how these values could be more prominently featured by reimagining the Overture brand in a different context, such as an outdoor fashion company like Jack Wolfskin or North Face. This approach would allow for a more flexible visual identity that highlights not only aesthetics but also the functionality and durability of the products, making it easier to communicate the value proposition. It would also create more opportunities to experiment with colors and give a larger choice of stock imagery. While the current focus on a high-end brand with its minimalist palette is stylish, it limits creativity compared to a brand with a broader product offering.
Overall, the design decisions are strong, and the focus on the target audience is clear. I encourage you to explore some alternatives for the Overture brand to challenge yourself further.
Hey Robert, 👋
The overall design is very clean, modern, and in line with industry trends—fantastic work! The use of imagery, typography, and color palette really captures the brand's luxurious and exclusive feel. You’re on the right track. I have a few thoughts for making it even stronger and ensuring a smooth user experience.
Promotional Banner Suggestions:
The promotional banner currently shares space with parts of the utility navigation (like country and store selection), but these elements don’t really belong together. Separating them could make the banner’s purpose clearer and more impactful.
- Make the Promotion Actionable: The promotional text encourages subscription, but there’s no clear way for users to take action. Adding a button or link to subscribe will make it more interactive and help guide users.
- Responsive Design Considerations: When designing for smaller screens, the banner might get cramped or lose readability, especially if the promotional text is longer. Considering how this looks responsively could really polish the experience.
- Alignment and Padding: The promotional banner currently has more padding than the top navigation, which creates a slight imbalance. Also, aligning the actions for selecting country and store with the top navigation icons will give it a cleaner, more consistent look.
Top Navigation Suggestions:
To enhance usability make the touch areas of links and icons bigger. To do this wrap them in a container frame and make the whole frame clickable not just the text and icons.
Button Hierarchy and Contrast:
Currently, all buttons are styled as primary buttons, which can make it difficult for users to identify the main actions versus secondary ones.
- Create Other Button Styles: Consider using secondary and tertiary buttons for actions like "Show more" or "Read more" to add visual hierarchy and guide users’ attention more effectively.
- Contrast on Images: Buttons placed on images might benefit from inverted colors to improve readability, especially since many images are dark. This will help ensure the buttons stand out clearly.
Crafted with Love Section:
As a new user, the purpose of this section isn’t immediately clear. Enhancing the copy to clarify what “Crafted with love” represents could make it more engaging and informative for first-time visitors.
Our Values Section:
The images in this section are quite tall and don’t follow a standard aspect ratio, which could affect user experience, especially on smaller screens.
- Use Standard Aspect Ratios: A 4:5 ratio or something similar would keep the images visually balanced and avoid excessive scrolling on mobile.
- Button Style and Clickable Cards: Using secondary or tertiary button styles here would reduce visual competition. Even better, consider making each card clickable to increase the interactive area and make navigation easier for users.
Bottom Promotional Banner:
For consistency, let’s align the heading style with other sections by using capital letters where appropriate. Since the heading invites users to subscribe, changing the CTA from "Submit" to "Subscribe" would make the action clearer and more engaging.
These small adjustments could help enhance user experience and make the design even more polished. I hope you find my feedback helpful. ✌
You might also like
Ithnain Management System
Jeel app website wireframes
ALT.Studio Color System
2 PAY
Visit Sri Lanka Mobile App
Design Workshop Plan
Content Strategy Courses
UX Writing
Common Design Patterns
Reducing User Churn