During my internship with a full-service creative advertising agency, I designed websites for a couple of a client’s side projects and collaborations. This design is for a series of visualisation tracks.
Drawing from my university studies, the next rational step was to make a moodboard, so I collected a variety of images that I felt captured the essence of the product and its audience.
Using Adobe Color, I created colour palettes by referencing the colours used in some of the images featured above.
At this point, time was spent doing additional research and gathering inspiration. The goal of this part of the process was to find specific elements that could add meaning to the visual design of the website. For example, I searched for symbolism, textures and various icons that could help inform the design’s direction.
I brainstormed some names for the sub-brand, as the team was uncertain if the client wanted to keep the original name he had provided. By doing up some designs with multiple options, I hoped one would catch his eye. I experimented with different fonts that seemed to capture what the website would be about. After obtaining other opinions, the favourite was selected (as seen in the rectangle).
After designing a basic layout for the website’s homepage, it hadn’t yet effectively captured the essence of the subject matter, so I returned to look for more inspiration. Intrigued by the soft flowing nature of hypnotherapy and visualisation tracks, I decided to experiment with some audio waveforms. The purple ones are screenshots of the client’s hypnotherapy track.
The below images show the changes made between the first and second iterations, after having obtained feedback from my colleagues and exploring audio waveforms.
At this stage, I felt as though the design was on a much better track! So, I began considering the other pages of the website. Not knowing what the client was after, I established the below information architecture to organise my thoughts and decipher what the next step could be.
At this point, I continued to develop each of the pages. The soft curve was changed to a more angular shape to suit the subject matter (perfecting skills). Additional small changes were made throughout the process. The client was pleased with the results.
The video below shows how the website functions in terms of interactivity and the drop down navigation design. The website was designed using Adobe XD and the below prototype was created by using the software’s interactive prototyping features.
If you would like to interact with the prototype and see how it works for yourself, feel free to click the below button.
This project introduced me to Adobe XD, and I’m ever so grateful for that! I think it’s a great program; very versatile and intuitive. Having worked with Sketch during my university studies, it was a blessing finding out about XD. It’s a fantastic, simple way to showcase interactive prototypes. Since this project has finished up, I hope to continue making little things using this software.
If you’re interested in seeing the other website in this series, the below button can take you there.