Week 01-Weekxx/29.08.2023 Yap Guang You/0363730 Video and Sound
Production/Bachelor of Design(Hons)in Creative Media
Exercise:Minits Editing & Doritos Editing
Mr. Martin, gave us a short briefing about this modules, and introduce
to us the projects and software we need to familiar with.
Project 1
we will deal with the sound production, we need to do a sound duping and
shaping exercise. Project 2 we need to shoot Tik Tok or
Instagram reels for ourself, then next we need to film a video in
group then edit the video by ourself. Final project is to film a 60s stop
motion video, we can work in group or individual.
Beside that
Mr. Martin shows us how to use Adobe Premiere Pro which the software we
are going to use. We have two small exercise during the class to let us
familiar with the software quickly.
These exercise required
us to rearrange the clips to remake the video function logically. It took me
some time to adapt with Premiere Pro because it was my first time to
use this software, but it was fun for me, I finish both of the exercises
during the class. After last few reminders, the class dismiss.
Progression
Final Clips for Both Exercises
Exercise: Lalin Editing
We watch a short film 'Lalin' , then we need to create a 35 seconds short clip about to recreate a film using the footage given by Mr. Martin, those footage are film by other students. We need to add the graphics on the video, and sharp the clip nicely.
Week 01-Week xx/28.08.2023-xx.xx.2023 Yap Guang You/0363730 Interactive
Design/Bachelor of Design(Hons)in Creative Media Exercises
1&2/ Web Analysis&Web Replication Exercise 3/HTML and CSS
Document Development
Week02/Usability-Designing Products for User Satisfaction
In this lecture, we learn about the basic of product design, usability, and
the 5 principles which is, consistency, simplicity, visibility, feedback, and
error prevention. Consistency is talking about letting people recognize your
style or your brand easily, and not confusing the user, example given was
Apple, Samsung, and Sime Darby. Simplicity is talking about letting your
product be user-friendly, not being too complex to confuse the users.
Visibility most are talking about how we combine different elements together.
Feedback is the move that lets the user know they have done some move, like
sound effects after clicking or the receipt after making an online payment.
Error prevention is to make users aware of making some minor mistakes, like
the read wave line when we use Microsoft Word. Some common mistakes to avoid
in usability were the complex interface, confusing navigation, poor feedback,
and inadequate error handling.
Week02/Video sharing- It's not you. Bad door are everywhere
Week03/Understanding Website Structure
In this lecture, we learn about the structure of the website. Header,
body and footer are the key elements of website. Header is the top
section of the website that contains logo, contact information. Body
contains the main content of the website, such as text and images. The
Footer is the bottom of the website, havind the copyright information,
links of other page.
Week03/Class note
Week06/Selectors in CSS
CSS selectors are a fundamental part of CSS that allows us to target
and style HTML elements on a web page, it are used to define which
elements should receive specific styles, such as colors, fonts, etc.
They are a crucial part of web development because they enable us to
control the presentation and layout of our web pages. A universal
selector is selecting all elements on the page. Element selector is
the simplest type of selector, it targets HTML elements by their tag
name. An ID selector function as targets an element with a specific id
attribute. The class selector, targets elements with a specific class
attribute. It also shows more selectors in this lecture, CSS provides
a variety of selectors to offer flexibility and granularity when
targeting HTML elements for styling.
Week07/Box Model
A display property is the most important property for controlling
layout in the CSS, each element has a default display value, most
usually block or inline. A <div> element was a standard
block-level element, and <span> was the standard inline element.
There are others display properties, such as Inline-block, Flex and
Grid. HTML elements are containers, and box was the container, they
are three layers in each box, padding, border, and margin.
We have a short exercise to familiar with how it works.
This task aimed at demonstrating proficiency in comprehending web
development through prototyping and development procedures. We will learn
fundamental skills in crafting and advancing websites.
Web analysis
In this exercise, we need to choose two webs from the link provided and
observe the web design and content, function, and composition, then consider
how they impact user experience, and summarize the pros and cons of the web.
500 words were required for the summary.
https://www.csswinner.com/winners
I chose both websites, one is 'You can be anything' by The First The
Last, which talks about Barbie. The next was Tim van Wolfswinkel, it was a
portfolio page. I learned a lot from these two web, their layout and color use
inspire me a lot, and I think it will help my assignments a lot.
Web analysis preview
Web Replication
In this task, we need to use Photoshop or Illustrator to replicate the
websites given, we need to choose 2 websites among the 3 websites given.
The websites I chose are Ocean Health Index and
Morgan Stanley.
HTML and CSS Document Development: Creating a Recipe Card
In this exercise, we need to 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.
Visual study
I searched for some recipes web for my reference, and there are some
similarities between them, most of them have a navigation bar and a logo. The
content they included was ingredients and instructions, some of them provided
some tips, and some of them explained the information about food.
I made a rough layout sketch so I could track I was on the composition that I
wanted when I was coding.
Exercise3/Sketch
Progression
First, I make a basic layout for the section and list. I seperate the content
to the food details, preparation, steps, tips and also some health stats. The
heading section I decided to have a logo and a navigation bar as same as my
reference. I use Adobe Dreamweaver for the coding, and I will use HTML
and CSS for the web development.
Exercise3/Progression_1
Then, I started figuring out my content, I decided to make a recipe about
how to cook an overnight oat, so I did some study about it. I manage my content
element with <div> and <class> for my convenience of decoration in
CSS.
Exercise3/Progression_2
Next, I make my logo by using Adobe Illustrator. The
'K' means kitchen, I just want it to be simple to save time.
Exercise3/Progression_3
Last, I use the CSS to decorate my HTML file. It was very convenient and
clear work because I managed the elements in my HTML file, but it was still a
big job. I do face some challenge when I was making the decoration, such
as the boxing-size was incorrect or can't align the image and the content well,
and the logo wasn't function well in the web.
Exercise3/Progression_4
Submission
After some minor adjustments, I uploaded my index file to netlify, and named
my link.
Good websites have some similarities, they can let the user understand the
content clearly and directly, the way they interact with users might be complex
but they have a clear guide and are convenient to read. During the web
replication task, I noticed that the balancing is important, if the pictures are
not balanced, they will misdirect the user and cause some
misunderstanding.
Exercise 3
Organizing my code nicely does help a lot for me, it reduces my errors and
also lets me have a clear mindset about the development progression. Doing
research or studying the references before starting our work will have a huge
impact on the progression speed, after having a clear image of the outcomes in
our mind, everything will be on track during the progression. I found that
using your boxing element well does help a lot when developing a web.
