Interactive Design - Final Project: Design, Exploration and Application
29 May 2023 - 24 July 2023 (Week 9 - Extended Week)
Week 13:
Font size in web design
Fonts can be sized in a number of different ways on the web:
Vincent Lee // 0359386
Interactive Design // Bachelor of Design (Hons) in Creative Media // Taylor's
University
Final Project: Design Exploration and Application (5 Page Website)
TIMELINE
Week 10:
INSTRUCTIONS
Final Project: Design Exploration and Application
Feedback
Reflection
Lectures
Week 10:
- Familiarise 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 color palette and select appropriate fonts that align with the mental health theme.
Week 11:
- 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 12:
- 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 13:
- Finalise the design and content of the website.
- Conduct thorough testing to ensure all functionalities are working correctly.
- Submit the completed website.
Instructions
MIB
<iframe
src="https://drive.google.com/file/d/1QC8REytwzPwV8bgIK6fwXMxF1UDrmN36/preview"
width="640" height="480" allow="autoplay"></iframe>
Final Project: Design, Exploration and Application
Project Title: Mental Health Theme Website
Project Duration: 4 Weeks
Objective:
The objective of this project is 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. You will be required to showcase your design and development skills while effectively conveying the importance of mental health through their website.
Project Requirements:
Project Duration: 4 Weeks
Objective:
The objective of this project is 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. You will be required to showcase your design and development skills while effectively conveying the importance of mental health through their website.
Project Requirements:
Design and create a 5-page website with an appealing 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. You can provide links to external resources,
hotlines, or helplines that offer professional assistance for mental health
concerns.
Submission:
At the end of the 4-week period, you are required to submit your completed website project and update your e-portfolio.
Evaluation Criteria:
The final projects will be evaluated based on the following criteria:
At the end of the 4-week period, you are required to submit your completed website project and update your e-portfolio.
Evaluation Criteria:
The final projects will be evaluated based on the following criteria:
- 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.
Topic Research and Executions
Figure 1.1 - Topic & Design Research and Execution, Extended Week (23 July 2023)
Final Project Submission: 5 Page Website
Figure - Final Project: 5 Page Website (Desktop Version)_PDF, Extended
Week (23 July 2023)
Feedback
-
Reflection
-
Further Reading
![]() |
Fig - Font size guidelines for responsive websites
|
Website:
Editor X
Fonts can be sized in a number of different ways on the web:
- Pixel (px)
- Point (pt)
- em: The font size is relative to the parent container’s font size.
- Root em (rem): The font size inherits from the root of the styling.
- Percentage (%)
- Viewport width or height (vw or vh)
- Centimeter (cm)
- Millimetre (mm)
- Inch (in)
![]() |
Fig - Punctuation in HTML format, Extended Week (20 July 2023) |
Website:
HTML by Toptal Designer
Quick Links