[ 21/04/25- 28/04/25] (Week1- Week2)
[ Ng Jia Xuan / 0375273 ]
[Bachelor of Design (Honours) in Creative Media]
[ Interactive Design ]
[ Exercise 1 ]
WEEK 1
Sir give us a brief about the whole module & task, here are
some notes that I take during class:
Submissions: In Teams, Assignments area
E portfolio: Create for each task & Final compilation (Create individually)
Exercises:
1. Analysis:
-Changes: *Do 5 web analysis *Brief reports not more than 2000 words
-Compatibilities = Use different device (Phone tablet etc)
-Formatting is important (Heading subheading etc)
-DON’T ANALYZE WEBBY, find it from this websites
2. Replication
-Pick 2 from the website that you analyze
-Show process in e portfolio, give source (Put in google drive)
Project 1:
-NO TAYLORS WEBSITES, E COMMERCE WEBSITES
-Find a poorly design websites, so you can REDESIGN
-User experience came FIRST then aesthetic
-UX Enhancements: *Security features no need
Project 2:
Responsiveness: Desktop will be enough, other is not compulsory
(In Project 2 only, FINAL should work on any device)
FINAL:
For Final project just 5 page these are the most essentials ones:
Prototype: Home, Content, Contact page and add 2 more
(This record is from class, sir said he will upload on teams, make sure to check teams)
If I am not satisfied my prototype in P2 I can develop it in FINAL
Resource Material:
W3schools: https://www.w3schools.com/Html/
Codecademy
Figma: This websites can show an outcomes without using coding
Instead of Google Drive use NETLIFY
Download DREAMWEAVER
(Other similar app: Visual Studio Code)
by Louis Paquet, Michael Garcia and Pam
PURPOSE & GOAL:
They are a company that produces energy drinks available in four
different flavors. Their standout feature is the inclusion of Yerba Maté
(a South American plant known for its numerous health benefits), creating
a vegan, natural energy drink rich in caffeine and antioxidants.
VISUAL DESIGN & LAYOUT:
|
Fig 3.1.1: Reference for the color
|
|
To highlight the theme of the drink, the website uses a bright color
scheme. However, the background features less saturated, similar tones to
avoid overwhelming the viewer. The design elements are bright and
colorful, while the lighter background helps create visual hierarchy and
prevents clutter. Additionally, the use of similar colors throughout the
site promotes unity and harmony.
|
|
Fig 3.1.2: Reference for the typeface
|
|
The typeface used on the website (thin and boxy) contrasts with the
logo’s typeface (bold and round), creating a sense of balance that
prevents the design from feeling overwhelming. They also use a suitable
number of images, mainly product photoshoots. There aren't many, but
they're enough to give visitors a clear understanding of the product.
FUNCTIONALITY & USABILITY:
|
|
Fig 3.1.3: Reference for the button
|
|
|
Fig 3.1.4: Reference for the game
|
Overall, the navigation is quite simple and smooth (users can just keep
scrolling down). The site features multiple buttons that are clear and
easy to spot; the white color stands out well against the vibrant
background, making it easy for users to explore the website. At the end,
there's a small game for users to play, which adds a cute and fun touch to
the experience.
QUALITY & RELEVANCE:
Overall, the content is well-written and clearly presented, including
details like pricing and daily values making it easy for users to grasp
the essential information. The site organizes different types of
information across separate pages, which helps with clarity and makes
navigation straightforward.
WEBSITES PERFORMANCE:
The transitions throughout the site are generally smooth, except when
entering the homepage. On first load or after refreshing, the homepage can
feel a bit laggy. The mobile version works well too, although it features
fewer transitions compared to the desktop version.
STREGTH:
-Well design website, it really brings out the theme of their
drinks
-Easy to use
-Well written information
WEAKNESS:
-It's a bit laggy when entering the homepage
by Alex_WF
PURPOSE & GOAL:
They are an agency that provides consultation on marketing strategies. This website introduces who they are and explains how they will help you analyze and build your business and projects.
VISUAL DESIGN & LAYOUT:
|
|
Fig 3.2.1: The black banner on the left
|
|
The elements are colorful, while the background is less saturated,
creating a balanced look that prevents visual chaos. They use a bold,
boxy typeface that complements the vibrant design and adds a strong,
structured feel to the overall aesthetic. The layout for the mobile
version is slightly different, and there is a slight issue. The
banner on the side covers up some of the text in the box.
FUNCTIONALITY & USABILITY:
|
|
Fig 3.2.2: The button that I miss out
|
|
|
|
Fig 3.2.3: It's the same page with the image above,
but in mobile version
|
|
The navigation is simple (users just need to keep scrolling down), but
the flow feels a bit too fast. When I first accessed the website, it
felt chaotic, with everything moving quickly, which caused me to miss
some information on my first attempt. Additionally, the buttons aren’t
very noticeable, as the fast pace makes it harder to focus on
them. Comparing the desktop version with the mobile version, I think the
mobile version is easier to use. The layout is slightly different, but
it's more user friendly and the pace is easier to control.
QUALITY & RELEVANCE:
This website provides clear information on how it will help you build your business, including various types of samples about the analysis process, with graphs and maps. It uses yellow boxes to highlight important information. These small details serve as cues to the audience; whenever they see a yellow box, they know it contains the information they're looking for.
WEBSITES PERFORMANCE:
|
|
Fig 3.2.4: Reference for transition
|
The website works well on desktop, it's smooth, with minimal
buffering time and quick response. The transitions are also really
fun, they use flowing water and "drink making" effects throughout the
website. However, when I use the mobile version, it tends to
crash easily.
STREGTH:
-Fun transition
-Well designed textbox that help the users to read the information
WEAKNESS:
-Crash easily on the mobile version
-The pace is too fast on the desktop version
PURPOSE & GOAL:
Noomo Valentimes is an immersive storytelling website that offers workshops to help you customize your own digital heart to share with the ones you love. The message they want to convey is, 'You don't need a special occasion to say I LOVE YOU,' reminding users to express love before it's too late.
VISUAL DESIGN & LAYOUT:
 |
