Interactive Design - Final Project / Design, Exploration & Application

-

22/05/2023 - 03/07/2023 (Week 8 - Week 14)

Jason Antony (0356335)

Bachelor of Design (Hons) in Creative Media (UX/UI)

Interactive Design 

Final Project / Design, Exploration, Application 

FINAL PROJECT 

Project Title: Mental Health Theme Website

Project Duration: 4 Weeks

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.

Design and create a 5-page website with an appealing and user-friendly interface. The website should have a consistent theme and color 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.

Task Requirements:

Choose a topic under the Theme of Mental Health, and identify a problem or need that can be addressed through a website. 

Conduct research to understand the needs and preferences of the target audience. 

Develop a concept of the website that addresses the problem or need and meets the needs of the target audience. 

Create a site map and wireframes of the website, outlining the layout and functionality of each page. 

Develop the website using HTML, CSS, and any other tools or frameworks of choice.

Publish the website on a free web server or web hosting platform. 

Task Deliverables:

Minimum five pages

Home page and at least four additional pages that address different aspects of the problem or need. 

Website should have a clear and consistent visual design that reflects the needs and preferences of the target audience. 

Website should be easy to navigate and use, with clear labeling and intuitive menus. 

Website should be responsive, meaning it should display properly on different devices and screen sizes. 

Website should adhere to web design best practices, including accessibility and usability. 

Website should include appropriate multimedia elements (e.g., images, videos, or audio) to enhance the user experience. 

Site map & Wireframes that outline the layout and functionality of each page of the website.

HTML, CSS, and any other code required to develop the website.

Any multimedia elements that we have created or sourced for the website.

Link to the published website and submit it in Google Classroom. 


Proposal


Google slides proposal

Wireframe and Figma design


Coding Process - HTML & CSS, JS

In this project, I have utilized the latest version of Bootstrap, a highly regarded front-end framework, to ensure a robust and efficient development process. I have taken great care to organize the codebase meticulously and provide comprehensive comments throughout. These comments serve as invaluable guides for backend developers, allowing them to easily understand the purpose and functionality of each code section. By implementing this organized and well-documented approach, I aim to foster seamless collaboration within the development team.

In this project, I used Bootstrap framework. I used a lot of bootstrap and CSS classes to ensure responsive design across all devices. For example, I used classes like px-lg-5 for padding on larger viewports and px-md-4 for medium viewports. I also used a lot of flex classes for columns and rows. for positioning, I used a lot of different position styles in CSS. I used absolute, fixed, and z-axis control. For units, I used rem instead of px and pt because when designing responsive websites, changing relativity is better than manual adjustments.

Pictures documentation

Page 1

Page 2


Page 3

Page 4

Page 5

CSS

Final

Click Here To View the Link For the Final 5-Paged Mental Health Website


FEEDBACK

White space is my friend in designing websites


REFLECTIONS 

Experience

As a design student, building the website has been both difficult and gratifying. It gave me the chance to investigate the relationship between design and mental health, and I was able to create a website that offers helpful advice, tools, and resources to anyone trying to understand and take better care of their mental health. The project's consistent visual design, which took the target audience's demands and preferences into account, was one of its strongest points. I took great care to choose a color palette that was appropriate for mental wellness and inspired peace and optimism. Coding was challenging and time-consuming. In all honesty, I don't really like it.

Observations

I learned the value of achieving a balance between aesthetics and utility. I had to make sure the website properly communicated the significance of mental health while having an appealing and user-friendly experience. Developing a visually appealing and interesting experience requires careful consideration of the layout, typography, color scheme, and multimedia components. I was able to develop my abilities as a UX designer thanks to this assignment. It gave me the chance to explore user research, information architecture, and content development while taking into account the particular difficulties of designing for mental health. I learned a lot about building user-friendly interfaces and responsive websites, which helped me build websites that work well for a variety of people and devices.

Findings

I learned the value of responsive design because the website has to work properly on a variety of screens and devices. Implementing media queries and taking into account user experience on PCs, tablets, and mobile devices were required for this. To make sure that the website is inclusive and simple to use for all users, it was essential to follow best practices for web design, including accessibility and usability.

Comments

Post a Comment

Popular posts from this blog

Final Eportfolio - Games Development

-
Image
 Exercise Week 1 Adam's Nightmare  The concept of this game is similar to Limbo, by using silhouettes, and dreamlike design elements. The game is designed so that the users interpret their own stories. This creates a mystery that can be a profound experience for gamers. However, the gameplay could be drastically improved. For instance, the game basically revolves around jumping over obstacles and pushing or dragging different elements to progress within the "nightmare". However, the physics of the jumping is not responsive enough for the obstacle courses within the levels. the dragging and pushing are also designed in a way that causes the game to feel unrealistic. for instance, when the user tries to pull a box, the character seems to have the "force", so it could pull objects without actually touching them. The difficulty of the game is also a problem. Usually, difficulty levels scale within the game in a way where easier levels are
Read more

EXPERIENTIAL DESIGN - TASK 3 : CREATIVE EXPERIENCE DESIGN PROJECT PROTOTYPE

-
Image
EXPERIENTIAL DESIGN - TASK 3 : CREATIVE EXPERIENCE DESIGN PROJECT PROTOTYPE Jason Antony / 0356335 / Bachelor of Design in Creative Media Experiential Design Task 3 : Creative Experience Design Project Prototype November 5, 2023 TASK Instructions The prototype will enable the students to discover certain limitations that they might not have learnt about before. They’ll have to creatively think about how to overcome the limitations to materialize their proposed ideas. The objective of this task is for the students to test out the key functionality of their project. The output may not necessarily be a finished visually designed project. The students will be gauged on their prototype functionality and their ability to creatively think of alternatives to achieve the desired outcome.  Progression I started the project by looking at some 3D models for the cells on sketchfab, but then I found out there is a sketchfab plugin on unity. I then exported the 3d model into the AR Scene.  Once I exp
Read more

EXPERIENTIAL DESIGN - Final Task

-
Image
EXPERIENTIAL DESIGN - Final Task Jason Antony / 0356335 / Bachelor of Design in Creative Media Experiential Design Task 4: Creative Experience Design Project December 15, 2023 Coming from the prototype I've improved several parts of the app. **1. AR Scene:**    - In the AR scene, I experienced the heart of our educational AR app. Here, I harnessed the incredible capabilities of Unity's AR Foundation to bring cell biology to life. By simply tapping on the screen of my mobile device, I was able to place a 3D model of a cell into my real-world environment. It was awe-inspiring to see the cell model seamlessly blend with my surroundings. I used Sketchfab to import the 3d model and create the labels. Then I made the object able to rotate, zoom, and move using a plugin called Lean Touch.  **2. Notebook Scene:**    - The Notebook scene was like opening a digital textbook on my mobile device. It was designed to be viewed in portrait mode, offering a comfortable reading experience. The
Read more