Interactive Design: Exercises
WEEK 01 - WEEK 08 (29/03/2022 - 15/05/2022)
Adena Tan Sue Lynn (0345769)
/ Bachelor of Design (Honours) in Creative Media
Interactive Design
Exercises
DIRECTORY
LECTURES
Week 01 [29/03/2022]
Today, Mr Shamsul briefed us on the Module Information Booklet as well as give us a brief lecture.
"When creating a website, you must create for the masses, not just for yourself, as the designer."
Difference between Internet & Website?
Internet shares
content, whereas website shows the content.
Website : Web document in the internet
MicroWebsite: Has one page
Complete Website: More than one page (About five pages, usually).
Each website has an intended purpose (To convert user, sharing information, etc)
SEO always talks about conversion rate. Netflix is one of the best examples of this.
- Informational Websites [Wikipedia, IMDB, RottenTomato]
- Corporate Websites [Maxis, Petronas]
- Portfolio Websites [Like this one]
- Brochure Website
- Entertainment Website [Netflix, YouTube, Disney+]
- Educational Website [Taylor's Website]
- E-Commerce Website [Shopee, Pomelo, Lazada]
- Nonprofit Website
Week 02 [05/04/2022]
Web Standards
Nowadays, there is more variety in the ways people access the web, with phones, tablet computers, etc. They can even access it through audible interfaces. This is especially helpful for the blind who depend on speech output and people who are unable to use their hands depend on speech input.
Hardware & Software Issue:
- Growing variety of browsers that ppl can choose from. Example: Mozilla Firefox, Google Chrome, Safari, etc.
- People can use a variety of operating systems. (Linux, Windows, Mac OS)
- People have their computers set to a wide variety of screen resolutions.
With the diversity in the way people access the web, there's a high chance that your website will look different to many of the visitors. Despite these differences, the most important part of the website is the content which all users should be able to access. The way to ensure websites work on all devices & configurations is to develop in accordance with web standards. It sets core rules for developing websites. It is possible to develop websites that do not follow the standards, but with that may lead to people being unable to access the website.
World Wide Web Consortium (W3C) is the central organization who is responsible for creating & maintaining web standards. W3C has defined dozens of standards, Example is HTML & CSS. (CSS is like makeup for HTML).
Why do we have to follow Web Standards?
- To make the internet a better place for developers & visitors. It is crucial that browsers and Web developers follow these standards.
- When developers follow the Web standards, the development is simplified since it is easier for a developer to understand the other's coding.
How the Web Works
Web servers hosting websites could be from anywhere in the world. To find the location, the browser will connect to the Domain Name System (DNS) server.
- When you connect to the web, you do it via an ISP. You type a domain name or web address into your browser to visit a website.
- You device contacts a network of servers called DNS servers. These act like a phone book where they tell your computer the IP address associated with the requested domain name. Every device on the web has it's own unique IP address.
- The unique number that the DNS server returns to your computer allows your browser to contact the web server that hosts the website you requested. A web server is a computer that is constantly connected to the web, and is set up especially to send web pages to users.
- The web server then sends the page you requested back to your web browser.
Structure of a Web Page
- Understanding Structure
- Learning about markup
- Tags & elements
We come across all kinds of documents everyday. Many web pages act like the electronic versions of the documents. In all documents, structure is important in helping readers understand the messages that are being conveyed & help them navigate around the document.
How Pages Use Structure
Structure helps to understand articles/stories in newspapers. The same can be same for when it is online.
The use of headings & subheadings in any document often reflect a hierarchy of information. Any document will start with a large heading, which is then followed by an introduction or the most important information.
HTML Describes the Structure of Pages
HTML are codes which live in angled brackets (<>). These are called HTML Elements. They usually have two types of tags; opening & closing tags.
Example: <element>Information</element>
Example of Opening Tag:
Example of Closing Tag:
Attributes tell us more about the Elements
Attributes provide additional info about contents of an element. They can appear in the opening tag and have two parts (name & value) which are separated by =.
Next, are the different types of tags. I will include the slides as I feel like they're easier to understand from the notes which were provided by Mr Shamsul.
Week 03 [12/04/2022]
Adding Images in HTML
- src specifies location of image
- Code: <img src='url'>
- Code Example: <img src="img_SJNJK>JPEG>
- Attribute 'alt' is used to describe the image.
- It is possible to add width & height to specify the image's size.
Three Common Image Formats in Web:
- JPEG (Joint Photographic Expert Group)
- GIF (Graphics Interchange Format)
- PNG (Portable Network Graphics)
JPEG
- The most common image format
- Highly compatible, small size & very little loss of quality
- Saved using lossy compression
GIF
- Lossless compression
- Possible to save continuously without losing data
- Uses 8-bit lossless format which support a maximum of 265 colours
- Unique feature of this formate is its ability to be animated
- Excellent for logos, limited colour images that need to be small
PNG
- Contains a bitmap of indexed colours
- Uses lossless compression
- Allows full range of colours
- Better compression
- Most used format on Web
- Supports transparent images
ID Attribute
- All HTML element can add the ID Attribute.
- Used to identify the unique element from other elements on the page.
- Also can link to specify area in website.
- It is important that two elements never have the same value for the ID Attributes to maintain the uniqueness.
- Giving an element a unique identify allows it to be styled differently.
Class Attribute
- Every HTML element can also carry a class attribute.
- Sometimes you will want ways to identify several elements as being different from other elements on the page
- Class attributes on any of the elements can share the same value or name
- By default, these attributes do not affect the presentation of element.
- Will only change if there's a CSS role that indicates it should be displayed differently.
Block Elements
- Some elements will always appear to start on a new line in the browser window
- Known as block level elements
- Examples: <h1>, <p>, <ul> & <li>
Inline Elements
- Some elements will always appear to continue on the same line as their neighbouring elements
- Knowns as inline elements
- Examples: <b>, <i>, <em>, <a> & <img>
Week 04 [19/04/2022]
UI vs UX
What is the difference?
UX would say that a button should physically press down when it is
clicked.
UI would be a series of buttons & how they look.
UX Designers
- Focuses on structure & layout of the content, navigation & how users interact with them.
-
The types of deliverables they produce:
- Site-maps
- User flows
- Prototypes
- Wireframes - The deliverables are more focused on the underlying structure & purpose
- Visual appearance do impact them, but is created as a separate layer that is applied on top.
UI Designers
- Focuses on the way functionality is presented & the fine details of how users interact with the interface
- Produces visual comps & functioning front-end code
- Polished final production quality outputs
User Interface Design
- Focuses on anticipating what users need to do
- Ensures that the interface's elements are easy to access, understand & use
- Brings together concepts from interaction design, visual design, & information architecture.
Interface elements include:
- Input controls: buttons, text fields, checkboxes, radio buttons, dropdown lists, list boxes, toggles, date fields
- Navigational Components: breadcrumb, slider, search field, pagination, tags, icons
- Informational Components: tooltips, icons, progress bar, notifications, message boxes, modal windows
- Containers: accordion
Common Characteristics
- There are standards that identify effective design (regardless of media or discipline)
- First step is to identify the user as the design needs to accommodate the intended user.
- To make a connection with the user, the design interface has to achieve the mission of communication information through the printed word, dispensing a product, projecting and image or creating a space that’s easy to navigate
Golden Rules of Interface Design
Interface expert Nielsen identifies five usability attributes designers should put more attention to when creating a design interface:
- Ease of Learning
- Efficiency of Use
- Memorability
- Minimises Errors
- Satisfies the User
Introducing CSS
CSS allows you to create rules that specify how the content of an element should appear.
CSS Style Rules with HTML Elements
- CSS works by associating rules with HTML elements.
- These rules govern how the content of specified elements should be displayed.
- A CSS rule contains a selector & a declaration.
CSS Properties Affect How Elements are Displayed
- CSS declaration sits inside curly brackets
- They are made up of a property and a value, separated by a colon.
- To specify several properties in one declaration, use a semi-colon.
Method to Employ CSS
Using External CSS
<link>- Can be used in a HTML document to tell the browser where to find the CSS file used to style the page
- Empty Element
- Stays in the <head> elements
-
Should have these three attributes
- href: specifies the path to the CSS file
- type: specifies the type of document being liked to. Value should be text/css
- rel: specifies the relationship between the HTML page and the file it is linked to. Value should be stylesheet when linking to a CSS file. - To use more than one CSS style sheet, use a <link> element for every CSS file.
- Include CSS rules within a HTML page by placing them inside a <style> element, usually sits inside the <head> element of a page
- Should use the type attribute to indicate the styles are specified in the CSS
- Value should be text/css
-
When building a site with multiple pages, you should use an external
CSS style sheet to:
- Allow all pages to use the same style rules
- Keeps content separate from how the page looks
- Means you can change the styles used across all pages by altering just one file
Week 05 [26/04/2022]
Bold [font-weight]
- Font-weight property allows to create bold text
-
There are two values in which this property commonly takes:
- Normal-text @ normal weight
- Bold-text @ bold
Italic [font-style]
- To create italic text, use the font-style property
-
There are three values in which this property commonly takes:
- normal-text @ normal
- italic-text @ italic
- oblique-text @ oblique
- text-transform is used to change the case of text.
- uppercase-text
- lowercase-text
capitalise-firstletter
- none - removes any decoration
- underline - adds a line under text
- overline - adds line over text
- line-through - adds a line through the words
Indenting text [text-indent]
- Allows to indent the first line of text.
- Can use pixels or em. Can also use negative values.
- Commonly used despite lacking support in browsers
- 1st Value: How far left or right the shadow is
- 2nd Value: How far up or down the shadow is
- 3rd Value: Optional, specifies blue
- 4th Value: Colour
INSTRUCTIONS
Week 01
We were asked to find some websites and write what we thought were good and bad websites. Below is mine:
For exercise 01, we were tasked to learn how to code using the knowledge we obtained from previous lectures.
Firstly, we were given a word document by Mr Shamsul on what to include in our code.
Moving on, I started coding. Below is the code I did.
Finally, I uploaded it onto Netlify after Mr Shamsul guided the class.
Exercise 01 Submission:
The link for the final exercise can be found here.
Exercise 02:
Next, for exercise two, we were once again provided with a document by Mr Shamsul to showcase what should be included in the final submission.
Below is the code I used for the exercise:
Like Exercise 01, I uploaded it onto Netlify when I was done.
Exercise 02 Submission
The link to the final exercise can be found here.
Exercise 03:
For this exercise, we were given a reference first. We had to code the reference using DreamWeaver. For this, we used our knowledge about CSS.
Then, I moved on with doing the code in DreamWeaver.
Initially, I had a bit of trouble, but with some tutoring from some friends, I was able to figure it out!
After this process, I uploaded it onto Netlify.
Exercise 03 Submission:
The link to the final exercise can be found here.
FEEDBACK
This exercise has definitely helped me gain some insight into how coding works. Before this module, I never coded, aside from adding the horizontal rules and making some navigation in my blog posts. Other than that, I was completely clueless as to how code worked, or even where to start.
Luckily, I managed to gain so much knowledge from this. I was in owe everytime I typed in a small piece of code, and it would reflect on the screen. It is definitely an interesting experience which will shape my experience as a designer.
