INTERACTIVE DESIGN
|| Leong Hui Xuan 0365793
|| 14/05/2025- 26/05/2025 (Week 4 - Week 6)
|| Bachelor of Design in Creative Media
|| Project 1
Table of Content
INSTRUCTION
LECTURE NOTES
Lecture 04 The Web
The standard markup languages are
HTML & CSS. HTML code is made up of characters inside angled brankets<>, called HTML elements. Each elements need to include openning and closing tags.
- <></> - Opening and Close elements in HTML
- <h1> - Main heading
- <h2> - Subheadings
- <h3> - Sub subtitle
- <p> - Paragraph
- <b> - Bold
- <i> - Italic
- <ol> - Order list
- <ul>, <li> - Unorder list
- <a href="link">text</a> - Links
- <img src="img",alt ="alt img", name of image> - Alternative image
Lecture 05 HTML&CSS
- CSS3 and HTML5 is the common we use for coding.
CSS:
- Create rules that specify how the content appear like colour, fonts and more.
- Works by associating rules with HTML elements.
- Contain selector and declaration.
- CSS declaration include property and value, separated by colon.
- Can use Google Fonts to add fonts in CSS.
Lecture 06 CSS Selectors
- Fundamental part of CSS that allow to target and style HTML elements on web page.
- Used to define which elements receive specific styles.
- CSS enable to control the presentation and layout of the web page.
Type of CSS Selector:
- Universal Selector: Selects all elements on the page and represemted by an asterisk(*) which can effect all elements and lead to inefficient CSS.
- Element Selector: Simplest type of selector to targets HTML elements by their tag name.
- ID Selector: Targets an element with specific id within an HTML document.
- Class Selector: Multiple elements can share the same class and select elements with a specific class.
- Descendant Selector: Select an element that descendant of another element.
- Child Selector: Select only the immediate <li> children of an <ul>.
- Pseudo-class Selector: Selects elements based on state / position.
- Pseudo-element Selector: Selects parts of an elements include before and after and element.
CLASS EXERCISE
We use the knowledge that we learned in class to create a simple basic
website through Notepad and Adobe Dreamweaver.
PROCESS WORK
This Project we need to redesign an exisiting website and develop a
proposal for it. Proposals should demonstrate the ability to evaluate
website design and functionality and propose design solutions that improve
user experience, aesthetics, and performance.
We need to find a website that is considered as a bad website first, then
we can analyse the website and redesign it.
Chosen Website:
At first, I was choosing the Mr Bottles website as my project. The site has
historical value and a
unique niche, with a passionate community and a vast archive. However,
redesigning the site is not an easy task, especially in a short time frame. A comprehensive redesign required
careful planning to preserve the existing content while improving user
experience, accessibility, and mobile compatibility.
Then, after consult to Mr. Shamsul, I decided to choose The Ice Cream Farm
as the website that I need to redesign it. The Ice Cream Farm website
would be much better if it were simpler and easier to use.
Website Analysis:
Currently, the overall layout lacks visual clarity, making it difficult for users to navigate. This difficulty is compounded by inconsistent user experience
across
different sections with different colour.
User might get confused and don't know what to view when seeing so many
section at the first glace.
Additionally,
key information is often difficult to find, and the content does not do a good job of showcasing the farm's main attractions or current promotions.
Besides, the typography
head fonts is too
playful, eventhough is fit to children friendly brand and it's hard to
read.
The images used are also
outdated and users may think
that the website is
not used frequently.
All together, these issues can make the site frustrating to use and may discourage visitors from exploring further.
Redesign Goals:
The objective of the redesign goals is to simplify the user experience with clear call to action, modernize the website layout and improve the accessibility for users.
The target audience are
families with young children, school trip organizers, tuorists and local
residents.
The redesign
will be better if:
- Easy access to basic information.
- Fun and clearly structured.
- User-friendly to both elderly and mobile users.
Design Proposal:
.jpg)
For the moodboard, I choose the
summer type color which is
blue, orange, yellow tone create a colour scheme to fits
children innocent and playful.
The fonts I chose
Permanent Marker as the Head
fonts, because it's create a playful and eye-catching effect. Then, I use
Frank Ruhl Libre as the body
fonts due to its readability, especially in
long-form text and its modern feels.
I also find some poster and website design
about dessert and theme park as the references to help me gain inspiration
on how to work in my wireframe.
The navigation bar at the top of the website included
Logo at the left,
Home button at the middle,
Navigation button (Events/ About us/ Visit/ Ice-cream menu/ Tickets/ Login) at the right
and always stick at the top no
matter switch to which page, to let the user easy to navigate.
The yellow boxes in the wireframe are the
button to let the users click
and jump into the corresponding page.
I added some
interactive slide box to show
the multiple images/events that the farm have.
Ticket Page:
- For the ticket page, I place the
date bar at the first, then
place the events and activities
that is available at the time, to let the visitor to choose what they want
to play.
- Lastly, the
membership and the play pass section
for the visitos that want to play multiple theme. After they chose the
specific dates, activities and pass, they will straight away jump to the
purchase page.
Menu Page:
- The farm includes a catering outlet/restaurant and an ice cream shop,
so I put the
ice cream flavors they offer
on the page and used a
slider to slide through
images of the various flavors.
- Then, there is a
F&B button below the
slider, for the visitors who interest to the F&B.
- Below have a
order list to review what
visitors have odered and
pay button.
Play&Events Page:
- The play section include
all the theme park that
the farm include, visitors can see the short brief and open date/time
after they click the button.
- For the events, I used
interactive slide images
which can click into it, to show the visitors the
up-comming events and promotions.
UX Enhancements:
I compared the before and after redesign websites to show the
difference and improvement.
Technical Consideration
.jpg)
1. Mobile Optimization
- Ensure full responsiveness across digital devices using a mobile-first layout approach.
2. Cross-Browser Compatibility
- Test and support across major browsers (Chrome, Safari, Firefox, Edge) for consistent experience.
3. Performance Enhancements
- Optimize images and media with modern formats, lazy loading, and reduced scripts to improve loading speed.
Conclusion:
.jpg)
Rationale:
The rationale behind the redesign of The Ice Cream Farm website is
to
create a more cohesive, user-friendly, and visually engaging
digital experience
that better reflects the brand's identity as a fun, family trip
destination.
The current website
suffers from
inconsistent color schemes, scattered typography, and usability
issues
such as non-sticky navigation and a cluttered layout that overwhelms
users.
By implementing a
unified design system, improving visual hierarchy, and optimizing
for both desktop and mobile platforms,
the redesign aims to
enhance overall accessibility and clear instruction layout.
Clear call-to-actions, simplified navigation,
and playful yet structured aesthetics will ensure visitors
especially parents planning visits, can easily access key
information and enjoy the trip.
FINAL PROPOSAL OUTCOME
Canva Slide:
Black and White Minimalist Thesis Defense Presentation，Author: Leong Hui Xuan
PDF Format:
REFLECTION
Experience
During this project, while working on The Ice Cream Farm website
redesign, I getting to know more about the
website structure and what
considered as a good website. To proposed a comprehensive redesign to
enhance its
visual appeal, usability and functionality, I started by evaluating key aspects such as
layout, typography, navigation and user interaction. Based on the issues identified, I create a
moodboard and wireframe design with clear navigation flow to improve the visual hierarchy
and
simplify the user experience.
This project helped me to gain more knowledge about how to create a
basic website with the UX knowledge.
Observation
One thing I noticed throughout this project is how much impact clear organization
and design can have, when sections are
well-connected and visually engaging.
On the other hand, confusing layouts can make even an interesting
project frustrating. This project taught me that good design should
always be
centered around the user.
Findings
The process is not always without challenges, one of the challenge that
I faced was
thinking beyond just visual. We need to consider
tehnical aspects like mobile
responsiveness, site speeds, and accessibility, which I was not very
familiar with it before. It also took me many time to figure out how to
make the website
simplify from a lot of
functions and complecate layout into something
clear and user-friendly. I
learned that create a website is not as many function as it can, it's
about how can make the website
simple aesthetic and functionality
to attract the viewers at the same time.
FEEDBACK
Week 4: I choose some website for the project, but the website is not
acceptable, so I need to choose other website.
Week 5:
This week, I selected the MR.Bottles website as my project but after
consultation with Mr. Shamsul, I decided to change my website to The
Ice Cream Farm website.
Week 6: I was working on the project and we were introduced to Creamweaver in the
class.
Comments
Post a Comment