Conceptual Design for Interactive Publication
Building on the content that I created in the iGuide Print Publication project, I have designed a multi-page Tourism website that enhance the elements of the printed document. In designing interactive components for my site (e.g. buttons, links and other interactive elements), I tried to maintain the same design language as the print publication, with a few minor changes.
Nov 07, 2021
Site Design Desktop View
Mobile experiences are usually designed to be lightweight, meaning they don’t often have a lot of animations of hover effects to bring the design to life. For the desktop version of the website, I’ve focused on translating the mobile layout to desktop and creating fluid animations to bring the design to life.
For layout, I’ve chosen to use a very similar layout to the print guide. The differences are I’ve added the red colour button when creating those components for my site. Since my initial colour palette included neutral colours, I feel like it’s much better if the “Get Tickets” button coloured red, it’s definitely outstanding to users. The navigation bar is always displayed on the right side of the page.
Site Design Mobile View
I began my site design with the mobile version, as this required the most significant changes in content and formatting of the content from the print guide. The navigation menu was one of the first components that I built, and proved quite challenging. At first I planned to design a navigation drawer, the drawer will slide from right when users click on the burger menu button. However, I felt like it would be more interesting if I can do some animation when users click on the menu button.
Therefore, I designed the burger menu button and the exit button as a same component, so when you click on both of them, there will be a smooth animation, the menu button transforms into the exit button. At the same time, the navigation will slide into the screen. I’ve continued this same approach throughout the websites, using the component tool in Adobe XD to create elements that can populate with different elements depending on the state selected. Using this approach allows me to have dynamic content on the site without having to create a new element each time.
Graduating from Swinburne University of Technology in UX/ Ul Design passionate to prove in field of web and interaction design. I am a passionate designer with experience in wireframing, Ul patterns, user flows and prototyping. Personality is enhanced by leadership capabilities and the ability to operate in a team.
I strive for a minimal and beautiful design.