Telling a story
Using the parallax effect for storytelling
Using the parallax effect for storytelling
Back in 2014 I was transitioning from a web designer to a UX role. But I needed to land a job opportunity that could match and skyrocket my career in UX Design. I needed to differentiate myself from other promising candidates. Storytelling was the definitive factor to consider when marketing myself to the job market, so I opted to build a storytelling webpage where I could promote my skills and background.
Web design, Graphic design, HTML Markup, CSS3 Stylesheets, Javascript Parallax Animation
How to tell my story and stand out in the job market? How to generate interest in the mind of potential hiring managers and convince them to start reading more about my background and experience?
I needed to land a job in the next 2 months, hopefully with an organization that could provide a suitable opportunity to grow in the UX field.
As a solo-project owner I faced a 2 week time constraint where I needed to account for several activities and deliverables. The end goal was to produce a highly engaging website for potential hiring managers to dive into in less than 2 weeks.
The tools, artifacts and methodologies used to deliver the tasks and challenges at hand.
I browsed and explored several websites that feature the parallax effect. I learned about the use of static or slow-moving background images against faster moving foreground images that create the illusion of a multi-layered 3D scrolling feature. This effect makes for a much more immersive user experience, engaging users and keeping them on the site longer.
I met a friend overseas who had a particular hobby. He used to buy and collect t-shirts from Hard Rock Cafe gift shops as a memento to showcase his travels. It then occurred to me to bring this concept of collecting and wearing t-shirts related to the places I have lived in and traveled to, plus my hobbies to tell my story and showcase my overall experiences when working and living abroad.
I thought about using the parallax scrolling effect to create the illusion that I am changing through t-shirts as the user scrolls down towards the footer, followed by a small paragraph of text that quickly describes each of my experiences and particular hobbies.
I quickly took a picture of myself wearing a random t-shirt. Then I photoshopped a series of t-shirts on top of my body frame to produce separate images wearing different t-shirts.
Then I created separated sections which are composed of the images and text. By adjusting the parallax effect at the right speed sections are overlaid when scrolling, thus creating the illusion that the only changing element is the t-shirt.
Chose a vibrant and fun color scheme to draw the user in to read more
#1de4db
#22a7f0
#4f87dc
#727ec7
#ff5a72
#ff7755
Open Sans Condensed
A single-page parallax website that tells the story of a designer who has lived and traveled the world, without sounding too boring.
I caught the attention of several companies from Finland, Sweden, Malaysia, Turkey and Brazil. I ran around 6 selection processes with different companies.
I eventually landed a job at a fast-growing startup named Sympla and relocated to Brazil in 2014, before the Soccer World Cup had taken place :).