INTERACTIVE DESIGN - PROJECT 1

-
21.05.25 - 26.05.25 (Week 1 - Week 6) 
Michelle (0373843)
Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's University
Project 1: Website Redesign Proposal
TABLE OF CONTENTS

LECTURES

Week 1 (12/05/25)
Lectures in exercise 1 post.

Week 2 (12/05/25)
Lectures in exercise 2 post.

Week 3 (05/5/25)

Website Structure - foundation of an accessible and user-friendly website. Affects:
  • UX. Target: User finds information easily and keeps engaged. First impression: determining credibility/trust.
  • SEO (Search Engine Optimization): Keywords for the website content.
  • Website performance.
Website's 3 Key Elements (Website deconstruction)
  1. Header: provide quick access to essential information. E.g. logo, navigation, search.
  2. Body: main content. E.g. multimedia elements: text, images, videos.
  3. Footer: bottom of page. E.g. contacts, link to important pages (social medias), sitemaps, copyright information.
Basic contact page: map, address, form.

Organizing Content - Information hierarchy. 
People tend to scan from top to bottom, by looking at the headings and navigation, rarely read texts.
  • Headings (H1, H2, H3)
  • Navigation Menus - help move around website, clear and consise labels. Dropdown menu for complex sites.
Terms
  • Perceive usefulness
  • Micro-interaction: minimum changes 
  • Cut-sorting: arrange complex sites to suit target user's mental model into site navigation.
  • Hero image: full size image/video

Week 4 (12/05/25)
Public holiday, no class.

Week 5 (19/05/25)

Web Standards
  • Websites follow the same Web Structure, both its layout and language, although interface is different.
  • Every designers and web developers use the same language to built websites.
  • Central organization on web standards: World Wide Web Consortium W3C.
  • Newest web language: HTML version 5, CSS version 3 most updated language.
  • Web is first introduced in the 1990's.
How the Web works:
  1. Domain name/URL put in search bar in any search engine.
  2. Connect to a database or domain server. 
  3. Connect to an IP number that's connected to our Wi-Fi. Each server has their own IP.
  4. Download certain data from website, stored in cache.
HTML Structure

Web element/ Web tags, mostly comes in pairs. 
  • Opening tag < >
  • Closing tag </ > - gives an end to the formatting used.
  • Exeptions (Single Tags): 
    • <img/> image
    • <br/> force line break
    • <hr/> horizontal rule/line
Atribute
  • Inside the opening tag.
  • Separate different attributes using space.
  • 2 types:
    • Name
    • Value (in english)
  • old days needs to include double quote mark (straight not nagled one)
  • nowdays can work without

HTML Elements
  • <h1> Headings <h1> 
    • has 6 level (h1 largest - h6 smallest)
  • <p> Paragraph </p>
  • In line element
    • <b> Bold </b>
    • <i> Italic </i>
  • List
    • Parent: 
      • <ol> numbered (ordered - steps) </ol>
      • <ul> bullets (unordered) </ul>
    • Inside: 
      • <li> List <li>
    • Nested list: for dropdown menu
  • <a href ="URL"> Links </a>
    • to the other websites (external)/to other pages in a website/to other section in the same page.
  • <img src="img", alt ="alternative img", title>
Terms
  • TCP/IP: Transmission Control Protocol/Internet Protocol.
  • HTML: Hyper Text Markup Language
Notes
  • A server must have large storage and must work 24/7 for 365 days.
  • Our computer is a local server. 
  • Macbook - TextEdit, Windows - Notepad
  • Saving HTML file needs to be in lowercase (index.html)

INSTRUCTIONS

For project 1, our task is to analyze the strengths and weaknesses of a website, and create a detailed proposal to redesign and improve the website on it's functionality, aesthetics, and performance. 

The project was mentioned and lightly briefed on week 1, but the real starting point for the work was in week 3 (05/05/25) where we're instructed to choose our target website. The detailed instructions on the project along with it's submission spot were shared in week 4.

PROCESS WORK

Redesign Proposal
Chosen Website: CV Nice Socks https://www.juragankaoskaki.com/
Link to Proposal Slides: CV Nice Socks Website Redesign Proposal

In Class HTML Exercise
Figure 1 HTML Practice Website Appearance

Figure 2 HTML Code 1

Figure 3 HTML Code 2

FEEDBACK

Week 1
  • We could start to look for websites we'd want to work on for our proposal. We must to choose wisely as our projects will are related to each other, so how we start is crucial.
  • Avoid e-commerce, news, and Taylor's website.
Week 3
  • Make sure to have organization in e-portofolio.
  • Encouraged to research:
    • Information design - chunking information (break into small paragraphs, add pictures in between).
    • Emotional design - Mr. Norman - color, typeface, layout.
  • UI/UX work is grouped with programming.
  • Steps to upgrade UX - interviews + observation + user testing - collect data, prototype, test, send to designer, programmers.
  • Initial website: Theravāda Buddhist Council of Malaysia. Sir Shamsul approved with the condition that I can make sure I'll be able to improve the website.
Week 5

REFLECTION

Experience
I felt excited to start working on our project for Interactive Design. I believe the concept and the sequence of the projects is an incredible way of learning  UI/UX design, especially since that's my specialization I'm taking. However, due to my still little experience and skill, I faced doubts when choosing the website and building proposal. I worry I will set myself up for trouble if I didn't think wisely and thoroughly enough. There are many ideas popping in my head on how I can redesign the website, but I forfeited it because I haven't had the self confidence to be sure I could make it happen. I hope by the end of this whole course, I could built my knowledge and experience enough to have a slightly higher self confidence in UI/UX design. 

Observations
From analyzing the website from every angle that I could think of, I found out that there's actually so many factors that could make a website either good/bad. Even to little things like the absense of an arrow button that I never once think much of could affect user experience. This opens up my mind, but also kind of frightens me slightly, since there's so many, I'm afraid I might got too focused on one thing and forgot the other.

Findings
I conclude that in order to make a good website, thorough research, ideation, and trials/errors  are needed. And that took soo much time for a beginner like me. So I just manage my time well, and start early, little by little.

Comments

Post a Comment

Popular posts from this blog

TYPOGRAPHY - TASK 1: EXERCISES

-
Image
23.9.24 - 1.11.24 (Week 1 - Week 6) Michelle (0373843) Typography / Bachelor of Design (Honours) in Creative Media / Taylor's University Task 1: Exercises - Type Expression TABLE OF CONTENTS 1. Lectures     1.1 Week 1     1.2 Week 2     1.3  Week 3      1.4  Week 4      1.5  Week 5 2. Instructions 3. Process Work       3.1 Type Expression               3.1.1   Research               3.1.2   Ideation               3.1.3  Final Outcome     3.1 Text Formatting               3.2.1   Kerning & Tracking               3.2.2  Lea...
Read more

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