Dinshaw Wholesale required a new look and feel to their website, and Fingermouse was asked to design a new logo and implement it into a professional layout. The site's look regularly changes through different seasons and sale requirements, but this original mockup shows the page design at a point where stock images had been sourced to highlight a summer feel. Imagery from clothes providers was used in the final production version, changing when new stock was available.
This wireframe was produced before the final mockup (above) and allowed the clients to see how the site was going to be laid out. Making changes to the layout at the wireframe stage is much quicker than rebuilding complete mockups and allows faster development in collaboration with the client. Wireframes are used whenever the design is likely to change significantly or there are particularly complex elements that need to be incorporated.
This wireframe shows some of the complexity of building a shop layout. This display for a single item needs to look simple on the surface, but this graphic shows where all of the different elements are contained and how they will be laid out in relation to each other.
Another wireframe shows an indexed list of products, sharing many of the same interface elements as the other wireframes but presenting information as clearly as possible. This wireframe was eventually built into a customised template that fitted into the online shop's code and brought the final page to life.