Interactive Design / Project 2 & Final project

November 24, 2022

Interactive Design / Project 2 & Final project

Week10(11)-Week14

Riko Matsuyama 0351470

Interactive Design / Project 2: Working Landing Page

bachelor of design in creative media

Instructions

Lecture

Week 10-11

We learned how to create a landing page for a website using bootstrap. We placed slides, carousels, cards, buttons, etc.

Week 12

I received feedback about project 2

https://getbootstrap.com/docs/4.6/getting-started/introduction/

Working Landing Page

Microsite

This is the extension from project 1. From a prototype to a working website. In any given project for web development. The requirements task is to develop a microsite that you have proposed in project 1. The website must fully function with a clear call to action.

Navi

Home

Island - Oahu / Lanai / Kauai / Molokai / Hawaii / Maui

Food - Food / Dessert / Drink

Tidbits - History / Culture / Language

Contact

Section

Which Island Do You Want To Visit?

What To Eat In Hawaii?

Tidbits of Hawaii

Color

Background #F2F2F2

Font

Heading, btn, Navi: Comfortaa Regular

Title: Acme Regular

Body text: PT sans Regular

Fig1.1: carousel

Boostrap, carousel

https://getbootstrap.com/docs/4.6/components/carousel/

Fig1.2: html

Fig1.3: html

W3school, button

https://www.w3schools.com/howto/howto_js_scroll_to_top.asp

I added a TOP button to return to the top page by pressing Smooth scrolling is incorporated.

Fig1.4: html, top button

Since there are as many as six islands, they are divided into the top and bottom rows, with the top three and bottom three jumping to the same page.

Fig1.5: island part

Fig1.6: html, card

Fig1.7: pages

Create sub-pages in html

Create links in html

Here are the websites we used

https://www.pexels.com/ja-jp/

https://www.travelhoppers.com/articles/hawaii-six-islands-of-paradise-an-introduction-2/

https://www.gohawaii.com/islands

pages/island.html

Fig1.7: pages/island.html

Fig1.8: pages/island.html

Fig1.9: pages/island.html

Next is the food section. I used Illustrator to create an Instagram-style image.

Fig1.10: food

Fig1.11: food part in Chrome

Fig1,12: html

Here are the websites I used

https://www.pexels.com/ja-jp/

https://www.hawaiimagazine.com/20-hawaii-dishes-you-must-try-when-traveling-to-the-islands/

https://www.aloha-street.com/article/2016/08/135538/

pages/food.html

Fig1.13: pages/food.html

Fig1.14: pages/food.html

Fig1.15: pages/food.html

Fig1.16: pages/food.html

Fig1.17: pages/food.html

Fig1.18: pages/food.html

The last section is a tidbits section. Jump to each of the three pages. I made the Read more button more prominent because the card is significant, and I was careful with the padding.

Here are the websites I used

https://www.pexels.com/ja-jp/

https://www.gohawaii.com/hawaiian-culture/history

https://www.gohawaii.com/hawaiian-culture

https://www.gohawaii.com/hawaiian-culture/hawaiian-language-guide

https://www.aloha-program.com/curriculum/lecture/detail/53