Labels

Interactive Design: Project 01

WEEK 08 - WEEK 10 (17/05/2022 - 05/06/2022)
Adena Tan Sue Lynn (0345769) / Bachelor of Design (Honours) in Creative Media
Interactive Design
Project 01

DIRECTORY

INSTRUCTIONS

For this project, we were required to choose a topic for our landing page. Thus, I chose to create a website for a tofu shop. 

Gathering Inspiration

Before sketching, I decided to look at some websites to get some idea of what landing pages looks like for food. I decided to look at vegan Malaysian websites.

Figure 1.1.1 Vegan District
https://vegandistrict.my

Figure 1.1.2 Lo Sam 
https://losamfoods.com

Figure 1.1.3 Harvest Gourmet
https://www.harvestgourmet.my

Sketching

Next, I started sketching. For this, I used Procreate.

Figure 1.2.1 Sketch #1

Figure 1.2.2 Sketch #2

Figure 1.2.3 Sketch #3

Figure 1.2.4 Sketch #4

Figure 1.2.5 Sketch #5

Creating Prototype

After receiving feedback from Mr Shamsul to recreate the Lo Sam website, I decided to work on my Prototype. I chose Sketch #1 as I thought it was the best. 

Firstly, I obtained some things for my website such as images and content. 

1. Logo

Figure 1.3.1 Logo

I decided to create the above logo as I wanted the Lo Sam logo to match the vibe I was going for with the website. Similar to the current Lo Sam logo, I made L S the main focus, but added "Lo Sam" for easy understanding. 

2. Creating the Website

Then, I created the website. Below was the prototype I was fully satisfied with. 

Figure 1.3.2 Lo Sam Landing Page Prototype

This version is Version 2, where I followed Mr Shamsul's advise to align things, remove borders and fill up the empty spaces better. 

Now, I will share my sources:

Images:

  1. Soybeans and tofu: https://www.pexels.com/photo/photo-of-tofu-soybeans-and-soy-milk-against-white-background-4518577/
  2. Tofu in soy sauce: https://www.pexels.com/photo/sliced-tofu-with-soy-sauce-on-white-ceramic-plate-4518609/
  3. Tofu: https://www.pexels.com/photo/photo-of-tofu-on-white-plate-against-white-background-4518584/
  4. Noodles: https://www.pexels.com/photo/homemade-fresh-spaghetti-on-black-tray-5907896/
  5. Dumplings: https://www.pexels.com/photo/freshly-made-pierogi-4084933/
  6. Poke Bowl: https://www.pexels.com/photo/hawaiian-dish-in-white-paper-bowls-4828210/
  7. Stir fry: https://www.pexels.com/photo/stir-fried-vegetables-and-chopsticks-on-a-ceramic-plate-5848483/
  8. Cheesecake: https://www.pexels.com/photo/slice-of-cake-with-raspberry-topping-3323686/

Content:
Some written by myself, but a lot of it was written by Lo Sam. 

FINAL SUBMISSION:


FEEDBACK

24/05/2022

  • Have one clear call to action
  • Have a brand
  • Redesign losam website
  • Easy to get content with that idea
  • Maybe redesign brand
  • Start with Prototype
31/05/2022
  • Remove borders
  • Align the content properly as it is currently jagged
  • Add something to the main image as it is currently too empty

REFLECTION

I really enjoyed this project. It provided me a sense of how to design a landing page. I have no idea how I'll be when I need to actually code this, but I am glad to have created a landing page which I will enjoy looking at as it features my passion; soy products. 

At first, I was a bit lost, but thanks to an infinite amount of references, I was able to learn some pretty insightful things about the look of a landing page. This will definitely help me in the future if I ever want to create my own portfolio website to showcase my works. 

Labels:

Popular Posts