Interactive Design - Final Project: Design, Exploration and Application
29.5.2023 - 21.7.2023 (Week 9 - Week 16)
Tan Yi-Tyng (0353327)
Bachelor of Design (Hons) in Creative Media
Interactive Design
Final Project: Design,
Exploration and Application
MODULE INFORMATION
<iframe
src="https://drive.google.com/file/d/1kLhiKZEQ-jplM2Vq45nSdwIUaH8Jyveo/preview"
width="640" height="480" allow="autoplay"></iframe>
<iframe
src="https://drive.google.com/file/d/1kLhiKZEQ-jplM2Vq45nSdwIUaH8Jyveo/preview"
width="640" height="480" allow="autoplay"></iframe>
FINAL PROJECT
Mental Health Theme Website
For this project, we are required to create a 5-pages 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. We will be required to
showcase our design and development skills while effectively conveying
the importance of mental health through our website.
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.
1. Research and choose a topic under mental health
To begin, I embarked on a comprehensive research journey, delving
deep into the intricacies of mental health, aiming to identify a
specific topic that would serve as the focal point for my final
project website. Given the vastness of the subject, it was
essential to narrow down my focus to a singular theme that could
provide ample content for a 5-page website.
After careful consideration, I resolutely chose Anxiety as the central theme for my project. This decision stemmed from both my personal interest in the subject and my own struggles with anxiety in daily life, making it a deeply relatable and motivating choice.
After careful consideration, I resolutely chose Anxiety as the central theme for my project. This decision stemmed from both my personal interest in the subject and my own struggles with anxiety in daily life, making it a deeply relatable and motivating choice.
By selecting Anxiety as the core topic, I felt driven to invest
more time and effort into researching and understanding its
various aspects. My aspiration is to create an informative and
valuable website that not only sheds light on the intricacies of
anxiety but also offers practical insights and coping mechanisms
for those who may be facing similar challenges.
2. Proposal
With the topic of Anxiety firmly selected, I proceeded to craft a
detailed proposal for my project. The initial step involved delving
into the very essence of anxiety, engaging in extensive research to
unearth relevant and insightful information. I diligently collected
all the gathered content and organized it within a Google document,
laying the foundation for the website's development.
One of the primary objectives of this project is to explore the root
causes of anxiety, delving into its impact on mental and emotional
well-being. Additionally, I plan to discuss various anxiety
disorders and their unique characteristics, thus providing a
comprehensive understanding of the condition. Moreover, the website
will include information about available treatment options,
self-help techniques, and strategies for managing anxiety
effectively.
To gain a better understanding of how to create my website, I
dedicated time to researching, studying, and observing relevant
websites about mental health. By closely examining these
websites, I sought to comprehend the strategies and techniques
they employed in developing their online platforms.
During this process, I paid meticulous attention to the design
elements, layout, and user interface of these mental health
websites. Analyzing their content organization and presentation
helped me identify effective ways to structure my own website to
ensure a seamless user experience.
|
|
Fig.2.1 - Websites about mental health (Link) |
Fig. 2.2 - Final Project Proposal (PDF)
3. Wireframe
After developing the proposal, my next step was to begin working on the
wireframes using Figma. To start, I created a 1366px width frame and
established a 12-column grid layout. This strategic decision allowed for a
systematic organization of design elements on the landing page, ensuring a
cohesive and visually appealing layout.
With the foundation set, I delved into the process of designing the
wireframes for the entire 5-page website. Each page's wireframe was
carefully crafted to visualize the layout and structure of the content,
ensuring a seamless user experience and intuitive navigation.
|
| Fig. 3.1 - Create 12 column grid |
|
| Fig.3.2 - Process of working on wireframes in Figma |
Click
HERE
to view the prototype in Figma
Fig. 3.3 - Final Outcome of Four Wireframes (PDF)
4. Prototype
After completing the wireframes, I proceeded to create the prototype in
Figma, bringing the envisioned website to life with interactive elements
and design details. The color scheme adhered closely to the mood board I
had created, primarily featuring calming green tones that were
complemented by contrasting shades of yellow and off-white. This
deliberate color choice aimed to evoke a sense of tranquility and
positivity throughout the website.
Additionally, I devoted time and effort to designing a distinctive and
meaningful logo for the website. The logo exemplified the figure and
ground Gestalt principle, featuring a human figure forming a heart shape.
Within the heart shape, another figure with open hands symbolized freedom
and calmness. This thoughtful representation intended to visually convey
the essence of the website, which focuses on nurturing well-being and
providing support for anxiety-related concerns.
|
| Fig. 4.1 - Process of designing the logo in AI |
As for the website's name, after careful consideration, I settled on
"Anxiety Wellness." This name effectively captured the site's central
theme, emphasizing the importance of addressing anxiety while promoting
overall mental and emotional well-being.
The logo design was meticulously created in two forms to cater to
different placements on the website. The horizontal version of the logo
was crafted to sit elegantly in the website's header, ensuring a
captivating and professional appearance. Conversely, the vertical version
of the logo was tailored to fit seamlessly into the footer, complementing
the overall website layout and enhancing its visual appeal.
|
| Fig.4.2 - Logo for Anxiety Wellness website (horizontal) |
|
| Fig.4.3 - Logo for Anxiety Wellness website (vertical) |
Next, I devoted quite some time to searching for a suitable hero section image that would be relevant and reflective of the theme of my website. After thorough exploration, I stumbled upon a captivating image on Unsplash that perfectly complemented my logo's concept. The image portrayed a human figure with open hands, beautifully symbolizing both freedom and calmness, which aligned perfectly with the core message of mental health and well-being that my website sought to convey.
To ensure visual harmony and consistency, I made careful color adjustments
to the image. By transforming the original blue tones to a soothing light
green, I successfully aligned it with the color scheme established in my
moodboard. This thoughtful attention to detail ensured that the hero
section image seamlessly integrated with the overall design of the
website, enhancing the user experience and creating a visually cohesive
presentation.
In essence, the hero section image served as a powerful visual
representation of the website's core values, inviting visitors to explore
and engage with the content that aimed to promote mental health awareness
and support. Its alignment with the logo's concept and the color palette
further reinforced the website's identity and contributed to the creation
of a welcoming and aesthetically pleasing online platform.
|
| Fig. 4.4 - Adjusting the color of the hero section image |
|
| Fig. 4.5 - Process of working on the prototype |
Final Outcome of the Prototype:
Click
HERE
for to view the 5 pages prototype in JPEG
Fig.4.6 - Final Outcome of the Prototype (PDF)
5. Creating HTML in Dreamweaver
To begin creating the website, I meticulously organized the necessary
files by creating a folder named "html," "css," and "images." This
meticulous approach aimed to facilitate the smooth development of the
web pages at a later stage.
|
| Fig. 5.1 - Created folder and arranged the file |
Subsequently, I embarked on crafting the actual content of the working
web pages in Adobe Dreamweaver, opting for HTML as the primary markup
language. Since the website comprised five distinct pages, I created
five separate HTML files to accommodate each page's unique content.
This process was remarkably efficient and time-saving, as I could
effortlessly transfer the content from the prototype I had previously
built in Figma. This seamless transfer of content from Figma to
Dreamweaver saved me considerable time and effort, ensuring a smooth
start to the development process.
Simultaneously, while working on the content, I also delved into
planning and crafting the div tags strategically. These div tags
served as containers, enabling me to logically group and organize
various elements of the web page. This preparatory step was crucial in
establishing a solid foundation for the subsequent application of CSS
styles to the different components of the web page. By creating and
structuring the div tags thoughtfully, I aimed to ensure a systematic
and efficient approach to styling the web page later on.
 |
