INTERACTIVE DESIGN - PROJECT 1
18.04.19 - 02.05.19 (Week 3 - Week 5)
Helen Angelia (0336203)
Interactive Design
Project 1 - Landing Page
LECTURES
Lecture 3
18.04.19 (Week 3)
For this week's class, we were given a lecture about the web standards, how the web works, the structure of the web pages and how to use them.
Lecture 4
25.04.19 (Week 4)
For today's class, we learned how to make a website page from Text Edit (an application from Mac, and Notepad for Windows).
Fig 1.1
Title
Process in Text Edit and Browser
Fig 1.2
Paragraphs
Process in Text Edit and Browser
Fig 1.3
Nested Lists
Process in Text Edit and Browser
Fig 1.4
Links Placement
Process in Text Edit and Browser
Fig 1.5
Image Placement
Process in Text Edit and Browser
Lecture 5
02.05.19 (Week 5)
For this week's lecture, we learned about ID attribute and Class Attribute, also block level and inline element. We were only given a quick lecture about CSS at the end of the class, and will continue the lecture next week.
To learn about what we had just taught, the lecturers gave us an exercise of making our own website page with the new attributes, which I called this "Navigation Exercise".
Fig 1.6
Navigation Exercise
INSTRUCTIONS
Module Infomation Booklet (MIB)
PROJECT
PROGRESS
18.04.19 (Week 3)
I came up with an idea of cooking based on the college/university students life, where we're usually too busy to do other things; like eating and will always work on assignments or studying without break. If most students keep this behaviour up, they would get sick. Instead of ordering junk foods/unhealthy foods, students should start a healthy way of life where they could eat proper foods and not making their parents worried. Plus, cooking also could help them save up some money.
Here is my first attempt of designing the landing page:
Fig 1.7
First Attempt of Landing Page
25.04.19 (Week 4)
Feedback: Mr. Shamsul said my landing page was too cramped and messy. I should apply the margins and gridlines, and the call to action was also unclear.
02.05.19 (Week 5)
After having many feedbacks and directions of how to make a good landing page, I started to make a new and more organised one.
Here is my second attempt:
Feedbacks:
- The title and header were already okay, but the lines besides "What's New" was unnecessary, so I needed to delete that.
- The lines of the image should be reduced as well to only 1 line.
- The "Menu" call to action shape should be the same as the search engine on the page before.
- On the "Menu" page, the types are also not legible because of the images, and making outline borders of the fonts were not allowed.
- The recipe positions should all use left alignment.
- The lines of the "Subscribe" weren't necessary.
- I should do it on a template of 1280 px x 800 px paper size.
Here is my final attempt:
Fig 1.8
Title and Header Page
"Kitchen Hostel"
Fig 1.9
Body Page
"What's New"
Fig 2.0
Body Page
"Menu: Breakfast, Lunch, Dinner, Dessert, and Beverages"
Fig 2.1
Body Page
"Recipe"
Fig 2.2
Body Page
"Recipe 2"
Fig 2.3
Footer Page
"Subscribe"
Fig 2.4
Footer Page
"Contacts"
"CALL TO ACTION"
Fig 2.5
Call to Action
"What's New"
For "What's New" call to action, I put a coloured box on top of the image to make it easier to read and for people to notice that the image could be clicked and will take them straight to the recipe page. I also applied a description for the latest menu, so people would be aware of what is the dish made of, where does it come from, etc.
The arrows shows that there is more of the latest menus and could tempt people to look for more by clicking them. Or they could just wait for the image to slide into another image without clicking.
Fig 2.6
Call to Action
"Menu"
Different from other call to action where people just need to click the search engine and type, I made the menu with provided choices. By clicking the triangle arrow, there will be several menus popped up. This is for people could know that there are variations of culinary inside the website.
They could also click the "Breakfast", "Lunch", "Dinner", "Dessert, and "Beverages" for convenient ways in deciding which dishes they wanted to cook and in what time.
Fig 2.7
Call to Action
"Recipe"
Fig 2.8
Call to Action
"Recipe (2)"
For the recipes, there are few recipes stated on the website with the call to action "View More" and the You Tube Logo. The users could choose how they wanted to see the recipes, by reading, or by watching, or both.
Fig 2.9
Call to Action
"Subscribe"
Just by clicking the two boxes to enter the users' username and email address, people could just type how they want. And after they're done, the final step is to press the "submit" button. The call to action of "Subscribe" and "recipe" are quite similar. When they clicked the button, the opacity of the color will change that shows the site is loading or they had clicked it before.
FURTHER READINGS
18.04.19 (Week 3) - 02.05.19 (Week 5)
Since the 1st project is to make a design of a website, I tried to search references in Pinterest and have self-observation to what I can apply to my website design.
Comments
Post a Comment