Interactive Design - Final Compilation
23.04.2024 - 03.08.2024 / Week 1 - Week 14
Siang Huey Yee / 0369549Final Compilation
CONTENTS JUMPLINK
- INTERACTIVE DESIGN/ EXERCISES
- INTERACTIVE DESIGN/ PROJECT 1 - PROTOTYPE DESIGN
- INTERACTIVE DESIGN/ PROJECT 2 - WORKING WEB DESIGN
- INTERACTIVE DESIGN/ FINAL PROJECT - DESIGN, EXPLORATION AND APPLICATION
OUTLINE
- EXERCISE 1 - WEB ANALYSIS
- EXERCISE 2 - WEB REPLICATION
- EXERCISE 3 - CREATING A RECIPE CARD
- PROJECT 1 - PROTOTYPE DESIGN
- PROJECT 2 - WORKING WEB PAGE
- FINAL PROJECT - DESIGN, EXPLORATION AND APPLICATION
- FINAL REFLECTION
EXERCISE 1 - WEB ANALYSIS
Purpose & Goals
The purpose of this website is to showcase all the projects they have previously completed, promoting their creative studio, 'AIRCORD', based in Tokyo, Japan. Their goal is to create amazing digital experiences and visual expressions that can influence human emotions and behaviours.
Design & Layout
The website was designed in a simple, clean, and modern style, incorporating the use of whitespace, sans-serif fonts, and high-quality visuals. It showcases their projects in a spinning circular layout, reminiscent of selecting films, allowing the audience to click for further information on each project.
Functionality & Usability
This website features a navigation bar labeled with "Home," "Projects," and "About." Clicking the middle portion of the "Home" page redirects users to the "Projects" page, where projects are displayed in a spinning circular style. Users can control the rotation by scrolling left or right or allow it to spin automatically. When the mouse cursor hovers over the spinning circle, the project names are displayed, and more information can be accessed by clicking on specific project boxes. Additionally, on the About page, users can scroll down to view more information about the team.
This website incorporates numerous interactive elements, including videos displayed to the audience and interactive animations that enhance the user experience and increase engagement. Additionally, it consistently features several arrow cursors guiding users in the correct directions.
Quality & Relevance of Content
The website's content is clear, straightforward, and user-friendly, with clear navigation and easily accessible information for the audience. They successfully showcase their projects in a creative manner, aligning with their purpose of creating digital experiences and visual expressions.
Website's Performance
Figure 1.1g Viewing the Website on Mobile device
I've tested this website on both my mobile device and laptop, and for both devices, it doesn't require a long loading time. It's quick and smoothly responsive with no delays when clicking to navigate to another page.
Purpose & Goals
The purpose of this website is to promote the knowledge and culture of the Scandinavian region. It introduces countries such as Norway, Sweden, and Denmark as part of Scandinavia. Additionally, it provides information to the audience about the nature, food, architecture, and more of Scandinavia.
Design & Layout
The website was designed in a harmonious and cute, simple style, using bright primary colours such as blue, red, and yellow to showcase the calm vibe of Scandinavia. Sans-serif fonts were being used, even though with a slightly artistic style that decreased readability. The imagery on the website was eye-catching, featuring animated elements such as whales, birds, and ships moving around the layouts.
Functionality & Usability
This website features a navigation panel labeled with "Nature," "Food," "Architecture," "Sustainability," and "Hygge," introducing the culture and environment of Scandinavia. The navigation panel can be viewed after clicking the hamburger icon shown in the left of Figure 1.2d. Additionally, the website can be navigated by simply scrolling down. It incorporates interactive elements, including music that can be toggled on or off by clicking the music icon shown in the right of Figure 1.2d, and interactive animations such as animated whales, ships, and birds, enhancing the user experience and increasing engagement.
As viewer scroll down through the "National Dish" section that introducing the recipe of Scandinavian soup with salmon, all the ingredients needed for this dish gradually transform into the final completed dish, with a list of the recipe shown below.
Quality & Relevance of Content
The website's content is simple, straightforward, and user-friendly, with clear navigation ensuring that audiences can easily access the information. This website could attracts more people to become interested in the region known as "Scandinavia." The author successfully introduces this region to more people by creating this captivating website to share more about it.
Website's Performance
This website doesn't require a long loading time on both my mobile device and laptop. It's quick and smoothly responsive, with no delays when clicking to navigate to another page. However, the layout on mobile devices provides a clearer view of the whole page for each section compared to the laptop, where one section cannot be seen at once.
EXERCISE 2 - WEB REPLICATION
WEBSITE 1: https://www.oceanhealthindex.org/?authuser=0
.png)
Figure 2.1a Website 1 Replication Final Comparison (Left - Original; Right - My Website Replication)
WEBSITE 2: https://banditrunning.com/
.png)
EXERCISE 3 - CREATING A RECIPE CARD
Link: https://hueyyeerecipe-yellowcakewithchocolate.netlify.app/
PROJECT 1 - PROTOTYPE DESIGN
FIGMA:
PROJECT 2 - WORKING WEB PAGE
Figure 5.1 Final Digital Resume (Full Size Screenshot) - PNG
Netlify Link: https://hueyyee-project2-finaldigitalresume.netlify.app/
FINAL PROJECT - DESIGN, EXPLORATION & APPLICATION
Figure 6.1 Final Project - IU Fansite (Full Size Screenshot)
Here is a screenshot of the full capture of the website. However, the screenshot did not capture the embedded song album from Spotify for some reason. Therefore, a screenshot of the Song Albums section from the actual website is provided for reference. Please refer to the Netlify link below for the full view of the website.
Netlify Link: https://iu-fansite-2024-hueyyeefinalproject.netlify.app/
FINAL REFLECTION
Throughout these exercises and projects, I had the chance to delve deeper into interactive design, gaining valuable skills in analyzing and replicating webpages, and mastering HTML and CSS. Starting with foundational tasks like creating a recipe card using Adobe Dreamweaver, I was well-prepared for more complex assignments. In Project 1, I effectively used FIGMA to design a digital resume prototype, laying the groundwork for creating a real website in Project 2. This progression helped me transition smoothly from prototypes to actual websites, enhancing my proficiency with both platforms. Project 2 allowed me to design my own Digital Resume/CV, significantly improving my understanding of CSS for web design. I learned to adjust various elements, which broadened my coding capabilities. The final project, focused on my favorite K-pop artist IU, was particularly enjoyable and allowed me to apply all my learned skills in a meaningful way. Designing a single-page website on my own, with helpful feedback from my lecturer, Mr. Shamsul, further solidified my knowledge and confidence in web design. Overall, these projects not only honed my technical skills but also deepened my appreciation for the creative and interactive aspects of web development.
Comments
Post a Comment