Interactive Design: Final Project
10/6/2024 - 22/7/2024 (Week 8 - Week 14)
Lim Yu Xuen / 0359676
Interactive Design / Bachelors of Design (Hons) in Creative Media / Taylor's University
Final Project: Design Exploration & Application
TABLE OF CONTENTS
✿ Lectures
INSTRUCTIONS
Find out other information about this module below
Figure 1.1 Module Information
LECTURES
Week 9 to Week 10 Lectures (refer to
Project 2 / Lectures)
FINAL PROJECT: DESIGN EXPLORATION & APPLICATION
Task Requirements:
- Lifestyle Theme Selection: Choose a specific lifestyle theme that resonates with you. This could include topics like fitness, travel, fashion, food, wellness, or any other aspect of modern lifestyle that interests you.
- Layout and Sections: Design a single page microsite that consists of at least five distinct sections. These sections should flow seamlessly and provide a comprehensive experience for the user. Consider including sections like: Introduction, Featured content, Photo gallery, Testimonials, Subscribe / Get involved.
- Visual Design: Design a visually appealing microsite that aligns with the chosen lifestyle theme. Select a colour palette, typography, and visual elements that convey the mood and essence of the lifestyle.
- Maintain consistency in design elements throughout the microsite, ensuring a cohesive and professional appearance.
- Photo Gallery: Create a dynamic and interactive photo gallery section using appropriate technologies (e.g. JavaScript, CSS animations). Include a variety of images that showcase different aspects of the lifestyle. Ensure smooth navigation and transitions within the gallery.
- Responsive Design: Implement responsive design techniques to ensure that the microsite is accessible and functional across various devices, including desktop, tablet, and mobile.
- User Experience and Interactivity: Incorporate interactive elements such as hover effects, animations, and transitions to enhance user engagement and create an enjoyable browsing experience. Ensure that navigation is intuitive and easy for users to move between different sections of the microsite.
- Technical Implementation: Write clean and well-structured HTML and CSS code that adheres to best practices.
Theme Choosing & Proposal
For this final project, I decided to do a website about journaling. I
have been journaling for years now, and I think it really helps with my
well-being and organisation.
Figure 2.1.1 Proposal Slides
Introduction to the Theme
The theme revolves around "lifestyle". The topic I have chosen is
journaling. In today's fast-paced world, the pursuit of wellness and a
balanced lifestyle has become more critical than ever. One of the most
effective yet often overlooked tools in achieving this balance is
journaling.
Journaling, the simple act of writing down thoughts, feels, and
experiences, has been practiced for centuries. It serves as a reflective
tool, helping individuals process emotions, set goals, and gain clarity in
their lives. More than just a daily log, journaling can be a profound
journey into self-discovery and personal growth.
I would like to promote journaling, as I believe that by implementing this
hobby, it can improve our lifestyle.
Content Planning
At first, before starting to design my web, I looked through existing
websites and blogs relating to the topic of journaling. This sparked my
ideas, and in the end, I decided to stick to 7 sections in the page.
Sections Includes:
- Introduction — short introduction to my website, what you can find here!
- About — includes my name, and a short introduction of myself.
- Blog — interactive blogs for more information about journaling.
- Feature — featuring my journal entries
- Freebies — includes gallery of free printables
- Contact — form to collect emails for mailing list
- Footer — social media links & jump links for easier navigation
Inspiration & Sketches
After deciding on the theme and the content to be included, I proceeded
to look for inspiration of websites, and also started to sketch my ideas
out.
Figure 2.2.1 Inspo
From the picture on the left, I got inspired to have my introduction on
the utmost top of my website. Then, I was also liking the idea of
writing "Hey, I'm Noelle" in my website, for a friendly approach. Then,
the middle photo inspires me to include a design similar to the
envelope, which in the end, I decided to use a similar concept for my
contact section. The last photo inspired me to have a carousel gallery.
Figure 2.2.2 Sketch
Content Preparation
Before starting to code my website, I prepared the materials needed
for it. This includes the photos for the background, the blog photos,
downloadable printables.
Figure 2.3.1 Images Prepared
Besides that, I made sure to come up with blog post ideas, so it will
ease the process of writing them when coding. Attached below is a PDF
document with the content I want to use for my blog.
Figure 2.3.2 Blog Content (PDF)
Design Elements
#1 Colour Palette
Figure 2.4.1 Colour Palette
#2 Fonts
Font 1: Poppins
Figure 2.4.2 Poppins Font, Source:
link
Figure 2.4.5 Jost Font, Source:
link
To make sure the website allows smooth scrolling, I included a
navigation bar at the top and the bottom of the website. This allows
users to jump to different sections of the page.
Figure 2.4.6 Top and Bottom Navigation Bar
Figure 2.4.7 Top Navigation Bar (CSS)
Figure 2.4.8 Footer Navigation Bar (CSS)
The navigation bar is also optimised for users that views the
website on smaller resolutions or other devices.
Figure 2.4.9 Navigation Bar viewed on smaller resolution sizes
Interactivity
To improve user engagement, and make the website interesting. I
made sure to include interactive elements. These elements include
image sliders, hover effects, and so on.
Figure 2.5.1 Image Sliders
Figure 2.5.2 Content can be viewed after pressing "See More"
button
Besides including these image sliders, I included clickable links
that redirects you to download the content immediately. This
fastens the process of downloading files, which improves user
experience.
Figure 2.5.3 Freebies Section
For the feature section, It includes a rotary animation of 9
photos. When hovering on top of the image, the carousel pauses,
and the hovered image remains in coloured, while the other images
are in black and white. This small detail increases user
engagement, and makes the website interesting.
Figure 2.5.4 Featured Carousel
Animation
The website includes small animations, like elements fades upwards
when entering, and certain sections are movable. There are many
carousels that repetitively moves. Other than that, there is
certain texts that loops in a GIF, which in my website is "Hey! my
name is Noelle", which also changes to "Hey! my name is Lim Yu
Xuen".
Figure 2.6.1 Text Animation
Figure 2.6.2 Image Carousel
Dreamweaver Coding
To achieve a responsive and interactive website, I designed
various components using HTML, CSS, JavaScript, and BootStrap. I
also ensured the website is responsive and visually appealing
across different devices. Besides that, the design process
involved selecting colour palettes, and iterating based on
feedback to achieve the final product. Each component was
carefully created to enhance user experience and ensure
compatibility across different devices and screen sizes.
Figure 2.6.3 All files
Final HTML Codes (PDF)
Figure 2.6.5 Final HTML Codes (PDF)
Final CSS Codes (PDF)
Figure 2.6.4 Final CSS Codes (PDF)
Final JavaScript Codes (PDF)
Figure 2.6.5 Final JavaScript Codes (PDF)
Final Submission
link to Netlify:
here
Figure 2.6.6 Screen recording of mobile on website
Figure 2.6.7 Screen grab of desktop
REFLECTIONS
Reflecting on this project, I recognize significant growth in my skills
with HTML and CSS. By translating my prototype design from Project 1 into
functional code, I not only reinforced my understanding of these languages
but also expanded my proficiency in creating adaptable and responsive
webpages.
The hands-on experience of implementing various layouts and CSS elements proved to be both challenging and rewarding. I gained practical insights into how to code for different screen dimensions, which is crucial for building user-friendly, responsive websites.
One particularly valuable lesson was the impact of hover effects on user engagement. Incorporating these effects added a layer of interactivity to the webpage, enhancing the overall user experience. This project has solidified my appreciation for the subtleties of web design and its influence on user interaction. Overall, the project was a fruitful learning experience, pushing me to refine my skills and explore new aspects of web development.