Wireframes & Prototypes for UX Design
Wireframes and prototypes are an important stage of the web or app design process that focus on the user experience (UX).
For example, because almost 80% of visitors to the Buy As You View website were using mobile devices, all web designs were created ‘mobile-first’. This method prioritises the designs for mobile users and then scales them up for larger devices.
By using a combination of hand-drawn wireframes, Adobe XD working wireframes and InVision prototypes we have designed a range of responsive sites and pages. Designs were also refined by usability testing with real users.
By using these techniques, we can ensure that web pages are optimised to provide a great User Experience (UX) which will, in turn, help improve things like conversion rate.
You can find out more about User Experience design on our UX Design and Website Analysis project.
Working Wireframe Mockup
We created working flat wireframes working from original hand drawn wireframes. This example was embedded into a phone mockup for proofing purposes.
InVision Prototype Examples
Wireframes were then mocked up in Photoshop adding design elements. The Photoshop files were then added to InVision to create working prototypes.
Credas App Prototype
These interactive prototypes for the Credas mobile app allowed us to user test and refine the experience before the app was built. User feedback and prototyping software continues to be used to add regular improvements to the app.