INTERACTIVE DESIGN: PROJECT 01

17/05/2022 - 31/05/2022 (Week 08 - Week 10)

ALICIA TENG YI LING / 0345159/ BDCM

INTERACTIVE DESIGN

Project 01 / Landing page design

---

Lectures: can be found here.

---

INSTRUCTIONS

• Choose a topic for your landing page
• Design the landing page wireframe

---

PROJECT 01: LANDING PAGE DESIGN

Visual Research

I decided to start off by thinking about what topic I wanted to focus on. I ended up going with creating a fashion retail website where I display and resell my clothing for more sustainable item usage which is something I am really interested in. Then, I went to Pinterest and started looking for inspiration to get an idea of what kind of design and aesthetic I wanted to go for. I like mellow tones, large images, with a Serif font for the header text and sans serif font for information details.

Fig 1.1 Inspo #1

Fig 1.2 Inspo #2

Fig 1.3 Inspo #3

Inspiration Reference Links:

https://www.pinterest.com/pin/718605684307140315/

https://www.pinterest.com/pin/718605684307157456/

https://www.pinterest.com/pin/718605684307153842/

Sketches

Following this, I began creating some rough sketches in Adobe Illustrator. 

I wanted to start off with a strong header that has a large background image that has my logo and the call to action button "Shop Now". Despite the different styles of formats I was trying out, the sections essentially went like this (in order)

• Header - Navigation Bar
• First Call to Action Button - "Shop More"
• My Purpose (Objective and context of the webpage)
• Latest Arrivals (New Clothing)
• Second Call to Action Button - "Shop More"
  
• All Collections (Shop All)
• Third Call to Action Button - "Browse More"
• Contact Me
• Fourth Call to Action Button - "Submit"
• Social Media
• Footer - Navigation Bar

Fig 2.1 Total 5 Sketches

Fig 2.2 Sketch #1

Fig 2.3 Sketch #2

Fig 2.4 Sketch #3

Fig 2.5 Sketch #4

Fig 2.6 Sketch #5

Refinement/Creating Prototype

After receiving feedback from Mr. Shamsul, I began refining my sketch. I chose sketch #2 as I like the layout and image sizing the best.

Fig 3.1 Refined Draft

I started by choosing my colour palette. I wanted neutrals so I went with these:

• Header –  #D5C39F
• Background  01 – #E7E2DB
• Background 02 – #F2F2F2
• Font – Black #000000

Then I sourced some related pictures from Pinterest for the initial refined draft. Following this, I typed some content and began arranging and organizing everything to form my first draft. I really like how it turned out but I needed to change the images to copyright free ones so I selected the new images from Pexels.com and from my friend who gave me permission to use them. 

Images:

1. Brand Logo
• Created by me
2. Background Image in Header
• https://www.pexels.com/photo/white-paper-rolls-on-white-table-7897470/ 
3. Image in “My Purpose”:
• That is my own image
4. Clothing Images
• https://www.pexels.com/photo/woman-sitting-among-flowers-9888290/ 
• https://www.pexels.com/photo/unrecognizable-woman-in-red-hat-standing-in-meadow-of-yellow-flowers-11122156/ 
• https://www.pexels.com/photo/woman-holding-brown-bag-near-brown-wooden-surfac-1942879/ 
• https://www.pexels.com/photo/woman-holding-a-louis-vuitton-bag-12194934/ 
• They are my friend and she gave them to me (three of the clothing images in “Latest Arrivals”)

FINAL SUBMISSION:

Fig 4.1 Final Landing Page Design - PNG (19/05/2022)

Fig 4.2 Final Landing Page Design - PDF (19/05/2022)

Fig 4.3 Final Landing Page Presentation - PDF (19/05/2022)

---

FEEDBACK

Week 07 (24/05/2022)

• Reverse the colours in the call to action button (black background, white text) to make it more visible and stand out
• Make sure all the header texts are the same size
• Colour scheme is good

Week 09 (31/05/2022)

• Remove the line in the header
• Centre the call to action button
• Add a copyright notice in the footer to balance out the navigation bar
• Change the icon in the navigation bar to be less simple (it was just 'ALICIA' - I changed it to a home button icon)

---

REFLECTION

Honestly, this project was really fun for me and surprisingly overall, I really like learning this module. It was nice being able to decide what topic I wanted to do and designing this landing page let me refine my personal aesthetics and gave me an opportunity to explore what my life would be like if I was a fashion influencer. I struggled quite a bit with alignment and centering and had to test out different orders of the sections for better information hierarchy but it was all very fun to learn how to create a webpage. Before we started, coding seemed quite daunting and I thought I would get quite lost. However now, I believe I have gained a new skill set and I can confidently say that I am excited to go into UI/UX Design.