Interactive Design / Exercises
03/04/2023 - 24/04/2023 / Week 1 - Week 4
Kim Min Ah / 0356145
Interactive Design / Creative Media / Taylor's Design School
EXERCISES
Exercise 1 - Website Analysis
Exercise 2 - Web Replication
Exercise 3 - Personal Profile Page
Exercise 4 - Layout Exercise
ClASS NOTES
Week 1 (03/04/2023)
-The colour theme of the overall website and the images on the landing page give users a clear impression of the brand.
-Good composition and alignment.
-Also, those call-to-action buttons are easy to find and the well-categorized sections provide a simple and convenient user experience.
-It has sections for all the important information that future users would seek.
Week 2 (10/04/2023)
Usability
-Not necessarily limited to web or app designs
If there’s not enough information on the boarding page > high risk of misleading
A design’s usability depends on how well its features accommodate User’s needs and contexts
It should be the easiest way to achieve the goal of a website.
Premium website (e.g. Netflix)
Key Principles of Usability
- Consistency
- Simplicity
- Visibility
- Feedback
- Error Prevention
Feedback (alert users when a task is completed)
Can be in any form (sound, colour, e-mail, etc)
Consistent design is intuitive design.
Pause button
(When loading a video takes too long > prevent the entire website goes slow)
Neat navigation bar
Visibility
Users should know, just by looking at an interface, what their options are and how to access them.
Error prevention on the website:
E.g.
- Not a strong password
- Are you sure you want to delete this?
- You missed out on certain parts.
DON’T
- Complex interfaces
- Confusing navigation
- Poor Feedback
- Inadequate error handling
Improve visitor’s online experience
Significant role in branding and product messaging.
Colour plays a huge role in customers’ decisions on purchase.
Also, colours can increase overall brand recognition(study conducted by the University of Loyola, Maryland)
Colour theory for web designers
-Monochrome
-Complementary
-Analogous
-Triadic
Best not to choose more than 3 colours in web design.
Warm colours
Evoke a sense of passion, happiness, and heat
Alert of danger
Cool colours
Reminisce of chilly climates, crystal clear waters, or the sky
Soothing and relaxing than warm colours.
Connotations of formality and sadness.
R+G+B = white (screen)
C+M+Y+K = black (print)
HEX
More tints = lighter
More shades = arker
Hue = colour
Percentage of CMYK
Saturation refers to colour intensity.
Lightness defines how bright a colour compared to pure white.
Command + 2 = lock
To find effective colour schemes:
Adobe colour
Contrast is a crucial element in a website.
Make sure the website can be loaded as fast as possible.
Accessibility:
Colour choices for colour blind
-requires several CSS files
Make sure to use grids to design a website.
Week 7 (15/05/2023)
JPEG (Joint Photographic Expert Group)
GIF (Graphics Interchange Format)
PNG (Portable Network Graphics)
Selection tool
Edit copy porch
Create new artwork with transparent background
Control the file sizes for quick loading time
For web:
Save for web
Export the image (not save)
72 dpi
Resize the photo if it requires
Do not resize the image on dream weaver.
Separate the working files and web-only files (images and pages)
File name example:
img_main.jpg
title= “logo”
Allow users to hover over the image and see the information
ID attribute
All low keys
Make sure there should be no several elements that have the same value for the ID attributes.
It has to be unique.
Class attribute
e.g.) class=“left”
Block level elements :
Appears in a new line
e.g.)<h1>,<p>
Inline elements
E.g.) <img>
Special characters= type “&”
Cascading Style Sheet
Other sets of documents with different kinds of coding with HTML
Week 8 (22/05/2023)
Display
CSS’s most important to control layout properly.
Every element has a default display value: usually either block or inline.
Block-level element:
<div>: Block-level element, Starts on a new line
Other block-level elements:
Header, footer, section, etc.
e.g.) headings
Inline element:
Standard inline element,
<span>: can wrap text in a paragraph
e.g.) horizontal menu
Other display properties:
Inline-block
Flex
Grid
Most HTML elements are containers:
Body, p, h1, h2, div, ul, ol, li
Boxes:
Padding
Border
Margin
example:
HTML
<div>
<p>This is a paragraph.</p>
</div>
CSS
div {
background-color: red;
padding: 0;
border: 1px solid black;
margin: 0;
}
p{
background-color: white;
padding: 1em;
border-width: 10px;
border-style: solid;
border-color: blue;
margin: 10px !important;
}
To create a layout:
Include <div> tag/element
In CSS using the position property
Five values of position property:
Attic
Relative
Absolute
Fixed
Sticky
INSTRUCTIONS
Fig 1.1.1 Interactive Design Module Booklet
Exercise 1 - Website Analysis
Fig 1.1.2 Website Analysis
Fig 1.1.3 Website replication progress
Fig 1.1.4 Website replication progress
Fig 1.1.5 Website replication progress
Fig 1.1.6 Website replication progress
Fig 1.1.7 Website replication progress
Fig 1.1.8 Website replication progress
Fig 1.1.9 Web replication 1
Fig 1.2.1 Web replication 2
https://kinhr.com/
Minion Variable Concept, Bold and Semibold
Min Sans, Regular and Medium
Fig 1.2.2 Personal profile page progress
Fig 1.2.3 Personal profile page code
Markup Validation Service:
Fig 1.2.4 Validated errors
Submission
Fig 1.2.5 First submission of exercise 4
Week 9 (29/05/2023)
Images are required.
The typeface and colour choices are okay, but the layout needs more improvement.
Fig 1.2.6 revised exercise 4
Markup Validation Service:
Fig 1.2.7 Validated errors
Comments
Post a Comment