Interactive Design | Project 2 : Website Redesign Prototype

28.05.25 - 22.06.25 / week 6 - week 9
Subhana Salim / 0375936
Interactive Design/ Bachelor's of Design (Honours) in Creative Media / Taylor's University
Project 2 : Website Redesign Prototype

1. Lectures

2. Instructions

3. Project 2 : Website Redesign Prototype

4. Rationale

5. Reflection

LECTURES

WEEK 6 :

Lecture :- CSS Selectors

1. CSS Selector

It is a fundamental part of CSS allows you to style HTML elements in a webpage. Eg:- colors, fonts, spacing and more

2. Types of Selector

Universal Selector: Selects all elements on the page. It's represented by an asterisk (*).
eg:- *{CSS styles go here;}
Element Selector: The simplest type of selector, it targets HTML elements by their tag name.eg:- p{CSS styles go here;}
ID selector: Targets an element with a specified ID attribute. Must use a #sybol followed by ID name to select it. eg:- #my-element{CSS styles go here;}
Class Selector: targets elements with a specific class attribute. To select a class must us a .symbol followed by class name. eg:- .my-class{CSS styles go here;}
Descendant Selector: Selects elements that is a descendant of another element. eg:- .container a {CSS styles go here;}
Child Selectors: Selects elements that are direct children of another element. eg:- ul>li{CSS styles go here;}
Pseudo-class Selector: Selects elements based on their state or position in relation to other elements: such as hover, :active, :visited, :link, :focus, and :nth-child(n). Eg:- a:hover {CSS styles go here;}
Pseudo-element Selector: Selects parts of an element rather than the element itself such as; ::before and ::after, which are used to add content before or after an element. eg:-p::before {CSS styles go here;}

3. Why are they so many Selectors

Specificity
Structure
Attribute-Based Selection
Pseudo-Classes and Pseudo-Elements
Responsive Design
Stateful Interaction
Cross-Browser Compatibility
Ease of Maintenance
Accessibility

WEEK 7 :

Lecture :- Box Model-Layout

1. Display Property

Block-level element - each block element starts on a new line and stretches out to the left and right as far as it can. eg. of block element :- <div>
Inline Element - each inline element is placed within that line. eg. of inline element :- <span>
You can always override inline element properties. eg:- making inline li elements for horizonal menus
other display properties are :- inline-block, flex, grid

2. Box Model in CSS

Most HTML elements are containers or boxes such as body, p, h1, h2. div, ul, ol, li.
There are 3 layers that surround its content from the order of inside to outside :- a. padding, b. border, c. margin
The size of each of the layers in the box model can be specifies using the usual units of measure (em, % and px)
eg of code

(HTML CODE)

<div>
<p>This is a paragraph. It is a very short paragraph.</p>
</div>

(CSS CODE)

div {background-color: red;

padding: 0;

border: 1px solid black;

margin: 0;}

p {background-color: white;

padding: 1em;

border-width: 10px;

border-style: solid;

border-color: blue;

margin: 10px;}

Reason to include an element in ‘div’ tag/element is to create layout. Another method to create layout in CSS is using position property.

3. Flex Box

Flex box is used for creating responsive and efficient web layouts as they manipulate element's positioning and spacing within a container
Flex Container is the parent element with display flex. Flex items are the children of the parent container
display: flex: Establishes a flex container.
flex-direction: Defines the direction of the flex items (row, column).
justify-content: Aligns flex items along the main axis (start, end, center, space-between, space-around).
align-items: Aligns flex items along the cross axis (stretch, center, start, end).

INSTRUCTIONS

Project 2: Website Redesign Prototype

The objective of this assignment is to translate your proposal idea for a renditioned website into a fully functional prototype. The prototype is required to be made on Figma. The assignment submission includes homepage, 1 core content page and a contact page.

PROJECT 2 :

WEBSITE REDESIGN PROTOTYPE

The website I will be redesigning

Kids-Dinosaurs

Fig 1.1 Image of Original Website

Inspiration

I had already gathered inspiration pictures for my website design in Project 1: Proposal

Fig 1.2 My mood board

One of the websites that inspired the design of this website is bluey.

Fig 1.3 Inspiration Website

The color palette I decided for the website is the following.

Fig 1.4 Color Palette

Process

One of the first steps I made was to condense and reorganize the information provided from my base site. I mostly decided to condense the menu and shorten information as it was too large. These are the menu options I kept on the menu bar.

Fig 1.5 Menu options I am keeping

These are the contents I am going to include in my final website, while I am going to omit the rest that arent circled in red.

Fig 1.6 Content sections I am keeping

I first started my assignment with looking through Freepik for free dinosaur images, I could use for my website prototype.

Fig 1.7 Downloading images from Freepik

After downloading images I decided to come up with a cover design for website, which was inspired from an image in Freepik.

Fig 1.8 Image inspired that title card of the webpages

I used both photoshop as well as illustrator to make edits to the image and add my own text to it.

Fig 1.9 Editing images in Photoshop and Illustrator

This is the final cover design for the 3 pages.

Fig 1.10 Final Background designs for the title cards

I also edited the colors of the images of some pictures to match the color palette of the website.

Fig 1.11 Editing the images on Photoshop

Then I started with importing the images into Figma and editing the layout of the 3 webpages. I also referred the wireframe from my proposal to help me out.

Fig 1.12 Wireframe for the website layout

The 3 website pages I decided with are the Homepage, The core content page (Dino facts) and contact page. The main font I went for my website are :Berlin Sans FB Demi - for the title and Gill sans MT for the body text.

