← Back to portfolio
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.
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.
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.
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.
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.
I applied the style choices to the layout of the wireframes created earlier to make the final mockups.
← Back to portfolio