Labels

Interactive Design / PROJECT 1: Website Redesign Proposal


13/5/2025 - 27/5/2025 (Week 4 - Week 6)
Daphne Lai Yu Cheng / 0366380
GCD 60904 / Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylors' University
PROJECT 1 / Website Redesign Proposal

LIST/JUMP LINK

Week 4 (13/5/2025):

Web Standards:

Structure of a web page is very important in helping readers to understand the message we are trying to convey and to navigate around the document.

  • Understanding structure
  • Learning about markup
  • Tags and elements
HTML: < >
CSS: { }
Javascript (Hyper Interactive): ( )
  • In between the HTML code is the document you see in the browser.
  • Starts from left to right, top to bottom.
HTML comes in a pair, consisting of:

  • Opening tag: <element>
  • Closing tag: </element>

<p lang=“eng-us”>Paragraph in English</p>

Attribute Name: lang
Attribute Value: eng-us


HTML Codes

  • <html></html>
  • <head></head>
  • <body></body>
  • <title></title>
  • <p></p>: Paragraph
  • <br></br>: Force line break
  • <b></b>: Bold
  • <i></i>: Italic
  • <ol></ol>: Ordered list (Numbered)
  • <ul></ul>: Unordered list (Points)
  • <li></li>: List item
  • <h1></h1> (h1,2,3,4,5,6): Headings
  • <a></a>: Links
  • <img></img>: Adding image

Writing Links (Example):

<a href=“http://www.imdb.com”>IMDB</a>

Link: http://www.imdb.com
Text users click on: IMDB

Adding Image (Example): 

<img src=“image/foto.jpg” alt=“alternative text” title=“title of the image”/>

Chosen Image: image/foto.jpg


Example of Nested Lists:
Figure 1.1 Nested Ordered & Unordered List

During practical class, Mr Shamsul taught us how to code our first web page:

STEPS: Notepad > Type codes > Save > Change file name to 'index.html' and All Files > Create new folder in 'Desktop' and name it appropriately > Click on file to launch web page

After typing the heading to test try, Mr Shamsul told us to continue on the web page consisting of:

  1. About Me (2 paragraphs, 20 words per paragraph)
  2. My Family (2 paragraphs, 20 words per paragraph)
  3. My Favourites: food, movies & friends (List at least 3 items for each category, use <ol></ol> OR <ul></ul>)

We were also required to use <h1> to <h3> for headings.

Figure 1.2 My First Web Page (Before) (13/5/2025)


Figure 1.3 Codes (13/5/2025)


Figure 1.4 My First Web Page (Updated) (13/5/2025)

This is the updated version, I decided to do some tweaking and decorations to my web page to make it look more put together because I noticed there were typos and I did not use upper case for the categories under 'My Favourites'.


Week 5 (20/5/2025):

HTML & CSS:

ID Attribute & Class Attribute

Block Elements: Appear to start on a new line in the browser window.

  • <h1>
  • <p>
  • <ul>
  • <il>
Inline Elements: Appear to continue on the same line as their neighbouring elements.
  • <b>
  • <i>
  • <em>
  • <a>
  • <img>

CSS (Cascading Style Sheet)
  • Create rules that specify how the content of an element should appear. (Visual).
  • Contains 2 parts: Selector & Declaration.
  • Declaration is made up of 2 parts; Property & Value.

Example of Selector & Declaration:

p{
    font-family: Arial;
}
Selector: p
Declaration: font-family: Arial;

Example of Declaration breakdown:

