INTERACTIVE DESIGN - PROJECT 1

14/5/2025 - 28/5/2025 ( Week 4 - Week 6 )

SUN YUTONG (0377440)

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

Project 1-Web Redeisgn Proposal

---

LECTURE

Lecture 4: The Web and Language

Importance of Web standards:

Adopt Web standards for development

Enhance cross-platform compatibility

Reduce the risk of users being unable to access

Improve the maintainability and sustainability of the website

<h1> Main title

<h2> Subtitle

<h3> Subtitle

<p> </p>

<b> Font bold

<i> Font italic

Ordered list: <ol>

Unordered list: <li>

<img src="img", alt="alt img", image name>

Lecture 5: HTML & CSS

CSS Introduction:

Used to set the appearance style of HTML elements, such as color, font, spacing, etc.

CSS style classification:

• Color setting
  Text color: color
  Background color: background-color
  Border color: border-color
• Background
  Background image: background-image
  Repeat: background-repeat
  Fixed/scrolling: background-attachment

Lecture 6: CSS Selector

What are CSS selectors?

CSS selectors are used to select elements in an HTML page and set their styles (such as color, font, spacing, etc.).

It is one of the fundamental tools of web design, allowing developers to precisely control the appearance and layout of a web page.

Common selector types:

ID selector: #id

Class selector: .class

Descendant selector: .container a

Descendant selector: ul > li

Pseudo-class selectors: a:hover, :focus

Pseudo-element selectors: p::before, ::after

---

INSTRUCTIONS 

---

PROJECT 1 - WEB REDESIGN PROPOSAL

My chosen website link: https://propertyinvestorsnetwork.co.uk/

 Visual Design (UI) Issues：

• The images are used sporadically and the style is not unified.
• The large image at the top of the homepage is blurry and lacks visual appeal.
• The fonts are inconsistent and the visual style is confusing. 
• There is no clear distinction between titles and paragraphs, and the reading experience confusing.
• The colors are messy and inconsistent.
• There is no clear primary, secondary or accent color for the information layer

User Experience (UX) Evaluation:

Navigation issues:

• The header menu is overcrowded with items, making it hard to navigate
• Navigation lacks visual hierarchy
• Lack of eye-catching call to action

Mobile device issues:

• Layout does not scale well on small devices
• Text and images are not optimized for touch
• Fonts are too small or dense for mobile viewing

Usability issues:

• Form page is too long and difficult to understand
• No feedback after submitting the form
• No navigation and path indication

Visual Design Assessment:

Confusing layout: Lack of spacing and grouping between content makes it difficult to navigate.

Inconsistent color scheme: Dark backgrounds and inconsistent highlights reduce readability.

Inconsistent typography: Inconsistent font sizes; lack of clear distinction between headings and body copy.

Lack of visual rhythm: Lack of alignment and spacing between visual elements, and dense text content make the website look cluttered and outdated

Wireframe:

Fig 1.1 Redesigned home page

Fig 1.2 Redesign the form page

Fig 1.3 Redesign the event page

FINAL WEB PROPOSAL CANVA SLIDES:

Project 1-Website Redesign by SUN YUTONG

---

FEEDBACK

WEEK 4: We tried to use HTML code to create our website to introduce ourselves

WEEK 5: Based on last week’s website, we completed further improvements to the website and learned how to add background colors, how to modify fonts, and how to add pictures.

WEEK 6: This week we further learned how to use CSS.

---

REFLCTION

In the process of completing the website redesign proposal, I learned how to analyze a website from the perspective of layout, color scheme, typography, images and overall aesthetics. I chose my website, which had problems such as confusing navigation system, too much text content, inconsistent style, incompatible devices, etc., which gave me a better understanding of the issues that need to be paid attention to in designing a website.

Then I tried to complete the redesign of the website and drew a wireframe. In the process of completing the wireframe, I referred to many excellent works and learned how to design and simplify the original website. In the process of analyzing excellent works, I learned that an excellent website style is unified and simple, and the user experience is very good.

In the process of completing this proposal, I found this task very interesting and learned a lot of knowledge in the process of completing the proposal.