Interactive Design - Final Project: Design, Exploration and Application

29 May 2023 - 24 July 2023 (Week 9 - Extended Week) 
Vincent Lee // 0359386 
Interactive Design // Bachelor of Design (Hons) in Creative Media // Taylor's University 
Final Project: Design Exploration and Application (5 Page Website)

INSTRUCTIONS

Final Project: Design Exploration and Application

Feedback
Reflection


Lectures

TIMELINE

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:
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:
  • 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

Font size in web design
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)



Quick Links

Project 1: Prototype Design
Project 2: Working Web Page

Popular posts from this blog

Typography - Task 1: Exercise 1 & 2