Prototype
Wireframes for the design layout
Here I’ve quickly designed 8 low-fidelity prototypes of how I want the main Design Portfolio webpage to look. When I first started thinking about how I wanted things to be laid out I initially had all the images in a single column with the text underneath. I decided to change this early on as it was not accessible to people who couldn’t scroll for long periods due to how long the webpage would’ve been and how long it would’ve taken the user to reach the bottom. I then changed it so that the two images were on a scrolling photo gallery to take up less space but then the main images still looked to large on the page and took up unnecessary space. To make the page look more ordered and put-together I included a border in the centre of the page to keep all the information contained together, as well as this I made a gif which would be the largest image on the page and would explain visually what the content would be about. I also put the artists work and my own re-design next to each other with the text underneath. This allowed me to add other UX elements to make the page more interesting such as the dates in boxes floating up as the user scrolls down the page
Once I had the basic layout of how I wanted my images and text to look I experimented more with the UX elements that I could add that’d make the page more interactive. I first created a paralax image header that related to the main colour scheme of the page as well as including a lot of natural elements which is a big them of the artists and images that I choose for the webpage that they all use muted tones and look more natural. I also added these two butterfly graphics in the header which follow your cursor as you move it around, making it more interactive for the user. To increase accessibility on the page I made separate buttons which move to different pars of the page so you don’t have to scroll the whole time with the mouse wheel. As well as this theres also a sticky back-to-top button at the bottom of the page which once clicked will take the user to the start.
Storyboard for UI/UX elements
As opposed to the digitally made prototype for the design layout I also storyboarded the key UI and UX elements that I will incorporate on my page to try and tell a story at the same time as deliver content on the subject of design history and the mix of both traditional and digital art. As the user scrolls down the page I want the site to slowly change from traditional to digital and so to do this I’ll add a graphic that slowly appears as you scroll down the page. The graphic will be a string of hand-drawn sunflowers that slowly transform into digitally curated ones to show how art has transitioned over time. I wanted to use sunflowers for this as my page already features a lot of yellows and greens so I thought that’d be an appropriate image for it.
