Interactive Design - Final Compilation

24.4.2024 - 3.8.2024

Ruthlene Chua Zhen Si 0365222 

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

Final Compilation and Refection

INSTRUCTION

 

Exercise 1 

Website 1：https://www.thebluerenaissance.earth/
Website 2：https://www.sushidelic.net/

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. 

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.  

EXERCISE 2




WEBPAGE 2: Bandit Running


EXERCISE 3 _MY LIFE : 

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


EXERCISE 4_ CREATE A RECIPE WEBPAGE 

PROJECT 1  PROTOTYPE DESIGN _DIGITAL RESUME

                                     
Final Outcome: PDF Format


PROJECT 2 WORKING WEB PAGE

Coding for the entire resume in pdf format (html & css): 


Website resume pdf format :


FINAL PROJECT_ SINGLE PAGE WEBSITE

LINK TO WEBPAGE:https://theworldofdogs-final.netlify.app/

CODINGS: HTML & CSS

FINAL OUTCOME: PDF FORMAT 

    

REFLECTION

Experience

For this semester I learn various tasks like analyzing website designs, creating prototypes, and learning HTML and CSS. Each week brought new challenges, from evaluating websites and replicating them using Adobe Illustrator to developing our own web pages with Dreamweaver. Hands-on projects, like making a recipe card and contact form, helped me apply theoretical knowledge in practical scenarios. Working on my resume prototype using Figma and turning static designs into real web pages using HTML and CSS were particularly rewarding experiences. 

Observation

I observed that the best web designs prioritize user experience with clear navigation, responsive design, and visual appeal. Tools like Dreamweaver highlighted the importance of clean, organized code for smooth functionality across devices. Feedback was crucial in improving design quality, pointing out issues like star ratings and image alignment that needed fixing. Aligning and positioning elements were tougher than expected, and ensuring proper spacing for images and text required several adjustments. Making the webpage phone-friendly was challenging but ultimately rewarding.

Findings

A major takeaway is the importance of iteration and feedback in the design process. Learning HTML and CSS laid a strong foundation for web development, and using tools like Adobe Illustrator and Dreamweaver streamlined the design work. Practical solutions for design elements and ensuring the page was responsive were crucial. This semester taught me the value of continuous learning and adapting through research and experimentation in web design.

During making any coding:

My code doesn't work, I have no idea why; my code works, I have no idea why ;)


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