Interactive Design [Exercises]
23.04.2024 - ..2024 / week 1 - week 8
Sheryne Axellia Putri / 0367267 / Bachelor of Design (Honours) in Creative MediaInteractive Design
Exercises
TABLE OF CONTENTS
1. Lectures
2. Instructions
3. Reflection
LECTURES
Week 1 23.04.2024
- F2F Class:
- Download Adobe Dreamweaver.
- Sign in to Netlify.
- Netlify → Right-click, inspect and choose the device you want to view.
- Call To Action button → CTC (a button that is more different than the rest)
- Primary CTC, and secondary CTC (which one is more primary
than the rest)
- Clickable texts: some texts come in different colors → to inform the user which texts the user can click through using various colors of the text.
-Websites stop using long lengths of websites so the viewer does not scroll.
- White space for a site is important.
- Text alignment → from top to bottom, left to right, if you have a short text it's okay to use center alignment. If it's long/two columns use left alignment. Right alignment is mostly not recommended.
Figure 1.1 Week 1 (04/24/2024) Amazon.
ex: Amazon (the ctc is sign an option)
- Terms and conditions: sign in for an account ex: amazon and Shopee (they have similar layouts → important buttons and the search bar is at the top) whatever is important is always placed on the top.
Key Principle of Usability
Consistency
Simplicity
Visibility
Feedback
Error Prevention
1. Consistency
Consistency is a key factor in web design for visual elements and functionality. Consistency ensures that your website looks coherent and works harmoniously across all its components, such as headers, footers, sidebars, and navigation bars.
Consistent design is intuitive design.
It includes a consistent navigation system, page layout and menu structure, fonts and typography, and branding in web design. Consistency is key for users to recognize and learn these patterns. If similar-looking things do not produce a similar output, the user is bound to become frustrated.
For example, if a website’s buttons are protruding boxes with labels, all of its buttons should look like that. Similarly, if a backward arrow denotes the back button, then it should not be changed to something else because that would be inconsistent with what the user has learned.
2. Simplicity
The principle is that user interfaces should be “simple” for users.
Simplicity is used loosely to refer to the need to minimize the number of steps involved in a process, to use symbols and terminology that make the interface as obvious as possible, and to make it difficult to make mistakes. Incorporating simplicity in a design will help design better user interfaces by helping the users achieve their goals faster and more efficiently, all while enjoying a great user experience.
3. Visibility
Visibility is the basic principle that the more visible an element is, the more likely users will know about it and how to use it. Equally important is the opposite: when something is out of sight, it’s difficult to know about and use. Users should know, just by looking at an interface, what their options are and how to access them.
4. Feedback
Feedback communicates the results of any interaction, making it both visible and understandable. Its job is to give the user a signal that they (or the product) have succeeded or failed at performing a task. An example of feedback is when you’re on desktops or laptops when you hover over navigation items, you expect them to change color or load a submenu.
5. Error Prevention
It involves alerting a user when they’re making an error, to make it easy for them to do whatever it is they are doing without making a mistake. The main reason this principle of error prevention is important is that we humans are prone to and will always make mistakes.
Common Usability Pitfalls and How to Avoid Them
Complex interfaces
Confusing navigation
Poor feedback
Inadequate error handling
Week 3 07.05.2024_Web Structure
Websites are typically divided into three key elements:
- Header → is the top section of a webpage. It usually contains the website's logo, navigation menu, and contact information. The header provides users with quick access to essential information and navigation.
- Body → is the main content area of a webpage. It contains text, images, videos, and other multimedia elements. Proper organization of content within the body is crucial for readability.
- Footer → is located at the bottom of a webpage. It typically includes copyright information, links to important pages, and contact details. The footer provides closure to the webpage and additional navigation options.
- Organizing Content → is key to a well-structured website. Use headings (H1, H2, H3, etc.) to create a hierarchical structure. Logical grouping of content and clear labeling of sections improve user experience.
- Navigation Menus → help users move around the website. Use clear and concise labels for menu items. Consider using dropdown menus for complex sites.
Figure 1.2 Week 3 (05/07/2024) Webpage structure.
Week 4 14.05.2024_The web & Structure
Web standards are the core set of rules for developing websites. It might be possible to develop sites that do not comply with standards, but doing so increases the likelihood that many people will be unable to access your site.
With the diversity in the way people access the web, there's a very high probability that your website will look different to many of your visitors than it does to you. Despite these differences, the most important part of your website is its content, and all users should be able to access that.
The central organization who is responsible for creating and maintaining web standards is the World Wide Web Consortium (W3C).
The W3C has defined dozens of standards, including the standard markup languages we use to build
websites. The standard markup languages we'll be using in this course are:
- HTML
- CSS
Figure 1.3 Week 4 (05/14/2024) How the web work.
HTML describes the structure of the pages
The HTML code is made up of characters that live inside angled brackets <> These are called HTML elements
Elements are usually made up of two tags: an opening tag and a closing tag
Figure 1.4 Week 4 (05/14/2024) HTML elements.
Each element tells the browser something about the information that sits between its opening and closing tags
- Opening Tag
Figure 1.5 Week 4 (05/14/2024) Opening tag.
- Closing Tag
Figure 1.6 Week 4 (05/14/2024) Closing tag.
- Attributes provide additional information about 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, separated by an equals sign.
Figure 1.7 Week 4 (05/14/2024) Attributes.
*The attribute name indicates what kind of extra information you are supplying about the element’s content. It should be written lowercase.
*The value is the information or setting for the attribute. It should be placed in double quotes. Different attributes can have different values.
*Here an attribute called lang is used to indicate the language used in this element. The value of this attribute on this page specifies it is in US English.
- Body, Head &Title
<body>
You met the <body> element in the first example created. Everything inside this element is shown inside the main browser window.
<head>
Before the <body> element you will often see a <head> element. This contains information about the page. You will usually find a <title> element inside the <head> element.
<title>
The contents of the <title> element are shown at the top of the browser (tab bar).
- Headings
- HTML has six levels of headings:
- <h1> main headings
- <h2> subheadings
- If there are further sections under the subheadings then the <h3> element is used and so on.
Figure 1.8 Week 4 (05/14/2024) Headings.
- Paragraphs
To create a paragraph, surround the words that make up the paragraph with an opening <p> tag
and closing </p> tag.
Figure 1.9 Week 4 (05/14/2024) Parahraphs.
- Bold & Italic
Bold
- By enclosing words in the tags <b> and </b> we can make characters appear bold.
- The <b> element also represents a section of text that would be presented in a visually different way
(for example keywords in a paragraph).
Figure 1.10 Week 4 (05/14/2024) Bold.
Italic
- By enclosing words in the tags <i> and </i> we can make characters appear in italic.
- The <i> element also represents a section of text that would be said in a different way from surrounding content- such as technical terms, names of ships, foreign words, thoughts, or other
terms that would usually be italicized.
Figure 1.11 Week 4 (05/14/2024) Italic.
- Lists
Ordered lists are lists where each item in the list is numbered. The list is for the set of steps for a recipe that must be performed in order.
- The ordered list is created with the <ol> element.
-. Each item in the list is placed between an opening <li> tag and a closing </li> tag (the li stands for list item.)
Figure 1.12 Week 4 (05/14/2024) Ordered lists.
Unordered lists are lists that begin with a bullet point.
- The unordered list is created with the <ul> element.
- Each item in the list is placed between an opening <li> tag and a closing </li> tag (the li stands for list
item.)
Figure 1.13 Week 4 (05/14/2024) Unordered lists.
Nested lists
- You can put a second list inside an <li> element to create a sub-list or nested list
- In nested unordered lists, the browser will usually change the style of the bullet too.
Figure 1.14 Week 4 (05/14/2024) Nested lists.
- Links are the defining features of the web because they allow you to move from one web page to another.
- Links are created using the <a> element.
- Users can click on anything between the opening<a> tag and the closing </a> tag.
- Specify which page to link using the href attribute.
Figure 1.15 Week 4 (05/14/2024) Links.
Commonly type of links:
- Links from one website to another.
- Links from one page to another on the same website.
- Links from part of a web page to another part of the same page.
- Links that open in a new browser window (tab).
- Adding Image
- The <img> HTML tag serves the purpose of incorporating images into a web page.
- The <img> tag essentially establishes a designated space.
- It's worth mentioning that the <img> tag itself is void of content and is solely comprised of attributes, eliminating the need for a closing tag.
When using the <img> tag, two essential attributes must be included:
- src - This attribute specifies the path to the image.
- alt - This attribute provides alternative text for the image, which is essential for accessibility
- Title - This attribute provides a tooltip of the image in the browser
Figure 1.16 Week 4 (05/14/2024) Adding an img.
Week 5 21.05.2024_HTML & CSS
ID and Class attribute
- ID attribute
- Every HTML element can carry the ID attribute.
- It uniquely identifies the element from other elements on the page.
- No two elements must have the same value for their ID attributes (otherwise the value is no longer unique).
- Class attribute
- For example, you might have some paragraphs that contain more important information than others and want to distinguish between these elements.
- The class attribute on any element can share the same value or name.
By default, using these attributes does not affect the presentation of an element. It will only change its appearance if a CSS rule indicates it should be displayed differently.
- Block elements
- Some elements will always appear to start on a new line in the browser window.
- It is known as block-level elements.
- Example: <h1>, <p>, <ul> and <li>
- Inline elements
- Some elements will always appear to continue on the same line as their neighboring elements.
- It is known as inline elements.
- Example: <b>, <i>, <em>, <a> and <img>
Introducing CSS
CSS → allows you to create rules that specify how the content of an element should appear.
For example, you can set the background of the page as cream, all paragraphs should appear in gray using the Arial typeface, or all level headers should be in a blue, italic, Helvetica typeface. CSS works by associating rules with HTML elements. These rules govern how the content of specified elements should be displayed.
A CSS rule contains two parts:
- a selector.
- a declaration.
- CSS Style Rules with HTML Elements
Figure 1.17 Week 5 (05/21/2024) CSS style rules.
*This rule indicates that all <p> elements should be shown in the Arial typeface.
*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 Properties Affect how Elements are Displayed
CSS declaration sits inside curly brackets and each is made up of two parts; a property and a value, separated by a colon.
You can specify several properties in one declarations each separated by a semi-colon.
Figure 1.18 Week 5 (05/21/2024) CSS declarations.
*This rule indicates that all <h1>, <h2> and <h3> elements should be shown in the Arial typeface, in a yellow color.
*The property indicates the aspects of the element you want to change. For example, color, font, width, height, and border.
*Values specify the settings you want to use for the chosen properties. For example, if you want to specify a color property then the value is the color that you want it to be for the elements.
- Method to employ CSS
Using External CSS
- The <link> element can be used in an HTML document to tell the browser where to find the CSS file used to style the page.
- It is an empty element and it lives inside the <head> element.
- It should use three attributes:
1. href → To specify the path to the CSS file
2. type → This attribute specifies the type of document being linked to. The value should be text/CSS
3. rel → Specifies the relationship between the HTML page and the file linked to. The value should be a stylesheet when linking to a CSS file.
- An HTML page can use more than one CSS style sheet.
- To do this it could have a <link> element for every CSS file it uses.
- For example, one author uses one CSS to control the presentation (fonts and colors) and a second to control the layout.
Using Internal CSS
You can also include CSS rules within an HTML page by placing them inside a <style> element, which usually sits inside the <head> element of the page.
- The <style> element should use the type attribute to indicate that the styles are specified in the CSS
- The 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 on each page).
- Keep the content separate 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).
Week 7 04.06.2024_CSS Selector
CSS selectors → are a fundamental part of CSS that allows you to target and style HTML elements on a web page.
- Selectors are used to define which elements should receive specific styles, such as colors, fonts, spacing, and more.
- They are a crucial part of web development because they enable you to control the presentation and layout of your web pages.
Figure 1.19 Week 7 (06/04/2024) CSS selectors #1.
Figure 1.20 Week 7 (06/04/2024) CSS selectors #2.
Figure 1.21 Week 7 (06/04/2024) CSS selectors #3.
CSS provides a variety of selectors to offer flexibility and granularity when targeting HTML elements for styling. key reasons why there are so many selectors in CSS:
- Specificity → Different situations may require different levels of specificity when selecting elements.
- Structure → Web pages often have complex structures with nested elements.
- Attribute-Based Selection →You may want to style elements based on their attributes or attribute values.
- Pseudo-Classes and Pseudo-Elements → These selectors help you style elements based on their state or position within the document.
- Responsive Design → Media queries, a type of selector, enable you to apply different styles to elements based on the user's device characteristics, such as screen size, orientation, or resolution.
- Stateful Interactions → Selectors like focus, active, and, checked to allow you to style elements based on user interactions.
- Cross-Browser Compatibility → Different web browsers may interpret and apply CSS rules differently.
- Ease of Maintenance → Depending on the structure and requirements of a web page, certain selectors may make CSS easier to maintain.
- Accessibility → Properly structured and labeled HTML elements can be targeted and styled using CSS selectors to improve accessibility by providing styles that enhance readability and usability for individuals with disabilities.
Week 9 18.06.2024_Box Model
The Display Property
Display → is CSS's most important property for controlling layout.
Every element has a default display value depending on what type of element it is. The default for most elements is usually block or inline.
- Block-level element
<div> is the standard block-level element. A block-level element starts on a new line and stretches out to the left and right as far as it can.
Figure 1.22 Week 9 (06/18/2024) Block-level element.
- Inline Element
<span> is the standard inline element. An inline element can wrap some text inside a paragraph <span> like this </span> without disrupting the flow of that paragraph.
Figure 1.23 Week 9 (06/18/2024) Inline element.
Other Display Properties
- Inline-block
- Flex
- Grid
Box Model in CSS
Most HTML elements are containers. Consider some of the HTML elements we've used so far: body, p, h1, h2, div, ul, ol, li.
- Each of these is a container or box.
- Each box has three layers that surround its content. The layers
are, in order from inside to outside:
- Padding
- Border
- Margin
Figure 1.24 Week 9 (06/18/2024) Box model.
The size of each of the layers in-the-box model can be specified using the usual CSS units of measure (em, %, and px).
- For example, consider the following <p>, which is wrapped inside a <div>:
Figure 1.25 Week 9 (06/18/2024) Box model size.
We can apply the following CSS to the paragraph tag in order to control the size of the padding, border, and margin of the paragraph:
Figure 1.26 Week 9 (06/18/2024) Box model size CSS.
The reason to include an element in the ‘div’ tag/element is to create a layout. Another method to create the layout in CSS is using the position property.
- CSS Flexbox → is a powerful tool for creating responsive and efficient web layouts. It relies on a solid understanding of the Box Model, as they manipulate elements' positioning and spacing within a container.
*Flexbox (Flexible Box Layout)
*Key Concepts:
- Flex Container: The parent element with display: flex.
- Flex Items: The children of the flex container.
*Flex Container:
- Display: flex: Establishes a flex container.
- Flex-direction: Defines the direction of the flex items (row, column).
- Justify-content: Aligns flex items along the main axis (start, end, center, space-between, space-around).
- Align-items: Aligns flex items along the cross-axis (stretch, center, start, and end).
INSTRUCTIONS
Figure 2.1 Week 1 (04/24/2024) Module Information Booklet.
Week 1 23.04.2024 Exercise 1 - Web Analysis
Choose TWO (2) websites from the link given:
Review the website that you've selected carefully, taking note of its design, layout, content, and functionality. Identify the strengths and weaknesses of the website, and consider how they impact the user experience.
Write a brief report summarizing your findings and recommendations.
What To Have in The Analysis:
Consider the purpose and goals of the website, and evaluate whether they are effectively communicated to the user. Evaluate the visual design and layout of the website, including its use of color, typography, and imagery. Consider the functionality and usability of the website, including its navigation, forms, and interactive elements. Evaluate the quality and relevance of the website's content, including its accuracy, clarity, and organization. Consider the website's performance, including its load times, responsiveness, and compatibility with different devices and browsers.
Write a brief report summarizing your findings and recommendations.
What To Have in The Analysis:
Consider the purpose and goals of the website, and evaluate whether they are effectively communicated to the user. Evaluate the visual design and layout of the website, including its use of color, typography, and imagery. Consider the functionality and usability of the website, including its navigation, forms, and interactive elements. Evaluate the quality and relevance of the website's content, including its accuracy, clarity, and organization. Consider the website's performance, including its load times, responsiveness, and compatibility with different devices and browsers.
- Web Analysis (Presentation)
Websites I have chosen:
Figure 2.2 Week 2 (04/30/2024) Web Analysis Presentation.
Week 3 07.05.2024 Exercise 2 - Web Replication
Your task is to replicate TWO (2) existing main pages of the websites given in the link below to gain a better understanding of their structure. Choose any two from the link given. Follow the dimensions of the existing website from the width and height. This exercise will help you develop your design skills using software such as Photoshop or Adobe Illustrator, and gain insights into web design best practices. You can use any image from stock image or free stock icon.
- The image that you will be using does not have to be an exact image from the original website.
- You may replace it with a similar image.
- Focus on the layout, type style, and color style.
- To find similar typefaces/fonts, you can download fonts from Google Fonts.
- You may need to screengrab the website and can begin to replicate the page.
- 1.1 Progress
#1 Website: https://www.morganstanley.com/?authuser=0
Mrs. Shamsul gave us the instructions on how to take a full screenshot of the web fully, by:
inspect + adjust the width + run command + full screenshot
I opened Adobe Illustrator so I could begin my replication, and I made ruler guides to help me replicate the web more neatly.
Figure 2.3 Week 3 (04/30/2024) Progress #1.
Figure 2.4 Week 3 (04/30/2024) Progress #2.
Figure 2.5 Week 3 (04/30/2024) Social media logo.
#2 Website: https://www.oceanhealthindex.org/?authuser=0
Figure 2.6 Week 3 (04/30/2024) Progress #3.
In Photoshop, I made my version for the lower background using the image I found from pexels.com, which turned out like this.
Figure 2.7 Week 3 (04/30/2024) Progress #4.
Figure 2.8 Week 3 (04/30/2024) Progress #5.
- 1.2 Outcomes (side by side)
#1 Website
Figure 2.9 & 2.10 Week 3 (04/30/2024) Original vs My Replication.
#2 Website
Week 7 04.06.2024_CSS Selector Exercise 3 - Creating a Recipe Card
In this exercise, you will create a recipe card using HTML and CSS. The goal is to design a basic webpage that displays a recipe's ingredients and instructions in a visually appealing format.
Choose ONE recipe from the link: https://www.101cookbooks.com/?authuser=0
- Create an HTML file named "index.html."
- Create a section that displays the following information:
- Include necessary images for the page
- List of ingredients
- Step-by-step cooking instructions
- Create an external CSS file named "style.css."
- Apply CSS rules to style your recipe card.
- Use CSS selectors such as element selectors (e.g., body, h1, ul), class selectors (e.g., .recipe-title, .ingredient-list), and ID selectors (e.g., #instructions) to style different parts of the card.
Figure 2.13 Week 7 (06/04/2024) The selected recipe.
Figure 2.14 Week 7 (06/04/2024) Progress #1.
Figure 2.15 Week 7 (06/04/2024) Progress #2.
I decided to insert a link from the original site.
Figure 2.16 Week 7 (06/04/2024) Progress #2.
- Recipe card link: https://sherynerecipe.netlify.app/
PRACTICAL
Week 4 14.05.2024_The web & Structure
We were given the chance to create an HTML file using the Note app from our laptop.
REFLECTION
Experience
As someone who has no knowledge of websites, I think that the first exercise has helped me to develop my thinking of what a compatible website means.
Observation
When searching for the websites I want to analyze, I have found that most websites use the same layout, that is placing the important part on the top.
Findings
A Call To Action button doesn't have to be large or bright, it just needs to be clear and concise.
Comments
Post a Comment