< Back to portfolio

Designing A Fashion Website

I designed a fashion website from scratch to practice my UI skills. There is no research involved in this project, but the other projects in my portfolio have given me plenty of practice in those areas.

This was a great project to practice high-fidelity mockup skills, such as layout, typography, and creating/using a style guide.

Initial Sketches

I didn't want to jump straight into Photoshop, so 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

Based on my sketches, I made wireframes to guide the final designs. I didn't involve typeface or colour choices here. These wireframes were to make sure that I had thought of everything.

With both the wireframes and the eventual mockups, I created the small screen versions first. This helped make sure that the content would work on smaller screens.

Small screen wireframes

Next, I created the larger screen versions with the same content.

The large screen home page wireframe

The large screen product page wireframe

The Style Guide

I also wanted to practice creating and following a style guide. From experience, it's easy to create a style guide and then rarely use it, so practice is important.

I chose very simple colours that I thought represented high-end fashion quite well. I chose two typefaces in different sizes - one for headings and one for body text. Finally, I settled on a grid system.

My initial sketches and style ideas

Mockups

I took the wireframes, and the style guide choices, and combined them to create the final designs.

The home page for small screens

The home page for large screens

The product page for large screens

< Back to portfolio