Interactive Design: Lectures and Exercises
28/3/2022 - 18/4/2022 (Week 1-Week 4)
Adeline Wong Chyn Nee / 0344017 / BDCM
Interactive Design
Task 1 / Exercises
Week 01 Lecture: (29, March 2022)
1) A user connects to the web via an ISP by typing a domain name to visit a site.
2) Your computer then contacts a network of servers called DNS servers.
3) The unique number that the DNS server returns to the computer allows a browser to contact the web server that hosts the website requested.
4) The web server then sends the page you requested back to the web browser.
Web Page Structures
A hierarchy of information will be clearly differentiated with the use of headings and subheadings. A large heading typically starts a document followed by an introduction or the most important information. Texts are separated to give the page structure, and each topic might have a new paragraph and each section can have a heading to describe what it covers
A web page can be created by translating that with the use of HTML. To describe the structure of a web page, code to the words is added to appear on the page. The codes are typically placed in between 2 brackets, the opening tag and the closing tag.
<element>Information</element>
Attributes
Attributes are added to the opening tag of the element to provide additional information such as name and value, which are separated by an equal sign.
<p lang=“eng-us”>Paragraph in English</p>
Body, Head, and Title
<head>
Placed before the <body> element is the <head>. This part contains information about the page and it's where <title> is placed.
<body>
Placed after the <head> element is the <body> element, everything inside the main browser window are placed here.
<title>
The contents of the <title> element are shown in the browser tab bar.
Headings
There are 6 levels of headings:
Week 03 Lecture: (12, April 2022)
Adding images in HTML
The tag <img> is used to add an image in HTML, and it is considered empty until added an attribute.
<scr> specify the location of the image:
<img src=“url”>
An Alt attribute is added to describe the image:
<img src=“img_flower.jpeg” alt=“Flowers in Denmark”>
Adding width and height to the image:
<img src=“img_flower.jpeg” alt=“Flowers in Denmark” width=“500” height=“350”>
Image Format for Web
The 3 most common formats are JPED, PNG, and GIF
• JPEG (Joint Photographic Expert Group): The most commonly used on the web, it is highly compatible and is mostly small size as it uses lossy compression.
• GIF (Graphics Interchange Format): GIF uses lossless compression and uses an 8-bit lossless format that supports 265 colors, which means it is able to support animated content.
• PNG (Portable Network Graphics): PNG uses lossless compression which allows a full range of colors and it is the most used format on the web as it supports images with transparency.
Extra Markups
A class attribute can be used in HTML to have a way to identify several elements as being different from the rest on the page.
Using a class attribute also does not affect the presentation of an element by default. It will only change its appearance if there is a CSS rule that indicates it should be displayed differently.
Block elements like <h1>, <p>, <ul> and <li> will always start on a new line.
However, inline elements like <b>, <i>, <em>, <a> and <img> will appear on the same line as their neighbouring elements.
Week 04 Lecture: (19, April 2022)
UI vs UX: Their difference
UI refers to the screens, buttons, toggles, icons, and other visual elements that you interact with when using a website, app, or other electronic devices. UX refers to the entire interaction you have with a product, including how you feel about the interaction.
• UX Designers focus on the structure and layout of content, navigation, and how users interact with them.
• UI brings together concepts from interaction design, visual design, and information architecture (IA).
Interface elements
• Input Controls: buttons, text fields, checkboxes, radio buttons, dropdown lists, list boxes, toggles, date field
• Navigational Components: breadcrumb, slider, search field, pagination, slider, tags, icons
• Informational Components: tooltips, icons, progress bar, notifications, message boxes, modal windows
• Containers: accordion
Golden Rules of Interface Design
The 5 usability attributes by Nielsen are:
• Ease of Learning
• Efficiency of Use
• Memorability
• Minimize Errors
• Satisfy the User
Introduction to CSS
The Cascading Style Sheet (CSS) allows us to create rules that specify how the content of an element should appear. CSS works side by side with HTML and the rules in CSS govern how the content of specified elements in HTML should be displayed.
There are 2 parts to a CSS: a selector and a declaration
p {
font-family: Arial
}
Selectors: They 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.
Declaration: They indicate how the elements referred to in the selector should be styled.
There are 2 parts to a declaration, the property, and the value, which are separated by a colon.
font-family: Arial;
color: yellow;
Week 05 Lecture: (26, April 2022)
Text Styles
Bold [font-weight]: The font-weight property allows us to create bold text
Italic [font-style]:
There are 3 values of property we can take to create italic texts
- normal-text- to appear normal
- italic-text- to appear italic
- oblique-text- to appear oblique
Uppercase and lowercase [text-transform]:
There are 3 forms of text-transform
- uppercase-text- to appear uppercase
- lowercase-text- to appear lowercase
- capitalize-first- to make the first letter of each word appear capitalized
Underline & Strike [text-decoration]:
There are 4 ways to give decoration to a text
- 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
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.
There are 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 that should be applied to the drop shadow
- The fourth value is the color of the drop shadow
CSS Boxes Model
Limiting Width [min-width, max-width]:
Some page designs expand and shrink to fit the size of the user’s screen. Using the min-width or max-width can ensure that the contents of pages are legible.
Limiting Height [min-height, max-height]:
The min-height and max-height can be used to limit the height of boxes on a page.
Overflowing Content [overflow]:
The overflow property tells the browser what to do if the content contained within a box is larger than the box itself.
It can have one of the two values:
- hidden- hides any extra content that does not fit in the box
- scroll- adds a scrollbar to the box so that users can scroll to see the missing content
Border, Margin & Padding
The Display Property
Block-level element: <div> is the standard block-level element. It starts on a new line and stretches out to the left and right as far as it can.
Inline Element: <span> is the standard inline element. It wraps some text inside a paragraph <span> like this </span> without disrupting the flow of that paragraph.
Week 07 Practical Exercise: (10, May 2022)
In week 7, we were introduced to web layout through HTML and CSS. We followed the tutorial during class and attempted to make one of our own too. The PDF below shows the final progress I made during practical class.
Fig. 1.6 Week 7 Exercise HTML and CSS PDF
Netlify link: https://week-7-exercise-practical.netlify.app/
Exercise 01: (7, April 2022)
Fig. 2.1 Given Content for Exercise 1 (PDF)
Fig. 2.2 Exercise 1 in HTML and CSS (PDF)
Exercise 02: (14, April 2022)
In week 2, we were required to create a single HTML page that contains the content given in Google Classroom. The images provided should be utilized in some sections. In each main section, we would need to include an id attribute that will be later used as an anchor to be linked from the navigation.
We would then have to upload the file onto Netlify upon completion.
Fig. 2.3 Given Content for Exercise 2 (PDF)
We are required to create a web page by following the given example, the PDF below is my attempt at the exercise.
Fig. 2.3 Given Content for Exercise 2 (PDF)
Fig. 2.4 Exercise 2 in HTML and CSS (PDF)
Fig. 2.5 Given Content for Exercise 3 (PDF)
Fig. 2.6 Exercise 3 in HTML and CSS (PDF)
C. (2022, May 26). UI vs. UX Design: What’s the Difference? Coursera. https://www.coursera.org/articles/ui-vs-ux-design
Comments
Post a Comment