For my Critical Review I wanted to explore illustration as part of the user experience whilst online. In this Assignment I thought it would be a great opportunity to explore this in practise, allowing me to experiment with motion, narrative, and world building for an immersive web experience.
To achieve this, I decided to again connect my day job with my coursework as finding time to dive into this type of project is never easily possible during the working hours. To find greater purpose in the idea I would like to create for the brand I am building, using it as part of research and practise during my coursework feels to justify the ambitious concept.
Echo, the brand I had introduced you to in the final assignment for Part 1, is a growing skate brand that comes with a mascot. This mascot - is a pigeon.
I am currently building the website for Echo using Wix. Wix Studio offers a lot more interactive add-ons that allow you to build dynamic websites without needing code. I have seen several creators showcase these techniques online and have since been desperate to try them out myself. Not only for Echo, but for my own website which I am currently rebuilding.
This certainly feels like an area I would love to better understand, and as an artist/illustrator feel excited of this being a new way to tell stories whilst also providing a fun experience. Website building has become easily accessible thanks to platforms such as Wix, Squarespace and more. These platforms, and much like every other tech company that exists, are heavily investing in their products, most specifically, their AI. Whilst I stand my ground against the integration of AI in literally everything we do, this investment is showing that our digital online world is only growing. Soon AI will be used in more ways we can handle, and whilst this is on the rise, I think it is important to always find ways of keeping the artist hand included. This, in my opinion, is one possible way of doing so.
As mentioned, building your own website has become incredibly easy. There are very nice, clean templates available for anyone to use and populate with their own content. In a way, this has made the internet a very boring place. Where in the 2000's this brand new customisable world came into our lives, the creativity was unique, individual and fun. Most website now feel very safe, making it feel corporate or I guess "professional". The internet has become a soulless place, where that playful, creative, and experimental part of us is becoming as grey as the real world. We are worried of looking unprofessional, or silly for fear it might look bad for business, or perhaps even your job could be at threat.
When I land on a website that is completely unique today I fall in love. It feels like people took time to think of this idea, build it and invested in it. It's exciting and just shows how far we have come in building websites and how we can use the digital tools to our advantage, rather it be to make a generic boring website.
There are a few websites I would like to use as an example, and as inspiration to building something for Echo. Before I dive into the idea I have been planning to build, here is a look at those websites.
Cat in a Dogs World
The homepage of Cats in a Dogs World introduces you to Mew, a lone cat that has found itself trapped in a dogs world. This universe is part of crypto currency and I believe is made in what would be considered Web 3.0 - I'm not someone who knows a lot of about the world of crypto currency or NFT's but I have to say I admire their websites! As the second on my list is another illustrated heaven!
The most recent blog post by Cats in a Dogs world shares the news of collaborating with Locus Studio to bring an animated series together. This is said to help bridge the gap between pop culture and crypto.
"Immersive art and epic storytelling can bridge the worlds of crypto and popular culture. This is the first of many steps $MEW will take towards becoming a worldwide entertainment and retail brand." - https://mew.xyz/news/mew
It is the immersive art and epic storytelling that hooks me. It is in seeing how a strong visual image and narrative can make a world of difference in transforming the way we browse online. Entertainment is no longer exclusive to books, films, museums or gallery exhibitions. Web is an accessible stage to publish your vision, and in most case it can be free! This perks up my creative senses!
Bored Ape Yacht Club (BAYC)
This is the first website I came across that opened my eyes to what a website could be. I have seen other websites that do other creative things, but this "club" is a vibe I really admire, which became the initial inspiration towards my ideas for Echo.
Like Cat in a Dogs World, Bored Ape Yacht club uses Web 3.0 as the core of what they do. In looking around their website, I see their main source of business is through NFTs - again I have no real knowledge of what this entails but what I do see is a whole of lot of illustration around what they do, and I love it!
Their page starts with a loading screen that shows an eye peeping through a peephole of a door. You then arrive to saloon like doors that wave and glow as you hover your mouse around. As well as this there are moving posters that have been stuck around giving a sense that there is a wind blowing them. You push through the doors and then enter the clubhouse as seen above. What I love about this is that the clubhouse takes your full screen, as you move your mouse around the view moves with it as if looking left and right of the clubhouse. When you hover your mouse over small white circles scattered around the clubhouse, menu options appear like the ABOUT shown above. Depending where you move the mouse, certain elements of the scene will move, making this whole page feel very immersive. Not only this, but without needing to press a button, sound of music, small chatter noises and kitchen dishes clatter on occasion, automatically plays out which ultimately adds to the ambience and experience.
It feels simple, yet so creative in a way of giving the user a unique experience. This could have been a still image that you scroll past to find more information, but instead it fills your screen and forces you to interact. When clicking through the menu, you go into a more traditional web based format where you can scroll through to read about what they do or see the works they create. Even though it is a familiar scrolling format, some animation are still used to bring the whole concept together.
Orken World
And finally; Orken. This website is very different compared to the others, however the illustrations are a big part of it and the scrolling effects make this feel immersive. The way text appears like a book, the images overlapping as you scroll, there is a number of different elements to the website which, when considering what is readily available on Wix for example, seems to be a good source of inspiration on how simple interactions can make storytelling through websites feel alive.
All three websites were discovered on https://www.awwwards.com/ - a website I use often when looking for web design inspiration. This website is such a great site to bookmark, it acts as reassurance that creativity online is not dead, people do want to create immersive experiences and still have a sense of experimental exploration. I for one love to visit this website when I feel burnt out.
Echo Universe
Where does that leave us?
After discovering BAYC I knew it was something I wanted to achieve for Echo. Amongst all of the work behind creating the brand, I had also transformed one of the rooms in the office to be a small filming space for a podcast and other Echo videos. This became known as "The Nest". Creating content is a huge part of the skating scene, it's how riders get seen and as a brand it can help build reputation and value within the community! With this in mind, I wanted to create a space that feels less about selling a product, and more about inclusivity and community online. The website is a standard website, but what I want is to click into another world where media is available to consume for free, essentially 2 parts to the website. Playing with the idea of it being a nest, the idea is to reimagine the filming studio into a much more creative world that the pigeon lives in, like the clubhouse in BAYC for example! There are many directions this could go in, which is very exciting! Not only is it a place for media, but it can be a place to showcase the team, show off merch and so on. It's a media hub, but with storytelling and an immersive feel.
Where to begin! Well, part of the reason this hasn't been completed outside of the course is because I've struggled to pinpoint the look I want to go for. Until I cam across Mew. Mew gave yet another approach to this that I really enjoy. The style is clean and cartoony, which aligns with what I had already been creating for Echo. I like how animated elements integrate into the scrolling experience, in a different way to how Orken does. Mew definitely feels to be the most story based with how it performs as a web experience. The idea is to strike a balance between them both.
Exploring what Wix can do, one thing I wanted to investigate was how it would work to include music effects in the page. I learnt that in most web platforms like Chrome, Firefox etc, sound has to be manually enabled for it to work, they no longer allow music to play, which then I am confused as to how BAYC has achieved this, but I guess thats a web 3.0 thing. With this in mind, the user has to be prompted into playing the music. This became a factor into how I wanted the page to perform and what interactions would be needed.
For this to work, there must be an incentive to press play so that sound can create ambience. I had in mind, whatever the visual would be, the sound would include a mix of skating in a skatepark, a few gaming sounds, and a relaxed lo-fi beat that can loop without sounding annoying. One thing to mention, in the podcast, part of the video aspect of this is to invite guests in the nest where they can play old PS2 skate games whilst chat about the industry, their work etc. It was a small detail that I thought would make watching and listening fun, and another detail that can be incorporated into the online visuals.
My first thought was to make the very first thing that you see something that you click to press play, and of course, a very obvious idea for this would be a TV or CD player. Once clicking, the animation would simply interact as if you have turned the device on. A light would come on and perhaps some of the noise level graphics would move to indicate music was playing. This was a start, and so I decided to sketch this concept. Starting with a TV
I then cleaned up the drawing and added some colour. What I got felt like something from the Gorillaz art style, which I did quite like the vibe of. I placed some text around it, inspired by MEW but staying true to the echo identity with fonts and other elements.
Whilst I had felt to have spent a long time on thinking how I was going to visually bring this whole web experience together, this drawing had been a turning point. Before reaching this point I had explored the below work. I sketched rooms, erased them, tried again and hated them. I was almost about to give up the idea, but something happened from this point onwards.
I wasn't sure if this was what I wanted you to see first. It worked, but I was still hooked on created the room, so I went back to the drawing board and attempted the original concept again. I think it needed to be as one, with the ambience interactive being part of the full image, not separated like the above. That said, this did inspire an idea that the room could have further interactions once clicked. More on this below.
Planning the page.
Things to include:
Ambience music in the background that user triggers by interacting.
A sofa hangout area with a TV and gaming elements (nostalgic).
Suggestion of a skatepark in the background somewhere (through a window).
Perhaps a clothing rack that can be clicked to see merch.
Some how link community (i.e schools, events etc.) Maybe a Calendar or pegboard?
Skates which can redirect people back to the general website.
One way of putting this together is in layers that overlap. Splitting the image in to 3 sections, the foreground, mid-ground, and background. These layers can then move with the scroll such as parallax or move triggers, as well as be animated, adding to the immersive feel.
An example I had seen with Wix:
I came to discover a platform called Rive, which allows you to animate graphics for web, meaning they can be interactive based on input. This would be perfect for what I am hoping to achieve - however could be quite ambitious for this project as I have no idea how to use it! I would be keen to learn some basics which hopefully can happen here, but first I needed artwork.
Onto the drawing!
I collected a few reference images to help build the room and get a feel for a style. I struggled a lot with this stage which affected the speed of the process dramatically. I couldn't get the perspective right, or at least land on something that felt right for what what I was wanting to achieve. I had a very clear image in mind, but whatever I drew just wasn't landing. I tried several techniques to help on this and they all felt too "wooden". I created a room in The Sims and placed the camera at a viewpoint I was aiming for os that I could work on top. This had its benefits but didn't feel "hand drawn". I used photos of interesting rooms in the same way, and the result was very similar in the sense that I just couldn't get past making it feel in style. I did many sketches which all came out very similar, out of proportion, not very clear, or other, so I just felt stuck.
Here's a quick time lapse of the stages I went through and where I ended.
A closer look at some of the different layouts I attempted before scrapping them:
This last sketch was getting closer to my vibe. I liked the scale of it and perspective of looking down at the scene slightly. With this view it felt as though I could get quite a lot of detail in which was what I was hoping to achieve. That said, it still didn't feel completely there. So I tried to take it further.
I eventually dragged in a screenshot of BAYC to help with the perspective. It helped to have this set at low capacity in the background so that I could create any layout I wanted.
I knew that I needed the CD player to be in the foreground as I wanted this to be almost the first interactive element that the user would interact with.
I still struggled up until I had moved the seating area over, which then freed up space behind them for something else, making the room feel larger. In the end I feel as though I had reached an illustration that ticked all of my boxes. What made a difference to the process on the last concept was switching from the thicker pencil brush to a black pen instead. I was able to add and remove with a clearer vision.
Something happened, and the next I know I'm on a roll and everything just worked out perfectly:
Some areas could be tweaked, but I was feeling VERY good about this. It was after this sketch where I had gotten the idea of including a pinboard/calendar which I think would be more appropriate as a representation to community. The good news is I now had a solid base to consider those elements. What would work better, what could be removed, how could I spread the interactive points (highlighted in blue) so that it felt balanced across the image.
The point of this was to also include animation. Not only through what would be available on wix, but as an image itself. What areas would animate and how would this work as whole.
Kommentare