Back to portfolio

A mobile first website for a fictional fashion brand

The first company I worked for as a UX designer did not offer many chances to develop my UI skills. The visual language of the software I designed for was already set. I wanted to practice my UI skills in my spare time, so I decided to design a fashion fake website.

Rather than jump straight into mockups, I wanted to practice designing mobile first, from the sketching phase through to the high fidelity phase. I also wanted to set the tone and style of the websits before I started designing, to get some practice with brand/style guides.

Initial Sketches

I started by sketching out rough ideas for what the site should contain, as well as some ideas for the style guide. I decided that my fictional fashion company, Q&A, would be high-end, which gave me some ideas for font choices and style.

My initial sketches and style ideas

Wireframes

I created wireframes in Balsamiq based on the sketches I had made. I focused on layout and content, instead of style decisions like colour and typography.

From start to finish I created the small screen designs first. If I didn't take this mobile first approach, it would have been harder to squeeze designs for large screens down to the smaller size needed.

Small screen wireframes

Next, I created the larger screen versions with the same content. High end fashion websites, just like high end fashion shops, often have a lot of empty space. This suited the mobile first approach very well, because translating the designs to large screens meant more whitespace, which suits the brand well.

The large screen home page wireframe

The large screen product page wireframe

The Style Guide

I created a simple brand/style guide so I could practice using it while I created the mockups. It's very easy to create a style guide, and then ignore it when designing.

I've noticed that high-end fashion uses less colour, so I chose just three shades to draw from. Colour could be provided by product photography. I also chose two typefaces and created a simple typographic scale. Finally, I settled on a common 12 column grid system.

My initial sketches and style ideas

Mockups

I applied the style choices to the layout of the wireframes created earlier to make the final mockups.

The home page for small screens

The home page for large screens

The product page for large screens

Back to portfolio