OUGD603 - WYS - Adobe XD

Once research was complete and the wireframes had been produced for WYS,  Ben & I had a better idea what the overall of the design would look like. The wireframes were then brought onto Adobe Xd as this helps to visualise our ideas and change anything that may have worked in sketched form but doesn't work as well on screen. The initial prototypes are seen below.

A large box was shown in the centre of the page where a video explaining who we are and what we do would be placed. This would be the home page and would load as soon as the user opens the site. This interactive element means our audience won't need to read anything to learn about us, in the hope that the idea better sticks in the mind of the viewer.

The menu on the left is characterised by different colours helping to differentiate between each page. When active, the selected page is then indented, standing out further.

The artists page is laid out in a simple collage like way and shows how the page will be able to scroll through content on the right but the menu and logo would be static on the left.

The store is simple and easy to use meaning there is no confusion if the audience is looking to buy something. Placeholder images were used to show how experimental the photos could be to help sell the products.

The contact link will enable the user to go straight to email in a separate tab, meaning it will be quick and simple to contact us.

After producing the first layout idea, experimentation was done with the placement of various elements on the page. The second development below shows how the menu could be placed on the top left, giving room for content to spread across the whole width of the spread.

The video below shows how the menu would drop down when clicked. The majority of each page stays the same however, this concept was shown to give each element of the page more breathing space.  

This idea played on the website having further use as a marketing tool and enabled the user to see the books each artist has produced at the bottom of their corresponding pages.

The website went through constant development on Adobe XD, experimenting with the menu and logo placement as a worked through the site.

After going through various developments on Adobe XD, a final layout was chosen to use for the website before it was brought onto Adobe Muse for further development. This concept took ideas from both the previous layouts seen above, placing the menu and logo on the left side but reducing the size, giving more room to each element on the page.

After these website developments, the next stage will be to bring the idea to a critique for further feedback before it is developed further on Adobe Muse.