Interactive Design / LECTURES
30.03.2022 (Week 1)
Esther Vanessa/0350751/Bachelors of Design (Hon.) in Creative Media
Interactive Design
Lectures
LECTURE
Lecture 1
Website is a web document in the internet, if it only has one page it is
usually called microsite. Website is created with an intended purpose in
mind.
Different types of websites
- Informational website -> news website, wikipedia
- Corporate website -> for companies as a face of their company
- Portfolio website -> to showcase and get hired
- Brochure website -> booking online like resorts
- Entertainment website -> netflix and such
- Personal website -> Politicians and such
- Educational website
- E-commerce website -> shopee
- Nonprofit website
Lecture 2
In the beginning, everyone who wants to go online used keyboard, mouse and
monitor. Now, there's more variety for people to access the internet, most
of the time you don't need mice and keyboards. People access through audible
interfaces (to talk the computer, or listen the compute talk to them, or
both). People who are blind or who are unable to use their hands depend on
them.
Issues within the web : Hardware and Software Issues
- Variety of browers
- Variety of OS
- Vareity of screen resolutions
World Wide Web Consortium is responsible for creating and maintaining the
web standards. It has defined dozens of standards and including the standard
languages we use to build websites -> HTML and CSS
How the web work
- Connect to the web via ISP -> type a domain name or web adress to visit the site
- Computer will contact network of servers called DNS servers (like a phone book, they tell your computer the IP address associated with the reqested domain name and every device has unique IP address, kinda like a tel number for that device)
- The unique number that the DNS server returns to your computer allows the browser to contact the web server that hosts the website you requested
- Web server sends the page you requested back to your web browser
Structure of a web page
- Understanding structure
- Learning about markup
- Tags and elements
Structure is important in helping readers to understand the messages we
are trying to convey and to navigate around the documents.
HTML describes the structure of pages - > uses characters that live
inside angled brackets <>
These are called HTML elements. They are usully made up of two tags : an
opening tag and a closing tag
<element>Information</element>
Each element tells the browsers something about the thing that sits between
the opening and closing tag
Attributes tell us more about the elements -> provide infoabout the
contents of an element. They appear on the opening tag of the element and
are made up of two parts: a name and a value, seperated by an equals
sign.
<body>
Everything inside this element is shown inside the main browser
window
<head>
Before <body> element u usually see a <head> element. This
contain information about the page
<title>
Contents of the <title> are either shown in the top of browser (tab
bar)
HTML has six level of headings -> <h1> main <h2>
subheading
<b> <i>
Enclose words that wanna be bold with <b> and </b>
<i> and </i> for italic
<ol>
ordered list
<li>
list item
<a></a>
hyperlink
<!--put the comment here-->
To improve your QoL when working on the code, it is good to
have comment. This comment will be useful for us as the one working on the codes, if
we want to know details, or jump from one section of the whole coding to
other.
Lecture 2
<img>
is used to add an image, doesn't have an end tag but you need to add attribute
<img src="url">
image folder needs to be in the same folder as your index.html file.
 |
| above is relative path, below is absolute path |
You can also add width and height and other attributes.
<img src=“img_flower.jpeg” alt=“Flowers in Denmark” width=“500” height=“350”>
JPG, GIF and PNG
JPEG - usually for photos, very lightweight
GIF - lossless, has 256 colors but has to be flat (no shades) and small in size. Good for logos, can be animated too
PNG - It contained a bitmap of indexed colors and uses lossless compression. It also allows full range of color and better compression. The most used format on the Web. Support image with transparent
ID attribute
It is used to uniquely identify the element from other elements on the page. You can also link to the location of code. It has to be unique, for example : <h2 id="history">History of USA </h2>.
Class attribute
Similar to id, but can use same repeatedly.
These ids and class are all useful in CSS. To refer to that part u need to <a href="# (id)"></a>.
WITH you're starting with CSS you need to start with :
<style type="text/css">
html{ text behavior: ;
}
this code sits right below title, before head and body. For example this is for simple scrolling animation
 |
