Interactive Design

22/4/2024- 14/6/2024 / Week 1 - Week 8

Kerly Ooi / 0358726

Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's University

Task 01 / Exercises

CONTENTS

1. Lectures

2. Instructions

3. Exercises

1# Web Analysis
2# Web Replication
3# Creating a Recipe Card (CSS layout)

4. Feedback

5. Reflection

LECTURES

Week 03

Week 04

Week 05

Week 07

INSTRUCTIONS

EXERCISES

Exercise 1 : Web Analysis

For this task, we are tasked with evaluating two websites provided in the given links. We should assess their design, layout, content, and functionality, while also noting their strengths and weaknesses and their impact on user experience. Additionally, we should provide recommendations for any areas that could be improved on the websites. Lastly, compose a brief report outlining your conclusions and suggestions.

What to have in the Analysis :

Assess how well users understand the website's goals and objectives.
Examine the website's visual design and layout, paying particular attention to the artwork, typography, and use of colour.
Evaluate the website's functionality and user-friendliness, including its navigation system, forms, and interactive features.
Check if the content on the website is accurate, clear, and well-organized, and if it's relevant and of good quality.
Test how well the website works, including if it loads quickly, responds well, and works on different browsers and devices.

Deliverables:

Provide a concise summary in a report of 500 words or fewer. To further clarify, you can attach a screen grab of every chapter or page on the website. Verify that the report's formatting (header and subheadings) is obvious.

Website 1 : Aircord

This delicately designed website represents a creative studio based in Tokyo, Japan, managed by an innovative team specialising in the fusion of technology, cinematography, lighting, and sound, as reported by CSS Winner. The platform showcases their remarkable projects and notable partnerships with leading Japanese enterprises dedicated to enhancing urban living standards.

Fig 1.1 Website's main page

Fig 1.2 -

Design Style

The website's main homepage (Fig 1.1) features a minimalist design style that promotes a clean and simple browsing experience with the use of minimal text as well as graphics. This design style provides viewers a sense of refinement in addition to improving visual comfort.

The colour design of the website generates a feeling of luxury, while the font selection creates a contemporary and professional vibe. Moreover, the animated visuals are a powerful demonstration of the company's commitment to producing high-quality design work. These graphic components blend together harmoniously to show the viewer the studio's dedication to quality.

Layout: Visibility

The overall layout of the website keeps things simple so that users can focus on the navigation and major information. Throughout the design, a clear hierarchy is continuously used to communicate the idea that the website is a creative team that is committed to creating an impact.

Content

The developers have a specific goal in mind, and they want to include a lot of images and eye-catching animations to help users navigate their website easily. They also include brief text to help users comprehend how the pages are set up. Displaying the "View Projects" button clearly beneath the dynamic graphics is a good way to make sure readers can simply navigate to the webpage.

Fig 1.3

Fig 1.4

Functionality

Light and dark mode webpage designs are added and positioned beneath the page to accommodate visitors' taste for aesthetics and to enable them to switch to a colour scheme that suits them best. The website's button menu and navigation seem seamless because of the hover animations and the arrow's visual direction.

Fig 1.5

Fig 1.6

Content relevance & Quality

The creative design company Aircord is introduced in depth in each component of this well-designed portfolio website, along with the services they can provide prospective customers. The contact information portions of the website are more concealed, despite the fact that there are opportunities provided for potential customers to get in touch with them via phone numbers and emails.

Compatibility

To enhance mobile performance, developers removed animations like cursor graphics, acknowledging mobile devices' limited capabilities versus PCs.

Fig 1.7 & Fig 1.8

Strengths

As for the whole animation and design are interactive, viewers are drawn in and feel more a part of the page. Other than that, with its seamless animations, for examples, the gliding transitions between different page sections, the websites responds to every input, enhancing the user's surfing experience. Moreover, the website's straightforward and dependable design language also enables visual contact with users.

Weaknesses

This website could put a burden on low-end PC and mobile device performance by requiring a lot of GPU resources to achieve a smooth animation and it might also slower down the load speeds compared to non-animation websites.

Website 2 : Pebblelife

