Labels

INTERACTIVE DESIGN/ EXERCISES

Luisa Audrey / 0348741 / Bachelor of Design in Creative Media
Interactive Design
Exercises



LECTURES


Week 2:

WEB DESIGN AND NEW MEDIA

WEB STANDARDS

In the early days of the Web, everyone accessed the Web using a keyboard, mouse, and monitor. Today, there is much more variety in the ways people access the
Web.

Hardware and software issue:

  • Growing variety of browsers that people can choose from, including Microsoft Internet Explorer, Mozilla, Firefox, Google Chrome, Opera, Safari, and others.
  • People use a variety of operating systems, including Windows, Mac OS, and Linux.
  • People have their computers set to a wide variety of screen resolutions, from 640 x 480 pixels to 1680 x 1050 pixels and beyond.
  • 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
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
STRUCTURE OF A WEB PAGE
  • Understanding structure
  • Learning about markup
  • Tags and elements
HTML DESCRIBES THE STRUCTURE OF PAGES

In the browser window you can see a web page that features exactly the same content as the Word
document. To describe the structure of a web page, we add code to the words we want to appear on the page.

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

<element>Information</element>

Each element tells the browser something about the information that sits between its opening and closing tags.




ATTRIBUTES TELL US MORE ABOUT THE ELEMENTS

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.


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 contain information about the page. You will usually find a <title> element inside the <head> element.

<title>
The contents of the <title> element are either shown in the top of the browser (tab bar)

LISTS
  • There are lots of occasions when we need to use lists. HTML provides us with two different types:
  • Ordered list are lists where each item in the list is numbered. List is for set of steps for a recipe that must be performed in order
  • Unordered list are list that begin with a bullet point
NESTED LISTS

WRITING LINKS

Week 3:

ADDING IMAGE IN HTML
  • The tag <img> is used to add an image in HTML
  • <img src=“url”>
  • src attributes specify the location of the image
  • <img src=“img_flower.jpeg”>
  • <img src=“http://stockimages.anylink.com">
  • Alternatively, you could also specify the width and height by adding those attributes
  • <img src=“img_flower.jpeg” alt=“Flowers in Denmark” width=“500” height=“350”>
IMAGE FORMAT FOR WEB
  • JPEG (Joint Photographic Expert Group)
  • GIF (Graphics Interchange Format)
  • PNG (Portable Network Graphics)
EXTRA MARKUP

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)
  • 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
Class attribute
  • 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>
Week 4:

UI vs UX, What are the difference?

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 focused 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.

The UI would be a series of buttons and how they look

User Interface Design

• 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.
• UI brings together concepts from interaction design, visual design, and information
architecture (IA).

What is the difference between Web app and Native app?

Native apps are specifically developed to run on certain mobile OSs (platforms), using an Integrated Development Environment (IDE) and Software Development Kit (SDK). Native apps are installed physically on the device itself and are distributed through application stores like Google Play store and the App Store.

Web apps often called HTML5 apps, are mobile versions of websites, especially designed with a device’s size in mind. A web app runs via a web browser on the device and often requires either a wi-fi or cell signal to function

User Interface Design

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
• “There’s no such thing as good design,”- Nielsen
• What to do?
• 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
Common Characteristics
• 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
• From here, the aesthetic considerations can follow

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

Week 5:

CSS

UPPERCASE & lowercase[text-transform]

The text-transform property is used to change the case of text giving it one of the following values:
  • uppercase-text appear to uppercase
  • lowercase-text appear to lowercase
  • capitalise-first letter of each word to appear capitalised
Underline & Strike [text-decoration]

The text-decoration property allows you to specify the following values:
  • 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 rem
  • 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
CSS Boxes Model
At the beginning of this section on CSS, you saw how CSS treats each HTML element as if it lives in its own box

Box Dimensions-Width, Height
  • By default a box is sized just big enough to hold its contents
  • To set your own dimensions for a box you can use the height and width properties
  • The most popular ways to specify the size of a box are to use pixels(px) or percentage (%)
Overflowing Content [overflow]

The overflow property tells the browser what to do is 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

Border
Every box has a border (even if it is not visible or is specified to be 0 px wide)
The border separates the edge of one box from another

Margin
Margins sit outside the edge of the border
You can set the width of a margin to create a gap between the borders of two adjacent boxes

Padding
Padding is the space between the border of a box and any content contained within it. Adding padding can increase the readability of its contents


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.
  • Other common block-level elements are p and form, and new in HTML5 are header, footer, section, and more.
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.
  • The a element is the most common inline element, since you use them for links.
INSTRUCTION


At first we were only tasked to look for good and bad websites.

After that we finally started making a very simple website and mostly introduction towards html. After doing the first practice, Mr. Shamsul finally tasked us to do exercise.

For the first exercise, we were tasked to create a website that looks like this:

Since we only had to create a web that looks exactly like what Mr. Shamsul gave us, it was quite simple and I did it pretty fast. Mr. Shamsul then told us to post it in netlify.

This is a glimpse of how it looks like:



Here is the code for the first exercise:

For the second exercise, it is a bit harder. Mr. Shamsul started to introduce style. Even though we did not make it in the css file yet, we already added css in the html file.

Mr. Shamsul sent the files and the image that we have to put in the html. I did a bit of makeover for this exercise, it was not much but still looking pretty neat. Here is my code:


Here is how it looks:

For the third exercise, it is a bit tricky. We started to learn about css and we knew how to attached a css file to an html file.  We did a practice for making row and column.



It is far trickier than only html. It makes my website looks prettier though so I don't mind.

After doing the practice, we have the layout exercise. This is gonna be the last exercise for this module.
We were tasked to make a website that looks the same like what Mr. Shamsul provided.

This is my html and css code:

I took pretty long doing that website because the CSS is very tricky. I feel like I just learnt this yesterday and I already made such website. Moreover, this is the first time I learn coding I feel like I speedrun the whole process.

However, I still managed to submit all of them thankfully.
FEEDBACK

Mr. Shamsul commented that my second exercise looks pretty good because I matched the font, font color and the background well.
REFLECTION

This is a whole new experience for me. However I must say that this is my favorite module for this semester. I never thought that I would enjoy coding this much. It could be because it was still easy and it was only the basic. But at the end of the exercise, I can feel like it started to get hard. It is hard for me to memorize the css and sometimes the website doesn't change like what I expected it to be.
Labels:

Comments

Post a Comment

Popular Posts