OUGD504 ADOBE XD PRODUCTION

By combining my chosen colour and typeface, my website began to take form as an actual working object. I used Adobe XD to begin putting each aspect of my site into working form. I used my desktop wireframe mockup to set placeholder text for the time being and I sourced imagery from Its Nice That also whilst it was still in its production phase. I'd obviously later use work from actual students because featuring Its Nice That work kind of defeats the purpose of the exercise. I made sure the type was a legible size where it was readable but wasn't too overwhelming in comparison to the image. The images attempt to fit the size of the wireframe mock up however some may seem more portrait due to that specific designers decision. They still roughly fit a similar size however with nothing too obviously out of place. Having a few images a slightly different shape or size adds to the playfulness and approachability of the site whilst maintaining a professional aesthetic at the same time with the layout and type setting. 

As you enter the site from the initial home page, you'll notice that the main hue becomes more opaque. This is to let you know you've entered the site and also having a lighter colour in the background highlights the work being viewed a lot more meaning you wont miss a thing. This helps each and every individual image stand out instead of being engulfed in a darker tone. You can navigate the site with great ease, transitioning from one students work to the other with a single click. It states the students name, area of study and a short rationale of the work being shown. If you click on the image it takes you to an interview with that student and more images of their work. After you have reached the bottom of that page it has a link to the students Instagram and other social networking sites. Then you'd go back to the main site with all the other students work and keep scrolling. I used XD to link all of these pages and images together to make sure that it would all transition smoothly and work like a real website.