Interactive Design

April 21, 2024

Interactive Design - Exercises

23.04.2024 - 18.06.2024 / Week 1 - Week 9

Siang Huey Yee / 0369549

Interactive Design / Bachelor of Design (Honours) in Creative Media

Exercise 1 - Web Analysis

OUTLINE

LECTURES

BACK TO OUTLINE

Week 1 Lecture: Usability

Week 3 Lecture: Understanding Website Structure

Week 4 Lecture: The Web and Language

Week 5 Lecture: HTML & CSS

Week 7 Lecture: CSS Selector

Week 9 Lecture: Box Model

INSTRUCTIONS

BACK TO OUTLINE

Module Information Booklet

EXERCISE 1 - WEB ANALYSIS

BACK TO OUTLINE

The objective of this task is to evaluate an existing website and identify areas in need of development. Students will learn about web design best practices and strengthen their critical thinking abilities through this exercise.

Select TWO websites using the provided link. Examine the website that we selected carefully, paying close attention to its design, layout, content, and functionality. Determine the website's strengths and weaknesses, then take into account how each impacts the user experience.

Write a brief report summarising our findings and suggestions in not less than 500 words.

What to have in Analysis:

The Purpose and Goals of the website, and evaluate whether they are effectively communicated to the user
The Visual Design and Layout of the website, including its use of colour, typography, and imagery
The Functionality and Usability of the website, including its navigation, forms, and interactive elements
The Quality and Relevance of the website's content, including its accuracy, clarity, and organization
The website's performance, including its load times, responsiveness, and compatibility with different devices and browsers

I have chosen this link for selecting the TWO websites.

WEBSITE 1: https://aircord.co.jp/en/

Purpose & Goals

Figure 1.1a Home Page

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

Figure 1.1b Projects

Figure 1.1c Projects

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

Figure 1.1d Home Page, Projects Page, About Page

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.

Figure 1.1e Arrow cursors

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

Figure 1.1f Contents

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.

WEBSITE 2: https://scandinavian-countries.tilda.ws/#rec630508455

Purpose & Goals

Figure 1.2a Home Page

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

Figure 1.2b Layouts

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

Figure 1.2c Navigation Panel

Figure 1.2d Hamburger icon and Music icon

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.

Figure 1.2e "National Dish" section

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

Figure 1.2f Contents

Figure 1.2g Contents

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

Figure 1.2h Viewing the Website on Mobile device

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.

CLASS ACTIVITY - PROTOTYPING

BACK TO OUTLINE

During the Week 2 class session, we were divided into groups to create prototypes. Each group was assigned a scenario, and my group was assigned scenario 3, which involves redesigning a school's online learning management system.

User Need:

Students want an easy-to-use platform for accessing course materials, submitting assignments, and communicating with classmates and instructors

Usability principles to consider :

Consistency
Simplicity
Visibility
Feedback

Figure 2.1 Creating Prototypes Progress 1 (In Class)

Figure 2.2 Creating Prototypes Progress 2 (In Class)

EXERCISE 2 - WEB REPLICATION

BACK TO OUTLINE

This task involves replicating TWO (2) existing website to gain a better understanding of its structure. This exercise will help students develop their design skills using software such as Photoshop or Adobe Illustrator, and gain insights into web design best practices.

Students can use any image from stock image or free stock icon.
The image that will be using does not have to be an exact same image from the original website where it can be replaced by a similar image.
Focus on the layout, type style, and colour style.
To find similar typefaces/fonts, students can download fonts from the Google Fonts.
Students may need to screenshot the whole website page and begin to replicate the page.

WEBSITE 1: https://www.oceanhealthindex.org/?authuser=0

I have begun replicating my first website by copying the logo and text. Then, I proceeded to replicate other text using the Montserrat font. After that, I added images and background colours similar to the original website. Additionally, I used the Pen Tool to draw some shapes or elements. Finally, I double-checked to ensure that the alignment of the elements matches the original website.

Figure 3.1a Website 1 Replicating Progress 1 (Text Logo)

Figure 3.1b Website 1 Replicating Progress 2 (Logo)

Figure 3.1c Website 1 Replicating Progress 3 (Texts)

Figure 3.1d Website 1 Replicating Progress 4 (Gradient Background Colour)

Figure 3.1e Website 1 Replicating Progress 5 (Alignment)

Final

Figure 3.1f Website 1 Replication Final Comparison (Left - Original; Right - My Website Replication)

Figure 3.1g My Website 1 Final Replication

WEBSITE 2: https://banditrunning.com/

After replicating my first website as described above, I began replicating my second website. I used the Pen Tool and Line Segment Tool to copy the logo and text. Then, I employed the Ellipse Tool and Line Segment Tool to replicate graphic elements such as the search icon, arrow icon, and social media icon. Next, I replicated other text using the Clash Display font. Additionally, I included images similar to those on the original website. Finally, I double-checked to ensure that the alignment of the elements matched that of the original website.

