Labels

Interactive Design: Exercises

| 23.04.2024 - 11.06.2024 (WEEK 1-WEEK 8)
| Tang Chin Ting [ 0366473 ]
| Interactive Design / Bachelor of Design in Creative Media
| Exercises
LECTURES

Week 1 Lecture:

Class Activity:
Our group has been required to complete scenario 3
Scenario 3: 
My group is tasked with redesigning a school's online learning management system.

User need: 
Students want an easy-to-use platform for accessing course materials, submitting assignments, and communicating with classmates and instructors.

Usability principles to consider:
  • Consistency
  • Simplicity
  • Visibility
  • Feedback
We initially tested the prototype of an e-commerce website created by Group 4, acting as users. Subsequently, we invited Group 2 to experience our prototype. Our lecturer praised our work as both good and excellent.

Figure 1.1 Class Activity
Figure 1.2 Class Activity
Week 3 Lecture:

Week 4 Lecture:
This week, we started to do an HTML exercise. We first create a folder to save our image and HTML file inside, so that after we write down the code then we can run it in Dreamweaver.
Figure 1.3 HTML Lesson
Figure 1.4 HTML Lesson
Week 5 & 6 Lecture:

For the advanced exercise from last week, we are now creating a timetable for my website. Following our lecturer's guidance has made it easier for me, especially since this is my first experience with coding.
This is my final outcome:
Figure 1.5 HTML Lesson
Up until week 6, Mr. Shamsul instructed us on changing the font family and centering the title. For the form section, we also learned how to add color to the columns.
Figure 1.6 HTML Lesson
Figure 1.7 HTML Lesson
Figure 1.8 HTML Lesson
Click the Link to review my webpage!

Week 7 Lecture:

INSTRUCTIONS


SUBMISSION
Exercise 1: Web Analysis
Instruction: We are required to choose 2 websites from the links that our lecturer provides. Subsequently, review the website and take note of its design, layout, content, and functionality. The final outcome of this task is a short proposal which is not less than 500 words.

Required Content:
  • Evaluate the visual design and layout of the website, including its use of color, typography, and imagery.
  • Consider the functionality and usability of the website, including its navigation, forms, and interactive elements. 
  • Evaluate the quality and relevance of the website's content, including its accuracy, clarity, and organization.
  • Consider the website's performance, including its load times, responsiveness, and compatibility with different devices and browsers.
Website 01:


Website 02:


With a better review of the video included in the slide can click on these links:

Website Analysis in Docs:


Exercise 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. Choose any two from the link given. Follow the dimensions of the existing website from the width and height. 

Free image:

Google Fonts link:


In this website redesign, I was unable to find the original font, so I decided to use 'Roboto' and 'Open Sans' as substitutes to be closely similar to the original style. For the other contact platform logos, I sourced them from Google and integrated them into the design, which simplified the completion of this exercise.

Progress:
On this website, I primarily use the "Roboto - Medium" font. Since the original font type isn't available in Google Fonts, I selected a similar one. For the website logo, I found an image on Google and used Photoshop to remove its background before adding it to my site.
Figure 2.1 Progress of this website
Initially, I used the line tool to create the arrow, but it didn't match the original website. When I expressed my confusion, our lecturer suggested a different approach: using two circles, cutting them into quarters, and combining them with a short line. This method gets a better result.
Figure 2.2 "Arrow" on this website
Finding the social media logos was challenging because the ones on the website differed from the standard versions. Therefore, I used the pen tool to draw the Instagram and YouTube logos manually. For the other logos, I located them on the "find" website.
Figure 2.3 "Social Media Logos" on this website
I attempted to add a gradient to the background, focusing on the bottom right where a subtle black and white gradient was intended. Unfortunately, I couldn't implement the gradient successfully. Instead, I applied a grain effect to the background.
Figure 2.4 "Background Texture" on this website

This is my final outcome:
Figure 2.5 Original Website Outcome (Left) & Replication Website Outcome (Right)

Figure 2.6 Final Website Replication Outcome


The second website was easier to design compared to the first one I chose. I simply used a gradient for the top and body background. For some images that I couldn't download in their original link, I found alternatives through the 'free image' link provided by our lecturer.

Progress:
This website is shorter than the previous one but features more gradient colors in the header and body. The font "Roboto" is used throughout, with bold for headings and medium weight for paragraphs. The background image differs from the original because unable to locate the original image, so I substituted it with an online-sourced whale picture.
Figure 2.7 "Heading" on this website
The background behind the body text was challenging to find, so I opted for a dark blue gradient. Additionally, I sourced images online for each news article. However, some images were not downloadable directly from the news, which means that some pictures were identical to the originals, while others were only similar.
Figure 2.8 "Body text" on this website
The number of social media logos is fewer than on the last website version, and I couldn't find a dark blue Twitter logo, so I used the standard one. (I hope our lecturer is okay with this adjustment.)
Figure 2.9 "Social Media Logos" on this website
This is my final outcome:

Figure 2.10 Original Website Outcome (Left) & Replication Website Outcome (Right)

Figure 2.11 Final Website Replication Outcome

Figure 2.12 Final Website 01 Replication Outcome (PDF)