| Fig. 5.2 - Process of working on HTML |
 |
| Fig. 5.3 - Copy the embed link from google maps |
I'm using comment tags to name each section makes it easier for me to refer back to specific parts of the code.
 |
| Fig. 5.4 - Using comment tags to differentiate the section |
6. Designing with CSS in Dreamweaver
After successfully completing the HTML development, I eagerly delved into the process of styling the web page using CSS. Having gained valuable experience and familiarity with CSS through previous projects, I felt more confident in my abilities. However, I couldn't overlook the fact that crafting the design of the page still demanded a considerable amount of time and effort.
What set this project apart from the previous ones was the incorporation of different design components, such as the accordion. This presented an exciting challenge, prompting me to allocate additional time to learn from online resources, tutorials, and guides, following step-by-step instructions to ensure the creation of visually appealing and cohesive designs.
 |
| Fig. 6.1 - Process of creating the accordion |
 |
| Fig. 6.2 - Process of working with css |
 |
| Fig. 6.3 - Copy the embed link from Google Fonts |
 |
| Fig. 6.4 - Style the design of three columns |
7. Create responsive for the web page
For the final phase, I focused on creating a responsive version of the web page by implementing @media queries in CSS. This crucial step allowed the web page layout and design to adapt seamlessly to various screen sizes and devices, enhancing the overall user experience.
To achieve responsiveness, I meticulously edited the CSS styles, making adjustments one by one based on specific screen sizes. I employed @media queries, which are CSS rules that target different viewport dimensions, to apply customized styles for mobile views. For mobile devices, I set the max width to 390px, ensuring that the web page content would gracefully adjust to fit smaller screens. By optimizing the layout and font sizes for mobile users, I aimed to provide a user-friendly and visually appealing experience on smartphones and other handheld devices.
 |
