Labels

Exercises

23 Apr 202 4 - 11 Jun 2024

Shim Yi Xun || 0363292
Bachelor of Design (Honours) in Creative Media
  Interactive Design GCD 60904  

Task 1 - Exercises

  Content Jumplink  

> REFLECTION 

  Lectures  

01💬 Usability: Designing Products for User Satisfaction

 


02💬 Understanding Website Structure


03💬 The Web and Language

04💬 HTML & CSS


05💬 CSS Selector


06💬 Box Model

  Instruction  


  Exercise 01 / Web Analysis  

Requirements:
Choose TWO websites from the given link. Review the selected website carefully and take note of its design, layout, content, and functionality. Identify the strengths and weaknesses of the website, and consider how they impact the user experience.


What To Analyze:
- The purpose and goals of the website, and the effectiveness of its communication.
- Visual design and layout: using colour, typography, and imagery
- Website functionality and usability: navigation, forms and interactive elements
- Quality and relevance of website content: accuracy, clarity and organisation
- Website performance: loading time, responsiveness and compatibility across devices


Design & Layout:
They are themed in illustration style and designed in a vibrant tone. The use of bold and bright colours adds to the overall visual impact of the content. Additionally, the typography is thoughtfully organised with a clear hierarchy. They focus their entire content in the centre column not only for the balance between the visual elements and content but also to keep it for the mobile device.

Content:
The content is organized and conveys the information clearly. Apparently, their main target consumers are Nijisanji fans as they put the limited edition giveaway first in order to catch those fans’ attention. After then are the product details and contact information.
Functionality & Usability:
It does not get any navigation bar, just scroll down till the end. But the other buttons are functioning well. Besides, the interactive elements are not too much since the website aimed to be designed for mobile devices. Thus the interactive part is only located in the character display, and product details will be displayed when clicked.

Performance:
Loading time won't take too long since they are entirely 2D elements. And the responsiveness is smooth too on pc and mobile devices.


Website #2
https://brewdistrict24.com/nl

Design:
The site comes in four colour tones that can be switched and changed for each exclusive. In addition to this, the can in the middle appears to fall while scrolling down the page, adding fun to the site without feeling bored.

Layout:
The typographic hierarchy is well organised on the other pages. But in this page, the font looks small and difficult to read. The information organised is scattered, which can confuse the viewer as where to read.

Purpose:
Its purpose have expressed clearly and effectively that this is a craft alcoholic drink.

Content:
The content is clear and acurate.

Functionality & Usability:
The navigation and the buttons are functioning well and completed. There is not only the interaction of switching colours, it also got a mini-game to interact with, you can click on the can to gain score and up level... that's it.

Performance:
Loading may take some time. Furthermore, the response speed is quite efficient and smooth.



  Exercise 02 / Web Replication  

In this task, we have to replicate TWO existing main pages of the websites given in the link below to gain a better understanding of their structure.

Instructions:
- Follow the dimensions of existing website from the width and height.
- Focus on the layout, type style, and colour style.
- You can use any image from stock image or free stock free, it does not have to be an exact image from the website, you can replace it with a similar image.
- You can download fonts from Google Fonts.


Website #1
I started by copying all the text and context of this website.

Next comes to the background. The middle gradient part took me a lot of times as I discover that the original website it had a gradual change from colour to an image. 

The way that I go through this part is, to prepare a related image and a gradient colour, and they have to be the same colour tone.

Then combined them together. Done!

Lastly are the content images.

The comparison of original website (left) and my replicated work (right):


Website #2
Same steps, copy all text.

Fill up the content images.

The comparison of original website (left) and my replicated work (right):

Exercise 02 Final Outcome:




  Exercise 03 / Creating a Recipe Card 

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

Requirements:
- Create an HTML file named"index.html" 
- Create a section that displays the following information:
1. Recipe title
2. Include necessary images for the page
3. List of ingredients
4. Step-by-step cooking instructions

- Create an external CSS file named "style.css"
- Apply CSS rules to style your recipe card.
- Use selectors such as element selectors (e.g., body, h1, ul), class selectors (e.g., .recipe-title, .ingredient-list), and ID selectors (e.g., #instructions) to style different parts of the card.

Link to view for the website:
https://shimcookierecipe.netlify.app/


Process
I chose this recipe to design because I love cookies.
https://www.101cookbooks.com/great-chocolate-chip-cookies/

Before starting to code, I first made a simple overall layout design of my recipe website in Figma. It is just a concept for me to code, otherwise my brain will suddenly go blank halfway through.

After deciding on the design concept of the recipe website, I moved on to Adobe DreamWeaver and coded the HTML.

Adding CSS to the code.


Exercise 03 Final Outcome:
Link to view for the website:


  Feedback  

WEEK 2:
  General  
-
  Specific  
The overall prototype is good, it looks almost complete. The submission part should do more feedback notifications, such as "Submission Successful".

WEEK 3:
  General  
It would be better to open the guides and rulers when replicating the website and it will be easy for you to do the alignment.
  Specific  
-

WEEK 4:
  General  
-
  Specific  
Make sure that the image and HTML are saved in the same file, otherwise the image will not be displayed on the website.

WEEK 5:
  General  
-
  Specific  
-

WEEK 6:
  General  
-
  Specific  
-

  Reflection  

The progress I made after completing this exercise was remarkable. I first carefully analyzed the structure and design of the website and then started replicating it. I then immersed myself in learning to code and gained valuable skills along the way. Finally, I took on the challenge of creating a website from scratch to ensure that even beginners with no coding experience could easily navigate and follow along.
Labels:

Comments

Post a Comment

Popular Posts