Close

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.