Interactive Design / Exercises
29.03.2022 - 15.05.2022 (Week 1 - Week 7)
Lulu Luisa Linardi / 0349358 / Bachelor of Design (Hons) in Creative Media
Interactive Design
Exercises
LECTURES
 |
| Fig 1.0: Thumbnail |
LECTURE 1: Interactive Design
Types of websites
- Informational website
- Corporate website
- Portfolio website
- Brochure website
- Entertainment website
- Personal website
- Educational website
- E-commerce website
- Non-profit website
Surveying the Possibilities
The purpose of this lesson is to begin considering what makes a high-quality website. Students will explore questions such as these:
- Why do you feel that some websites are good?
- Why do you feel that some websites are not so good?
- Do others agree with your opinion?
- Does anyone disagree?
- Who is the target audience for a particular site?
- How might website quality be judged differently across different audiences?
- Are there some qualities of websites that all audiences would agree are good?
- What are these qualities?
It is tempting in a web design course to plunge in and start right away creating and developing web pages. However, since our goal is for you to learn to develop high-quality websites, we first must spend some time developing an understanding of what "quality" means. This is important because if websites aren't developed with quality in mind, visitors might be unable to find the content or features they're looking for, or they might be unable to access or use these features. Users don't give websites many chances. If they don't like a site, they may leave quickly and never return. If they like a site, they'll return to it again and again, plus they'll tell others about it.
In addition to understanding website quality, you must spend some time planning a website before you begin to develop its content. Planning ahead will reduce the number of mistakes you'll make while constructing the site. In the work world, this will save you time and money.
LECTURE 2: Web Design and New Media
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 a website is its content, and all users should be able to access that. The only way to ensure that websites work across all devices and configurations is to develop in accordance with web standards.
Web Standards
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 the site.
The central organization that 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
Why Web Standards?
To make the internet a better place, for both developers and visitors, it is important that both browsers and web developers follow the web standards. When developers follow the Web standards, the development is simplified, since it is easier for a developer to understand another's coding. Using Web standards will ensure that all browsers will display your website properly, without time-consuming rewrites.
How the web works
When you visit a website, the web server hosting that site could be anywhere in the world. In order for you to find the location of the web server, your browser will first connect to a Domain Name System (DNS) server.
1. When you connect to the web, you do so via an ISP. You type a domain name or web address into your browser to visit a site, eg: www.google.com, www.bbc.co.uk
2. Your computer contacts a network of servers called DNS servers. These act like phone books; they tell your computer the IP address associated with the requested domain name. Every device on the web has a unique IP address; it’s like the telephone number for that computer.
3. 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.
4. The web server then sends the page you requested back to your web browser.
Structure of Web Page
We come across all kinds of documents everyday; newspapers, insurance forms, catalogues, etc. Many web pages act like electronic versions of these documents. In all kinds of documents, structure is very important in helping readers to understand the messages we are trying to convey and to navigate around the document.
How pages use structure
The use of headings and subheadings in any document often reflect a hierarchy of information. Any document will start with a large heading, followed by an introduction or the most important information. This might be expanded upon under subheadings lower down on the page.
When using a word processor to create a document, we separate out the text to give it structure. Each topic might have a new paragraph, and each section can have a heading to describe what it covers.
 |
| Fig 1.1: Example of page structure |
Elements in HTML
LECTURE 3: Extra Markup
Adding Image in HTML
Img tag is a single sided element which does not have a closing tag like other HTML element. The tag is considered empty until you add an attribute. The tag <img> is used to add an image in HTML. It is usually followed by src attributes to specify the location of the image, e.g. <img src=“img_flower.jpeg”> and <img src=“http://stockimages.anylink.com">. Alt attribute is added to described the image e.g. <img src=“img_flower.jpeg” alt=“Flowers in Denmark”>. Alternatively, you could also specify the width and height by adding those attributes e.g. <img src=“img_flower.jpeg” alt=“Flowers in Denmark” width=“500” height=“350”>.
ID & Class
By default, using these attributes does not affect the presentation of an element. It will only change their appearance if there is a CSS rule that indicates it should be displayed differently.
– ID attribute
Every HTML element can carry the ID attribute. It is used to uniquely identify the element from other elements on the page. It is important that no two elements have the same value for their ID attributes (otherwise the value is no longer unique).
Giving an element a unique identity allows you to style it differently from any other instance of the same element on the page e.g. you might want to assign one paragraph within the page a different style from all of the other paragraphs.
– Class attribute
Every HTML element can also carry a class attribute. Sometimes you will want a way to identify several elements as being different from the other elements on the page. For example, you might have some paragraph of the that contain information that is more important than others and want to distinguish between these elements. The class attribute on any elements can share the same value or name.
Block Elements
Some elements will always appear to start on a new line in the browser window. It is know 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 neighbouring elements. It is know as inline elements, example: <b>, <i>, <em>, <a> and <img>.
LECTURE 4: UI vs UX
User Experience
UX would say that button should physically press down when you click it.
UX Designer
UX Designers focus on the structure and layout of content, navigation and how users interact with them. The types of deliverables they produce include site-maps, user flows, prototypes and wireframes, which are more focussed on the underlying structure and purpose of the software. The visual appearance does impact on these, but can be created as a separate layer that is applied over the top.
User Interface
The UI would be a series of buttons and how they look. UI Design 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. It brings together concepts from interaction design, visual design, and information architecture (IA).
Users have become familiar with interface elements acting in a certain way, be consistent and predictable in the choices and the layout design. Doing so will help with task completion, efficiency, and satisfaction. Interface elements include but are not limited to:
• 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
UI Designer
Focus on the way the functionality is displayed and the fine detail of how users interact with the interface. They produce the visual comps and functioning front-end code. This is very much about polished final production quality outputs.
Designing for the USER
Successful user interface design improves product. In fact, in some ways the UI is the product, according to Jakob Nielsen, User Advocate and Principal of the Nielsen Norman Group. “If people can’t use a product, it might as well not exist.” This concept is especially true in a world where every marketplace-from books to electronics-is highly competitive.
Common Characteristics
There are a couple of standards that identify effective design across the board (regardless of media or discipline). First consideration is determining who the user is. The design must be as broad or narrow as necessary to accommodate the intended user. There is no recipe that’s going to make your design appropriate for all applications and users.
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. Graphic designers have been reared on a variety of formulaic methods and approaches for successful design. It helps to think of any designed piece as an interface, be it a book, shampoo bottle, retail store, or Web site. In order to make a connection with the user, the design’s interface must achieve its mission-communicating information through the printed word, dispensing a product, projecting and 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.
Golden Rules of Interface Design
Interface expert Nielsen identifies five usability attributes designers should put more attention to when creating a design interface, no matter what their medium:
– Ease of Learning
– Efficiency of Use
– Memorability
– Minimize Errors
– Satisfy the User
LECTURE 5: Introduction to CSS
CSS stands for Cascading Style Sheet. It allows us to create rules that specify how the content of an element should appear. For example, you can set the background of the page is cream, all paragraphs should appear in gray using the Arial typeface, or that all level header should be in a blue, italic, Helvetica typeface.
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 two parts: a selector and a
declaration.
 |
