TOOLS

Ae | Sketch | Webflow | Cinema 4D | Lottie

SKILLS

Story telling | UX/UI | Animation | micro Interaction | Web development

Overview

Darknet is an experiential learning site about the hidden internet world that is unfamiliar to many. The site provides information to understand everything about the Darknet, from explaining the layers of the internet, through virtual coins to the different stories that happened with the Darknet. The site involves several techniques to improve learning and memory stimuli in order to have a better understanding and better memory of the information, for example, storytelling, visual imagery, motion graphics, and exciting interactions.

Website

getting started

The Challenge

To convey a large amount of information on a complex topic without any prior knowledge can be very difficult.
It is easy to get lost in all the information when reading content on a new subject.
Additionally, if the subject is complex one can lose focus and give up on reading the entire article/content.
‍

The Solution

An interactive site that contains features that draw the reader in, and delivers
all the information in an accessible way with an unforgettable experience.
‍

Research

Before I got into planning or design, I did some in-depth research in several areas:
◆ Content research - what content do I want to deliver to the readers
in order to give over the right message.
◆ Lesson plan research - in what order and way should I present things,
what should be before what.
◆ Design and emotional research - what feelings do I want the reader
to feel in each part of the site.

User Flow

I created a high-fidelity user flow.
The user flow allows our design for the site to be thorough, and
also identifies errors at the start, and saves time in the prototyping phase.

creative Ui/ux

In order to create a digital product that focuses on learning which requires a lot
of concentration, I had to make it easier for the user where possible.
I added interactions that helps the user be present while reading, including
a guiding mark for the user to keep track of what line he is on.

Creation process

To create such a complete site by myself, I had to arrange and plan the process down to
the smallest details.
‍
Step #1
Designing the site and components that can later be used for development.
‍
Step #2
I created the 2D / 3D animations.
‍
Step #3
I turned the animations into JSON files so I could integrate them with the development software.
‍
Step #4
Developing website and building all the elements and animations I created in the design stages.
‍
Step #5
Deploying the site and fixing bugs.

Darknet