INTERACTIVE DESIGN/EXERCISES

24/04/2024 - 12/07/2024 / Week 1 - Week 8

Marsya Arisa Binti Mahmud / 0359684

Interactive Design / Bachelor of Design (Hons) in Creative Media / Taylor's University

Exercises

INSTRUCTIONS

1. Web Analysis

Analyse an existing website and identify areas for improvement.

2. Website Replication

Replicate an existing website using softwares such as Photoshop or Adobe Illustrator.

3. HTML and CSS Document Development

4. CSS Layout

EXERCISES

1. EXERCISE 1 - WEB ANALYSIS (24/04/24)

Choose two websites from the given links. Review the website taking note of its design, layout, content and functionality. Identify the strength and weaknesses as well as consider how they impact user experience. Write a brief report to summarise your findings and recommendations (less than 500 words).

The Happy Few by Frank van Deursen (https://www.thehappyfew.agency)

The Happy Few is a creative agency with a focus on immersive experiences. From copyrighting and strategy to project management, design and software development. Their identity is primarily to 'radiate happiness' to create a long and lasting impact with their partner, which is why their websites portrays that identity.

In terms of visual design, there are three colours used in the website, brown, yellow and white. It stays consistent throughout the whole site. Although, the shade of yellow could be eye-straining for users as it may be too bright. The bright yellow could correlate to 'happiness' in their visual identity but a different shade of yellow would be ideal to avoid this issue. The heading, subheading and body has a standardised font, which makes it easy to read.

Figure 1.1: 'The Happy Few', Header

There are a few graphical elements used in the website. For instance, the logo being a smiley face and a few animations applied to the header and some pictures. This is appealing when visiting the website. But, as you scroll to the bottom of the page. The logo tracks the user's cursor and rotates towards it so when users intend to scroll back up to the page they would have to move their cursor out of the way. In addition, users would have to scroll through a series of pictures towards the middle in order to continue reading or to scroll back up. This makes it inconvenient for users that are trying to skim through.

Figure 1.2: Graphical Element at the bottom of the page

Figure 1.3: Series of pictures

There is one navigation bar visible on the website located on the top right, which are ways to contact the company and a button to change the site's language. They have included attractive and standardised icons to display. But upon clicking on the navigation bar the first time, I did not know what it implied or it took me awhile to grasp the logos. I believe adding a text or a subtle pop up to the icons would help the users understand the navigation bar better.

Figure 1.4: Navigation Bar

The website's compatibility with different devices and browsers run smoothly. It's load time and responsiveness is efficient. In terms of organization, the information provided is relevant to the website although I feel like they could have been more informative about their company and separated their information through different pages in the navigation bar like an 'about us' section and the services they provide.

Wilde Weide Festival by Tom Walters (https://wildeweidefestival.nl/en/)

Wilde Weide is a website for a music festival held in the Netherlands. The first thing that stood out to me first was the graphical elements that were incorporated into the website. The elements used in the website portrays significance to the culture in the Netherlands and the developers intend to make the site colourful. But, I feel as though there are too many graphical elements that it overpowers the information. The fonts throughout the site are standardised. Although I find the animations applied to the font to be overwhelming because its fast pace makes it harder to read. I also find the cursor hard to navigate because there is no pointer so it's difficult to click on a button.

Figure 1.5: Cursor

The navigation bar is located on the top left of the page. After clicking, it shows a list to locate different pages. The font and graphical element are large in size , which could be hard for users to read.

Figure 1.5: Navigation Page

The information on the site could be organised better along with the graphical elements because users could find it hard to navigate certain information like buying tickets or finding more about the event. Because of the amount of graphical elements, the load time for each page increases, making it inconvenient for users to purchase a ticket or key in their information. Overall, the site has an appealing aesthetic. The chosen font and colour palette work well with one another. It is a unique way to attract people towards their event.

2. EXERCISE 2 - WEB REPLICATION (08/05/24)

Our task is to replicate TWO (2) existing main pages of the websites given in the link below. Follow the dimensions of the existing website from the width and height.

Ocean Health Index - Methodology

For the first webpage, I have chosen the Methodology page from Ocean Health Index. Before constructing the webpage, I used the 'inspect element' tool on my browser to extract the measurements.

Font Family: Montserrat

Colours: #ffffff, #212d5e

Figure 2.1: Ocean Health Index - Methodology

Sketch

I sketched out the dimensions for each section of the page including the paddings. This gives me a clear idea on how to construct my webpage on Adobe Illustrator.

Figure 2.2: Ocean Health Index Page Measurements

Navigation Bar and Header

I aligned the texts into each section based on my sketch. I find that it helps a lot to focus on a section and then move on to the next instead of doing all the sections at the same time.

Figure 2.3: Navigation and Header on AI

Dimensions

To establish the dimensions, I used the rectangle tool to determine the spacing. It gives me a good guideline for text placement. I also do this with pictures after determining the gap. The inspect element tool only provides the measurements in 'em', so I had to use a convertor to get the measurements in px.

Figure 2.4: Dimensions for Page Breaks

Figure 2.5: Dimensions for gaps in-between

Images

After establishing the dimensions, I looked for images to incorporate into the webpage. Pexels is a site that provides free images for download. I used a picture of the ocean to replicate the background from the original webpage. I also left space for the images included on the body of the webpage.

Figure 2.6: Background and body image

Logos

I find that the logos on Google do not accommodate similarly to the website. Therefore, I did it manually by using the 'image trace' tool, and then expanding the logo so I could get a similar colour to the page.

Figure 2.7: Images

FINAL OUTCOME

Figure 2.8: Final Outcome - Ocean Health Index (JPEG)

Bandit Running - Homepage

For my second website replication, I chose to do the homepage for Bandit Running. The overall size is larger than Ocean Health Index's webpage.

Font Family: Helvetica
Colours: #ffffff, #000000

Figure 2.9: Bandit Running - Homepage

Sketch

To understand the anatomy of the webpage better, I sketched out the dimensions of each section including how much space the texts use, the gaps between, the paddings and the images.

Figure 2.10: Sketch for Running Bandit

Navigation Bar

I struggled with the navigation bar the most because the spacing and text size for each element did not look similar to the original webpage. I spent most of my time adjusting the letter spacing.

Figure 2.11: Navigation Bar

Header

Figure 2.12: Header

Body

Figure 2.13: Body

FINAL OUTCOME

Figure 2.14: Running Bandit Homepage

EXERCISE 3 & 4 - HTML AND CSS DOCUMENT DEVELOPMENT (05/06/24)

The goal of this exercise is to design a basic webpage that displays a recipe's ingredients and instructions in a visually appealing format. We were to choose one from the website provided. The page includes:

Title
Necessary Images
List of Ingredients
Step-by-step Instructions

Planning

Before creating my page, I used to Canva to create a template of how I wanted my webpage layout to look like. I have decided to make a page on Homemade Pesto.

Fonts: Cormorant Garamond, Work Sans

Colours: #D9D9D9, #000000, #687B6F

Figure 3.1: Template on Canva

HTML and CSS

Webpage Overview

Netlify Link: https://homemadepestobymarsya.netlify.app

Marsya Arisa Binti Mahmud (0359684)

INTERACTIVE DESIGN/EXERCISES

Popular posts from this blog

GAMES STUDIES/EXERCISES

INFORMATION DESIGN/PROJECT 1: INFOGRAPHIC POSTER & ANIMATION

ADVANCED INTERACTIVE DESIGN/TASK 2: DESIGN PLANNING & PROTOTYPE