Introduction
Designing a low-fidelity wireframe is an essential step in the process of creating an intuitive user interface for any online brand. This is particularly true for Viora Cosmetics, an India-based online D2C brand specializing in ayurvedic hair oils, lip balms, and soap bases. The aim is to provide a clear visual structure using simple grey and white boxes.
Desktop Homepage Layout
The desktop homepage frame, sized at 1440px wide, will consist of several key sections. At the top, a navigation bar will prominently display the Viora logo alongside links to the home, shop, about, contact, and cart sections. Following this, the hero section will feature a headline stating, “Stronger hair. Naturally.”, a brief subtext, and two clear call-to-action buttons, accompanied by a large image placeholder.
Next, a trust bar will communicate Viora’s core values through labels such as ‘100% natural’, ‘pan India delivery’, ‘cash on delivery’, and ‘secure payments’. The categories of products—hair oils, lip balms, and soap bases—will be laid out, along with a best sellers section containing four product cards, each with image placeholders, names, prices, ratings, and an add-to-cart option.
Mobile Page Considerations
The mobile homepage design, tailored for 375px width, will adapt this content into a stacked single-column layout, ensuring easy navigation. Each product card will appear compact, with large CTA buttons enhancing usability. On the product page, a sticky add-to-cart bar is essential for improving the shopping experience. This wireframe should remain adjustable in Figma while maintaining clarity with labelled sections for ease of editing.