Interactive Design - Exercise

 23.4.2024 - 11.6.2024

Ruthlene Chua Zhen Si 0365222 

Bachelor of Design (Honours) in Creative Media - Interactive Design

Task 1 Exercise 

  • Lecture
  • Instruction
  • Exercise
    • 1: Web Analysis
    • 2: Prototyping
    • 3: Web Replication
    • 4: HTML practice
    • 5:Creating a Recipe Card 
  • Further Reading 
  • Feedback
  • Reflections

LECTURE (PPT) 

Usability: Designing Products for User Satisfaction 


Understanding Website Structure


The Web and Language 


Learning Cascading Style Sheet (CSS)


CSS Selector 


Box Model-Layout in CSS


INSTRUCTION

 

Week 1 |  Exercise 1

Task Requirement: 

  • We are require to select two website from the provided link and examine them on their functioning design and layout. Identify the strengths and weaknesses of the website and consider how they impact the user experience. Write a report summarizing our findings and recommendations.

What to have in the analysis: 

  • Assess if website's purpose and goals are clear to users.
  • Review visual design, layout, color, typography, and imagery.
  • Evaluate functionality, navigation, forms, and interactivity.
  • Analyze content quality, accuracy, clarity, and relevance.
  • Consider website performance: load times, responsiveness, compatibility.
Deliverables: 

  • Write a brief report summarizing in not less than 500 words which 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)

Website 1: https://www.thebluerenaissance.earth/

Jump link

1. Design & Layout

2. Functionality & Usability

3. Content

4. Performance

Design & Layout 

Goal: The purpose of the website is to promote and sell their organic fruit drinks online and ship it all around the places. 

Design & Layout : The product is to stress out the nature organic ingredients of this particular juice, therefore they choose forest as the main background color and blue as their ancillary color, this is because their mainly product of juice is blueberry, the combination of the colors makes good appearance to the product and so as the website. The layout and hierarchy are nicely placed, size of font are also in the present the content in a reasonable way. 

Functionality & Usability

When a user goes through the website by scrolling it down, the product shows the feedback and questions which is conf web page's opening and closing, which gives users using the customers and ost down the explanation. Not only that, the website will interact with the viewers by zooming in and revolving the product in the middle of the webpage. Their nice interaction for users is that they provide the option button on the web page's opening and closing, which gives users a better experience while exploring the website.  

Content


Content organization is clean and easy for understanding, there is even some additional explanation of the product to increase the percentage of convincing viewers to brought them. This will helps viewers to strengthen their desire.  

Performance


It takes some time to load the new pages, perhaps the files is quite big and heavy and leads to slow in function. I think this website fully provide all the needs of buyers during online, when it jumps to another webpage it is also nicely organize, clearly and shows the content to buyers, and attract them to buy it. I think it should improve maybe by compressing the website files in order to makes the loading to new pages more smoothly. This webpage is well used in both types of devices such as computers and mobile devices. 

Website 2: https://www.sushidelic.net/

Jump link

1. Design & Layout

2. Functionality & Usability

3. Content

4. Performance

Design & Layout 

Goal: This website appears to belong to a restaurant website, its purpose is to let the users to know more about the restaurant and their menu, prices, opening time and also making reservation online.

Design & Layout : This restaurant web publicize the uniqueness of their restaurant by applying bright neon color on it such as pink and orange, color which is enthusiasm. In order to combine proportionally with the kawaii experience. To make the content more break through, the website are design black  as their background color. The layout are greatly placed, size of font are present in the content of a reasonable and creative way, lead to its particular presentation.

Functionality & Usability


The website is well organized, clean and easy to use. The interactive button help users to find the right information and also make reservation in a few simple touches. At the bottom of the page, contact, email signup and also more info about job are written on the webpage. When users click on the icon of the lips on the left right side of the corner, they could straightly bring users to the main page to get the newest information. It is consider a very convenient and simply use website to users. 

Content

The content is well placed, every information are in places, the interactive button will bring users to the webpage that they wanted to know more information about the particular restaurant such as menus, catering group, dinner and online stores. 

