Sketch - Outline
Mockup - Adobe Photoshop
Prototype - Adobe Photoshop
Animation - Google Web Design
1x UI Designer
1x UX Designer
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)?
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.
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.
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.
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.