| Fig. 7.1 - Process of adjusting on mobile devices view |
Throughout this responsive design process, maintaining a consistent and coherent visual presentation across different devices was a top priority. I paid close attention to the alignment of elements, the spacing, and the overall aesthetics to ensure a polished appearance on every screen.
 |
| Fig. 7.2 - Preview and checking through Chrome |
However, after publishing the web page, I soon realized that the responsive view on mobile devices was different from what I had previewed in Figma while using Google Chrome. This unexpected issue came as a surprise and raised concerns about the accuracy of the mobile view.
Upon encountering this discrepancy, I immediately sought advice from Mr. Shamsul, who suggested an alternative approach for the final submission. Since achieving an exact match between the Figma preview and the actual mobile view proved challenging, he proposed recording a screen capture to demonstrate how the mobile view should look. By providing a screen recording, I could effectively showcase the intended design and responsiveness of the web page on mobile devices.
 |
| Fig. 7.3 - The actual correct view on mobile (preview in Figma using chrome) |
 |
| Fig. 7.4 - The wrong view on mobile (after publishing) |
Fig. 7.5 - Screen recording of Anxiety Wellness website (mobile)
*New Updated
The issue has been fixed after I added the <meta> tag in all 5 html files.
 |
| Fig. 7.8 - Successfully create responsive view for mobile |
8. Publish the site on Netlify
Finally, in the last step of the process, I proceeded to upload the folder to Netlify, a popular web hosting and deployment platform. With the files securely transferred to the platform, I was ready to take the final stride towards making the website accessible to the public.
 |
| Fig. 8.1 - Publish the site on Netlify |
FINAL OUTCOME
Screen recording of Final Project - Anxiety Wellness website:
Fig. 6.1 - Final Outcome: Screen recording of Anxiety Wellness Website
(Desktop view)
Fig. 6.1 - Final Outcome: Screen recording of Anxiety Wellness Website
(Mobile view)
Fig. 6.3 - Source code: HTML (PDF)
Fig. 6.2 - Source code: CSS (PDF)
FEEDBACK
Week 14 - 2.7.2023 (Prototype)
General Feedback:
Overall the design and color choice are good.
Specific Feedback:
Overall the design and color choice are good.
Specific Feedback:
1. Landing Page
-Hero section - the sub-headline too light not contrast, try use yellow.
-About us section - the edge too rounded, if the green edge 20px, the
image should be 18px.
2. About us Page
-Our success stories don’t need to create carousel slider, just make it
static.
3. About anxiety Page
-The youtube video, use embed link.
-The read more CTA button don’t need to add shadow
4. Contact us Page
-Not necessary to add the emergency hotline number, I suggested to add a
google map by copy the embed link.
REFLECTION
Overall, this project was a truly enjoyable yet challenging experience. I am quite satisfied with the outcome, considering the numerous hurdles I faced in achieving the desired appearance. Throughout this project, I discovered a profound interest in the front-end position. I found myself more drawn to designing interfaces and curating content rather than focusing solely on coding the website. This revelation has given me valuable insights into my preferences and strengths.
One significant lesson I learned is the importance of effective planning and knowing my own abilities. During the initial stages, I devoted substantial time and effort to creating and refining the prototype, experimenting with various designs to find the most suitable one. However, I encountered difficulties when transitioning to the coding phase. At times, I struggled to implement specific designs, resulting in the final look not precisely aligning with my desired outcome. Consequently, I had to make some adjustments to the prototype too.
One aspect of the coding process that I found challenging was troubleshooting errors and accurately translating my prototype into functional code. For instance, creating a responsive website for mobile devices proved to be particularly tricky. Despite my best efforts, some issues persisted, and I faced moments of helplessness as I sought solutions without success. Fortunately, Mr. Shamsul generously extended the deadline, affording me more time to experiment and enhance the website's appearance.
Despite my occasional complaints and frustrations, I feel a deep sense of pride in the final outcome. I can hardly believe that I successfully created a 5-page website entirely from scratch, without relying on any templates. As a student aspiring to specialize in UI/UX, this project has been an invaluable opportunity to gain firsthand experience and better prepare myself for the world of UI/UX specialization. It has reinforced my determination to continue practicing and honing my coding skills during the semester break.
.jpeg)
Comments
Post a Comment