Interactive Design // Project 1

15/04/21 - (Week 3 - Week 4)

Caitlyn Aurelia Tjandra (0339381)/BDCM

Interactive Design

Project 1

---

Lecture Notes

Lecture 3: Website Design (15/04/21)

---

Instruction

Task

Project 1: Prototype Design

Topic

For our first project, we are required to design a landing page of a website. We can choose any topics ranginging from our favourite music, movies, brands, concerts, hobbies, products. When I was briefed about this, my mind immidietly went to my favourite hobby which is Tea and Earring. Since a long time ago I have been fond of tea and earrings, I have collection of different teas and earrings. At first I had a hard time choosing between the two. but then I decided to go with tea as my topic.

At first, I wanted to design a website for tea shop blend website and the purpose of the website is offer a tea collection, tea-ware based on then i found this website called watcha tea and I tdecided to redesign this website. I began listing the information needed:

Topic : Tea Blend Website
Target Audience : Tea lover/ Tea enthusiast 

Website Purpose: Offering a range selection of curated tea from 20 different countries

Call to Action: Buy Now!

Rebranding

This website called What-cha.com is what I would be rebranding. Straight away when you went to the site you could point out the mistakes of this website. 

Fig 1.0 What-cha Tea

The mistakes this website has is their layout, hierarchy,  readability, color and font.There are inconsistency in the structure of the website, there were some hint of hierarchy but overall the placement of the items are cluttered. Furthermore, because of the colour of the font or strong background image it was hard to read the words sometimes.There were hint of colour scheme such as gold, white and red for this website but it was inconsistent and it doesn't suit their website topic.The font chosen also doesn’t fit the topic of their website and the colour’s unattractive

Visual Reference

Fig 1.1 Tema Tea Website

Fig 1.2 Havilla Tea Website

Wireframe Sketches

Fig 1.3 Sketch 1

Fig 1.5 Sketch 2

Fig 1.6 Sketch PDF Compilation

Drafts

Fig 1.7 Draft 1

Fig 1.8 Draft 2

Fig 1.9 Draft 3

Fig 2.0 Draft 4

Fig 2.1 Draft 5

Finalised Branding

Fig 2.2 Website Landing Page Final Outcome

Fig 2.3 Mockups

---

Feedback

Week 3

Specific Feedback: Yes, you can do this website rebranding. Maybe you could analyse and wrote down the error in this website. Then from there you can sketch the wireframe.

Week 4

Specific Feedback: The sketches are excellent are neat! You have a potential as a web designer. I want you to choose which sketch you want because I can't choose. Everything looks good. Good job!

---

Reflection

Experience: This module was a new and refreshing class. I did design a website once but I never fully done the right step from foundation and build up the design to create a meaningful and suitable visual through the brand. Since I did rebranding, it was fun creating a new design which changes the whole  concept of the initial brand. I really enjoy having to think creatively and generating good presentation proposal for the brand web design.

   

Observation: I observe that colour, typography and layout plays an important role In this project. I needed to pay close attention to the colour and typography chosen as it represent the whole image of the design. A good clean wireframe really helps with whole visualisation of making the final draft. I was able to achieve design from the wireframe which gives a clear image of what I wanted to do,

Findings: I found enjoyment in this module. I was able to think creatively and design an actual landing page website. I wish to do more of this in the future!