Interactive Design - Project 1
SHIMANLIN,（0375858)
BACHELOR OF DESIGN(HONOURS)IN CREATIVE MEDIA || TAYLOR'S UNIVERSITY
INTERACTIVE DESIGN - Project 1
TABLE OF CONTENTS
1. Lectures
2. Instructions
3. Task
4. Reflections
LECTURES
Week 3
This week, we focused on understanding how content is organised within a website. A typical webpage consists of three main parts:
-
Header
-
Body
-
Footer
In addition to layout, we also looked into content organisation. Structuring information using headings like H1, H2, and H3 helps establish visual and logical hierarchy, which improves readability.
We also discussed navigation design, where clarity and simplicity are essential. Menu labels should be direct and meaningful so users can find what they need without confusion.
Week 4
This week we learned how web pages work and gained a basic understanding of HTML and CSS, two standard markup languages for web pages.
Figure 1.1: The Web - PDF / Week 4 (6/5/2025)
A web page usually consists of three core structures:
- Structural understanding
understand how the basic layout of a web page is constructed.
- Markup language learning
- Tags and elements
Most HTML elements consist of a start tag and an end tag, such as a paragraph that starts with <p> and ends with </p>.
We also learned about attributes, which are used to provide additional information to an element and are usually written in the start tag in the form of "attribute name = attribute value" (such as: href="...").
Some important HTML structures include:
- <body>
- <head>
- <title>
We also learned how to use <h1> to <h6> tags to create heading levels, and how to use <p> to write paragraphs.
In terms of text formatting:
- Bold
- Italic
Regarding lists, we have mastered two types:
- Ordered lists (<ol>) are arranged with numbers;
- Unordered lists (<ul>) use bullet points.
- Each item needs to be wrapped in a <li> tag.
Finally, we came into contact with the concept of nested lists, that is, nesting another sublist in a list, which is suitable for expressing content levels.
We further mastered the use of basic HTML through exercises such as inserting pictures and adding hyperlinks.
Week 5
Figure 1.3 HTML & CSS PDF by Mr. Shamsul / Week 5 (20/5/2025)
Week 6
Figure 1.4 CSS Selector PDF by Mr. Shamsul / Week 6 (28/5/2025)
- Current Design Evaluation: Provide a critique of the current design, focusing on layout, colour 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.
- Objectives: Clearly define the goals of the redesign (e.g., improved usability, modernised look, enhanced brand alignment).
- Target Audience: Describe the intended audience for the redesigned website and how the new design will better meet their needs.
- 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.
- Propose changes to improve user experience, such as simplified navigation, better content organisation, or enhanced interactivity.
- Technical Considerations: Outline any technical updates or changes, such as optimising for mobile devices, improving load times, or enhancing security features.
Experience
For this task, I started by sketching out rough ideas for the website layout. Although I didn’t complete a full wireframe, the sketching process helped me visualise the structure and flow of content. It was useful in clarifying how each section of the website could be arranged. Compared to previous tasks, this one felt more conceptual, but I still enjoyed the planning process. Creating a simple slide to present my ideas also helped me stay organised.
Observations
I observed that consistency in navigation is essential, especially when thinking about users on different devices. During the sketching process, I realised how small design choices — like button placement or menu layout — can greatly affect usability. It’s important to test designs across different platforms to ensure a smooth experience.
Findings
Throughout this task, I realised that early-stage planning plays a significant role in shaping the final outcome. Even just working with sketches revealed areas I hadn't considered before, such as content hierarchy and visual spacing. Another important takeaway was the role of feedback — without early input, it’s easy to overlook practical issues in the concept. Moving forward, I plan to allocate more time to refining my initial ideas and actively seeking feedback during the early stages to avoid delays later on.
Comments
Post a Comment