Kino Website Wireframes + Comps

Part III of a series documenting the design development of the Kino menswear brand

Jonathan McCurdy
3 min readFeb 7, 2021

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.

A brief playthrough of the checkout process

Give it a try yourself!



Jonathan McCurdy

Seeing and tasting the world via bicycle. Designing fun and usable products and currently open to new work opportunities!