Interactive Design / Project 1: Prototype Design

week3 - week

Riko Matsuyama 0351470

Bachelor of Design in creative media

---

Instruction

---

Project 1

Landing Page Design

A landing page is a distinct page on your website that's built for one single conversion objective. A landing page should be designed, written, and developed with one business goal in mind.

The topic: Travel (Hawaii)

Purpose of the website: 

Introduction to the Attractions of Hawaii

Helping tourists plan

Navigation bar buttons: Home, island, Information, contacts

Color theme: From Adobe Color

Font used: Raleway, Caveat

Fig1.1-2: Google fonts

Section

Which island do you want to visit? >Kaua'I / O'ahu / Lana'I / Moloka'I / Maui / Hawai'I　

What to do in Hawaii? > Shopping / Entertainment / Nature / Sightseeing / Lesure

What to Eat in Hawaii? > Food / Drink / Sweets > Popular things

About Hawaii　> Culture / history / Language

Fig1.3-4: used color

In week 3 and week 4 classes, we created wireframes (sketches) using miro. After that, choose one design you like and build a landing page.

⚫︎Landing Page Design

A landing page is a specific page on your website that's built for one single conversion objective. A landing page should be designed, written, and developed with one business goal in mind.

Students are required to create a static landing page on a website based on the topic of their choice. The landing page should be able to communicate to the audience about the site's goal.

Fig1.5: miro wireframe

Miro wireframe: link 

In the week 5, I created the landing page design based on the sketch created by miro. Then, an explanation will be put on the slide.

This is my first layout of the landing page.

Fig1.6: first design of the layout

After the week 9 class, I received feedback from the teacher. Change the font because this is not clear. You need to put more white space. You can refer to this site. (https://www.worldwildlife.org/) 

The landing page was re-designed based on feedback. Changed the font to these.

Fig1.7-8: used fonts

Fig1.9: used color

Acme is used for titles and headings, and Raleway is for body text. 

Fig1.10: top page

Above is the white space before the change and below is the white space after the change. The top one had too much white space, so the design was changed.

Fig1.11: process

Fig1.12; process 2

Landing page slide

This is my final layout of the landing page

Fig1.13: Final design of the landing page

---

Feedback

(Landing page) Reduce a little white space on the left side of the top page as there is a lot of white space. The font used for the heading is not clear, use a different one.

(Final exercise) The layout is okay, but Adding a little more padding to the body text would be better.