| Fig 3.3.1: Reference for the design |
|
This is a beautifully designed site that tells the legendary story of Valentine’s Day. The overall concept features Greek style architecture, including pillars and statues. The color scheme is primarily white, accented with touches of gold and red. This creates an elegant atmosphere, red petals add a sense of romance, while the gold provides a hint of shine, making the entire layout look refined and luxurious. A thin, elongated typeface is used for the narration, which enhances readability compared to more decorative fonts.
QUALITY & RELEVANCE:
 |
| Fig 3.3.2: Reference for the given hints in the site |
|
|
 |
| Fig 3.3.3: Reference for showing the transition |
|
|
This website isn't very complex, so there aren't many pages. However, the transitions are really beautiful and smooth, it feels like stepping into a storybook and exploring it like a fairy. The buttons are at the top of the frame, making them very noticeable. Additionally, the site provides a lot of helpful hints for users. As a result, I didn't get lost when I first explored it.
FUNCTIONALITY & USABILITY:
 |
| Fig 3.3.4: Heart making workshop |
|
|
About the content: When you first enter the website, it presents a reimagined story about Valentine’s Day. It’s a cute and concise tale that gives users some context for the site’s purpose.
The main feature of the site is the "Heart Making" workshop. It's a user friendly, customizable experience with various options to choose from when creating your own heart, including materials, colors, frames, and even the ability to place stickers on the heart.
WEBSITES PERFORMANCE:
When I first accessed the site, the transition from the homepage to the story was a bit laggy on the desktop version, but it worked smoothly on mobile. Besides that, when I first explored the site on both device, the loading time was quite long. Aside from these issues, the website functions quite well.
STREGTH:
- It's a well design, beautiful website
WEAKNESS:
-Some transition is a bit laggy
-The loading time to enter the website is quite long
by Ning Huang
Creating a helpful guide for users to find vegetarian restaurants in
Taipei.
VISUAL DESIGN & LAYOUT:
|
Fig 3.4.1: Reference for the white background page
|
|
Fig 3.4.2: Reference for the food image background
page
|
|
This website uses quite a lot of pictures to showcase the delicious
cuisine of Taiwan. When the background isn't a food image, it's white,
creating a clean look that makes the image elements stand out and
allows the audience to notice the food images at first glance. The
main colors are white and green. The typeface is simple, giving off a
magazine like feel. It's clean and easy to read.
FUNCTIONALITY & USABILITY:
|
Fig 3.4.3: Reference for showing the
black button & hint that helps
audience to explore
|
|
|
|
Fig 3.4.4: Reference for the image button & google
map
|
Using a black box as a navigation button makes it easier to notice.
Additionally, there's a hint in the bottom right corner that helps
guide the audience in exploring the website. They use images of
Taiwanese cuisine as buttons, which can "teleport" the audience to the
recommended location for that specific dish on Google Maps. It's a
very straightforward and user friendly approach.
QUALITY & RELEVANCE:
Although it's a vegetarian restaurant guide, the selection is quite
extensive, offering a wide variety of options including desserts,
noodles, Western cuisine, and more. However, compared to other
non-vegetarian restaurant guides, the number of listings is slightly
smaller.
WEBSITES PERFORMANCE:
Overall, the transitions on both desktop and mobile devices are
smooth, with no noticeable lag. However, when scrolling too quickly on
the desktop version, the site occasionally glitches and returns to the
homepage. Besides that, some of the images on the mobile version
appear blurry.
STREGTH:
-Easy to use, give hints & direction that is helpful for
the users to navigate
-The "teleport" feature is really handy
WEAKNESS:
-The number of restaurant is slightly smaller compare to
non-vegetarian restaurant
-Minor glitching issues when scrolling, especially on the
desktop version.
by Nick.Blanchard
PURPOSE & GOAL:
A portfolio website that is created by Nick Blanchard.
VISUAL DESIGN & LAYOUT:
|
|
Fig 3.5.1: Reference for the clean &
simple page
|
|
|
|
|
Fig 3.5.2: Using his character as a
divider
|
|
|
|
Fig 3.5.3: Use card as buttons
|
|
The color theme of this website is green, white, and black. Overall,
the design is clean and simple, including the typeface and background.
However, it’s a website full of personal touches. It basically says,
“This is my website,” without actually stating it. There are many fun
elements, such as his self drawn character illustrations and cards
looking button.
FUNCTIONALITY & USABILITY:
|
Fig 3.5.4: Reference of a cute interactive button
|
The buttons are clearly visible, so the scenario of "not being able to
find the buttons or not knowing how to proceed" didn’t happen when I
first explored the site. In addition to the useful navigation buttons,
there are also some cute interactive buttons that add a touch of fun.
QUALITY & RELEVANCE:
 |
