Interactive Design Project 1: Landing Page Design

on

Week 3- Week 5
14/9/2022 - 27/9/2022
Leong Jiahui / 0353469
Bachelor of Design (Honours) in Creative Media
GCD 60904 / INTERACTIVE DESIGN
Project 1: Landing Page Design
Content 
Project 1: Landing Page Design

Project 1: Landing Page Design

Instructions
Progress
WEEK 3 (13.9.2022)
Brief structure & things to include: 
  • Topic chosen: Portfolio + Merch store
  • Brand: Yes, it's Frey
  • Logo:
    fig 1.1.1 logo design (28.9.2022)

  • Navigation bar buttons: home, about, store(drop-down menu), FAQ (left) cart, currency, log in (right)
  • Sections: 5
  • Call to action button
  • Colour scheme:
fig 1.1.2 colour scheme used (28.9.2022)
Time to venture out and stalk artist portfolios & shops on Twitter & Instagram. 
Website references & mood board: 
1. Mossery Stationery (simple with a pop of colour)
fig 1.2.1 mossery stationery website reference (17.9.2022) 
2. Apple Malaysia website (clean simplistic look)


wireframe sketches (on Illustrator): 
fig 2.1.1 wireframe sketches (18.9.2022)

WEEK 4 (20.9.2022)
Shortlisted wireframe sketches (on Miro):
fig 2.1.2 shortlisted wireframe sketches (20.9.2022)

fig 2.1.2 landing page mock-up 1 (26.9.2022) 
This looks...plain. Which isn't a bad thing, but still. 

WEEK 5 (27/9/2022)
fig 2.1.3 progress montage (28.9.2022) 

5 active pages for the final project (subject to change): 
  1. landing page
  2. portfolio
  3. portfolio: watercolour character illustration
  4. products: art prints
  5. product (shopping page) 
  6. link to social media

Final Outcome
fig 2.2.1 Final landing page design (29.9.2022) 



Feedback

WEEK 4 (20.9.2022)
Use Miro instead of Illustrator for the wireframe sketches. Can proceed with wireframe 3 from shortlisted wireframes. 

WEEK 5 (27/9/2022)
Make sure to pay attention to the margin, alignment, white space as well as consistency. The call to action button is ideally placed on the bottom right, if placed elsewhere it needs to be prominent and justifiable.  

Reflection

Web design is way more complex and deeper than I initially thought. It's interesting to see how others format their websites and the elements that make up a good web interface. It's also cool to see how the modular and grid systems learned in Typography come into play in web design. A lot of thought is put into designing a good website and I can't wait to learn how to code my own. 

Comments

Post a Comment