Skip to main content

Interactive Design / Exercise

23.09.2024 - 29.10.2024
GAN YI KIAN / 0374572
Bachelor of Design (Hons) in Creative Media
Interactive Design / Exercise






LECTURES
Week 1


Week 2


Week 3


Exercise

Week 2
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.

Week 3
Exercise 2 - Web Replication
Our task is to replicate TWO (2) existing main pages of the websites in the link below to better understand their structure. Choose any two from the link given. Follow the dimensions of the existing website, including width and height. This exercise will help you develop your design skills using software such as Photoshop or Adobe Illustrator, and gain insights into web design best practices. We can use any image from stock image or free stock icon. The image that you will be using does not have to be an exact image from the original website. You may replace it with a similar image. Focus on the layout, type style, and color style.

At the beginning, Mr Shamsul asked us to complete one of the tasks during class, and I chose https://www.oceanhealthindex.org/?authuser=0 to complete. This is a full-screen screenshot of this web page.

Web Replication 1




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





Web Replication 2



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



Week 7
Exercise 3 - Personal CV Page
We need to use HTML and CSS languages ​​to create a web page about resumes















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

Advanced Typography / Task 1

24.09.2024 - 19.10.2024 / Week 1 - Week 4 GAN YI KIAN / 0374572 Advanced Typography / Bachelor of Design (Hons) in Creative Media Task 1 / Exercises  LECTURES Week 1 Fig 1.1 Typographic System Examples  Typographic Systems "All design is based on a structural system" There are eight major variations with an infinite number of permutations. Axial Radial Dilational Random Grid Modular Transitional Bilateral Axial All elements are organized to the left or right of a single axis. Radial All elements are extended from a point of focus. Dilational All systems expand from a central point in a circular manner. Random Elements appear to have no specific pattern or relationship. Grid A system if vertical and horizontal divisions. Modular A series of non-objective elements are constructed as standardized elements. Transitional An informational system of layered banding. Bilateral All text is arranged symmetrically on a single axis. Week 2 Typographic Composition Emphasis  Fig. ...
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