Performance

This webpage have everything users need as a restaurant webpage, easy to use, every thing is well organized, and it also works well in either computer and also mobile devices.  

Week 2 | Class Activity - Prototyping 

In Week 2, we were divided into groups to create prototypes based on assigned scenarios. My group was tasked with scenario 3, which involves redesigning a school's online learning management system.

This exercise involved physical prototyping based on the assigned topic. Our group focuses on redesigning the school's online learning management system.
  • User Need:
    • Students need a user-friendly platform for accessing course materials, submitting assignments, and interacting with classmates and instructors.
  • Usability Principles to Consider:
    1. Consistency
    2. Simplicity
    3. Visibility
    4. Feedback
During the process of creating prototype 1.0

During the process of creating prototype 2.0

More than that, we must evaluate and interact with other groups' prototypes, providing feedback and identifying issues. Learn from the process and reflect on our own weaknesses and assumptions.

Group 5's  prototype 

Week 3 |  Exercise 2 _Web Replication 

Task Requirement: 

We have to use Adobe Illustrator to recreate a website. Out of the three websites we are provided, we have to select two to replicate. This task requires students to replicate two existing websites to understand their structure better. By doing this, students will enhance their design skills using software like Photoshop or Adobe Illustrator and learn web design best practices.
  • Instructions:
    1. Replicate two main pages from the websites provided in the link.
    2. Focus on layout, typography, and color scheme.
    3. Use similar images from stock photo sources; exact matches are not necessary.
    4. Download fonts from Google Fonts if needed.
    5. Follow the original website dimensions for width and height.
    6. This exercise helps students gain insights into web design by focusing on critical elements such as layout, type style, and color style.

I combine the words of the website and choose the font family which is the most similar to Google font systems.  



This is the result after tracing all the words for the most similar font : 


All the words are been programmed into one layer, to avoid confusion.


Next, I create a new layer which is specific for the logos and the graphic inside the webpage. I use pen tool to trace them out and recover the most similar form.


Labeled in another layer. 


The bracket of the selecting are also recover by drawing a rectangle shape. 


Icons and arrows are also drew. 



This is the bracket color of the webpage, I use the eye drop tool to recover it's closest color of the webpage. 


We are given instructions to find our picture or images of the webpage on the Freepick website, these are all the photo I found from to do the task. 


Background photo and also the background color are also need to be adjust, especially the gradience of the color of the image. 


Next, I copied out a new layer and new page for the replicated site of webpage. 


This is what it looks like after copying out a new page. 


There is still some differences of the font, which is the color. 


I change the font color just like the original webpage. 


Last but not least, this is the final result. (Down: The webpage) 


What I come out with: (The task)


Same goes with the another webpage, I first make carve to the layers of the subjects. I start to find the most similar font family of the webpage. 



This is what it looks like after tracing out the text by using almost the same font family. 


Make new layers especially for the recovering of the icons. 


Recovering the icons. 


Picture needed for this particular webpage, found the images on Freepick.


Adding background colors and images. 


Copy the entire artboard to a new webpage. 


Add in and make adjustment on the background image and colors. Moreover, adjustment of the font's colors. 


For the bar of the cookie setting, I applied grains effect to look more like the original webpage's texture. 



The icon I need to drawn out in this particular webpage. 


Final result. 


Week 4 |  Class Activity HTML 

Link to view: https://inquisitive-monstera-a9807d.netlify.app/

For this particular task, the lecture reached out a way to create a simple webpage by using a notepad. These are the simple coding, the topic is to write something regarding our life and a very small introduction regarding ourselves.  




We used <p> as an opening text and </p> as a closing. As for a header, we used <h> and </h>. For this exercise, we are told to insert a random picture by using the coding <img scr> and make a adjustment on its weigh and height. While entering the coding, we are told to keep an eye of the google format to ensure the coding works and the layout was correct. 


Week 5 |  Class Activity HTML (Using Dreamweaver) 

