Exercises

28/08/2023 - 09/10/2023/ Week 1 - Week 7
Reema Arif Hamza / 0362792
Interactive Design / Bachelor of Design (Hons) in Creative Media / Taylor's University
Exercises

Content

Lectures

Week 1: Introduction to the module and upcoming assignments.
Week 2: Lecture on Usability: Designing Products for User Satisfaction.
Week 3: Lecture on Website Structure, focus on the navigation menu.
Week 4: Introduction to HTML
Week 5: Lecture on CSS
Week 6: Class canceled

Instructions 

Exercise 1.1: Web Analysis

Your task is to analyze an existing website and identify areas for improvement. This exercise will help you develop your critical thinking skills and gain insights into web design best practices.

Final

 
 Fig. 1.1 Web Analysis, Week 2 (04/09/2023)

Exercise 1.2: Web Replication

Your task is to replicate TWO (2) existing main pages of the websites given in the link below to gain a better understanding of their structure. This exercise will help you develop your design skills using software such as Photoshop or Adobe Illustrator, and gain insights into web design best practices.

Process

To begin with, I used the screenshot as a background guide by reducing its transparency and keeping it to the side to refer to as I replicated the website. After that, I used a screenshot to find similar fonts via Adobe fonts. I then added the text and shapes for the website. 

 Fig. 1.2 Web Replica 01, Week 3 (11/09/2023)

Then I used the gradient tool to create a transparent gradient for the background. Lastly, I added pictures some from the original website and some from a free stock photo website.

 Fig. 1.3 Web Replica 02, Week 3 (11/09/2023)

For the next website, I also used Adobe Font to find an accurate and similar font, it was fairly convenient because I could just add it directly to my library. 

Fig. 1.4 Font finding, Week 3 (11/09/2023)

This website was comparatively longer than the first website. I had to break it down into sections to tackle it properly. I first added text, shapes, then color using the eyedropper tool. 


Fig. 1.5 Web Replica 03, Week 3 (11/09/2023)

You can see that the image on the right doesn't exactly match up to the original typeface. I tried my best. to find a visually similar one but it still wasn't completely perfect.

Fig. 1.6 Web Replica 04, Week 3 (11/09/2023)

After adding the finishing touches I added the pictures in and did a side-by-side check-through to make sure I didn't miss anything.

Fig. 1.7 Web Replica 05, Week 3 (11/09/2023)

Final

The Web Replica final output is below, side by side the original to show the accuracy of the replication. 

Fig. 1.8 Final Web Replica 1 JPEG, Week 3 (11/09/2023)

Fig. 1.9 Final Web Replica 2 JPEG, Week 3 (11/09/2023)

Exercise 1.3: Recipe Card

In this exercise, you will create a recipe card using HTML and CSS. The goal is to design a basic webpage that displays a recipe's ingredients and instructions in a visually appealing format.

Recipe Source: click here

Process

Started an HTML document named (index.html). Added the title, and section titles (using selectors for CSS later). Then added the ingredients and instructions in list formats. 

Fig. 1.10 HTML, Week 6 (08/10/2023)

Started an external CSS style sheet and linked it to the HTML document. 

Fig. 1.11 CSS 1, Week 6 (08/10/2023)

For the selectors and ID selectors, I added color, font family, font size, and font weight. 

Fig. 1.12 CSS 2, Week 6 (08/10/2023)

Final

The Recipe Card website is below with a provided link.
Link: Click Here

Fig. 1.13 Recipe Card Website, Week 6 (08/10/2023)

Reflection

The web analysis exercise helped me understand the layout and structure of websites. It prompted me to take the time to really play with the features and analyze them deeply.

The web replication exercise taught me how much effort really goes into designing a website. There are lots of details you have to pay attention to. 

The recipe card exercise helped me to understand how to use HTML and CSS.


Comments

Post a Comment