INTERACTIVE DESIGN - EXERCISE 1: WEB ANALYSIS

-
25.09.25 - 0.0.25 (Week 1 - Week 0)
Michelle (0373843)
Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's University
Exercise 1: Web Analysis

TABLE OF CONTENTS
1. Lectures
2. Process Work
3. Feedbacks
4. Reflection

Lectures

Week 1
Introduction to the module. No lectures yet.

Week 2: Usability Principles

Process Work

1st Website: Takuya Oshima

Figure 1.1 Homepage
Source: CSSWinner

Purpose & Goal

The website above is a portfolio of Takuya Oshima, a web designer/front-end developer. The website displays all the works she has created, her profile, and contact. Its purpose is to showcase Takuya's capability in designing websites, from planning, directing, designing, developing, until marketing. The website serves as a prove of her skills and ability, communicating her experiences in designing websites.

Visual Design & Layout

Theme
Overall the website portrayed a minimalist design without any decorative elements.

Color
The website only uses 2 main colors, which are black and white, creating a monochrome. It plays with opacity, so shades of grey appear to create contrast and text hierarchy.

Typography
Only one font is used throughout the whole website. It uses a refined serif typeface with variations of thick-thin and smooth curves radiating elegant look. The letters have clean shapes and are well spaced allowing readability. The website utilizes text sizes, formatting, and alignments to create separation and visual contrast. For titles/texts needing emphasize, it applies larger size, thicker weight, wider spacing.

Imagery
The website barely has any images. Most of its contents are in texts. The only imagery present in the website are in the homepage page as background, simple icons for buttons, and hovering effect for the works page.

Layout
The layout of contents in the website is the key point of the design as it is unique and different from the norm so it gives it character. For a website to only have texts and very minimal graphic, it tends to look boring/uninteresting. The playful arrangement and layout of the texts provides visual interest as well as acting as a distinction between sections, typographic hierarchy, and functions.

Functionality & Usability

Navigation

Figure 1.3.1 Navigation

The navigation is quite standard, it's kept simple and straightforward. Since the overall design is very minimalistic, the navigation buttons are clear and easy to see.

Interactive Elements
There are a few decorative interactive elements in the website, such as are sparkling animation in the home page, moving circle cursor, and never-ending text moving horizontally. The rest interactive elements that are present are used to provide feedback to user's interactions, such as:
  • Hover linked texts that are button - underline animation
  • Hover buttons - change opacity - act as feedback

Quality & Relevance

Quality
!

Relevance
!

Performance
Load Time
!

Responsiveness & Compatibility
Right click - inspect



2nd Website: Joy from Africa


3rd Website: Elio

Feedbacks

Week 1
  • Come earlier, class starts exactly at 8am.
  • In class need to follow up with tutorials - if late, can't keep up > fall behind.
  • Learn HTML & CSS, deploy on a server.
  • Software: Adobe Dreamweaver/Visual Studio Code (prepare by week 3).
  • Try to choose websites from different categories for diversity.
  • Bring paper for week 2 group activity.
  • There's a reason websites win an award, even though they might look usual.
  • Screen capture or screen record (gif format) the website to support explanation.
  • If there's any attendance error, inform and contact within 2 weeks.
Week 2
!

    Reflection

    Experience
    !

    Observation
    !

    Findings
    !

    Comments

    Post a Comment

    Popular posts from this blog

    DESIGN PRINCIPLES - TASK 1: EXPLORATION

    -
    Image
    10.02.25 - 16.02.25 (Week 2 - Week 3) Michelle (0373843) Design Principles / Bachelor of Design (Honours) in Creative Media / Taylor's University Task 1: Exploration TABLE OF CONTENTS 1. Instructions 2. Lectures 3. Selected Design & Explanation 4. Feedbacks INSTRUCTIONS LECTURES Elements of Design Fig 1.1 Design Elements (inspiration: https://www.onlinedesignteacher.com/2015/11/design-elements_91.html ) 1. Point (the simplest element of design) - Its movement in space creates other two- and three-dimensional figures. 2. Line - Indicates directions, define shapes and space boundaries, suggest motions, form patterns and textures. 3. Shape  (2D area) - Visible when a line creates an enclosed area or an apparent change in color, texture, or value (light/dark), could be geometric or organic. 4. Form (3D area) - Creates volume when it encloses space, in 2D media it must be ...
    Read more

    INTERCULTURAL DESIGN - CONTINUOS ASSESSMENT

    -
    Image
    07.02.25 - 21.03.25 (Week 1 - Week 7) Michelle (0373843) Intercultural Design / Bachelor of Design (Honours) in Creative Media / Taylor's University TABLE OF CONTENTS  1. Instructions 2. Lectures 3. Project 1: Proposal 4. Project 2: Field Study 5. Final Project 6. Feedbacks 7. Reflection INSTRUCTIONS LECTURES Week 1 (07/02/25) - Intercultural Design  In our first week, we are introduced to the module which consists of: information on the coordinators along with their contacts, learning platform, MIB, also physical and online meeting schedule. Then, we were given a lecture on Culture & Design , the summary are below. Visuals are: 1. Everything that can be seen (nature is not culture unless there's representation attached to it). 2. Everything produced/created by humans that can be seen which serves a purpose (e.g. has functions,...
    Read more

    DESIGN PRINCIPLES - TASK 2: VISUAL ANALYSIS & IDEATION

    -
    Image
    17.02.25 - 9.03.25 (Week 3 - Week 5) Michelle (0373843) Design Principles / Bachelor of Design (Honours) in Creative Media / Taylor's University Task 2: Visual Analysis & Ideation TABLE OF CONTENTS 1. Instructions 2. Lectures 3. Visual Analysis of Selected Work 4. Ideation 5. Feedbacks INSTRUCTIONS LECTURES Visual Analysis Definition : A method to understand how formal design properties communicate ideas, content, and meaning trough its visual elements and principles. Practicing visual analysis improves critical judgement skills in interpreting designs/artworks. 3 Phases of Visual Analysis Observation : The process of closely looking and thinking, and finding the visual elements of a design on our own, without any research beforehand. Analysis : Reevaluate our observations on the ...
    Read more