Interactive Design / Final Project: 5 Page Website

29/05/2023 - //2023 / Week 9 - Week 14

Kim Min Ah / 0356145

Interactive Design  / Creative Media / Taylor's Design School

---

PROJECT

Final Project: 5 Page Website

---

NOTES

Week 11

-Don’t place the header on the right

-Few lines can be in the centre

-Three columns maximum

-“Min”-width:

Fixed value

-Hamburger menu

-Bootstrap(considered as a framework)

https://getbootstrap.com/

-Any app has to be installed: native app

-.container-fluid:100%

M-5 : margin 5

---

INSTRUCTIONS

Fig 1.1.1 Interactive Design Module Booklet

---

Final Project: 5 Page Website

Sitemap

Fig 1.1.2 Final project sitemap

To ensure high accessibility for a wide range of users, I decided to create two versions of web pages: a coloured version and a greyscale version.

Wireframes

Fig 1.1.3 Final project wireframes

Mood board

Fig 1.1.4 Final project mood board

Referenced images

Illustration from 

miss-mental.com

https://www.pinterest.com/pin/38562140551547289/

Illustration from Freepik

https://www.pinterest.com/pin/547961479676006869/

Illustration by Livia Fălcaru

https://www.pinterest.com/pin/852798879452050109/

Illustration by Chelsea Waites

https://www.pinterest.com/pin/527695281353980822/

Referenced mental health website

https://yourmentalhealthpal.com/

Progress

Logo

Fig 1.1.5 Final project logo in different colours

To convey the sense of embracing and healing in the logo for my final project, I incorporated a circular shape and curved lines.

Fig 1.1.6 Final project logo 

To create a clean and tidy impression for the typeface logo, I utilized the typeface, regular, Quicksand. Furthermore, I used the colours light pink (#ffcad9) and light green (#8dcc8e). These same colours were applied consistently throughout the entire web pages.

Images

Fig 1.1.7 Final project images

I also created all images for my website.

Coding Progress

Fig 1.1.8 Final project coding progress

The website was created in 1070 x 305, the global web size.

Fig 1.1.9 A screenshot of the final project web page

Users can access greyscale version web pages by clicking the "colours" button located in the top right corner.

Fig 1.2.1 Final project Learn More pages

There's a burnout checklist on Learn More pages, and I created extra pages to show a result in both colour and greyscale.

Fig 1.2.2 Final project page on mobile web

I realized that my website doesn't perform well on a mobile web environment. I recognized the inconvenience of keeping the navigation bar on the left side for mobile users. As a result, I decided to design a separate mobile version of my web page in addition to the existing one.

Fig 1.2.3 Final project page mobile version

The mobile version of the web page was designed in 400 x 305.

Fig 1.2.4 A screenshot of the final project mobile version coding progress

I used "Java script if code" to establish a connection between my mobile version web pages and the prior ones. Thus, when users access the page on their phones, the mobile version is automatically displayed.

Fig 1.2.5 A screenshot of the final project mobile version coding progress

The logo image kept blocking me from clicking the buttons on the navigation bar.

Fig 1.2.6 A screenshot of the final project mobile version coding progress

I realized that the issue was caused by the grayscale filter applied to the logo image. To resolve this problem, I removed the filter code and replaced the image with a black and white version.

Fig 1.2.7 Final project web page on a web environment

Fig 1.2.8 Final project web page on a mobile web environment

---

Submission

https://minah-kim-final-project.netlify.app/

---

FEEDBACK

Week 11 (12/05/2023)
-Don’t hide the navigation bar
-The words on the call to action button have to be more specific

Week 11 (16/05/2023)
-Find an alternative word for "burnout" on the navigation menu.
-Keep the navigation bar in the same form on every page.

---

REFLECTION

Experience
For my final project, I was tasked with designing five functional web pages focused on providing information about mental health. I selected "burnout" as the topic for these pages. Additionally, I was instructed to create a sitemap, wireframes, and a moodboard prior to developing the pages. In total, I coded 24 pages, which encompassed both the coloured and greyscale versions, designed for both the global web size and mobile web size.

Observation
While coding, I noticed that adjusting the alignment and sizes of items on a web page can be quite challenging. Achieving seamless performance across different web environments is not an easy task. Once again, I was reminded that different layouts prove effective in varying web environments.

I felt a bit stressed when I discovered that my web page was not functioning properly on mobile web settings, prompting me to create additional pages specifically for mobile users. However, I found satisfaction in realizing that the mobile version pages actually have better quality compared to the previous ones designed for regular web settings.

Findings
Completing this final project proved to be incredibly beneficial as it provided an opportunity to review all the lessons I had learned over the past 14 weeks. Furthermore, I discovered that I genuinely enjoyed every step of the progress during this project.