Skip to main content

Interactive Design / Final Compilation

23.09.2024 - 04.01.2025
GAN YI KIAN / 0374572
Bachelor of Design (Hons) in Creative Media
Interactive Design / Final Compilation





INSTRUCTIONS


Exercise 1 - Web Analysis

We need to choose TWO (2) websites from the link given.taking note of its design, layout, content, and functionality. Identify the strengths and weaknesses of the website, and consider how they impact the user experience. Write a brief report summarizing findings and recommendations.

purpose and goals
the visual design and layout of the website
  • color, typography, and imagery
the functionality and usability of the website
  • navigation, forms, and interactive elements
the quality and relevance of the website's content
  • accuracy, clarity, and organization
the website's performance
  • load times, responsiveness, and compatibility with different devices and browsers

Website 1

(Source)

Purpose and Goals: "Letters to Evan" is a personal project sharing advice, reflections, or experiences in the form of letters, likely meant to guide or inspire someone named Evan.

Visual Design and Layout
Color:
The classic color scheme of black, white and gray is used on this website to look consistent, pure and simple.

Typography:


Typesetting text is mainly arranged on the left or right. Then use uppercase letters, two fonts.

Imagery:
The same photos are also added with black and white filters to make the entire page consistent and combined with the text. The photos will move up and down as the reader moves.

The functionality and usability of the website
Navigation
I think the navigation is good. Readers can be led to read the content, but one drawback is that they cannot stop at a certain point. This page will just keep going down.


It's a pity that this has not been solved on mobile phones.

Forms
The form is very simple and the page is not too cluttered.

Interactive elements
There are many interactive elements here, such as the effect of flipping the mouse over a button from white to black.

The quality and relevance of the website's content
accuracy
The information is clear and the writing is accurate.

Clarity
The overall page is clean and simple, I feel very comfortable.

Organization
The organization is very good, especially the arrangement of photos and text.

The website's performance
Load times
Almost no loading time.

Responsiveness
The response time is also fast.

Compatibility with different devices and browsers
I have tested it on Safari as well as Google Chrome, Microsoft Edge, and Firefox on my mobile phone, and the experience is equally smooth.

Website 2

(Source)


Purpose and Goals:
The Emotion Agency website aims to showcase their expertise in creating innovative and visually engaging front-end solutions using modern technologies. Their goals include enhancing brand presence and providing tailored digital products for both Web2 and Web3 projects.

Visual Design and Layout
Color:
The Emotion Agency website primarily uses dark colors complemented by vibrant accents like electric blue, bright pink, and white. This combination creates a modern and visually striking design.

Typography:



The Emotion Agency website utilizes a modern typography style, featuring bold and clean fonts that enhance readability and visual impact. The typography complements the site's sleek design, using varying weights and sizes to create a dynamic hierarchy.

Imagery:
The Emotion Agency website uses high-quality, abstract imagery and animations that align with their modern aesthetic. These visuals enhance the user experience and reflect their innovative approach to frontend development.

The functionality and usability of the website
Navigation
The navigation of this web page also uses the mouse to scroll and the content appears according to its order.


However, when browsing on a mobile phone, content overlap may occur. I think it's also a bug or shortcoming.

Forms
Its form is very simple to operate, just slide it down with the mouse.

Interactive elements
It has a lot of interactive elements, but I personally think there are too many animations.

The quality and relevance of the website's content
accuracy
The Emotion Agency website features high-quality abstract imagery and animations that enhance user engagement and reflect their innovative frontend development approach.

Clarity
The Emotion Agency website has a clean layout and clear messaging, enhancing readability and effectively conveying their innovative approach through a strong visual hierarchy.

Organization
The Emotion Agency website is well-structured for easy navigation, with distinct sections for services, portfolio, and contact information. Consistent layouts and visuals enhance user experience and branding.

The website's performance
Load times
Not long to load.

Responsiveness
Responsiveness without much lag.

Compatibility with different devices and browsers
I think the performance on mobile phones is not good, and the browsers Google Chrome and Microsoft Edge can run normally, but the display on Firefox will be a bit laggy.

Exercise 2 - Web Replication

Final Outcome Web Replication 1
Left: Original
Right: My Work


Web Replication 2



Final Outcome Web Replication 2
Left: Original
Right: My Work



Exercise 3 - Personal CV Page


Project 1-Proposal
Final Outcome

Project 2-Prototype






Final Project - Final Working Website
Final Outcome
Final Project Link here
Google Drive File here











Labels:

Comments

Post a Comment

Popular posts from this blog

Application Design I / Project 2

26.05.2025 - 14.07.2025   / Week 5- Week 13 GAN YI KIAN / 0374572 Bachelor of Design (Hons) in Creative Media Application Design I Project 2 / UI/UX Design Document INSTRUCTIONS Project 2 / UI/UX Design Document Week 5 In this assignment, we need to complete the creation of a research plan according to the template and list of questions, and interview 5 people with the goal of obtaining first-hand experience with users. We need to take notes of their pain points (problems) and highlights (things they love) when using the service or their competitors. My target audience is Gen Z - finish the 5 interviews transcript - take down the data, one idea per post-it -sort them in affinity maps - find categories/themes - create 3 personas from those themes I basically divided the interview questions into 5 sections.I interviewed my friends and they answered me in Chinese, and I translated them into English. Interview Log Section 1: Background Section 2: User experience Section 3: Fu...
Post a Comment
Read more

Application Design I / Project 3

13.07.2025 - 19.07.2025   / Week 12- Week 14 GAN YI KIAN / 0374572 Bachelor of Design (Hons) in Creative Media Application Design I Project 3 / Lo-Fi App Design Prototype INSTRUCTIONS Project 3 / Lo-Fi App Design Prototype Week 11 After I completed the whole process of booking a hotel, I showed it to Mr. Sylvain.After I finished the whole process of booking the hotel, I showed it to Mr. Sylvain. Then we need to build the sketches on figma for each scene before the next week. Week 12 A good idea I came up with is to add a chat function. If today's target is a group of friends who want to book a hotel, they can all use this app and enter a group to chat, and at the same time they can share hotel information to this group. They can vote, compare hotels, and even plan the itinerary of the trip. More plans can be made in this group, and other members can also participate in the selection process. Then based on this idea, I designed the first sketch on figma. Mr. Sylvain sugges...
Post a Comment
Read more

Design Principles / Task 3

03.02.2025 - 21.03.2025 / Week 5- Week 7 GAN YI KIAN / 0374572 Design Principles / Bachelor of Design (Hons) in Creative Media Task 3 / Development & Design INSTRUCTIONS Task 3: Development & Design After the visual analysis,will now create a work of design , based by the idea have proposed in Task 2. expected to apply knowledge of design principles in idea development and final design. Can use any medium and/or materials , except for full photography, that are suitable to convey your final visual message. I will choose the first sketch to create the work Sketch 1 This design retains the tranquility and dreamlike feeling of Monet's original painting. I want to enlarge the main water lily in the center and make it the focus of the whole painting. Fig 1.1 Sketch 1 (3/3/2025) I am confused about whether to use watercolor or illustration design, because both are areas I am not good at. Using watercolor can better express the relationship between the water surface. In terms of c...
Post a Comment
Read more