h1, h2, h3{
    font-family: Arial;
    color: yellow;
}
Property: font-family: & color:
Value: Arial; & yellow;

  • src: source
  • <div>: to create layout (generic html element)


    • <link> element can be used to tell the browser where to find the CSS file used to style the page. It should have 3 attributes:
    • href; specifies the path to the CSS file.
    • type; specifies the type of document being linked to. Value: text/css.
    • rel; specifies the relationship between the HTML page and the file linked to. Value: stylesheet.
    <style>
    • Value should be text/css.

    Figure 1.5 CSS Colours, Background, Text Formatting & Fonts

    During class, we learnt how to add/change images, colours and typefaces for our webpage.

    Figure 1.6 Codes (Updated) (20/5/2025)


    Figure 1.7 My First Web Page (Updated) (20/5/2025)


    Week 6 (27/5/2025):

    CSS SELECTORS:
    1. Universal Selector:

    *{
        /*CSS styles go here*/
    }

    2. Type Selector:

    p{
        /*Styles all <p> elements*/
    }

    3. Class Selector:

    .class-name{
        /*Styles elements with class="class-name"*/
    }

    4. ID Selector:

    #id-name{
        /*Styles the element with id="id-name"*/
    }

    5. Group Selector:

    h1, h2, p{
        /*Styles h1, h2, and p elements*/
    }

    6. Descendant Selector:

    div p{
        /*Styles <p> elements inside <div>*/
    }

    7. Child Selector:

    div > p{
        /*Styles <p> elements directly inside <div>*/
    }

    8. Pseudo-class Selector: 

    a:hover{
        /*CSS styles go here*/
    }
    INSTRUCTIONS

    Project 1: Website Redesign Proposal (13/5/2025)

    Objective:
    The objective of this assignment is to develop a comprehensive proposal for the redesign of an existing website. The proposal should
    demonstrate your ability to critically evaluate a website’s design and functionality, and to propose design solutions that enhance user experience, aesthetics, and performance.
     
    Assignment Description:
    You are required to select an existing website which you feel has several design and UX issue and prepare a detailed proposal for its redesign. The proposal should address the following key aspects:


         
    Website Analysis:
     
    Current Design Evaluation:
    Provide a critique of the current design, focusing on layout, color scheme, typography, imagery, and overall aesthetics. User Experience (UX): Assess the site’s usability, navigation, accessibility, and responsiveness. Identify pain points or areas that could be improved.
     
    Functionality:
    Evaluate the website’s performance, including load times, interactivity, and compatibility across different devices and browsers.
       
    Redesign Goals:
    Objectives: Clearly define the goals of the redesign (e.g., improved usability, modernized look, enhanced brand alignment).
     
    Target Audience:
    Describe the intended audience for the redesigned website and how the new design will better meet their needs.
           
    Design Proposal:
    Visual Design Concepts: Present your ideas for the new visual design, including visual references, mood board and wireframes. Discuss the rationale behind your design choices.
     
    UX Enhancements:
    Propose changes to improve user experience, such as simplified navigation, better content organization, or enhanced interactivity.
    Technical Considerations: Outline any technical updates or changes, such as optimizing for mobile devices, or improving load times.

    Submission:
    Submit your E-portfolio link that includes an embedded link of your proposal. The proposal can be prepared using any form of presentation application such as Google Slide or Canva.


    CHOSEN WEBSITE: https://bubs.my/


    Figure 2.1 Chosen Website (13/5/2025)


    Website Redesign Proposal Slides (27/5/2025)

    2.2 Website Redesign Proposal (Canva Slides) (29/5/2025)


    Website Redesign Proposal Slides (PDF) (27/5/2025)

    2.3 Website Redesign Proposal (PDF) (29/5/2025)

    FEEDBACK
    -
    REFLECTION

    Throughout this project and class activities, I have learned a lot by critically analysing the issues and problems of the website I selected. Coding for the first time was fun but a little confusing as I did some mistakes during class, I hope to eventually get used to them. As a user myself, navigating the original website felt confusing and just “okay.” Although the site was responsive, the information felt cluttered and disorganised which made it harder for me to stay engaged. This experience helped me realise how much a well designed website contributes to a smooth and enjoyable user experience, while a poorly designed one can make users lose interest quickly.

    Apart from Task 1, I also enjoyed the class activities. Although I sometimes still find them confusing and challenging, I’m still getting the hang of things and slowly becoming more familiar with them. One concern I have is my memory as I often struggle to remember certain steps or codes which worries me since I will be specialising in UI/UX in my second year.

    Overall, I find the tasks assigned to us both helpful and interesting. They have given me a strong foundation to build on and I’m motivated to keep improving as I continue my journey in interactive design.

    Labels:

    Comments

    Post a Comment

    Popular Posts