Now the wireframes have been designed, the next step was turning them into actual designs. Images and information were taken from websites that would be included on Svpply, such as: Mr Porter, ASOS, GoodHood, Cncpts, Urban Outfitters, Etsy & Topshop.
Home Page:
The same colours are used for different sections as on the originally Svpply website, to colour code each section:
An example of the subcategory page - You can also see how i've kept all the folders organised in a way that would be suitable for coding.
A 12 column grid was used to keep the pages constant and well structured:
Before adding the content images and text, you can see that text was copied and pasted, with rectangles used for images:
Images were placed inside clipping masks to fit into the grid:
Slowly adding images:
The finalised page:
Dropdown menus were added as separate layers, so they could be turned on and off:
How the 'store' profile is being filled in:
The mobile pages were also designed with boxes left for content:
With the added content:
As you can see on the original design below, the same dropdown menu has been used on the mobile device:
The added dropdown menu:
Icons were downloaded from a free source and added:
The closeup product page on mobile:
The 'wants' and 'collections' options that were first experimented with. These work well on the below image since it's originally dark, but would not work well on light images.
For this reason, it was changed to a solid colour. The colour is based on the subcategory.
So each subcategory has it's colour when selected:
