Interactive Design | Project 1 : Website Redesign Proposal

07.05.25 - 28.05.25 / week 3 - week 6

Subhana Salim / 0375936
Interactive Design/ Bachelor's of Design (Honours) in Creative Media / Taylor's University
Project 1 : Website Redesign Proposal

1. Lectures

2. Instructions

3. Project 1 : Website Redesign Proposal

4. Reflection

LECTURES

WEEK 3 :

Lecture :- Understanding Website Structure

1. Elements of Websites

Header - Top section of a webpage. Usually contains website's logo, navigation menu and contact information.
Body - Main content area, usually includes text, images, videos and other multimedia elements.
Footer - Bottom section of the webpage. Included copyright information. important links and contact details.

2. Organizing Content

Using headings (H1, H2, etc.) to create a hierarchical structure
Proper grouping and clear labeling of sections

3. Navigation Menus

Navigation menus helps us move around the website
Needs to be accessible and easy to use

WEEK 4 :

Lecture :- Web Standards

1. Web Standards

People can choose from a variety of browsers including Mozilla Firefox, Google Chrome, Opera, Safari, and Others
People also use a variety of operating systems such as Windows, Mac OS, Linux
People have variety of screen resolutions from 640 x 480 px to 1680 x 1050px
In order to make sure your website can be access across browsers, devices and operating system, we need to comply with web standards maintained by the World Wide Web Consortium (W3C).

2. How the Web works

When you connect to the web, you do so via an ISP, You type a domain name or web address into your browser to visit a site;
Your computer contacts a network of servers called DNS servers and tell your computer the IP address associated with the requested domain name.

3. Structure of a webpage

In documents, the structure contains headline, body copy, and images. Sometimes there are subheadings to categorize the information even further.
In a webpage structuring text is not as simple. we have to use code.

4. HTML elements

HTML code is made of characters that are placed inside the angled brackets < >, also called HTML elements
An HTML elements usually has an opening tag and a closing tag
Eg:- Opening tag :- <p>, Closing tag :- </p>
Attributes provide additional information about the contents of an element. It contains 2 parts :- name and value. name indicates the kind of extra information of an element's content. The value is the information or setting for the attribute.
HTML text has six level of heading: h1, h2, h3, etc.
Lists are of two types :- ordered and unordered. Ordered list have the items are numbered. Unordered lists have items in bullet points

5. Tag names

<head> starting tag of a webpage
<title> name of the webpage
<body> for content
<p> paragraph
<b> bold
<i> Italic
<a> link
<ul> unordered list
<ol> ordered list
<li> list

WEEK 5 :

Lecture :- Cascading Style Sheets

1. Class and ID attributes

Every Html element can carry the ID attribute, that has its own unique identity. It is important that no two elements have the same value for their ID attributes.
Every Html element can also carry a class attribute, that is used to group several elements to have a particular characteristic.

2. Block and Inline Elements

Block Elements will always appear to start on a new line in the browser window
eg:- <hi>, <p>, <ul>, <li>

Inline elements will always appear to continue on the same line as their neighboring elements.
eg:- <b>, <i>, <em>, <a>, <img>

3. Introduction to CSS (Cascading, Style Sheet)

CSS allows you to create rules that specify how the content of an element should appear
CSS works by associating rules with HTML elements.
CSS Rule has 2 parts :- a selector, a declaration
Selector indicated which element the rule applies to
Declaration indicates how the elements should be styled
Declaration has 2 elements :- property and value which is separated by a colon. each declaration within a CSS rule is separated by a semi colon. and the CSS rule is encased within curly braces.
eg:- p{font-family:Arial;}

4. Method to Employ CSS

<link> Element:- through a <link> element can be used in a HTML document to tell the browser where to find the CSS file used to style the page. It is placed within the head
It has three attributes: href, type and rel
If you need to use more than one HTML sheet, you should have a <link> for each sheet

Internal CSS :- you also employ CSS rule within an html page by placing them inside a <style> element, which is usually inside the <head> element of the page.
The <style> element should specify the type of attribute to indicate that the styles are specified in CSS.
When building a site with more than one page, you should use an external CSS page sheet.
Best to choose the web safe fonts already available in Dreamweaver or look for them in google fonts.

INSTRUCTIONS

Project 1 : Website Redesign Proposal

The objective of this assignment is to develop a comprehensive proposal for the redesign of an existing website. The proposal must detail the analysis of the website, redesign goals, design proposal and UX enhancements.

PROJECT 1 :

WEBSITE REDESIGN PROPOSAL

For project 1 we were required to choose a bad website that we wish to improve. Then we were tasked with making a ppt containing the website design proposal, where we evaluate the existing website design as well as propose our ideas to improve it with mood boards, wireframe and rationale.

The website I chose for this project:

Kids-Dinosaurs

During week 3, I mainly evaluated the website critically to understand its pros and cons. This process helped me in better figuring out where I would like to improve and which aspects I would like to retain.

Fig 1.1 Image of Website layout on Laptop device

Fig 1.2 Image of Website layout on mobile device

During the span of week 4-5,I spent my time developing mood boards on the aesthetics I wish to create emulate for my new website. I also begin developing a wireframes for the website for the new websites for both laptop and mobile devices.

Fig 1.3 Mood Board

Fig 1.4 Wireframe Laptop Device

Fig 1.5 Wireframe Mobile Device

This is the final PPT I have prepared by the end of week 6.

WEBSITE REDESIGN PROPOSAL

PPT

Fig 1.6 Website Redesign Proposal

REFLECTIONS

I started working on my research proposal from week 3 to 6. Within the weeks, Mr. Shamsul also taught us the basics of Html and CSS, that allowed us to familiarize ourselves with the website making process. Him giving us a step by step run through, helped me a lot in absorbing the necessary information. The initial anxiety I had towards website making immediately disappeared after these tutorial classes.

I would personally indicate that this assignment was a good stepping stool to the coming assignments as it pushed me to analyze the website in a technical sense in order to note down both its positives and negatives. It also forced me to start with a frame or idea for my rendition of the website, so I have a clear goal in mind without pursuing the website aimlessly. This assignment overall structured out my website making process.

Search This Blog

Subhana Salim (0375936)