INTERACTIVE DESIGN - EXERCISE

-
28/08/2023 - Week 1
Thanaphorn Daensaad  / 0350930
Interactive Design / Bachelor of Design (Hons) in Creative Media 


Lists: 
Class Summary
Instruction

- Exercise 1: Web Analysis
- Exercise 2: Web Replication
- Exercise 3:
- Exercise 4:


Feedback
Reflection
Class Summary

Week 1
Mr Shamsul briefed us through the module and explained the tasks that will be assigned to us throughout this semester which breaks into Exercises, Project 1, Project 2 and Final project & E-portfolio. He showed us some examples and differences between a multiple pages website and single page website with sections which would be something expected from us. The softwares that we will be using for coding are such as Adobe Dreamweaver, Visual Studio Code or Figma.

References by professionals shown in class:
Award platform for website designers: https://thefwa.com/


Week 2
Today we watched a video on Norman door which is all about the makings of human centered design websites. We can use design thinking processes (emphathize, define, ideate, prototype then test) to find any errors that needed to be amend as it will affect the User Experience. Mr Shamsul divided us into groups to make a website wireframe design according to scenarios given.

Group Exercise - Wireframe creating




Instructions:
Module Information Booklet



Exercise 1: Web Analysis
For this week's exercise, we are assigned to choose 2 websites from the site given then analyze the design, layout, content and functionality. Then, we are also required to identify the strengths and weakness of the website considering how it could impact the user experience. We are required to write a brief report summary not more than 500 words in Google Slides. Formatting must be clear and screen capture to explain may be included.


What To Have in The Analysis:
- Consider the purpose and goals of the website, and evaluate whether they are effectively communicated to the user.
- 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.


Google slides


Exercise 2: Web Analysis
For this week's exercise, we are required to replicate two websites main pages using either Photoshop or Illustrator. Follow the dimensions of the existing website from the width and height. This exercise will help you develop your design skills using software such as Photoshop or Adobe Illustrator, and gain insights into web design best practices. You can use any image from stock image or free stock icon. The image that you will be using does not have to be an exact image from the original website. You may replace it with a similar image. Focus on the layout, type style, and color style. To find similar typefaces, find them from Google Fonts.


First website: Ocean Health Index
https://www.oceanhealthindex.org

The first thing to do was to find the dimension of the web before replicating it. By rightclicking and clicking inspect, I was taken to the inspection page where I can obtain all the info on the page like the color pallete, dimensions, typeface, fontsize and more.


Wireframe work outline

Comparison side-by-side 



Second website: Bandit Running
The first thing to do was to find the dimension of the web before replicating it. By rightclicking and clicking inspect, I was taken to the inspection page where I can obtain all the info on the page like the color pallete, dimensions, typeface, fontsize and more.

Comparison side-by-side




Final website replication:

Website #1


Website #2



Exercise 3: Creating a Recipe Card
In this exercise, you will create a recipe card using HTML and CSS. The goal is to design a basic webpage that displays a recipe's ingredients and instructions in a visually appealing format.

Create an HTML file named "index.html."
Create a section that displays the following information:
Recipe title
Include necessary images for the page
List of ingredients
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 (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 netlify

Comments

Post a Comment

Popular posts from this blog

SONIC DESIGN - EXERCISES / AUDIO FUNDAMENTALS

-
Image
21/04/2025 - 13/05/2025 (Week 1 - Week 4) Thanaphorn Daensaad / 0350930 Sonic Design / Bachelor of Design (Hons) in Creative Media Audio Fundamentals List Lectures Instructions Exercise 1: Equaliser Exercise 2: Sound shaping Exercise 3: Sound in space Feedback Reflection Lectures Week 1 / 21/4/2025 On the first week of self-directed learning. we were required to have Adobe Audition installed for the upcoming tutorial class we would be having on Tuesday. We are also required to create a blog as this week's attendance submission. We first learnt about the fundamentals of sound, how the sound travels and how we percieve sound. Lecture 1: Sound Fundamentals and Equaliser Sound - a vibration of air molecules that stimulates our eardrums. Nature of sound 3 Stages of sound: Production - source of sound Propogation - medium where sound travel...
Read more

ANIMATION FUNDAMENTALS - LECTURE & EXERCISE

-
Image
23/09/2024 - 23/01/2025 / Week 1- Week 14 Thanaphorn Daensaad / 0350930 Animation Fundamentals / Bachelor of Design (Hons) in Creative Media Weekly Lecture & Exercises List 1. Instructions 2. Weekly Lectures 3. Exercise 1: Bouncing Ball 4. Exercise 2: Ball With Tail 5. Feedback 6. Reflection Instruction Weekly Lectures Week 1 This is the first week of class. Mr. Kamal briefed us on the work that we will be working on throughout the semester. The assessment consists of exercises, project 1,2 and a final project. We were first asked on our knowledge on animation in terms of the principles and the history of it. He talked on the birth of Toys Story being the first 3d animated film and also Bugs' life. He gave us a brief introduction to frames and more. It could lead up to 24 or 12 frames per second. We were shown examples of past students' work in order to get a brief understanding of the expectation's of our outcome. The founder of Pixar, John Lasseter wrote an article on...
Read more

MINOR PROJECT

-
Image
23/09/2024 - 06/01/2025 / Week 1- Week 14 Thanaphorn Daensaad / 0350930 Minor Project / Bachelor of Design (Hons) in Creative Media Final Compilation & Reflection / WarisanXR List Instructions Minor Project Feedback Reflection Instruction Minor Project Proposal Presentation TrueXR Proposal G8 Minor Project by Ian Choo Xin Zhe Final Presentation WarisanXR Final Presentation by REEMA ARIF HAMZA MIRO Board Final Project Tracking Document Feedback Refer to Project Tracking Document for weekly feedback.  Reflection Week 1 D – Describe Objectively What Happened In the first week, Mr Mike introduced us to the class briefly before he told us to get in a group of 7 people of mixed specialisation. He showed us the past projects that the semester before us had done which was quite interesting. Mr Mike was trying to prove to us the point that it doesn't matter what background we have whether it being design, computing or etc as long as our first initiative was to solv...
Read more