Immersive Website
An interactive narrative website that tells the story of Sherlock Holmes and his crafty sidekicks.
Platform: Web
Skills: Illustration | UI Design | Animation
The Brief
In this project we were given the brief of creating an interactive digital publication or website focusing on the narrative of Sherlock Holmes. We were given the content in black and white copy and were encouraged to use only what we felt was necessary for our design. This gave me the opportunity to tell the story in my own way, leaving me with a range of ideas and potential directions to go down for this project.
Idea
I decided to design an interactive website using Webflow. I wanted to improve my skills in this area as well as showcasing my love for illustration by designing the characters of Sherlock Holmes and having these featured throughout.
Research
I began researching a number of immersive websites and experiences to give me a better idea of the experience I was going to be designing for. Online and on screen we are able to create more immersive experiences considering animation, movements and interactions. When apps were first released they were very much static and resembled websites in a phone screen size, however now things have advanced and user interfaces have become much more dynamic therefore enhancing the user experience.
I created a visual mind map including anything that inspired me or stood out during my research stage. I tend to do this for every project as it helps me to think creatively and start to come up with ideas on what I want to design. I took inspiration from what was around me in the city too, Belfast is full of historical markers and typography that helped me form the direction of my project. In fact the signs I illustrated are heavily based on the old street signs of Belfast.
To focus my project I decided that my user group was children in late primary/early high school. I spoke to a number of children in my brother’s class and asked them what they would expect to see within a storytelling website. This gave me lots of ideas, the kids were really keen to see lots of pictures, animation and colour. This made me aware of how important these elements would be to keep the users engaged.
Typography was also something that was very important, I spent a lot of time researching different kinds of type and assessing the readability. This was important to consider as the user needs to be able to read and process the content without difficulty. I used Abril Fatface along with Brandon Grotesque for my font pairing.
Process
Once I felt confident that my research was thorough enough I began to storyboard the screens that would become sections of my interactive site. This was a super important step as it allowed me to plan out what illustrations I would need and consider the layout and spacing carefully. As I was designing a one page site with a continuous scroll it needed to flow well in order for the user to easily follow along with the story. Each element was thought through and included to have meaning and add to the immersive experience.
Illustrations
The illustration was a key aspect of my project, as I aimed to create a visually appealing and engaging design that showcased the individuality of each character while maintaining coherence and unity among them. To achieve this, I leveraged the power of texture to highlight various features of each character, adding depth and interest to the overall design.
Reflection
I thoroughly enjoyed this project as it tested my abilities in using illustration and typography on the web. The challenge of the project allowed me to learn new skills, improving my confidence in using Webflow and designing for the web. Given the creative freedom to present the story of Sherlock Holmes in my own unique way, I utilised research and art direction to bring a clear narrative to life through my website design. If I had more time I would've liked to expand the responsiveness of the site, it is desktop designed however with the growing number of kids using other devices I'd like it to be accessible across all. The result is a one-page, continuous site that features engaging illustrations and interactive elements, providing the user with an immersive experience that brings the story to life in a fun and exciting way. Overall, this project has been a fulfilling journey of creativity and growth for me.
