Interactive Design Final Project: Design, Exploration and Application
29/5/2023 - 23/7/2023
Edwin Choo Quan Rong / 0348305 / Bachelor of Design
(Hons) In Creative Media
GCD 60904 / Interactive Design
Final
Project / Design, Exploration and Application (5-Page Responsive Website)
INSTRUCTIONS
Final Project : Design, Exploration and Application
Project Description
The theme of this website is about mental health awareness and we were tasked
with creating a 5-page fully responsive website using HTML & CSS in our
desired coding software. The website should provide content such as valuable
information, resources and support for individuals that are seeking to
understand and improve their mental well-being. I proceeded with my topic
about social anxiety disorder after having it approved by the lecturers.
Coding
The code was done in Visual Studio Code as that was the software I started
with and had the most experience with up till this point. In order for all 5
pages to be part of the website, I compiled all of their respective HTML and
CSS files all under one file.
Page Explanation
1. Landing Page / Home Page
This page consists of the introductory message to educate the viewer about
Social Anxiety Disorder (SAD) with multiple call-to-action buttons to direct
the users towards different sections of the website. The call-to-action
buttons and navigation bar have hover effects as well as a hamburger menu for
smaller devices. These hover effects were duplicated throughout the page for
similar buttons.
Fig 1.1 - 1.3 - Hover Effect on Buttons
Fig 1.4 - Navigation Bar Hover Effect + Search System
Fig 1.5 & 1.6 - Hamburger Menu Hover effect
2. Symptoms (2nd Page)
This page aims to bring awareness to the symptoms of Social Anxiety Disorder
through the use of information cards with hover effects. The 6 card layout
with 2 rows of 3 cards was made possible using grid-template-columns effect
with the code being ".grid {...grid-template-columns: repeat(3, 1fr);....}
Fig 2.1 - Information Card Hover Effect - Symptoms Page
3. Treatment (3rd Page)
This page provides various approaches in alleviating and treating a person
with Social Anxiety Disorder. The card effect was utilized here to maintain
a consistent layout design.
Fig 3.1 - Information Card Hover Effect - Treatment Page
4. Support (4th Page)
This page consists of 6 websites related to and able to provide professional
support for individuals with Social Anxiety Disorder. The button has hover
effect which brings the user to the specific mental health websites in a new
tab.
Fig 4.1 - Hover Effect on Button + Linking to existing website
5. Contact (5th Page)
This page includes the means for users or individuals with social anxiety
disorders to contact for help through entering their details in a contact
form. The contact form has a required filling effect as well as being able
to type on the form.
Fig 5.1 - Contact Card Text Requirement Effect + Typeable Effect
Final Submission
Project was uploaded on Netlify: https://edwinchooquanrong0348305finalproject.netlify.app/index.html
REFLECTIONS
This experience has been arduous and difficult while managing the code for 5 responsive HTML & CSS pages. It took me a lot of time to complete the whole process as I was not familiar with the coding languages which took me countless hours of learning. There are many moments where the code does not work properly due to an overlapping in the CSS elements or not correlating to a class type correctly, these would take me hours to fix as I had to go through the code thoroughly to analyze and find the problem and provide a solution. One website that truly helped me was W3Schools which gave me the freedom to edit and test their sample code which improved my understanding.
Overall, this module has been a long learning journey for this module. Coding is truly like learning a language, with its own grammars, verbs and adjectives in terms of HTML, CSS and other types of coding languages such as Javascript. It is difficult to learn about coding despite having information from the lectures and tutorials as there is so many new things to learn and experiment that it took forever. What I did to overcome this is to just experiment with the code and figure out what makes it work, as the learning through identifying the mistakes and correcting them helps in understanding of the code structure. I am glad that I was able to complete 5 responsive pages for this website as it seemed almost impossible as I had zero coding knowledge.
Comments
Post a Comment