After gaining some knowledge in Adobe XD, I’ve used the different aspects of design and prototyping to implement in my refreshed branding project which mainly focuses on web design. I’ve gained knowledge in different aspects of Adobe XD which are all relevant to my final web design prototyping. I’ve achieved this through various Adobe XD tutorials that focused on aspects such as the basics of prototyping consisting of adding images, colour, icons and typography essentially the basic components of an effective website.
However, the main focus here was to combine my creative design elements with prototyping skills I have obtained. I have already shown some design prototyping which I’ve implemented on my mockup website, elements such as interactivity is a key aspect in design prototyping which I’ve successfully demonstrated in my mockup. I’ve tested the functionality so that I can confidently ensure to use these interactivity features for my final rebranded web design that I’m working on, testing out variety of prototyping within design is an important process as it gives me an overview of the potential prototyping elements that would work well with the design elements of the website which are influenced by the brand identity.
Here I’ve successfully implemented the dark/light mode feature prototype into my refreshed website for the upcoming freedom festival. However, I’ve added further design element to the functionality by focusing on the creative aspect of the brand’s theme and identity combined with the logical prototype feature. I’ve done that by adding light bulb icons onto the websites interface which links to both the festival’s theme and the functionality feature as the light bulb icons appear to glow once the users enter the dark mode of the website interface which adds some creative spark and enhances the visual design of the website but at the same time elaborating on the functionality feature providing users with two different interface layouts. Just like in the mockup version, I’ve used icons at the bottom of the screen of the moon and the sun which indicate dark and light mode.
In addition, I’ve also successfully implemented menu tab prototype which is essential for a website, I’ve used a basic layout for the menu tab which works comfortably with the overall functionality of the website. Most importantly, like most websites do, I’ve ensured that the menu tab is always visible on the screen. I’ve done this by simply grouping the menu tab components and setting it to fix in position when scrolling. This allows the menu tab to stay in place at the top of the screen so that users can switch between different menus whenever they need to without scrolling all the way back to the top.