For this week, the lecture taught use to convert the text to Dreamweaver and continue the previous coding. This class we learn how to make adjustment on the font family, and color adjustments on backgrounds and tables. Last but not least, create a timetable using the table codings. 


These is what the timetable looks like: 


These are the codes to create them, Sir Shamasul even though us to make adjustments on the color. For the light color we named it bg light; as for the darker color we named it bg dark. 


Week 6 |  Class Activity HTML & CSS

After instructing us to learn how to develop a contact form on our own last week, Mr. Shamsul this week gave us a quick method to create one and make adjustments to the coding. This is how it appears. 


These are the coding to create the content. Not just that, this week we learn how to use CSS coding, which makes the HTML more tidy to look at and more easier to function. 


This was the final outcome for this particular exercise in PDF format



Exercise 05 _Creating a Recipe Card
The task is to design a recipe card using HTML and CSS. The objective is to create a simple webpage that presents a recipe's ingredients in an aesthetically pleasing manner.

We need to create an HTML file named "index.html." This file should contain a section displaying several key pieces of information: the recipe title, relevant images, a list of ingredients, and step-by-step cooking instructions. Additionally, we should create an external CSS file named "style.css" to apply styling to the recipe card. The CSS should utilize various selectors, including element selectors (such as body, h1, ul), class selectors (such as .recipe-title, .ingredient-list), and ID selectors (such as : instructions) to effectively style different parts of the recipe card.

This is the webpage I selected. I went with the recipe for the pumpkin and rice soup since I thought it was the simplest dish to prepare and I was curious about the recipe, so I would attempt making it myself in the future. 

The website: https://www.101cookbooks.com/pumpkin-and-rice-soup-recipe/

Recipe assignment: https://pumkinandricesoup-html.netlify.app/

From the receipe website, I listed down all the important information and apply it into the Dreamweaver. The advice, Ingredients, Instruction, Serves ana d Few Images. 





Before starting the task, I did do a rough sketches for it : 


I type out the coding in the Dreamweaver, and make changes on it. Might not be good-looking, and the coding are simple, but I'm looking forward to learning more about it and create a better webpage. 


Coding in pdf format: 

 

Final Outcome :

FEEDBACK

Week 1-2 
None

Week 3 
General Feedback: Overall, the prototype is nice and appears nearly finished. The feedback notice section (i.e., "Submission Successful") has to be expanded.

Week 4
General Feedback: To ensure that the picture appears on the website, make sure that the HTML and image are saved in the same file.

Week 5-8
None

FURTHER READING


  • Basics of Good Web Design
    • Start with the basics. Learn about visual hierarchy, using grids, and picking the right colors. These are the building blocks of any good design.

  • Focus on User Experience (UX)
    • A good website is easy to use. Learn how to understand your users, create profiles of them, and test your designs to make sure they work well.


  • Responsive Design
    • People use different devices to visit websites. Learn how to make your design look good on phones, tablets, and computers by using flexible layouts and media queries.

  • Advanced HTML and CSS
    • Go beyond the basics of coding. Master techniques like CSS Grid, Flexbox, and animations to create more dynamic and interesting pages.
  • Adding Interactivity with JavaScript
    • JavaScript makes your website interactive. Learn how to use it to create sliders, pop-ups, and other elements that make your site more engaging.


  • Designing for Accessibility
    • Make sure everyone can use your website, including people with disabilities. Learn about accessibility guidelines and best practices to make your site inclusive.

  • Search Engine Optimization (SEO)
    • Help people find your website by improving its visibility on search engines. Learn about keyword research, on-page optimization, and technical SEO.
  • Using Content Management Systems (CMS)
    • Learn how to use platforms like WordPress or Drupal. These systems make it easier to manage and update your website content.
  • E-commerce Design
    • If you're building online stores, learn best practices for product pages, shopping carts, and checkout processes. Make the shopping experience easy and enjoyable.
  • Learn from Real Examples
    • Look at successful websites for inspiration. Study what they do well and think about how you can apply similar ideas to your projects.

REFLECTION


