________________
29 May 2023 - 16 July 2023, (Week 9 - Week 16)
Christine Tan Yuen Yan, 0344039
Interactive Design GCD 60904 / Bachelor of Design (Hons) in Creative
Media
Final Project
INSTRUCTIONS
MIB
FINAL PROJECT
Project Title: Eating Disorder
Project Duration: 4 Weeks
The aim of this project is to design and develop a comprehensive 5-page
website centred around the topic of mental health. The primary goal is to
offer valuable information, resources, and support to individuals seeking
to understand and enhance their mental well-being. This website creation
project will require showcasing your design and development skills, while
effectively conveying the significance of mental health through a
user-friendly online platform.
Your task will involve crafting a visually appealing website with a
consistent theme and colour scheme that aligns with mental health
concepts. Each page should contain relevant and informative content to
educate and assist individuals in comprehending various mental health
topics. To ensure that the website is accessible on different devices, you
should implement responsive design principles to guarantee a seamless user
experience.
In addition to providing valuable content, you can include links to
external resources, hotlines, or helplines that offer professional
assistance for mental health concerns, catering to the needs of the target
audience effectively.
Task Requirements:
1. Choose a specific mental health topic and identify a problem or need
that the website will address.
2. Conduct thorough research to understand the preferences and
requirements of the target audience.
3. Develop a website concept that addresses the identified problem or need
while meeting the target audience's expectations.
4. Create a site map and wireframes, outlining the layout and
functionality of each page on the website.
5. Utilize HTML, CSS, and any other tools or frameworks of your choice to
develop the website.
6. Publish the completed website on an accessible web server or web
hosting platform.
Task Deliverables:
1. A minimum of five pages, including a home page and at least four
additional pages that address different aspects of the identified problem
or need.
2. A visually cohesive design that resonates with the preferences of the
target audience.
3. An easy-to-navigate website with clear labelling and intuitive menus
for user-friendly interaction.
4. A responsive website that adapts appropriately to various devices and
screen sizes.
5. A website adhering to web design best practices, ensuring accessibility
and usability.
6. Integration of multimedia elements (e.g., images, videos, or audio) to
enhance the overall user experience.
7. Site map and wireframes illustrating the layout and functionality of
each page.
8. Submission of HTML, CSS, and any other necessary code utilized during
website development.
9. Inclusion of any multimedia elements created or sourced for the
website.
10. Sharing the link to the published website through Google Classroom.
By following these guidelines and successfully executing the project, you
will create a valuable resource that promotes mental health awareness and
support within the target audience.
Proposal & Prototype:
I chose to use Miro because it offers a more convenient and efficient
solution for my needs. Miro provides a versatile and user-friendly platform
that allows me to collaborate, brainstorm, and organize my ideas seamlessly.
Its interactive whiteboard feature enables me to visually map out my
thoughts, making it easier to visualize complex concepts and streamline my
creative process. Additionally, Miro's real-time collaboration capabilities
enable effective teamwork, allowing me to work with others in a synchronized
manner, regardless of their location. With its array of tools and
integrations, Miro has proven to be an indispensable resource, simplifying
my workflow and enhancing productivity in various projects and tasks.
Fig 1.0 Miro Board.
I decided to input all my information into this Google Doc to make it
easier for me to utilize and manage. Google Docs provides a convenient and
accessible platform that allows me to store, edit, and organize my data in
one centralized location.
Fig 1.1, Google Doc
Website layout References:
Fig 1.2, Reference #1
Fig 1.3, Reference #2
FireFrame:
This is the initial version of my final website's outcome.
Fig 1.4 Draft
Fig 1.5 Screenshot from the file.
Screenshot from DW
(HOME. HTML. Css. Js)
(HOME. HTML. Css. Js)
Fig 1.6 Html
Fig 1.7 Html
Fig 1.8 Html
Fig 1.9 Css
Fig 1.10 Css
Fig 1.11 Js
Screenshot for "Disorder" page (HTML.CSS.JS)
Fig 1.12, HTML
Fig 1.13, CSS
Fig 1.12, HTML .script
FINAL PROJECT
Fig 2.1 Final Outcome
Home Page
Fig 2.2 Final Outcome _ Home Page
Disorder Page
Fig 2.3 Final Outcome _ Disorder Page
Treatment Page
Fig 2.4 Final Outcome _ Treatment Page
Click here to view
wellness support.com
FEEDBACK
- No Feedback -
REFLECTION
Experience:
Designing a website centred around eating disorders proved to be a
gratifying yet demanding endeavour during my time as a design student. It
provided a unique opportunity to delve into the realm of mental health and
create a platform offering vital information, resources, and support for
individuals aiming to enhance their mental well-being. A particular strength
of this project was the consistent visual design, thoughtfully tailored to
align with the preferences and needs of the target audience. By carefully
selecting a colour scheme associated with mental health, I was able to evoke
feelings of tranquillity and optimism. Furthermore, the incorporation of
multimedia elements like images, videos, and audio played a crucial role in
elevating the overall user experience and enhancing content engagement.
However, I encountered challenges while striking the right balance when
addressing the sensitive topic of loneliness. My aim was to present
empathetic and supportive content without diminishing the experiences of
those facing loneliness. Additionally, maintaining a harmonious blend of
in-depth information and readability posed another hurdle, as I sought to
provide valuable insights while presenting the content in a concise and
easily understandable manner.
Quick Link
Interactive Design _ Exercises
Interactive Design _ Project 1
Interactive Design _ Project 2
Interactive Design _ Final Compilation
Comments
Post a Comment