Figure 2.13 Final Website 02 Replication Outcome (PDF)
Exercise 3: Creating a Recipe card
In this exercise, we are required to create a recipe card using HTML and CSS. The goal of this exercise is to design a basic webpage that displays a recipe's ingredients and instructions in a visually appealing format. Choose ONE recipe from this link.
  • Create an HTML file named "index.html."
  • Create a section that displays the following information: 
    1. Recipe Title
    2. Necessary images for the page
    3. Ingredients list
    4. Step-by-step cooking instructions
  • Create an external CSS file named "style.css."
  • Apply CSS rules to style your recipe card.
  • Use CSS selectors such as element selectors (body, h1, ul), class selectors (.recipe-title, .ingredient-list), and ID selectors (e.g., #instructions) to style different parts of the card.
"Use your creativity to make the page look appealing and interesting."

When browsing the recipe webpage, I came across a variety of recipes. One that particularly caught my interest was the cheese muffin recipe. I chose this recipe because it seemed both appealing and suitable for my taste which is Cottage Cheese Muffin.

Figure 3.1 Cottage Cheese Muffins Website

Figure 3.2 Cottage Cheese Muffins Website
Research
The first thing I would like to do is research some references on Pinterest. I believe it will spark some ideas. However, I noticed that most references on Pinterest are quite simple in style, often featuring only lines and images without illustrations. Here are some examples:
Figure 3.3 References

Figure 3.4 References

Figure 3.5 References
Those will be my references, but I would like to add more interesting things to my recipe card design.

Sketch
I thus do my sketch in Figma first, to ensure what kind of design style I would like to go with.

Initially, I created some simple shapes for the image background and applied different font types for the heading. However, the design lacks elements that capture the viewer's attention. I believe it needs more visually striking features to stand out.
Figure 3.5 First Sketch in Figma
Figure 3.6 First Outcome in Figma
So, I decided to redesign one more aspect of my project. I aim to move away from the conventional rectangular image placements and create a more engaging and dynamic visual presentation.

Processing
I planned to create an outcome in the landscape format, but I'm concerned that our lecturer might not approve. I will complete the project first and then seek his approval. However, I found a font reference in Figma for my title.
Figure 3.7 Font Reference in Figma
Figure 3.8 Font Use in Figma
To avoid making the author's name too prominent, I reduced its opacity to 60% and selected the Josefin Sans font for a softer look. Next, I organized the content, including the sections for 'Ingredients' and 'Instructions'.
Figure 3.9 Processing in Figma
Figure 3.10 Processing in Figma
Figure 3.11 Processing in Figma
Figure 3.12 Processing in Figma
When I completed my work, I sent it to our lecturer for feedback. He informed me that the final version should be in portrait orientation, requiring a redesign. I'm confused about whether we need to create a recipe card or a webpage, as the references I found online are in landscape format.
Figure 3.13 Final Work in Figma
I would like to use the same design but only arrange it into a portrait version, since I really like the font type and also the typesetting.
Figure 3.14 Final Work Portrait Version in Figma
After sending the document to our lecturer, he pointed out that the arrangement of sections was incorrect—ingredients should come before instructions. He also shared my concern about text wrapping in HTML and noted that the list alignment was off and the subtitle was hard to read. Lastly, Mr. Shamsul asked for a good webpage example. I showed him one, but he suggested improvements for better readability and structure.
Figure 3.15 Reference
He praised it as a potential reference, commending its well-organized structure, neat alignment, and overall cleanliness. Encouraged by his feedback, I began to revise and refine my project with renewed enthusiasm.
Figure 3.16 Processing in Figma
Figure 3.17 Processing in Figma
Figure 3.18 Processing in Figma
The layout of the ingredients section has been revised. I'd prefer to restore it to standard alignment and introduce a bulleted list format to enhance its clarity and organization.
Figure 3.19 Processing in Figma
Figure 3.20 Processing in Figma
Figure 3.21 Processing in Figma
I believe the hero section could be more captivating, so I opted to place the picture without employing any predefined shape and reduced its opacity to 20%. This adjustment allows the introduction text placed over the image to stand out more clearly, enhancing readability and visual appeal.
Figure 3.22 Processing in Figma
Finally, my final outcome was done and Mr. Shamsul eventually approved that.
Figure 3.23 Final Outcome in Figma
HTML
The following step 'coding' is a big problem...I started coding HTML in Dreamweaver. But I forgot to screenshot the webpage version. So I just show the codes that I have typed.
Figure 3.24 HTML In Dreamweaver
Figure 3.25 HTML In Dreamweaver
Figure 3.26 HTML In Dreamweaver
CSS
For the CSS section, I have asked my friend for help. But she only told me what is the frame and I typed it and adjusted it myself.
Figure 3.27 CSS In Dreamweaver
Figure 3.28 CSS In Dreamweaver
Figure 3.29 CSS In Dreamweaver
I have also learned how to separate the CSS from the HTML file. The process involves creating a new file in the project folder, renaming it as "index.css," and then pasting the CSS code into this new file. To link the CSS file to the HTML file, you need to add a link tag in the HTML, which could look like this:
Figure 3.30 CSS Link In HTML File
Although the final outcome will differ significantly from my initial Figma sketch, I have put in my best effort. I hope my lecturer will understand the work I've done.

Click the link for my Recipe Page!

Figure 3.31 HTML File in Dreamweaver
Figure 3.32 CSS File in Dreamweaver
FEEDBACK
Week 7:
I'm afraid that it will be difficult for a text to wrap like that in HTML. Plus and arrangement of the list is not aligned well and I don't suggest you place the title in such a way. Make it difficult to read. Besides, the ingredient section should come first.
REFLECTION
In this task, the coding aspect proved to be the most challenging. Specifically, as I tackled the third exercise involving the CSS layout of a recipe card, I found myself quite apprehensive. It took me a significant amount of time to complete, prompting me to seek guidance from an online tutorial. Interestingly, I found the first and second exercises comparatively easier. I particularly enjoyed the second exercise, which involved replicating the layout of an existing website—it was quite enjoyable. Nonetheless, I'm pleased to report that I successfully completed all three exercises.
Labels:

Comments

Post a Comment

Popular Posts