My role
UI design
Illustration
Tools
Sketch - Outline
Mockup - Adobe Photoshop
Prototype - Adobe Photoshop
Animation - Google Web Design
Team
1x UI Designer
1x UX Designer
Project Type
Academic
Illustration
Website Design
The Process
Brainstorm
Ideate
Sketch
Illustrate
Evaluate
About the project
The goal was to make an illustrated landing page with a free theme. The chosen theme was about Amazon, the biggest rainforest in the world. Besides being a good idea to illustrate, it is a topic that is increasingly talked about nowadays. My role was to make the illustrations and develop the interface design. As a simple project, we were more focused on the design.
The Problem | Challenge
As an academic project, the challenge was to create a landing page made of illustrations made to be developed in parallax.
How could I develop an illustrated landing page that adapts to the needs and the effect we wanted to create (parallax)?
Strategy
My main focus was to create something that highlights the forest cause in an artistic way and make the users embrace it. The parallax effect is an interaction itself, so it didn't require a lot of functions to make it interact with the user.
Getting ready
process
The goal was simple, the most difficult part was to create something good with a parallax effect. This was my first illustration project, and we wanted to put a meaning to it talking about a subject that has a lot of beauty and importance. We wanted to make something simple but beautiful. We had some examples of how to do that and the idea of having a waterfall following the body site was a way to keep the users hooked on the subject. The site's goal was to make people aware of the matter and make them support the cause.
Illustrations
Bringing to life
I had the idea of a waterfall in my mind since the beginning, so I projected it with trees and a big sun. Amazon has one of the largest rivers in the world, so showing this was an important point that I wanted to enhance. Anyone could have access to the Amazon story by clicking on the button below the text.
Demonstration
high fidelity
The site is simple. It doesn't contain much text or menu like most landing pages. For this reason, we had to grab the user's attention in the best possible visual way, so that we could catch the user's curiosity and trigger an action.
The mobile version had to be illustrated in another way, as the computer version wasn't making it readable. It was necessary to enlarge the screen to be able to read, and this was not at all efficient for the users.
LEARNINGS
The most precious lesson I got from this project was the ability to project my illustrations in a different way. I learned more about coding with this exercise, and how CSS and Javascript have similar functions. The conclusion of this lesson brought me a better understanding of how simple interactions and visuals can make all the difference in a project.