Lecture 3
UI/UX
UX would say that button should physically press down when you click it. It focuses on the structure and layout of the content, navigation and how users interact with them. Site-maps, user flows, prototypes and wireframes.
UI is how the button should look like. It focuses 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. Brings together concepts from Interation Design, Visual Design, and Information Architecture (IA).
Native apps vs Web apps -> Native apps is software that is developed to a particular OS and you need to install the app, while web apps are made for all different platforms, kinda like website.
UI elements include but are not limited to :
- Input controls: button, text fields, checkboxes, radio buttons, dropdown lists, list boxes, toggles, date field
- Navigational Components: breadcrumb (indicators where u are at), slider, search field, pagination, slider, tags, icons
- Informational Components: tooltips, icons, progress bar, notifications, message boxes, modal windows (new window that appears and dims the background, for example when you're exiting something and a window shows up "are you sure you want to exit" and so on)
- Containers: accordion (multiple drop down content in a website)
UI focuses on the functionality is displayed and the fine detail of how users interact with the interface. They produce the visual composition and functioning front-end code. This is very much about polished final production quality outputs.
Design for the User -> "if people can't use a product, it might as well not exist."
Common Characteristics
- There is a couple of standards that identify effective design acorss the board (regardless of media or discipline).
- First u need to determine the user and the design can be as broad or narros as necessary to accomodate the intended target audience.
- There is really no recipe that's going to make your design appropriate for all aplications and users.
- So listen to your users and observe them interacting with the design
- Think ahead of who will actually be using your product and go from there
- Graphic designers have been reaered ona variety of formulaic methods and approaches for successful design.
- It helps to think of any design piece as an interface
- In order make a connection with the user, the design's interface must achieve its mission, which is communicating information through the printed word, dispensing a product, projecting an image or creating a space that's easy to navigate
- Changing the focus from the designer’s aesthetic to the user’s need allows the product to be designed in a way that helps the user succeed
The golden rules of interface design
- Ease of learning
- Efficiency of Use
- Memorability
- Minimize Errors
- Satisfy the Users
CSS
CSS associates rules with HTML elements. contains two parts: selector and declaration
Selectors indicate which element the rule applies to. The same rule can apply to more than one element if you separate the element names with commas. Declarations indicate how the elements referred to in the selector should be styled. Declarations are split into two parts (a property and a value) and are separated by a colon.
CSS declaration sit inside curly brackets and each is made up of two partsl a property and value.
External CSS using <link>
the link can be used in HTML doc to tell the browser where to find the CSS file. Put the link in head.
it should use three attributes
- href; To specify the path to the CSS file
- type; specifies the type of document being linked to. Value should be text/css
- rel; specifies the relationship between HTML page and the file linked to. The value should be stylesheet when linking to a CSS file.
 |
| This is an example of external CSS |
Internal CSS <style>
- You can also unclude CSS rules within an HTML page by placing them inside <style> element, which usually sits inside the <head> element of the page
- <style> element should use the type attribute to indicate that the styles are specified in CSS
- value should be text/css
- When building a site with more than one page, you should use an external CSS style sheet. This:
- Allow all pages to use the same style rules (rather than repeating them in each page)
- Keeps the content separatae from how the page looks
- Means you can change the styles used across all pages by altering just one file (rather than each individual page)
CSS Precedence -> see which css style the browser will prioritize first.
Bold [font-weight]
Value is Normal-Text or Bold-Text
Italic [font-style]
italic-text
oblique-text
UPPERCASE & lowercase [text-transform]
uppercase - text appear to uppercase
lowercase - text appear to lowwercase
capitalise - first letter of each word to appar capitalised
Underline & Strike [text-decoration]
none - removes any decoration already applied to the text
underline - adds a line underneath the text
overline - adds line over the top of the text
line - through-adds a line through words
Indenting Text [text-indent]
The text-indent property allows you to indent the first line of text within an element. The amount you want the line indented by can be specified in a number of ways but is usually given in pixels or em.
It can take negative value (eg:-10px)
Drop Shadow [text-shadow]
The text-shadow property has become commonly used despite lacking support in all browsers. It is used to create a drop shadow, which is a dark version of the word just behind it and slightly offset.
It can also be used to create an embossed effect by adding a shadow that is slightly lighter that the text. The value of this property is quite complicated because it can take three lengths and a color for the drop shadow
• The first length indicates how far to the left or right the shadow fall
• The second value indicates the distance to the top or bottom the shadow fall
• The third value is optional and specifies the amount of blur should be applied to the drop shadow
• The fourth value is the color of the drop shadow
Limiting Width [min-width, max-width] and Height [min-height, max-height]
Some page designs expand and shrink to fit the size of the user’s screen
• In such designs, the min-width property specifies the smallest size a box can be displayed at when the browser window is narrow, and the max-width property indicates the maximum width a box can stretch to when the browser window is wide
• These are very helpful properties to ensure that the contents of pages are legible
Display Propert
Block-Level Element
- starts on a new line
- <div></div> is one of them
Inline Element
- Doesn't start a new line, wrap text inside the paragraph
- <span>
Comments
Post a Comment