28.08.2023 - 17.09.2023 (Week 1- Week 8) Caitlin Ong Lynn Dee / 0343801 / Bachelor of Design (Hons) in Creative
Media Interactive Design Exercise
LECTURE
Week 1 Mr.Rahman gives us a brief on the assignments, and he show a sample of
our senior work and introduce us to a software called Netlify and
Dreamweaver. Our first assignment is Web Analysis.
Week 2 The class was move to Monday to Tuesday we learn about
The Key Principles of Usability which are Consistency, Simplicity,
Visibility, Feedback and Error Prevention. We also watch a video on
Usability.
What is Usability? Usability part of UX Design refers how effective the user can use the product or design in a certain situation. Within an Interface it is important that the users are able to easily achieve their objective in from their first impression.
Principle of Usability?
Consistency
Simplicity
Visibility
Feedback
Error Prevention
Practical For our class activity we divided into 4 groups to design a
interfere prototype, the interface design is based on a given scenario. For
my group we designed a online learning management system
Fig 1.1 Interface Planning
Fig 1.2 Main Page Draft 1
Fig 1.3 Main Page Draft 2
Fig 1.3 Main Page Final
Week 3 We learn about website structure and there are three key elements of a
website which are the Header, Body, and Footer.
Key Elements:
Header - the top section of
a webpage, it usually contains the website's logo, navigation menu,
and contact infomation. It also provides users with quick access to
essential infomation and navigation
Body - the main content of the area of a webpage. It contains
text, images, videos, and other multimedia elements. If content is
properly organized within the body is easily readable
Footer - it is located at the bottom of a webpage. It
typically has copyright information, links to important pages, and
contact details. The footer provide closure to the webpage and
additional navigation options.
Practical For the class activity each group has to design a user-friendly navigation
menu. The theme of the website can be a restaurant, and e-commerce store,
a travel agency, or a blog.
Fig 1.4 Webpage Prototype
Fig 1.5 Navigation on the Webpage Prototype
INSTRUCTION
Exercise 1 / Web Analysis
From the given link in Google Classroom, we are supposed to review two
websites of our choice and how it impacts the user experience. For
there we have write a brief report on our findings and recommendations.
The report should in Google slide format, and it has
been no more than 500 words.
In this Exercise I have to replicate 2 existing main pages of a
website, to gain better understanding of the structure and to
develop software skills such as Photoshop and
Illustrator.
Fig 2.1 First, I lower the opacity on the original as guidance for
the layout (9/09/2023)
Fig 2.2 I use clipping mask to change the size of the pictures.(9/09/2023)
Fig 2.3 In Some Picture I use adjustment layers. (9/09/2023)
Fig 2.4 Replication font (top), Original Font (bottom) (9/09/2023)
Fig 2.5 Organic Shapes like the logo and the arrow I use a pen tool
to draw (9/09/2023)
Fig 2.6 Regular shapes like the scroll down measurement shown I use
the shape tool (9/09/2023)
Fig 2.7 I found social media symbols on the internet, and I use the
magic wand tool to delete backgrounds. (9/09/2023)
Fig 2.8 I use the magic wand tool to select the symbol and color it
is using the brush tool (9/09/2023)
Final Outcome:
Fig 2.9 Website 1 Replication (9/09/2023)
Website 2: Ocean Health Index
Progress:
Fig 2.10 First, I lower the opacity on the original as guidance
for the layout. (9/09/2023)
Fig 2.11 Replication font (top), Original Font (bottom) (9/09/2023)
Fig 2.12 I use the shape tool to draw a rectangle. (9/09/2023)
Fig 2.13 I use the Gaussian Blur on the rectangle. (9/09/2023)
Fig 2.14 I the image found on the website and I use the magic wand
tool to delete the background (9/09/2023)
Fig 2.15 I use color fill to color the logo (9/09/2023)
Fig 2.16 I use clipping mask to change the size of the pictures. (9/09/2023)
Fig 2.17 I lower the opacity of the background of the words. (9/09/2023)
Final Outcome:
Fig 2.18 Website 2 Replication (9/09/2023)
Comparision
Fig 2.19 Website 1 Comparision (9/09/2023)
Fig 2.20 Website 2 Comparision (9/09/2023)
Exercise 3 / Creating a Recipe Card
In this our task is to create a recipe card using HTML and CSS code on Dreamweaver. The goal to design a basic web page that displays a recipe's instructions in a visual pleasing formant pleasing format.
Recipe Information
I decide to create a recipe of a blueberry shortcake, the recipe information is from a website called "Allrecipe" I use it as a reference.
Fig 3.16 Screenshot of final layout of Exercise 3 (7/10/2023)
FEEDBACK
Week 6
For Exercise 3, put the steps in this form.
Change font family
REFLECTION
Experience
It is actually straight forward where we learnt about the designs of existing websites.
By Exercise 3 we slowly learnt about the basics of coding. When Mr. Samsul was explaining about the HTML and CSS coding, I was lost in thought, but luckily Mr. Samsul helped we with the trouble I was going through.
Observation
I tried to follow the lecture, but Mr. Samsul's explanation was too fast and it was hard to keep up. He then gave us some exercises to help us out.
Findings
Mr. Shamsul provided us with some lecture presentation on google classroom to help us understand. The explanation in the presentation was slightly difficult to understand with the use of terminology.
Comments
Post a Comment