Interactive Design / Final Project
22.5.2023 - 22.7.2023 (Week 8- Week 14)
Loke Yan Ling / 0344602
Interactive Design / Bachelor of Design in Creative Media
Final Project - 5 Page Websites
Instructions
Final Project - 5 Page Websites
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 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.
Fig 1.1 Research on Burnout
Moodboard
I first came across this topic, Burnout from an assignment in the informative design module of semester 1.5. Many people have not heard of this topic, even though they may be experiencing it, so I think it is necessary to raise the profile of this topic. So my website aim to be informative and knowledge, so that people understand the symptoms, understand its impact, and most importantly let people know that it is recoverable and preventable. Therefore, I have used the research that have been done in previous semester.
Fig 1.2 Moodboard
"Green – Quiet and restful, green is a soothing color that can invite harmony and diffuse anxiety. " - (Color Your World to Relieve Stress, n.d.).
The colour scheme is decided after research to ensure that it serves to complement the theme of the page. At first, I want to use sans serif font as heading or titles and serif font as paragraph or information that shown in the moodboards. However, Mr Shamsul suggest that use san serif on whole page would be better to increase the readability. For visual elements which same as reference, I wish my websites have interact with graphical elements or icons and colour interchange.
Citation:
Color Your World to Relieve Stress. (n.d.). Moffitt Cancer Center. https://endeavor.moffitt.org/archive/color-your-world-to-relieve-stress
Fig 1.3 Finalized Sitemap
In the sitemap, I plan the information that should be included on each page, so that it will be easier for me to plan the wireframe later. The minor changes has been made is adding the sign up page with the contact page, because the wireframe, moodboard and sitemap are shown together to Mr Shamsul, and he said that if there is CTA button for sign up then I should create a page for it. So, the innovative is applied on combining the contact page and sign up page together.
Fig 1.4 Wireframe
Prototype
Fig 1.5 Different layout in stages of burnout
When planning the layout in stages of burnout, there is too much word and may decrease the user attentions. After several trying, I think maybe accordion would made the layout much better. The information only shown when the user click the heading.
Fig 1.6 Prototype
Prototype Link:
Google Font - Roboto:
In prototype, I used Verdana as my font but the font is not researchable in google font so I do another research to find a suitable sans serif font again. Then, I find Roboto google font. The challenging part in my prototype is the curvature shape. Although there is a solution, which is make that part as images and become background image, but it is still hard to achieve. I already assume that my webpage will not exactly same as my prototype, a sad experience from Project 2.
First Webpage - Landing Page
Fig 2.1 Landing Page
Fig 2.2 Hover effect
I also have added hover effect on the last section, so that users would know that it is clickable that help them navigate throughout the website. The rest is just a matter of trying to recover the design in the prototype as much as possible.
Regarding the navigation bar, Mr Shamsul made a suggestion that perhaps I could display the active section in the navigation bar to show the page the user is on as they navigate through the current page.
Fig 2.3 Landing Page html
Fig 2.4 Landing Page CSS
Second Webpage - Contact Page
In the contact page, I don't want the page to be scrollable, just a single page execution. However, the contact methods I can think of are simple - facebook, instagram and email. This webpage is my favourite.
Fig 3.1 Background
I originally wanted to use one colour for the background, but this was too monochromatic, so I thought of using the same elements as the landing page, which would be consistent and visually rich. The navigation and footer just using the same code from the landing page.
Fig 3.2 Contact Page html
Fig 3.3 Contact Page css
Fig 3.4 Previous File Arrangement
Fig 3.5 Current File Arrangement
Fig 3.6 webpage link
While in the progress of creating the webpage, Mr Shamsul noticed that my file arrangement will causing me wasting a lot of time to connecting the webpage together. Instead of filing them one by one, I should filing them all together in one file. I make this mistake because I thought the filing only can be name in ‘index.html’, so I have to arrange them one by one. Using the current file arrangement will show the web link to display that name.
Third Webpage - Symptoms Page
Fig 4.1 Dropdowns
Fig 4.2 Hover effect - pills
I have take note what have said by Mr Shamsul previously, so I decided to adding dropdowns in navigation bars to indicate users which page they are on because pills have been added in the hover effect in navigation bar. The logo act as navigation button to landing page.
Fig 4.3 Nested Nav
Fig 4.4 Nested Nav from Bootstrap
At first I was going to use nested nav but that didn't seem to work out so well. Not sure what's wrong but he definitely doesn't have a function like tutorial. the feedback from the teacher is that the page is too wordy, maybe it would be better to include some images properly.
Fig 4.5 Cards
I then decided to change it to a card display, which helps to clearly organise the information into four sections, thus making it easier for users with low reading intentions to read the information. Colors has been added to the cards and headings.
Fig 4.6 Final Form.
Fig 4.7 @media only screen and (max-width: 575.98px)
To make sure it is responsive to multiple devices, @media is added in 575.98px, 768px, 991px and 1199.98px.
Fig 4.8 Symptoms Page html
Fig 4.9 Symptoms Page css
Forth Webpage - Consequences Page
Fig 5.1 consequences page
In consequences page, that is quite less information to put in. Using the same way, I categorize the consequences into blocks so that users can obviously see there have 5 physical health issue and 5 mental health issue in consequences.
Fig 5.2 section with CTA button
I then went on to think that this page has given users an idea of what burnout can do to them, and that if they notice symptoms of burnout in themselves or those around them, they will seek ways to recover and prevent it. So, I added a section with a CTA button that leads to recover and prevention page. Although there is a scroll to top button, but this would be more helpful to the users.
Fig 5.3 Consequences page html
Fig 5.4 Consequences page css
Fifth Webpage - Recover and Prevention Page
Fig 6.1 Previous recover and prevention page
Same as the symptoms page, I facing the same problem again and this page has much more information to put. The information can be divided into 3 parts, recover, prevention, and tips. I dislike page that have to be scroll to very bottom to read finish all the information, so the solution I found is pagination. I replace the numbers by the words in pagination and place it before and after the information to help the users easily navigate.
Fig 6.2 Pagination with hover
Add appropriate pictures to each of the information, arranged in left and right with display: "flex", so they don't look boring. Due to pagination, in recover and prevention page consists of extra 3 page. Thus, the page totals seven pages.
Fig 6.3 Left and right arrangement
Fig 6.4 Recover Page html
Fig 6.5 Recover Page css
Fig 6.6 Prevention Page html
Fig 6.7 Prevention Page css
Fig 6.8 Tips Page html
Fig 6.9 Tips Page html
Final Project Submission Link:
Reflection of this module:
It was a fulfilling experience in this module. Before learn to build a webpage, our assignments is aimed to having a basic concept of how a good websites looks like, in different category of websites need differents layout to fulfill their needs.
Implementing the knowledge learn in previous assignment into this final project is quite crucial. You have to make sure you haven't missing any parts in previous class.
The challenge I always have been faced is the responsiveness, that should adapts seamlessly to different screen sizes, providing an optimal user experience across various devices. However, implementing media queries and fluid layouts allowed the page to adjust its elements dynamically sometimes does not solve the problem, the problem is on the html itself..
Incorporating HTML and CSS to create this landing page taught me valuable lessons about the importance of user-centric design and accessibility. As I refined the page's layout and styling, I gained an understanding of how small design choices can significantly impact user engagement and readability. Overall, this project provided an enriching learning experience, enhancing my skills in front-end web development and inspiring me to continue exploring the world of web design.
Comments
Post a Comment