INTERACTIVE DESIGN

21.05.25 - 20.06.25 (Week 6 - Week 9)
Michelle (0373843)
Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's University
Project 2: Website Redesign Prototype

TABLE OF CONTENTS

1. Lectures

LECTURES

Week 6 (12/05/25)

CSS: Rule how the style of content in an element displayed.

2 different type of element

Block element: elements added in a new line (e.g. body, p, h1). By default, the display width of block element is 100%.
Inline elements (e.g a, bold, italic).

ID & CLASS attribute can be applied to all HTML to uniquely identify (give a name to element)

2 elements can't have the same ID value.

CLASS

Can have several html with the same value.
Property and value separated with a colon ends with semi colon

Method to employ CSS

External CSS (most common): create a separate document for CSS, then link to the HTML file. Recommended for several HTML files
Internal CSS: include CSS in the HTML. Best for singular HTML

Dreamweaver
Image needs to be in the same folder.

CSS Selectors

Change HTML element receives specific styles. A rule to change HTML element appearance

Types:

Universal
Element
ID Selector
Class Selector
Descendant Selector
Child
Pseudo-class
Link
Hover
Visited
Active
Pseudo-element

Reason for the many selector

Specificy
Structure
Attribute-Based Selection
Pseudo-Classes and Pseudo-Elements (::)
Responsive Design
Stateful Interactions
Cross Browser Compatibility
Different browser can interpret/translate html codes differently.
Ease of Maintenance
Accessibility
Ascesibility tools
Change appearance

Comment/Deactivated Code

CSS: /* {code} */

HTML:

Week 7 (02/06/25)

Public holiday, no class.

Week 8 (09/06/25)

Class attribute -> to select differently.
Dreamweaver
Every new project -> manage sites -> new folder.
Select folder, right click, new folder (sub-directory), name it: images.
When opening/closing tag is selected, the pair is automatically highlighted.

Value doesn't have to be the same with the content, the name should be the function of the element - to let us know what it is.
Class value can't have spaces.
Content cannot have special character, use code (&...).
Padding (space around element), margin (space between element), border.

Week 9 (09/06/25)

Dropdown menu tutorial.

INSTRUCTIONS

For project 2, we are instructed to create the prototype for our chosen website according to our redesign proposal.

PROCESS WORK

In Class HTML Exercise

Figure 1.1.1 Selector HTML 1

Figure 1.1.2 Selector HTML 2

Figure 1.1.3 Selector HTML 3

Figure 1.1.4 Selector HTML 4

Figure 1.2.1 Selector CSS 1

Figure 1.2.2 Selector CSS 2

Figure 1.2.3 Selector CSS 3

Figure 1.2.4 Selector CSS 4

Figure 1.3.1 Selector Preview 1

Figure 1.3.2 Selector Preview 2

Figure 1.3.4 Selector Preview 4

Figure 1.1 Dropdown Menu HTML

Figure 1.2.1 Dropdown Menu CSS 1

Figure 1.2.2 Dropdown Menu CSS 2

Figure 1.2.3 Dropdown Menu CSS 3

Figure 1.3 Dropdown Menu Preview

Prototype

Original Website: CV Nice Socks https://www.juragankaoskaki.com/

I created my prototype using Figma.

Final Result

Nice Sock - Redesign Prototype Link

Rationale

The prototype has complete structure with a header, body, and footer. The header was created in the form of navigation, with linked-buttons which directs user to the different pages of the websites. The prototype is summarized into 3 pages: Home, About Us, and Contact. These navigation buttons change color when clicked to indicate what page is selected currently. Each page has a locked header, making the navigation bar always presented for easy access between pages. Moreover, each page is facilitated with a back-to-the-top-button for intra-page movement followed by a footer for further general information (location, working time, and contact). On the homepage, an outline of the whole website is presented with linked-buttons to the individual pages (on my case is: more about us and contact arrow on the footer). In addition, the buttons implement feedback for user from hover effects.

The flow of the website is intentional. Homepage is dedicated to attract and headline everything. Right after is about us to reassure customers with details, strengths, and specialty of the business. Next up after background information was given, is the products and services for customs for technical and contextual details. Lastly, then a contact page dedicated to encourage interaction.

The objectives from the redesign proposal of the website was to make a website with strong branding, concise structure, and quality content. All the above was translated to the prototype. First, the prototype displayed a consistent theme, from its use of type (Poppins - modern, easy-to-read), color (red, gray, black, and white - radiates confidence and professionalism), shapes (circles & squares - add visual interest while creating a subtle visual rhythm), and sizing for all of its elements. All the different types of elements were distinguished apart by use of various font weight, color, and size according to the information hierarchy.

This repetition in aesthetic gives emphasis on the brand's identity, creating a more unique and memorable experience for user. Second, the structure of the prototype is made very simply and neat for easy understanding with straightforward the navigation bar at top, direct content, and compact footer for further information.

Third, the website's content brief yet straight-to-the-point, without unnecessary details/elements/features to avoid boring and overwhelming the user. Every word and image is there for a purpose. The images used now looks harmonious as it has certain standard and criteria (e.g. for products all is in square shape, the background is plain, and the sock position are the same). The texts are minimum but convincing and informative, providing all the important information needed for user. The different sections of content are also separated with spacings.

Finally, the concept of "less is more" is applied in this prototype. A sufficient use of interactivity is aimed to improve the website's performance (faster loading) and accessibility which the original website have problems in. Furthermore, the design is scalable for future updates. Its modular components and uniform styles allow for easy addition of new content or pages as the company grows. This prototype supports the company’s goals of better branding, clearer communication, and enhanced customer engagement.

FEEDBACKS

Week 8

For prototype minimum create 3 pages: homepage, core, and contact.
For final project must have 5 pages, all needs navigation & footer.

Week 9

The heading and font sizes are too big.
Contact form to wide, could add image of map beside it.
All pages must have a footer.

REFLECTION

Experience

I enjoyed the flow of the project, from project 1 creating proposal, to project 2 making a prototype, to then later final project making an actual website. However I do struggle with the timeline for project 2, especially since the class for my section was delayed due to public holidays that somehow keeps appearing on Monday. Everything felt rushed. I felt a bit overwhelmed by lectures and tutorials in class, followed by the need to do at home individual exploration from other sources, and actually doing the prototype took many many time for a real-beginner like me. I'm not a quick learner to, so trying to digest and apply all the new information was really a challenge for me to learn! I am grateful to be faced with these obstacles, because from them I can truly learn most, though the process of going through them is not so pretty. Also in balance with other modules and personal goals, I find it hard to reach my initial expectations and high desires for this project. I know there are many things still possible for me to explore on, but just not in this timeline for me. I will definitely explore more on prototypes outside of this module and project, because I really do enjoy the process of making it. Its just that sometimes the limited time given seizes the joy out, replacing it with stress and worries instead. Despite it all, I'm glad I went through it all. And I'm grateful for Sir Shamsul's patience, understanding, and goofiness in class. The positive energy really radiates and infects me.

Observation

The world keeps moving, and time doesn't wait for us to be ready. Everybody is focused on themselves, and so must I. Occasional luck and blessing may come, but most of the time I must be able to work independently and be prepared for whatever's to come.

Findings

I realized that sometimes it is just a matter of finishing. Only a finished art could be judged and reflected on. So, no matter how I felt about it, at the end of the day it must be done.

Search This Blog

Michelle (0373843)

INTERACTIVE DESIGN - PROJECT 2