INTERACTIVE DESIGN / PROJECT 2: WORKING WEB PAGE

03/06/2025 - 17/06/2025 (Week 07 - Week 09)

Aveline Kristie / 0372310 

Interactive Design / Bachelor of Design (Honours) in Creative Media / School of Design

Project 2: Working Web Page

---

TABLE OF CONTENTS

1. Lectures

2. Instructions

3. Tasks

---

1. LECTURES

Week 7

CSS Box Model & Display

Display Property

• Controls how elements appear on the page.

• Two common types:

  • Block: starts on a new line and takes full width (e.g. div).

  • Inline: stays in line with text (e.g. span).

• Can be changed to:

  • Inline-block

  • Flex

  • Grid

• You can override default display settings to customize layout.

Box Model

• Every element is a box with 3 main layers:

  1. Padding: space inside the element

  2. Border: edge of the element

  3. Margin: space outside the element

• Units used: px, em, %, etc.

• Helps in controlling spacing and layout.

Why Use div

• Commonly used for grouping and creating layout structure.

• Often combined with layout techniques like positioning or flex.

Flexbox (Flexible Box Layout)

• A layout method that works with the box model.

• Uses a parent (flex container) and children (flex items).

• Key properties:

  • Flex direction: row or column

  • Justify content: controls alignment along the main axis

  • Align items: controls alignment along the cross axis

---

2. INSTRUCTIONS

---

3. TASKS

For this project, I redesigned the website of Tag Team Signs, a family-run signage business. The goal was to improve both visual design and user experience (UX), based on weaknesses observed in the original site. These included outdated visuals, inconsistent typography, poor hierarchy, lack of interactivity, and weak navigation structure.

From the start, I knew I wanted to fix a few big issues: layout confusion, inconsistent fonts and colours, lack of responsiveness, and just the overall feel of the site being flat. I also didn’t want everything on one long page anymore, so I split the content into multiple landing pages to make things clearer and easier to navigate.

Fig 3.1 Logo Replicating Process

I designed the prototype using Figma, with five main pages: Home, About, Services, Portfolio, and Contact. I stuck with the red-black-white colour scheme to stay true to the brand, but I used red more carefully; like for accents, buttons, and in some sections where it really stands out, like the "Portfolio" section and the opening part of the "About Us" page. I also used Google Fonts to make the text more modern and consistent. For an extra detail, I even recreated the Tag Team Signs logo in Adobe Illustrator and added it to the navigation bar in Figma to keep things looking professional.

The navigation is much more user-friendly. The top menu is clean and stays the same on every page (sticky), so users always know where they are. I also added hover effects to buttons and links to make the experience feel more interactive and polished.

One of the biggest improvements is the "Portfolio" section. I added a photo slider, so users can scroll through examples of the company’s work, which feels way more engaging than just static images. Plus, I included a button that links directly to their Instagram page, so visitors can see the detail and even more real-time projects. It helps give the brand more personality and connects the website with their social presence.

Fig 3.2 Dropdown Menu

For the "Contact" page, I built a simple but clear contact form. One feature I added was a dropdown menu that lets users pick the type of inquiry they’re reaching out about, which makes the form feel more personal and practical. I also included a small interactive keyboard typing effect that I learned from a YouTube tutorial.

As for the breadcrumb trail I originally thought about including, it honestly didn’t feel necessary in the end. My website layout is pretty simple, with only top-level pages and no subpages or deep navigation. Adding breadcrumbs would’ve been more visual clutter than actual help, so I left it out intentionally. Sometimes good UX design is about knowing when not to add things, and this felt like one of those cases.

Fig 3.3 Updated Design

After the feedback session, Mr. Shamsul suggested that I remove the stroke from the numbers and make all the numbers a consistent size for the website. So, I made all the numbers 50pt. He also said that my footer would look better if it was wider, so it wouldn’t feel too compact. So, I increased the height of the footer. 

Fig 3.4 Updated Design

Lastly, I added a feedback pop-up on the contact page. After the user clicks the submit button, it now shows a message: "Are you sure you want to submit?" This helps the user clearly understand that their form is being submitted.

Fig 3.5 Overall Process

Link to my prototype: 

https://www.figma.com/proto/K0l8Pipfq1czNgmX1vxiUP/Prototype?node-id=0-1&t=g07Of2JSXFnNf9xN-1