Figure 3.2a Website 2 Replicating Progress 1 (Text & Logo)

Figure 3.2b Website 2 Replicating Progress 2 (Graphic Elements - Arrow Icon (Outline Stroke))

Figure 3.2c Website 2 Replicating Progress 3 (Graphic Elements - Search Icon)

Figure 3.2d Website 2 Replicating Progress 4 (Graphic Elements - Social Media Icon)

Figure 3.2e Website 2 Replicating Progress 5 (Texts)

Figure 3.2f Website 2 Replicating Progress 6 (Alignment)

Final

Figure 3.2g Website 2 Replication Final Comparison (Left - Original; Right - My Website Replication)

Figure 3.2h My Website 2 Final Replication

CLASS ACTIVITY - HTML: NETLIFY

BACK TO OUTLINE

In Week 4 class session, we have followed our lecturer, Mr Shamsul's guidance to learn about the HTML (Hypertext Markup Language) where I have use TextEdit as a Mac User.

Figure 4.1 TextEdit (HTML)

Later, we have uploaded the HTML to NETLIFY.

Figure 4.2 NETLIFY

Netlify Link: https://firsthtml-hueyyee.netlify.app/

In class, we continuously update this HTML exercise whenever our lecturer teaches new concepts. We keep modifying the website by adding more information as practice for coding in HTML and CSS. Therefore, the link provided below is the modified version of the website.

Netlify Link (Modified): https://mylife-html-classactivity.netlify.app/

EXERCISE 3 - CREATING A RECIPE CARD

BACK TO OUTLINE

In this exercise 3, we were asked to create a recipe card using HTML and CSS. The goal is to design a basic webpage that displays a recipe's ingredients and instructions in a visually appealing format. Choose ONE Recipe from the link below

Create an HTML file named "index.html."
Create a section that displays the following information:

Recipe title
Include necessary images for the page
List of ingredients
Step-by-step cooking instructions

Create an external CSS file named "style.css."

Apply CSS rules to style your recipe card.
Use CSS selectors such as element selectors (e.g., body, h1, ul), class selectors (e.g., .recipe-title, .ingredient-list), and ID selector (e.g., #instructions) to style different parts of the card selectors (e.g., .recipe-title, .ingredient-list), and ID selectors (e.g., #instructions) to style different parts of the card.

Use your creativity to make the page look appealing and interesting

I chose to create a recipe card for yellow cake with chocolate frosting. Although it's simple, it's still iconic.

Recipe Link: https://www.101cookbooks.com/yellow-cake/

1) Figma Prototype

Figure 5.1 Figma Screenshot

Figure 5.2 Recipe Prototype - Figma

2) Adobe Dreamweaver - HTML & CSS

Figure 5.3 HTML Code - Adobe Dreamweaver

Figure 5.4 CSS Code - Adobe Dreamweaver

3) Netlify Website Link - Final Recipe Card

Link: https://hueyyeerecipe-yellowcakewithchocolate.netlify.app/

Figure 5.5 Final Recipe Card (Full Size Screenshot) - PNG

FEEDBACK

BACK TO OUTLINE

Week 1:

Week 2:

Mr. Shamsul commented that the overall prototype created by our group was good. However, he also recommended adding another pop-up notification to indicate successful submission. This notification would display a message saying "Submission Successful" to ensure users are informed that their work has been successfully submitted.

Week 3:

Week 4:

Mr. Shamsul has requested that we should include our progress by providing screenshots. Failure to include these progress screenshots will result in only receiving 2 or 3 marks.

Week 5:

Week 6:

Mr. Shamsul commented that my idea was unique but lacked professionalism, as I initially wanted to design the digital resume as a website tab. Therefore, I later proceeded with my Sketch 4 idea, which Mr. Shamsul mentioned looked better.

Week 7:

Week 9:

Mr. Shamsul asked us to design a layout using CSS as practice to familiarize ourselves with HTML and CSS during the Week 9 class session. After I completed the layout design using CSS, I received feedback that three of the boxes were aligned too far apart and too many spaces in-between. Mr. Shamsul helped me modify my CSS code and also asked me to change my typeface to further enhance the layout.

REFLECTION

BACK TO OUTLINE

Through these exercises, I had the chance to learn more about interactive design, including how to analyze and replicate a webpage. Additionally, I gained knowledge of HTML and CSS, which I applied to my projects, creating a digital resume. Before starting my projects, I tried creating a recipe card to familiarize myself with Adobe Dreamweaver. Overall, I enjoyed completing these exercises as they helped prepare me for the further assignments in this module.

Search This Blog

Siang Huey Yee (0369549)