Fig 3.5.5: Description on the left, design on the right
|
The website is full of artwork and design, as it serves as a portfolio.
He includes some of his design jobs, which are also documented in the
portfolio. The descriptions are on the left, while the outcomes and
designs are displayed on the right. It’s clear, easy to understand, and
well organized. However, when I viewed the mobile version, there was significantly less
content (his artwork) compared to the desktop version.
WEBSITES PERFORMANCE:
It doesn’t have as many transitions compared to the other websites that
I’ve analyzed. However, when I click the menu buttons and "teleport" to
different pages, there’s a slight lag on both the desktop and mobile
versions. Aside from that, the overall performance is pretty good,
buffering and loading times are short.
STREGTH:
-Fun websites, full of personal touches
-Clean & user friendly
WEAKNESS:
-The content for the mobile version is too less
-A bit laggy when switching pages
4. FEEDBACK
On the first class, sir give us a briefing about the module. It is going to be a heavy module for us, sir suggested that we do some self learning or reading to keep up.
After consultation for the blog:
The layout for the blog is good. However, sir suggest to put the link on the title instead of typing out, to make it simpler and clear.
*The blog doesn't has to be fancy, simple is the best.
5. REFLECTION
This was such a fun exercise! I’ve never explored so many websites at once in my life, haha. Some of the websites are reeeaaally AMAZING! It's so fascinating to see how designers can create such masterpieces!
While doing the analysis, I noticed something interesting, every designer and every user has really different tastes! When I was discussing with my friends, I realized our priorities (of course usability still comes first!!) when using a website vary a lot. Some of my friends think good design is quite important, while others care more about how smooth the website feels.
When I was browsing the Awwwards website, I also saw that the scores given by different designers were quite different. It's the same website, but for creativity, some people gave it a 6, while others rated it an 8 or 9. I guess we all really do have different tastes, huh?
Comments
Post a Comment