Interactive Design - Final Project: Design, Exploration & Application
22.05.2023 - 04.06.2023 / Week 8 - Week 14
Lim Rui Ying / 0358986
Interactive
Design / Bachelor of Design (Hons) in Creative Media
Final Project:
Design, Exploration & Application
LIST
Final Project:
Design, Exploration & Application
INSTRUCTIONS
FINAL PROJECT: Design, Exploration & Application
In this task, we are to create a 5-page website focused on
the theme of mental health. The website should provide valuable
information, resources, and support for individuals seeking to understand and
improve their mental well-being.
Requirements:
- Appealing and user-friendly interface. The website should have a
- Consistent theme and colour scheme
- Implement responsive design
- May provide links to external resources, hotlines, or helplines
Website Planning
The mental health condition I chose for the project is
Bipolar Disorder. I conducted research on the chosen topic and
developed the sitemap and content. Then, I created the wireframe for the
website and decided on the fonts and colour scheme.
Fig. 1.1 Website planning #1
Wireframes:
Miro link
Following feedback from Mr Shamsul, I made revisions to the wireframes, adding
the content, details, and colours. Besides, I made some adjustments to the
content.
Fig. 1.2 Website planning #2
Fig. 1.3 Website content
I began coding the landing page using Visual Studio Code. Below is the first
attempt at coding the landing page. However, I felt dissatisfied with the
graphics and noticed that the colours did not create the desired outcome.
|
| Fig. 1.4 Attempt #1 |
I reviewed and improvised the colour scheme and wireframes. I made several attempts on the colour scheme.
 |
| Fig. 1.5 Colour scheme attempts |
I amended the
layouts a little and change the colour scheme to a combination of dark green,
beige and salmon pink colours.
Fig. 1.6 Website planning #3
Coding Process
After completing the wireframes and finalising the colour scheme and graphics,
I proceeded to the coding phase. I mainly utilised flex display to create the website.
Navigation bar
 |
| Fig. 2.1 Navigation bar (HTML) |
I added an underline hover effect to the navigation links, and I also learned how to use active links to display the underline when users are on the corresponding page.
 |
| Fig. 2.2 Underline and active link (HTML) |
In addition to that, I transformed the navigation links into a toggle button using media queries, specifically activating the change when the screen width is 880 px or smaller. The intention was to create a dropdown menu that opens when the toggle button is clicked. However, I encountered difficulties and was unable to make the dropdown menu functional.
 |
| Fig. 2.3 Toggle button and dropdown menu (CSS Media Queries) |
Form
On the Services & Support page, I implemented a consultation booking form using tags including input, select and text area.
 |
| Fig. 2.4 Form (HTML) |
I included some quick links, contact and location in the footer and utilised flex display to make it responsive.
 |
| Fig. 2.6 Footer (HTML) |
 |
| Fig. 2.7 Footer |
Final Submission
Netlify link: https://bipolarinsights.netlify.app/Fig. 3.1 Final Project: 5-page Mental Health Website, Extended Week (23/7/2023)
FEEDBACK
WEEK 11
Fig. 1.1 Website planning #1 (Wireframes pg 15)
Mr Shamsul commented that the layouts of my wireframes were unclear and not
specified enough.
WEEK 12
Fig. 1.2 Website planning #2
The wireframes and colour scheme received approval. Mr Shamsul suggested
replicating the hero section from the landing page on other pages too.
Additionally, he recommended rearranging the order of the pages on the
navigation bar, moving "About Us" to the third position.
REFLECTION
Creating a 5-page website was quite challenging, particularly due to the complexities in content and layout design. Ensuring website responsiveness across different devices added another difficulty. I spent a lot of time trying to make the toggle button and dropdown menu work with JavaScript, which I hadn't learned before. Despite my efforts, I could not figure it out.
However, through this project, I gained valuable experience and knowledge. I became more familiar with using the flex display and effectively framing each element in the website, leading to a more efficient coding process. Besides that, I also gained a better understanding of bipolar disorder, its causes, symptoms, diagnosis and treatment. Throughout this project, I realized the importance of thorough website planning before commencing the actual development. Proper planning helps to anticipate potential challenges during the execution process and ensures a smoother development experience.
Comments
Post a Comment