[Interactive Design] Project 1

by - April 24, 2019

18.04.2019 - .04.2019 (Week 3 - Week 4 )
Zoe Wong Zen Yee (0336770)
Interactive Design
Project 1

Lectures

Lecture 3 & 4: The Web

18.04.2019 - 25.04.2019 (Week 3 - Week 4)
  For this week's lecture, we started of with Mr Shamsul asking us what is web, and who invented it. The difference between the web and internet was also taught to us. Below attached is the lecture slides.



Lecture 5: Web Design and New Media

02.05.2019 (Week 5)
This week, we started to learn about the attributes of HTML language.



Lecture 6: New Perspectives on Creating Web Pages with HTML

 08.05.2019 (Week 6)
This week, we learn about the CSS sheet.



Instructions




Project 1: Landing Page Design (Week 3 - Week 4)

This project is done before we have any lecture regarding HTML and CSS codes were taught. We were to create a landing page of any topic of our liking with a call-to-action. Initially, I wanted to create a landing page for my pet cat. However after much consideration, I changed to working on a cuisine of my hometown instead -- Sang Nyuk Mian.

Before we started, we have to propose our idea to Mr Shamsul first. When asked about my call to action of the site, I said that it is to introduce the food and recommend shops to eat the food. Mr Shamsul also reminded to have a back to top button in the page.

After that, I started by creating a wire frame for the site.
[pic of sketch]

After I'm done with the wire frame, I proceed to start digitizing it in Adobe Illustrator.

Fig 1.0 Screenshot of process done in Adobe Illustrator
Fig 1,1 First attempt of Landing Page
After consulting Mr Shamsul my first attempt of the landing page, he said that the composition is really old and I should try something more modern. He recommend me to search for reference on Pinterest. Apparently, I mistaken landing page to a micro site. Some other changes were also made. I can also keep the retro vintage theme of the site, but it has to be more modern.

Fig 1.3 Screenshot of process in Adobe Illustrator
Fig 1.4 Outcome of the landing page after consultation
However, I feel that the page is too empty, especially the last section. So I decided to put some vector line art onto it. I experimented with a few layouts.

Fig 1.5 Experimenting with line art added (1)

Fig 1.6 Experiment with line art added (2)
I chose the first one as I like how the mountain can represent the Mount Kinabalu of Sabah.

Fig 1.7 Final Outcome

Feedback

Week 3
When my initial topic for the landing page was proposed to Mr Shamsul, he asked me to consider about the call to action of the site, and the target audience.

Week 4
Mr Shamsul commented that the landing page looks too old fashioned. I can change the color scheme as well as the layout to make it look more modern. The layout should also be more simpler as it'll be hard to code when turning it into a real website. Some unnecessary highlights should also be removed. Other that that, I should reduce the amount of contents as to keep it simple.

Week 5
Mr Shamsul commented that I should keep the alignment simple and discard some unneeded spaces. Remember those websites with minimalistic elements are always simple and easy to navigate.


Reflection

Experience

Week 3
I am quite lost when choosing a topic of our liking for the landing page. A lot of consideration should take in place when creating one.

Week 4
I decided to find color palettes online as for the color scheme for my website. It saves a lot of time and energy in deciding the color for the composition.

Observation 

Week 3
I notice that some classmates have really interesting idea. The call to action of the website is really important as it decides whether people will go back and surf the website or not.

Week 4
I observe that the link styles I did in the landing page layout is really old fashion with it being blue and underlined. Most links nowadays they use different colors to differentiate them form the context and they're not underlined. 

Findings

Week 3
After pointed out by Mr Shamsul about my landing page, I realized I've been searching the wrong reference all this time. I feel like there's generation gap between me and technology (sometimes) and I should really observe what type of elements is used in websites nowadays.

Week 4
In a landing page, the text shouldn't be too much as people doesn't like to read too much text on a landing page. A lot of consideration is done in creating a web and this made me appreciate good websites more. 

You May Also Like

0 comments