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