Interactive Design / Exercises
3/4/2023 - 22/5/2023 (Week 1 - Week 8)
Sheryl Pang Pui San / 0349746
Interactive
Design / Bachelor of Design (HONS) in Creative Media
Exercises / HTML
Document Development & HTML, CSS Document Development, CSS Layout Model
LECTURES
Week 1
-
-
Figure 1.1 Week 1 Lecture
Week 2
-
-
Figure 1.2 Week 2 Lecture
Week 3
-
-
Color Theory
Figure 1.3 Week 3 Lecture
Week 5
-
-
Organizing Web
Figure 1.4 Week 5 Lecture
Week 6
-
The Web
-
The Web
Figure 1.5 Week 6 Lecture
Week 7
-
-
HTML
Figure 1.6 Week 7 Lecture
INFORMATIONS
Figure 1.7 Module Information
In Class Activity
Week 1
-
-
Basic Site Evaluation
Surveying the possibilities : A warm up for Exercise 1
we are divided into groups and required to choose 3 good website and 3
bad designed website on these 2 links: mwa, awwards
Figure 2.1 Google Sheet PDF for group activity
We choosed websites
comments: personally i really like the 3d website which is very
interactive
we also learned from others presentation
call to action button
hover effects
header and footer
call down menu
model window - convert user
we respect yr privacy
catogeries - sub catogaries - ??infodesign laws
principle - gestalt theory - sizing/ proximity too far away, making it
look like its in another group
Week 3
-
-
Activity;QnA:
• Read all of the resources in the Resources section below:
Resources/Online Documents
• Web Style Guide: Visual Design
(http://webstyleguide.com/wsg3/7-page-design/3-visual-design.html)
• Wikipedia: Web Colors (http://en.wikipedia.org/wiki/Web_colors)
• WebAIM: Color Blindness
(http://www.webaim.org/articles/visual/colorblind.php)
• What are the three basic colors that monitors transmit?
red, green, blue
• How many colors could be referenced by name (e.g., "red") in HTML
4.01?
16 / 147 colors in HTML 5
• How many different colors are there in the "web-safe" palette?
216
• Are the majority of people we refer to as color blind unable to see
any color at all? Explain.
Color-blindness or color vision deficiency is the inability to
distinguish certain shades of color.
• According to the WebAIM page on color blindness, what is the key to designing sites that are accessible to people who are color blind?
Exercise
Web Analysis
-
Figure 3.1 Web Analysis Submission (Week 2)
Web Replication
-
-
Website chosen to replicate:
|
Figure 4.2 Web replication outline in AI
|
| Figure 4.3 Web replication in AI with layers |
Figure 4.4 Web Replication 2 in AI with layers
Figure 4.5 Web Replication Submission (Week 3, 20/4/2023)
HTML Exercise - Personal Profile Page
-
-
Learning of HTML.
Using Adobe Dreamweaver to build a simple profile page with image and
description.
 |
| Figure 5.1 Personal Profile Page profile picture |
 |
| Figure 5.2 Personal Profile Page content |
Exercise 4
-
Layout Exercise
-
Layout Exercise
Using HTML and CSS to create website exercising layout.
Outcome: https://sherylpang-exercise4.netlify.app/
 |
| Figure 6.1 Layout exercise Nav |
 |
| Figure 6.2 Layout Exercise Content |
 |
| Figure 6.3 Layout Exercise footer |
Comments
Post a Comment