Interactive Design // PROJECT 01

24.08.2021 - 00.00.2021 / Week 05- 07
Rebecca Thoo Hui Ying / 0350359
Bachelor of Designs (Hons) in Creative Media
Interactive Design Project 01 

---

LECTURES

Week 05:

Introduction to Adobe Dreamweaver

✧ Adobe Dreamweaver is software that lets an individual build, design & publish websites

✧ The main features of Dreamweaver are:

    ⊹ Easy to use visual interface

    ⊹ Built-in Code Editor

    ⊹ Part of the Adobe Creative Cloud Suite

✧ Mr Tarmizi showed us the functions of the Dreamweaver in class, how to create it's individual HTML components

✧ Dreamweaver also looks neater in my opinion, as each elements are colour coordinated, hence it will be easier for us to code 

Landing Page

✧ Landing page is a distinct page on a website that's build for one single conversion objective, it should be done with one business goal in mind

✧ Landing pages are create specifically for product, marketing or advertising campaign 

---

INSTRUCTIONS

<iframe src="https://drive.google.com/file/d/1LfErFV9d7y0CfzSJRXvRFVLwEA4h4Eb0/preview" width="640" height="480" allow="autoplay"></iframe>

EXERCISE

Project 01: Landing Page Design

We were given the task to create a static landing page of a microsite from a topic of our choice. 

Research on landing pages: 

Fig 1.1 Landing Page References 

I really like how simple & minimalistic the webpage is. It is also a design that is straight to point in letting the audience know what kinds of products they are promoting. Information are concise, readable & simple to understand. 

Chosen Brand: KissThePink

Choosen Topic: Diffuser

Fig 1.2 Overall Brand image

KissThePink is a Malaysian Fragrance, Candle & Diffuser Brand that aims to fulfill a lack of fine quality and affordable organic candles in the market without compromising on its quality.

Fig 1.3 Website (https://www.kissthepink.shop/)

In this project, I've decided to promote a limited edition collection- 'Blooms Season' that is no longer in stock. The collection first came out in July 2021 and was sold out due to its popularity. I will be using images sourced from KissThePink's website, Facebook as well as Instagram (I do not own the rights to the picture, and will list down its source in fine letter within the images used). 

Landing Page Wireframe Sketch (28.09.2021)

Fig 1.4 Landing Page Wireframe Sketch (28.09.2021)

First Draft of Landing Page (03.10.2021)

Fig 1.4 First Draft of Landing Page 03.10.2021)

Fig 1.5 PDF First Draft of Landing Page 03.10.2021)

For this design, I stayed true to KissThePink's brand colours as they mainly uses 3 colours: Pink, Black & White. I've also utilised their tagline "you feel good when you smell good" in my design as it is the phrase its audiences are familiar with. Pictures & Informations within the landing page were obtained from KissThePink's Instagram & Website. 

---

FEEDBACK

Week 06:

LECTURER'S FEEDBACK

You managed to portray the concept of your proposed landing page through the submitted sketch, and I’m looking forward to your landing page design submission next week.

---

REFLECTIONS

It was exciting to create a website all on our own, though i definitely need to rewatch the recorded sessions to make myself more familiarised with the whole coding and the software interface. The assembling of how the website should look like was relatively easy for me as i already am familarised with Ai. 

---

FURTHER READING

Fig 1 Landing page (Filiawear) 27.09.2021

Reference:
Filiawear, 2021. Landing Page Design That Converts Like Crazy- 2021 Winning Formula- Filiawear. [online] Filiawear. Available at: <https://filiawear.com/landing-page-design-that-converts/> [Accessed 27 Sep. 2021].

Things to include to make a good landing page: 

Catchy Headline

✧ Main Headline

    Heading must be clear & concise in order to engage with the content 

✧ Subhealine

    Plays a huge role in capturing the scanner's attention, contains important info readers must know

Bullet Points

✧ Reveals clear explanation of the service or information that helps audiences solve their problems 

Call to Action

✧ CTA keywords: FREE, DOWNLOAD NOW, BUY NOW, LEARN MORE

Visual Elements

✧ Includes pictures or videos that helps to explain product & services you offer

✧ Pages with visuals get 94% more views & conversion than the ones without them

Navigation

✧ Offering audiences links for multiple pages or site 

Testimonials

✧ This is crucial for building trust & strengthening the brand, boosts trusts in audiences 

Description

✧ Explains your product or service in detail

Socials

✧ Attach logos of companies that use your services or are buying your prodcuts

Page Fold

✧ Place important elements above the fold