Pebble is a all-electric RV invented for the purpose of environmental friendly and their goal is to enable everyone to travel with their lifestyle, by making it as easy, convenient, and attractive as we can. The all-electric RV Pebble Flow is made for flexibility to get up and go.

Fig 1.9

Design Style

The website's main homepage showed a RV car parked outdoors, surrounded by greenery. The care seems to be the focal point of the homepage. The outdoor setting suggests a natural and relaxing vibe.

The choice of font and size gives it a modern and attention-grabbing feel. Moreover, the overall colour scheme includes greens from the foliage and whites from the webpage background. This combination feels fresh and inviting.

Layout : Visibility

The layout is well-complemented by the design arrangement, which provides both utility and easy-to-use operation. The logo is placed in the upper left corner and is easily recognisable. It also functions as a back-click function that makes it easy to return to the home page, which adds to the overall convenience for the user.

Content

The information showed regarding the RV are all stated clearly with explanation and images.

Fig 2.0 & Fig 2.1

Fig 2.2

Functionality & Usability

Interactive elements :

The seamless transition of information unfolds as words materialise, gracefully fading as new insights emerge, creating a captivating scroll of continuous revelation.

Fig 2.3

Navigation :

At the top right corner, there are navigation button called "Hamburger button" for user-interaction and when pressed, it will list out few topics such as what is this product about, the company etc for all to take a deeper understanding of this product.

Fig 2.4 & 2.5

Fig 2.6

Fig 2.7 & 2.8

Fig 2.9 & 3.0

Content relevance & Quality

PebbleLife RV's goods is of the highest quality and is highly relevant; it offers smart and useful advice that is especially suited to the RV lifestyle. Offering insightful advice and motivation for living the RV lifestyle, PebbleLife RV is a great resource for both seasoned RV lovers and those new to it, offering valuable insights and inspiration for life on the road.

Compatibility

Recognising the inherent limits of mobile devices compared to PCs, developers have chosen to simplify animations, such as the guiding images (e.g., the orange button), in an attempt to optimise mobile performance.

Fig 3.1 & 3.2

Strengths

A nature colour palette is used consistently across the whole website. Earth, sky, water, and greenery are examples of natural components that serve as inspiration for natural colours. They create emotions of peace, tranquillity, and a sense of being a part of the surroundings. Including these colours into the website's designs may make people feel good and it will help with establishing a deeper connection with the users.

Weaknesses

There could be an improvement in the user experience, however load times and surfing times might go up. Additionally, the use of transitions and interactive components may cause the website to load slowly when browsing across it.

Exercise 2 : Web replication

We were to select two websites from the list of links and duplicate them using Illustrator for this task. It was necessary to concentrate on the colour scheme, typeface, and layout. However, we can substitute a picture that is close to the one on the site even though it isn't exactly the same.

Website 1 (Click to view)

I took a screen grab of the webpage before I began to replicate. We were taught step by step by our lecturer.

Below are the steps to capture a screenshot of a webpage:

Right-click (Inspect)
Make necessary adjustments to make sure the website appears fully (all panels are visible)
Click the third dot
Type (Run > Screen) -> Run command Select Take Full-Screen Snapshot -> Completed

Progresses :

Fig 4.1

Final outcome:

Fig 4.2

Website 2 (click to view)

Progresses :

Fig 4.3

Final outcome:

Fig 4.4 Final outcome

Exercise 3 : Creating a Recipe Card

In this assignment, we were to select a recipe from the website provided(101cookbooks) and create a recipe card using HTML and CSS. The ingredients and instructions should be presented in an appealing way on the web page.

Criteria :

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 selectors (e.g., #instructions) to style different parts of the card.

My chosen recipe : Thousand Layer Lasagna

Research

I did some researching in Pinterest to get inspirations so that I could get a basic sense of what a recipe card should look like.

Fig 5.1 Research

Image cropping (Photoshop)

Crop ingredients image in Photoshop so that the background is clean and clear.

Fig 5.2 Research

Sketching/ Layout in Figma

HTML & CSS

Process:

Attempt # 1

First, I input all of the main information such as recipe title, instructions and ingredients into the HTML file.

Then, I start adding other elements like the background colour, different text styles, container and descriptions for each ingredients into the CSS file. In the images below, a separate file named "style.cc" is utilised, which controls the whole look of the website.