Interactive Design: Exercises

30.08.2023 - ending | Week 1 - Week X

Zoë Lena-maria Nelson | 0364991 | Rotterdam University Of Applied Science

Interactive Design | Exercises

---

Web Analysis

Exercise 1:

For this exercise, the student had to choose TWO (2) websites from the link given to us. The student has to review the website that they selected, taking note of its design, layout, content, and functionality. Identify the strengths and weaknesses of the website and consider how they impact the user experience.

Regulations: Write a brief report summarising in 500 words or less. You can include a screen capture of each section or page of the website to explain. Make sure that the formatting of the report is clear (heading/subheadings)

The full exercise can be found via the link.

Web Replication

Exercise 2:

The student task is to replicate TWO (2) existing main pages of the websites given in the link in Google Classroom to better understand their structure. Follow the dimensions of the existing website from the width and height. This exercise will help students develop their design skills using software such as Photoshop or Adobe Illustrator and gain insights into best practices for web design.

Use stock images or icons that don't have to match the original. Choose a similar image and pay attention to layout, type style, and colour scheme. Look up Google Fonts for similar fonts. To replicate the page, take a screengrab and get started.

Site: Morgan Stanley

Figuur 1.

Figure 2.

Figure 3.

Re-designing the website for Morgan Stanley presented a formidable challenge, given the complex layers and extensive textual content that needed to be incorporated. Unfortunately, the site suffered from a dearth of visual imagery, contributing to a sense of information overload. Furthermore, the layout was less than aesthetically pleasing, with a 'fine' colour scheme and dull but pleasant font choices. The sheer number of pages required to recreate the website is a testament to the amount of effort invested in the project.

Site: Ocean Health Index

My decision to undertake the redesign of the ocean health index website was fueled by its distinctiveness when compared to the Morgan Stanley website. Its layout piqued my interest, and I was eager to gain a deeper understanding of its mechanics.

Figuur 4.

Figure 5.

Figure 6.

I enjoyed replicating the Ocean Health Index website. Its structure was well-organized, making it easy to navigate. The font choice was clean and straightforward despite a few instances of capitalized letters. The amount of text provided was informative without being overwhelming. Finding the necessary information was effortless without having to search extensively. Additionally, the pictures used were clear and well laid out. Overall, I found the website to be visually appealing and a great inspiration for creating a simple yet fun website.

---

Creating A Recipe Card

Exercise 3:

To create a recipe card on their webpage, the student must start by making an HTML file called "index.html." Within this file, they should create a section that includes important elements such as the recipe title, relevant images, a list of ingredients, and step-by-step cooking instructions. The next step is to create an external CSS file named "style.css" and use CSS rules to customize the look of the recipe card. The student should use CSS selectors like ID selectors (e.g., #instructions), class selectors (e.g., .recipe-title, .ingredient-list), and element selectors (e.g., body, h1, ul) to style different parts of the card. The student can create an attractive and well-organized recipe card on their webpage by following these steps.

Figure 7.

This is the Link of my final outcome: zoenelson-recipecard.netlify.app

I've learned that the color of the letter type is crucial for accessibility. Choosing a color that provides optimal contrast and legibility for all readers is essential. I'm committed to being more mindful of color choices in the future. This simple change will enhance the user experience and demonstrate my dedication to inclusivity.