Isyarat Yuk

Personal Project (Group)

HTML5, CSS3, JavaScript, Figma

Visit live website

This website was created for my diploma's major project. I was in charge of the web development and the group designed the User Interface and User Experience of this website together. Users will watch tutorial videos on how to do sign language for five basic words (eat, learn, help, thank you, and you're welcome). These words are chosen so to be useful and practicable in one's daily life. Then, there will be multiple choice questions (quiz) after each word. This website was built in an effort to make Indonesia more inclusive for the disabled.

CHALLENGE

Since our budget for the video talent was tight, it was quite challenging to find one. At first, we tried looking for one on freelance websites and social media but still were not able to get the perfect one that suited our needs.

SOLUTIONS

We contacted some of our colleagues and offered them to be on our video. After some consideration, we decided to go with one of the team member's friend since her appearance and personality were the perfect matches for our needs.

DESIGN PROCESS

1. Branding design

Brainstorming on the products' name, color palette, mood, and typography. We settled with the name 'Isyarat Yuk'. Isyarat is taken from the word 'bahasa isyarat' which means sign language while Yuk is used by Indonesians as a friendly and inviting expression. The brand mood is set to be calm, friendly, and serene, all expressed by the sans-serif font and blue colors.

2. Script and videography

Ranging from the set, property, talent's outfit and makeup, videography proportion, and script, all parts of making the tutorial video was planned on this stage.

3. Designing the website on Figma

Due to a limited time in creating the website, we decided to immediately start with the High Fidelity design. We gathered images from stock websites and made the content of our website in English and bahasa Indonesia.

4. Coding the website

Based on the design, the website is coded for all screen sizes using HTML for the content and CSS for the styling. Then, it is published online using github.

DESIGN SYSTEM

LIKE WHAT YOU SEE?