| Fig 1.2: CSS style rules |
This rule indicates that all <p> elements should be shown in the Arial typeface.
– Selector
It indicates 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
It indicates 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 sit 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.
 |
| Fig 1.3: CSS Properties |
This rule indicates that all <h1>, <h2> and <h3> elements should be shown in the Arial typeface, in a yellow color.
– Property
It indicates the aspects of the element you want to change. For example, color, font, width, height and border.
– Value
It specifies 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.
Method to Employ CSS
1. Using External CSS <link>
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 below:
– href
To specify the path to the CSS file
– type
This attribute specifies the type of document being linked to. The value should be text/css
– rel
Specifies the relationship between the HTML page and the file linked to. The value should be 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 authors use one CSS to control the presentation (fonts and colors) and a second to control the layout.
2. Using Internal CSS <style>
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 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 in each page)
– Keeps 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)
INSTRUCTIONS
During the first meeting, before we began our exercise, Mr. Shamsul asked us to discover pros and cons of some websites from Webby Awards and Awwwards. I chose Rotten Tomatoes, Blue Marine Foundation, and Lemkus as good websites, and Variety, Allure, and WWE as bad websites. Below here is my survey results.
Exercise 1: HTML and CSS Document Development
So, first thing first, I opened my TextEdit and change the format to Plain Text. Next, I began to type both the text and code as I learnt in the class before. Thankfully I didn't encounter much problems while doing this exercise. Here's some of my process.
 |
| Fig 2.1.1: Making bold text |
 |
| Fig 2.1.2: Making ordered list |
 |
| Fig 2.1.3: Adding links |
 |
| Fig 2.1.4: Using many elements at the same time |
 |
| Fig 2.1.5: Encountered problem |
 |
| Fig 2.1.6: Problem solved |
 |
| Fig 2.1.7: Exercise 1 Layout |
After the submission on Week 3, Mr. Shamsul taught us new things to be applied to the page layout. We were told to add a few images that relate to the Triathlon context. This is what I did to my Exercise 1's page.
 |
| Fig 2.1.8: Exercise 1 Layout Final Outcome |
Exercise 2: CSS Layout
Below is the layout students need to follow.
 |
| Fig 2.2.1: Images for Exercise 2's page |
 |
| Fig 2.2.2: Adding image |
Below is how my Exercise 2's layout looks like.
 |
| Fig 2.2.3: Exercise 2 Layout |
After the submission on Week 4, Mr. Shamsul taught us some new elements to be applied to the page layout. The added elements are background color, font, text size, text color, and text alignment. This is what I did to my Exercise 2's page.
 |
| Fig 2.2.4: Exercise 2 Layout Final Outcome |
Exercise 3: Layout Exercise
I decided to follow the given layout reference 99%. I tried so hard to have the same layout. First thing first, I installed the same font for the typeface used in the content. And what I did next is just trying out every modification in the CSS to get the layout that I wish. Below is some glimpse of my working progress, showing the codes that I used.
 |
| Fig 2.3.1: Codes for HTML |
 |
| Fig 2.3.2: Codes for CSS style |
I was having a little hard time during this exercise because it was very difficult to arrange those contents. However, with the help from my cousin who is studying web programming, I can finally overcome some problems that I encountered. And this is how my final outcome of layout exercise looks like.
 |
| Fig 2.3.3: Layout Exercise Final Outcome |
https://layout-exercise-lulu.netlify.app/
REFLECTIONS