Fig 1.13 Designing the website on Figma

FINAL SUBMISSION

Final Images of the 3 Webpages

Fig 2.1 Home Page

Fig 2.2 Dino Facts (Content Page)

Fig 2.3 Dino Facts (Contact Page)

Final Embedded Website Prototype

Fig 2.4 Website Prototype

Final Figma File Link

https://www.figma.com/proto/LfIvESptHOlaovcS3sBqsE/Kids-Dinosaurs-Webpage-Prototype?node-id=85-133&t=jrYehzqvgnVIPgyL-1

RATIONALE

1. Menu Bar

One of the main things I decided to do is the reorganize and condense the information within the website, to reduce my workload and make the content more concise. The website is has a lot of repeated and scattered information.

I decided to keep the following sections circled in red for my final website.

Fig 3.1 Content sections I am keeping

I turned the vertical menu of the website into a horizontal menu. I also reduced the menu bar and shortened it 3 (Home, Dino Info, About Us, Contact Us). The Dino info menu section includes a drop down menu including the sections:- Dino facts, Dino Types, Top Dinos.

Fig 3.2 Menu options I am keeping

This is the rendition of final menu.

Fig 3.3 Finalized Menu

2. Visual Aesthetic

One of the aspects of the website I wanted to improve is the visual aesthetic of the website. Majority of the original website is white, with hints of light blue.

Fig 3.4 Original website vs Prototype

In order to improve the aesthetics of the website, I first decided to come up with a color palette that is both appealing and colorful.

Fig 3.5 Color palette

I also added interesting elements to the design such as the leaves

Fig 3.6 Leaf Design

The old design has a lot of visual clutter filled with a lot of advertisements and unorganized text, which I decided to change in my prototype. I focused on increasing white space by doing the following:

1. Condensing the amount of text in a webpage

2. Providing identifiable text hierarchy of text between title, heading and body.

3. Making the text take less space in the layout.

Fig 3.7 original visual hierarchy

Fig 3.8 New layout hierarchy

3. Layout

For the layout of the design I decided to prioritize white space and visual hierarchy. I looked through inspiration for website layouts on Pinterest as well as my own inspiration board.

Fig 3.9 Pinterest inspiration

I used a lot of curves in my website layout to make it more softer and catered towards kids. I focused on making a higher image to text ratio.

Fig 3.10 Curves used in my website design

4. Images

The initial images used in the original website are unamusing, inconsistent and poorly aligned. There were also text within the inserted image which lead to inconsistency across the website.

Fig 3.11 Examples of images used in the website

I decide to prioritize consistency and appeal during my redesign. Most of the images I have compiled were from Freepik. I went for cartoonish and stylized images that often resonate with kids. In order to maintain consistency of the images, I ensured the art style was simple line art with flat colors.

Fig 3.11 Compilations of images used in the prototype

I also went into photoshop to edit the color of some images and remove the background in order to blend in with the color palette of the website.

Fig 3.11 Compilations of images used in the prototype

My focus was to add enough images to add visual interest without leading to visual clutter.

5. Text

The website uses the classic Arial font, which doesn't stand out or fit the theme of the website's content. For my redesign I used the font: 'Berlin Sans FB Demi' - for the title and 'Gill Sans MT' for the body text.

Fig 3.11 Text used in Original vs Prototype

6. Title card

The original website does not have a title card for any of its is webpages or subsections. However it does have an decorative heading and imagery in the start of every webpage.

Fig 3.12 Title design used in original website

I wanted to add a title card for each section of the website in the prototype. The design was inspired by this image downloaded from Freepik.

Fig 3.13 Image inspired that title card of the webpages

In order to make a title card out of this image I had to make a few changes and remove the text in this. I was able to find a compilation of other images that was of the same style as this one.

Fig 3.13 More images that inspired the title card

I started with placing the images into photoshop and removing the background of the objects.

Fig 3.14 Photoshop editing

Then I imported the elements into Illustrator and arranged the elements in a visual format. I used the colors in my color palette as the background colors. I tried to blend out the title card color with the background color of the body section.

Fig 3.15 Illustrator editing

Finally I brought it into Figma where I finally edit the text in and other interactive elements.

Fig 3.16 Figma editing

These are Final Title Cards

Fig 3.17 Final Title Cards

7. Footer

The original footer didn't include any details except for the copyright information. With the redesign I wanted include all the relevant elements you would see in most websites.

Fig 3.18 Footer

One of the main changes I added to the footer is Add a option for viewers to subscribe to mail. I also provided link for social and other aspects of the website : Privacy Policy, Advertisement Closure, Site map. I also changed the original icons of the socials to a modern looking one.

Fig 3.19 new footer changes

8. Navigation

I simplified the navigation by reducing the number of clicking and scrolling across the website. I reduced the number of menu options in the website and condensed the amount of information available in one webpage. I made clickable elements on easily viewable areas. I also made the navigation elements visually appealing.

Fig 3.20 Interactive elements

REFLECTIONS

Throughout project 2, I deepened my understanding of website design principles by applying them practically using Figma. As a designer I focused on the viewer's perspective towards this website, especially of a younger audience.

The critically viewing of the website in project 1, helped me in giving a clear idea on what needs to be done and what needs to be changed. One of the main things I wanted to change with the original website was the menu option and layout design.

Majority of my time was used on improving the visuals and layout of the website. I spend a significant amount of my time creating title cards of the website so I an distinguish different sections of the website.

Overall using Figma first to design a prototype helps me clearly map the design and navigation of the website properly before adding that through html in the final website.

Search This Blog

Subhana Salim (0375936)