Interactive Design//Exercises

March 29, 2022

Interactive Design//Exercises

1/4-10/5/22 Week 1- Week 7

Chan Siew Ni #0352518
Bachelors of Design in Creative Media

Interactive Design//Exercises

INSTRUCTION

LECTURES

Week 1

Week 2

Notes:

<head>- heading part

<title>- big title show in the top of the website

<body>- body part

<p>- Paragraph

<h1> - <h6>- heading size from range 1-6 (1 is biggest and 6 is smallest)

<ul>- unordered bulleted list

<li> - list item element

<a href> - when need to insert link to a specific word

<target="_blank"> - when clicking the link it will open a new tab and show it

<title="xxxx">- when the cursor move to the word and stay, it will appear the word written in

<alt="xxxx">- when searching the keyword inside the " ", the certain things will appear.

Example of link insert: <a href:"link"target:"_blank"title="xxx"alt="xxx">

Font design:

<b>: bold

<i>: italics

To Remember as Always , <>open must have a close</> (They are stick together)

Week 3

Lecture Notes

<img> : Adding an image (with no closing)
<img src="url"> / <img src="img_apple.jpg"> // Example
<img src="img_apple.jpg" alt= apple from New Zealand> // Added to describe the image
<img src="img_apple.jpg" alt= apple from New Zealand width="500" height="350">// Specific the width and height for the certain image

Image Format: JPEG, PNG, and GIF

JPEG (Joint Photographic Expert Group)

The most common image format used
Highly compatible and small size and very little loss of quality
Saved using lossy compression
used for photos on the web

2. GIF (Graphics Interchange Format)

Uses lossless compression
save the image over and over again without lose any data
uses 8-bit lossless format which support a maximum 265 colors
able to animated

3. PNG (Portable Network Graphics)

contained a bitmap of indexed colors and uses lossless compression
allows full range of color and better compression
most used format
support image with transparent

ID & Class Attribute

ID Attribute:

Identify the element from others element on the page
There's no two element have the same value for their id attributes
Giving an element an unique identify allows you to style it differently from any others element on the page
convenient to use when you want a way to identify several elements as being different from the other elements

Block Element

Always appear to start on a new line in the browser window
Examples: <h1> <p> <ul> <li>

Inline Element

Always appear to continue on the same line as their neighbouring element
Examples: <b> <i> <em> <a> <img>

Week 4

Lecture Notes

UI vs UX

User Experience: button that should physically press down when you click it

User Interface: how would a series of button and how they look like

User Experience:

Designer focus on the structure and layout of content, navigation and how users interact with them
including site-maps, user flows, prototype and wireframes which focused on the underlying structure and purpose of the software

User Interface:

focus on anticipating what users might need to do and ensuring that the interface has elements that are easy to access, understand and use to facilitate those actions
user interface together concepts from interaction design, visual design and information architecture.
focus on the wat the functionality is display and the fine details of how users interact with the interface
produce the visual comps and functioning front-end code
polished final production quality outputs

Some basics elements in user interface:

Input controls: buttons, text fields, checkboxes, radio buttons, dropdown lists, lists boxes, toggles, date field
Navigational components: breadcrumb, slider, search field, pagination, tags, icons
Informational component: tooltips, icons, progress bar, notifications, message boxes, modal windows
Containers: accordion

Common Characteristic:

there are some standards that identify effective design
first consideration is determining who the user is (target audience)
the design must be as broad or narrow as necessary to accommodate the intended user
listen to your users and observe them interacting with your design
think ahead of who will actually be using your product and go from there
communicating information through the printed word, dispensing a product, projecting an image or creating a space that's easy to navigate.
changing focus from the designer's aesthetic to the user's need- allow the product to be designed in a way that helps the user succeed

Golden Rules of Interactive Design

Ease of learning
Efficiency of use
Memorability
Minimize Errors
Satisfy the user

Introduce to CSS

CSS( Cascading Style Sheet ):

allows you yo create rules that specify how the content of an element should appear
Examples: set background color, all paragraphs using same typeface.
works by associating rules with HTML elements. These rules govern how the content of specified elements should be displayed
Contains two parts: A Selector & A Declaration

Selector: which element the rule applies to. The same rule can apply to more than one element if you separate the element names with commas

Declaration( " { } " ): how the elements referred to in the selector should be style. Declaration split into two parts (a property and a value ex: margin: 0% ) and are separated by a colon.

1. href: specifies the path to the css file

2. type: specifies the type of document being linked to, value should be text/css, type="text/css"

3. rel: specifies the relationship between HTML page and the file linked to, value should be stylesheet, rel="stylesheet"

Example: <link href="style.css" type="text/css" rel="stylesheet">

Week 5

Lecture Notes

Font weight: bold

Font-style: italic text

Text-transform: UPPERCASE and lowercase

Text-decoration: underline or ~~strike,~~ overline, line-through

Text-indent: allows you yo indent the first line of text within an element by giving a value in pixels(px) or em

Drop Shadow: text-shadow, a dark version of the word just behind it and slightly offset

CSS Boxes Model:

can set several properties that effects the appearance
can control the dimensions of the boxes by specifying the size(px/%)
create border around the boxes
show and hide boxes
can limiting width by adding min-width/min-height, helpful tools tp ensure that the contents of pages are legible
overflowing content: overflow, tell the browser what to do is the content contained within a box is larger than the box itself, it can have one of the two values: (hidden/scroll)
hidden: hides any extra content that does not fit in the box
scroll: add a scrollbar to the box so that users can scroll to see the missing content

Border: every box has a border (even if it is not visible/specified to be 0px wide)

Margin: sit outside the edge of the border, set the width of a margin to create a gap between the border of two adjacent boxes

Block Element: often called a block-level element

Inline element: always just called an inline element

Block-level Element: <div> is the standard. Block-level element starts on a new line and stretches out to the left and right as far as it can. Other examples included: p, form, new in HTML5 are header, footer, section, and more.

Inline Element: <span> is the standard. can wrap some text inside a paragraph without disrupting the flow of the paragraph. the 'a'(link) element is the most common inline element

Week 6

Today was Hari Raya Holiday so there will be no class.

EXERCISES

Week 1

Task : Mr Shamsul want us to browse websites from the link given and find out 3 good websites and 3 bad websites. Other than this, we have to write out their respective pros and cons, target audiences, their main goals and also purpose of the website.

Link Given:

Week 2 Exercise 1 (in-class)

Task: Mr Shamsul gave us a document with content and wants us to type it in website that we create. Based on what we learn during the class, we have to open "Notepad" or "Text Edit" and save document as "index.html" so it will work as a website.

After completing, we have to upload entire files included all image files to Netlify and submit the website link.

Week 3 Exercise 2

We have to apply what we have learned during the class for examples insert images, change text color, add heading and so on.

After completing, we have to upload entire files included all image files to Netlify and submit the website link.

Content Given

Exercise 2 Final PDF

Figure x: screenshot of the website with Netlify (Link)

REFLECTIONS

Search This Blog

Chan Siew Ni//0352518

Interactive Design//Exercises

Comments

Post a Comment

Popular Posts

Illustration and Visual Narrative// Task 2// Decisive Movement

Minor Project // Task 1 // Proposal