High-Fidelity Prototypes

From the low-fidelity prototypes, we are able to design our mini-site and landing page with a clear idea as to what it should have and look like. InVision has helped us put together the pages and our ideas of how the mini-site and landing pages work together.

Landing Page:

Desktop version

Mobile version

As an option is chosen, the next page slides up to reveal the information. The use of InVision has helped us execute this idea into reality, to see if it works before using it in the actual final product. As the effect became real and having looked at the way it looks, and comparing it to how we had imagined has helped us decide that we will use this transition effect.

The rest button (on the landing page) has been placed on the top left-hand corner instead of in the centre as the centre is a little crowded. By placing it at the left-hand corner, it is a more recognisable spot for a back button which in this case acts like one. Giving users an option to reset the page will allow them to click on the option they had not chosen before, enabling them to learn the difference between the two wines.

Mini-site Page effect:

Desktop version

Mobile version

As mentioned previously in blog posts, the mini-site (desktop) is going to be a single-scroller page. InVision has once again, helped us put our thoughts into a quick and real example of our page. The only thing with our mini-site with InVision is that each section does not fill up the screen as we intent it to, due to it being an image. However, seeing as it still works allows us to further imagine how well our mini site could look with it taking the full screen of the webpage.

Every icon on the page leads back to the home page.


Low fidelity prototypes

Landing pages – Low fidelity prototypes

These two prototypes will help us to visualise the sketches and mock-ups more thoroughly and also to present the client with a basic functionality. This is only for early demonstrations and does not include any effects. Also, the final versions will see us implementing all into one page rather than having Desktop and Mobile as two different versions.

– The added reset button is not part of the final design –

Landing page – Low fidelity – Desktop

Landing page – Low fidelity – Mobile

Mini Site – Low fidelity prototypes

The low fidelity prototypes for the Mini Site are illustrating the general idea and flow of the page. Sections can be directly linked to or the “index” at the top of the single-scroller lets you decide which area you would like to visit. At the bottom of each element are links back to the client’s website for further information on the topic (each one linking to a different section on his website).

Mini Site – Low fidelity – Desktop

Mini Site – Low fidelity – Mobile