Experience
This semester in the web design and development course was incredibly enriching. I engaged in diverse tasks such as analyzing website designs, creating prototypes, and learning HTML and CSS. Each week presented a new challenge, from evaluating existing websites for their design and usability to replicating web pages using Adobe Illustrator, and finally, developing and styling our own web pages with Dreamweaver. The hands-on projects, like creating a recipe card and a contact form, allowed me to apply theoretical knowledge in practical scenarios, enhancing both my design and coding skills. Collaborating with peers on group projects further deepened my understanding and appreciation of effective web design.

Observation:
I observed that the best web designs are those that put the user first. Clear navigation, responsive design, and visual appeal are crucial for a good user experience. This collective effort made the learning process much more dynamic and enriching. Using tools like Dreamweaver made me appreciate the importance of clean and organized code, as it greatly simplifies the design process and ensures the website functions smoothly across different devices.

Finding:
A major takeaway from this semester is the importance of iteration and feedback in the design process. Early and frequent feedback helped refine our projects and led to much better outcomes. Learning HTML and CSS laid a strong foundation for web development, and using Adobe Illustrator and Dreamweaver showed me how technology can enhance and streamline design work. I realized that to create effective websites, it's essential to continuously learn and adapt. 

Comments

Post a Comment

Popular posts from this blog

Information Design_Exercise

Image
5/2/2025-19/3/2025 Ruthlene Chua Zhen Si 0365222  Bachelor of Design (Honours) in Creative Media  Instruction Lectures Class Summaries Task Exercise 1 (Quantifiable Information) Exercise 2 (L.A.T.C.H information poster) JUMPLINK TO: PROJECT 1 &1.2 PROJECT 2 (GROUP PROJECT) Feedbacks  Reflections INSTRUCTION Class Summaries  Week 1_5/2/2025 : Introduction to Infographics Infographics are a great way to present information in a visually engaging and easy-to-understand format. They combine text, images, and design elements to make data and ideas more digestible. Compared to traditional text-based content, infographics capture attention more effectively and improve retention. Types of Infographics There are eight main types of infographics, each serving a different purpose: List Infographics – Organize information into a structured list while using visuals to enhance readability. Statistical Infographics – Present data using charts, graphs, and percentage indica...
Read more

Sonic Design_Final Project

Image
 21/4/2025-21/7/2025 Ruthlene Chua Zhen Si 0365222  Bachelor of Design (Honours) in Creative Media  Instruction Lectures Task  Game audio_Final Project   JUMPLINK TO: Sonic Design Exercises Sonic Design Project 1 Sonic Design Project 2  Reflections INSTRUCTION Task For this assignment, we were tasked with selecting one gameplay clip out of five options and producing a complete, original soundscape to accompany the visuals. All audio had to be created independently, without using pre-existing or third-party sound sources.  I decided to work with Hollow Knight because its visual style and overall tone appealed to me creatively. Since I’ve played the game before, I already had a rough idea of how its world should sound, which helped guide my approach.  However, since I played the game a long time ago and couldn’t clearly remember how it sounded, I referred to a few gameplay videos to refresh my memory and get a better sense of the game's audio ...
Read more

Sonic Design_Exercises

Image
21/4/2025-21/7/2025 Ruthlene Chua Zhen Si 0365222   Bachelor of Design (Honours) in Creative Media   Instruction Lectures Class Summary  Task  Adjustment of the sound equalizer using Adobe Audition Adjust different sound effects depending on its environment sound equalizer using Adobe Audition 2 Environment  Audio Fundamentals JUMPLINK TO: Sonic Design Project 1   Sonic Design Project 2 Sonic Design: Final Project  Feedbacks   Reflections INSTRUCTION Lectures Week 1_21/4/2025 The required task for this week is to write a reflection blog about what we have learnt through the lecture videos below: Link 1 Link 2 Link 1: Sound Fundamentals Figure 1.0: Sound fundamental video on YouTube  Nature of Sound: Understanding how sound behaves and what contributes to its creation. Capturing Sound: How sound is recorded using various techniques and equipment. Processing Sound: Analyzing and manipulating sound for specific purposes and m...
Read more