Interactive Design-Final Project
INSTRUCTIONS
Final Project-5 pages website
To create a 5 pages website on the topic--mental health.
- Overall design and aesthetics of the website.
- Clarity and organization of content related to mental health.
- Functionality and usability of interactive elements.
- Responsiveness and compatibility across different devices.
|
| Fig 1 Detail of the project |
Topic & Content:
I choose the topic of depression. I asked Chatgpt to write the content for me. I have ultimately chosen the topics About Depression, Signs and Symptoms, Diagnosis and Treatment, Coping Strategies and Support and Prevention and well-being as my five website pages. I believe these five are the most important ones.
 |
| Fig 2.1 Website content |
Wireframe:
I have also referred to several depression websites to check the style, the colour used, the layout and the content is written.
 |
| Fig 3.1 References |
I decided to use gentle green as my colour scheme. Soft greens can represent growth, renewal, and harmony. Light shades of green can provide a refreshing and relaxing ambiance.
 |
| Fig 3.2 Colour scheme |
I used Adobe XD to create my wireframes. After creating a wireframe, I felt that the overall design was satisfactory, so I decided to use this design and have it reviewed by the lecturer first.
This is a website that wants to provide information to readers, including patients and researchers, so is more suitable to design in text form. I avoided using excessive patterns and different formats, opting for a clean layout that allows readers to easily understand and avoids confusion.
 |
| Fig 3.3 Wireframe |
The lecturer provided feedback on my design, and I made direct changes in the code based on their guidance.
 |
| Fig 3.4 Sir's feedback |
Coding process:
I set the container width at 70% of the screen. The text font for the title (h1, h2, h3, h4) is Crimson text, serif. The text font for the paragraph, links and lists is Poppins, sans-serif.
In the HTML code, I simplify the navbar text and make a cta button for the phone number according to sir's feedback on the wireframe earlier.
 |
| Fig 4.1 Navbar |
 |
| Fig 4.2 Boxes |
 |
| Fig 4.3 Footer |
The CSS code of the navbar. I have also added some interactive features to the navbar, such as underlines appearing when the mouse hovers over it (the red box).
 |
| Fig 4.4 Navbar Css |
 |
| Fig 4.5 Navbar Gif |
I added different sizes of the responsive design to ensure that everything is responsive in every size when smaller or bigger the screen.
 |
| Fig 4.6 Responsive adjustment |
When the width of the screen is smaller than 370px, the cta button will become 2 rows, so I make the font size smaller when the screen is 375px.
 |
| Fig 4.7 Cta button adjustment |
When the screen is smaller than 1200px, the navbar will display a hamburger icon.
 |
| Fig 4.8 Hamburger icon |
When the screen is smaller than 800px, the content box will display in a column.
 |
| Fig 4.9 Layout adjustment |
When the screen is smaller than 490px, the footer will display in title only.
 |
| Fig 4.10 Footer adjustment |
Final Submission:
Page 1: https://korqianqian-finalproject1.netlify.app
Page 2: https://korqianqian-finalproject2.netlify.app
Page 3: https://korqianqian-finalproject3.netlify.app
Page 4: https://korqianqian-finalproject4.netlify.app
Page 5: https://korqianqian-finalproject5.netlify.app
Html and Css code file: https://drive.google.com/drive/folders/1-PO3t9K3iNmqVeAlab33N3xpuhjVMLKi?usp=sharing
Compilation links: ID-Final ProjectGoogle Slides
 |
| Fig 5.1 Final page 1 |
 |
| Fig 5.2 Final page 2 |
 |
| Fig 5.3 Final page 3 |
 |
| Fig 5.4 Final page 4 |
 |
| Fig 5.5 Final page 5 |
Comments
Post a Comment