Kino Website Wireframes + Comps
Part III of a series documenting the design development of the Kino menswear brand
--
This page documents the development steps from wireframes to interactive comps, including links to view each of the deliverables independently. All prototypes were created using Adobe XD software. The images contained were borrowed from similar menswear brands and are used for educational purposes only.
Low-Fidelity Wireframes
The driving principles behind the wireframe layout are as follows. The intent of the brand is to be fashion forward, therefore the lookbook is featured prominently on the front page. Next, the design errs on the side of caution with respect to simplicity. In the end the goal of the website is to showcase the product and not detract nor distract from the purchasing experience.
Static Comps — Medium-Fidelity
The first pass at the aesthetic design was as simple as incorporating the color palette, typography and photo guidelines from the Brand Guide into the low fidelity wireframes.
Interactive Prototype
Before finalizing the design, I made an interactive prototype allowing a user to click through a predetermined browse and check-out process. I sent this interactive prototype out to a selection of friends to garner feedback about the brand identity and user experience. This process is documented in detail in the next section. The feedback was incorporated into the same interactive prototype, and the results can be seen below.
Previous in the series: Logo and Style Guide
Next in the series: Website User Survey and Results
