Interactive Design Project 1 : Landing Page Design
Len Hoi Yee / 0353430
Interactive Design / Bachelor of Design in Creative Media
Project 1
INSTRUCTIONS
Project 1: Prototype Design
Research
At first, I wanted to create a fashion clothing brand website for this project because I love to dress up and I have seen many interesting fashion clothing websites so I would love to try to make a fashion clothing website myself. However, the further I explored, the less interested I am in fashion clothing landing page design. Suddenly, I came across some skin care landing page design and I was attracted to it and it was that moment I decided to create one for myself.
Then, I started doing the thinking, back when after my SPM days, I actually worked for a skincare retail shop called Skin Regimen for 3 months. From this company, they had provided me training on product knowledge and also general skin care knowledge. On top of that, I do have my own skincare routine, because of my acne problem, I tend to look for products that could cure acne problems. So I was guessing, why not? I could create my skincare brand and website that not only satisfy myself and also I could help more people out there who are suffering the same problem as me.
So my first step was looking up on different landing page design and I browse through websites I know to get inspiration on my landing page design layout.
Here are some websites I found that are pretty inspiring and aesthetic:
This brand has a really aesthetic packaging design and so does its website. The products are user-friendly and mainly plant-based made. They teach you the correct method of applying your skin care, step by step, you can tell from the arrangement of the products.
When I saw Zara, I was immediately mesmerised by its cool and aesthetic web design. It has a simple yet clear display of the models wearing their clothing and it has animation too! The colour tone is a cool tone that doesn't hurt our eyes but rather gives out a vintage vibe.
Moodboard
Layout inspiration
Colour
Progress
Sketches
Mr.Shamsul taught us how to use miro as a sketchboard for us to draft our ideas there, as the materials and functions are very convenient for us.
At first, I was planning to go for a fashion website, as I am really into fashion, so iI was thinking why not creating a website for myself, something that i like. So here, are my sketches in miroboard. I have used the wireframe to sketch out the overall layout for my design. However, the more further I explore about websites and landing page, I realised I wanted to do an aesthetic page. because it had always intrigued me of how minimalistic it is. Then, I decided to change my idea.
These are my sketches for the skin care landing page idea. I continued looking for more interesting idea.
While working on the layout design, I have chosen pictures from online and pick the right font for each sentence. Hierarchy of informatio is important, therefore, some needed to be bold, some needed to be in italic form , and some needed to be in regular, this helps in the readability.
I have used the existing websites' footer as reference to make mine, I have used the necessary ones, in my layout.
Final Outcome
Feedback
Reflection
A good website requires alignment and margin, it is the first 2 elements to be noticed in a website. The font choice is important, which one should be bold, italic, and regular. Typography comes in handy while designing landing page. The overall colour choice must be comfortable for the audience to read, and the not more than 2 colours would be the best landing page design. Looking at my design makes me can't wait to make it alive!!Looking forward to learn coding the wesbsite!
Comments
Post a Comment