Week 12 - Week 15
Ahmad Firas Bin Ahmad Fisal | 0345121
Interactive Design (GCD60904) | Bachelor of Design (Hons) in Creative Media
Final Project: Design, Exploration, and Application
INSTRUCTIONS
FINAL PROJECT: DESIGN, EXPLORATION, AND APPLICATION
We are required 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.
Task Requirements:
- Design a 5-Page responsive website and user-friendly interface. The website
should have a consistent theme and colour scheme related to mental health.
Each page should have relevant content that educates and supports individuals
in understanding mental health topics. Implement responsive design to ensure
the website is accessible and displays properly on different devices. We could
provide links to external resources, hotlines, or helplines that offer
professional assistance for mental health concerns.
Week 1:
Familiarize yourself with the theme of mental health and conduct research on
various aspects.
Develop a sitemap outlining the structure and navigation of the website.
Begin sketching and wireframing the web pages using pen and paper or digital
tools.
Create a mood board that consists of a colour palette and select appropriate
fonts that align with the mental health theme.
Week 2:
Start designing the website using a preferred design software or tool.
Begin coding the website, ensuring that it follows best practices and
standards.
Incorporate relevant content on each page, focusing on providing valuable
information and resources.
Implement interactive elements to engage the website and visitors.
Week 3:
Continue refining the design and layout of the website.
Test the website on different devices and browsers to ensure responsiveness.
Check for any potential accessibility issues and make necessary adjustments.
Week 4:
Finalize the design and content of the website.
Conduct thorough testing to ensure all functionalities are working
correctly.
Submit the completed website
Design Processes:
Choosing our mental health topic
The topic that I decided to go for under the theme of mental health is "Mental
Disorders" I decided to focus more on making a 5-page website that is
providing their services to these mental disorders. Not only that, but a
section that is educational for viewers of the website to learn more about the
other types of treatments available for various diagnoses. I went to ChatGPT
as suggested by our lecturers for us to generate content to put in the website
after researching our preferred topic. The image attached below is part of the ChatGPT responses in generating the content for my final project's website.
 |
| Figure 1.0 - ChatGPT Content Generation |
Wireframing & Proposal
I used Figma to do my wireframing so that I could have an easier process in
seeing the progress of the website seeing that we are running out of time due
to the timing changes to the module's original schedule. The colour palette,
font choice, wireframes, etc. are provided in the Figma link for efficient
viewing.
Personally, I feel like we needed more lessons to compensate for our lack of
understanding of Interactive Design. Due to the unfortunate event, most of my
learnings are from Youtube. In this final project, I had to watch a couple of
multiple-hour-long tutorials on Youtube to see how to actually do a multi-page
and fully functional website. Making use of existing knowledge of typography
and design principles really helped me in my design thinking and decisions.
Coding
Before I go deeper into talking about each coding section, It is worth noting
that all the files being used are arranged accordingly in a specific folder
for the final project. This is to ensure that information is being sourced out
properly during the coding stages.
|
| Figure 1.1 - File Organisation |
A simple logo was made with Adobe Illustrator and a premade font. "Serenity
Therapy Center" Aside from that, after watching tutorial videos available
online, minor JavaScript were also added for function like buttons.
Responsiveness is also considered when creating our codes to deliver a
professional-looking website across platforms of different sizes.
|
| Figure 1.2 - Simple logo turned into the main icon |
HTML:
Page 01: Home / Landing Page
Page 02: About Us
Page 03: Services
Page 04: Learn More
Page 05: Contact Us
CSS (Overall):
Design Outcome for the 5-page website, Final Project: Design, Exploration,
and Application:
The responsiveness of the website is tested by using different devices to
ensure that the cohesiveness and consistency in the design are well shown.
PDFs attached below are what the website for this final project looks like
after I've deployed the files and turned them into a functioning website.
REFLECTIONS
Experience
The experience has been a bumpy rollercoaster. I've struggled to keep up my interest in this task due to the number of public holidays on days that we were supposed to have for Interactive Design. Also, most of the time we are required to self-taught ourselves with the overwhelming topics of coding with the help of Youtubers there. Despite devoting my additional time to those tutorials, I was able to slowly understand coding. I'm glad that I was able to finish this final project at the very end of the day.
Observation
I had observed that Coding is actually a tedious process, but once we are acquainted with them, they are actually quite repetitive. However, for us to reach at that particular level of consciousness with Coding, it would take some time to familiarise ourselves with the terminologies. I hope that my knowledge and interest in coding increases as time passes.
Findings
I've found that HTML, CSS, and JS really do work well with one another. We need to understand them at the very foundational level, which I was having difficulty with, before having the knowledge at the back of our pockets. I'm glad that we were given a taste of what Front-End work would be like in our working world. This is quite huge for us to comprehend seeing that we are ending the general year really soon. This particular final project is quite tough, I was quite demotivated most of the time. However, I am super proud of myself for being able to finish this work diligently.
Comments
Post a Comment