WEBSITE AND multimedia assignment questions

prabhdeep

slides_and_lab_for_assignment.zip

Home >Computer Science homework help >WEBSITE AND multimedia assignment questions

ITECH2106-6106 Lab01-HTML CSS Intro and Needs Analysis.pdf

ITECH2106-6106 Webpage & Multimedia Design

CRICOS Provider No. 00103D ITECH2106-6106 Lab01 Page 1 of 11

Lab Week 1 HTML & CSS Introduction Overview This week’s lab exercises:

Refresh your memory developing a webpage using HTML & CSS; •

Employ <div> tags to structure a webpage; •

Begin using HTML5 semantic structural tags; •

Begin Assignment 1 by starting on the Needs Analysis. •

NOTE: If you copy and paste code from any source, make sure the quotations marks paste correctly, sometimes you may

get the wrong shaped quotation marks such as angled ones “ instead of straight ones "and the browser cannot read

them. Also note, most of this code is images and cannot be copied and pasted!

Exercise 1: Refresher Remember in “ITECH1004/5004: Introduction to Multimedia”, you had to create a basic website for your final assignment? Well, let’s recreate a webpage similar to the sample provided of the homepage (shown to the right).

ITECH1004 students were allowed to develop their website using HTML tables, so this is where this exercise will start. In this exercise, you will hand-code everything directly via the markup code using a text editor, rather than use a visual editor like Adobe Dreamweaver. This way you can be sure the code is exactly what you want, and you will are more likely to learn the code by typing it.

Open NotePad++ and start a New file •

Start with the basic HTML tags to format a page (as shown below), • and then open the save as file menu. Click the drop-down menu and select an .html file type. Name your file wk1ex1.html

Sample Home Page

ITECH2106-6106 Webpage & Multimedia Design

CRICOS Provider No. 00103D ITECH2106-6106 Lab01 Page 2 of 11

After saving as an html file type, you will notice notepad++ has colour coded the text for you to distinguish tags from • content (and also attributes and values as you will see soon). Now to add some content.

Place a heading in the body: •

After the heading you need to create a table <table>. The sample had one table row <tr> and two columns of • table data <td>.

For now just enter it as below, keeping the indentations as it makes it easier to see where tags open and close. •

Save your HTML file. •

Now for a small trick that will make it easy to track your progress when building webpages. •

Open your wk1ex1.html in Google Chrome. •

o This browser is going to be your go-to browser this semester to view your HTML files.

o Why this browser? It has the best support for the latest HTML5 and CSS3 features. In comparison, Microsoft Internet Explorer is so far behind, even Microsoft have abandoned it in Windows 10.

Now the simple trick: •

o Place your NotePad++ window on the left of your screen using the hotkey combination “WIN key + Left Arrow key”.

o Place Google Chrome on the right half of the screen using “WIN key + Right Arrow key”.

o Now you have a code editor and a webpage viewer always visible. Each time you make a change to the HTML, you can save it, then Refresh Google Chrome (with F5 hotkey), and see the changes.

The next step is to create the navigation. For this you use anchor tags with hyperlink references. Eg. • <a href="file.html">

Within the first table data in which we placed “navigation” text as a placeholder, change it to the following: •

ITECH2106-6106 Webpage & Multimedia Design

CRICOS Provider No. 00103D ITECH2106-6106 Lab01 Page 3 of 11

Note that the <p> tag just creates a new line for each hyperlink as they are paragraphs. •

Save the file, and Refresh the Chrome window. •

Now we need to place content in the second table data <td> tags. Change the “content” text to the following: •

Above we have 3 paragraphs of plain text, one hyperlink to an email, •

and an image.

Use any image you like for this exercise, but place it in the same • folder as the HTML file, and make sure to change the source attribute src="sampleimage.jpg" to the file name of your image or else it will not display.

Save the file, and Refresh the Chrome window. •

So far so good, and very easy. All the content is placed but it looks • only a little like the sample. We need to format the html tags using Cascading Style Sheets (CSS). In particular we will create an external CSS file, in order to separate the content from the styles.

In NotePad++ Create a New file. •

Save the file and choose Cascade Style Sheets file from the dropdown menu. Save as “wk1ex1.css”. •

Time to define some styles. You will learn more about CSS as the semester continues, for now make yourself familiar • with the syntax below and then complete the exercise.

Let’s style the easiest element first. The colour of the webpage sample is a pale yellow. In your CSS file, enter the •

following:

ITECH2106-6106 Webpage & Multimedia Design

CRICOS Provider No. 00103D ITECH2106-6106 Lab01 Page 4 of 11

A few notes: •

o The selector here is the body tag, as we wanted the whole webpage to turn yellow.

o background-color (note American spelling) is the property we want to change, and the hexadecimal

#feffa8 is the value of the colour. Each declaration needs to end with a semi-colon ;

o You can place comments in your CSS code using /* insert comment */. In this case the comment just indicates that the hexadecimal value is a pale yellow colour.

Save the CSS file, and Refresh the Chrome window. •

o Nothing changed! Why? Because we haven’t linked the external CSS file to the HTML file.

Return to your HTML file. •

Inside the <head> section, under the <title>…</title> tags, place the following code: •

Save the HTML file, and Refresh the Chrome window. •

The link between your HTML and CSS is established, and now the background colour should be a pale yellow. •

Return to your CSS file. Next you will style the Table: •

Notice how we split up the styles? •

o To match the sample, we wanted the table span the width of the page, hence width:100%;

o Also to match the sample, we wanted both the table and the table data to have a 1 pixel wide solid black border, so we can apply styles to two selectors at the same time with a comma.

o There is shorthand for the border three lines of code as such:

border: solid 1px black;

Change the styles in the table, td selector to the shorthand code above; while miniscule, you may save a few • kilobytes file size, and have more efficient code.

There is one last thing to match the original sample page: The second table data <td> (or second column) has • centred text in the sample.

If you add the following style declaration to the table, td selectors, save and view the webpage, what happens? •

ITECH2106-6106 Webpage & Multimedia Design

CRICOS Provider No. 00103D ITECH2106-6106 Lab01 Page 5 of 11

text-align: center;

Unfortunately it centres the navigation text as well, because the navigation is also contained within a <td> •

We don’t want the navigation to centre, so remove the text-align style from the table, td selector. •

Instead you will create an HTML class with an associated CSS class selector, specifically for the • second table column.

Return to your HTML file. •

Set your cursor inside the second <td> tag, and add class="contentarea". You can call the class whatever • you want, as long as you create this class selector in your CSS file as well, it will work.

o The HTML should look like this on the second <td> tag:

Save the HTML file and switch to the CSS file. •

Next you will create the selector for the contentarea class. To create • a CSS class selector, you start the selector with a full-stop followed by the name you want to use, as shown to the right:

Do this now at the bottom of your CSS file. •

Save the CSS file, and Refresh the Chrome window. •

Now your first column is not affected by this customised class that was only applied to the second column. •

Final view: •

It looks close to the sample…but it is pretty ugly. •

ITECH2106-6106 Webpage & Multimedia Design

CRICOS Provider No. 00103D ITECH2106-6106 Lab01 Page 6 of 11

This exercise was to re-introduce you to building a webpage using HTML and CSS and gave very thorough • instructions. From here on, the instructions will expect you to know the basics.

Proceed to the next exercise. •

Exercise 2: Structure with Div The preferred method for structuring a website is to use <div> tags. They define a division of content, usually used to structure different blocks or sections of content in different positions from one another.

Tables are very restrictive in how they can be used, and create more code for each row, column and data. A prior student had this to say about the sample image of the website they were to create for the ITECH1004 Assignment:

“Do we have to copy the example website exactly? The 90's were pretty awesome. :D”

Tables are very 90’s! Why use tables when we have much more powerful HTML tags at our disposal? The answer is that you should not use tables to structure your webpages. Tables should be reserved for tabular data.

Open a New notepad++ file •

Once again, start with the basic html tags to format a page, and then save as a .html file called wk1ex2.html •

Start a new CSS file, save as a .css file called wk1ex2.css •

Create the <link> between your HTML and CSS file, the same way you did in exercise 1. •

Instead of <table> for structure, you will use <div> tags this time, and build a similar webpage to exercise 1. •

o When building a webpage, you need to decide how to split up each section. Looking at the image of the webpage in the previous exercise, we have

o a header up the top,

o navigation on the left, and

o content on the right.

o Let’s also add a footer at the bottom, as this is a common website structural area.

o This suggests we will need four <div>’s to divide the different parts of our webpage.

o A <div> is more powerful when we assign a class or id to it, as then we can style each <div> separately, like we did with the second column in the last exercise. In this case we are going to use id

o What is the difference between a class and id ?

o An id with a unique name can only be used once on a webpage

o When you only want one HTML tag to use a unique set of styles you should use an id. This will prevent you from using that CSS id selector on another HTML tag. Also because an id is unique, you can provide href links to specific parts of your webpage containing these unique id’s.

o Example: <a href="http://yourdomain.com#comments">Go to comments id</a>

o A class can be used multiple times on as many tags as you want.

o For example, we could apply a class called "contentarea", to multiple HTML tags. Then all of those tags would use the styles from the .contentarea CSS class selector.

Enter the four <div>’s into the HTML body section, in the order they would appear on the page from top left to • bottom right.

ITECH2106-6106 Webpage & Multimedia Design

CRICOS Provider No. 00103D ITECH2106-6106 Lab01 Page 7 of 11

Give them appropriately named id’s as follows: •

The example above has some paragraph placeholder text so when you view it in Google Chrome you can see where •

each <div> is located.

Replace the placeholder paragraphs: •

o In the <div> defined for the header, place the same <h1> code you used in exercise 1.

o In the <div> defined for the navigation, place all the navigation code from exercise 1.

o In the <div> defined for the content, place all of the content code from exercise 1.

o In the <div> defined for the footer, you will need to create some new HTML markup:

o Add a paragraph with some copyright information.

Save the HTML file, and Open it in the Chrome window. •

Just like our code, the divisions of each section have just lined up one after another. This is not what we wanted, as • the navigation was supposed to be to the left of the content, not above it.

To fix this, you will need to edit the CSS file, and add styles for each of the id selectors. Switch to your CSS file. •

Firstly, you can recreate the same background-color declaration on the body tag as in exercise 1. •

Next you will define your id selectors. •

o Note that previously we defined a class selector with a full-stop in front of a custom name to indicate that it was a class selector.

o For an id selector, you place hash # in front of the custom name to indicate it is an id selector.

Start with the #header id selector placed after the body selector, as shown below. Enter all of the code into your • CSS file:

ITECH2106-6106 Webpage & Multimedia Design

CRICOS Provider No. 00103D ITECH2106-6106 Lab01 Page 8 of 11

Look at each id selector above. Read the following to understand what the styles are doing. •

#header & #footer •

o The width of the div with the header id is set to span the entire webpage via a percentage value of 100%. No matter the size of your resolution or browser window it will always span 100% width.

o The height is defined via pixels, and is set at 40px. If the resolution or window changes it will still remain at 40 pixels.

#navigation •

o The width is set at 20%, and height at 500 pixels.

o The border styles return from exercise 1.

o There is a new style property called float. What does it do?

o Open http://www.w3schools.com and use their search function to look up css float.

o Open the “Play It >>” window in w3schools for the float:left; property value to see how float works.

o The w3schools website is going to be your best friend this semester to learn all sorts of styles!

http://www.w3schools.com/

ITECH2106-6106 Webpage & Multimedia Design

CRICOS Provider No. 00103D ITECH2106-6106 Lab01 Page 9 of 11

#content •

o The height is set at 500 pixels. It matches the navigation height as they need to sit side by side.

o The width is set at 100%, but does not fill the entire width of the webpage, as the float from before allowed the navigation to “float” to the left, while this content block would fill 100% of the remaining space to the right automatically.

o The border styles, and text-align style returns from exercise 1.

Save the CSS file, and Refresh the Chrome window. •

Now our div structured webpage is very similar to the table structure webpage. Except divs are way more powerful • and it will be easier to maintain this webpage or an entire website with divided sections.

But…it is still UGLY! •

Let’s make it better looking by simply applying some styles in our CSS file. •

Look up the following styles on http://www.w3schools.com and discover how to apply them to different selectors on • your CSS file (You should have used a few in your assignment for ITECH1004/5004):

font-family

font-size

color

padding

margin

background-color

text-decoration

Remember you can apply any of these styles to any id selector, create new class selectors and apply new styles, or • even apply them directly to a HTML tag such as <h1> in your CSS file. Here is a couple of examples:

h1 {

color:#00ffff;

}

#header {

background-color:#000000;

}

Here is a finished example of the webpage, with • a few added styles:

Not amazing, but MUCH better than before. •

http://www.w3schools.com/

ITECH2106-6106 Webpage & Multimedia Design

CRICOS Provider No. 00103D ITECH2106-6106 Lab01 Page 10 of 11

Exercise 3: Structure with HTML5 elements <div> tags are very powerful, but they are non-semantic - meaning the actual tag tells us nothing about its content. It is the names we give a class or id that give a div meaning, and technically we could call them anything we want. This can become confusing to search engines like Google when trying to identify webpage content.

HTML5 introduced new semantic (definition: meaningful) elements to define different parts of a webpage. Similar to <div> tags, these new elements divide the content, but they use literal names to clearly identify what the contents of these elements should be.

These are some of the most obvious new elements:

<header> - used to define the header block of the HTML document, and/or header of a section. •

<nav> - used to define the navigation block of a HTML document. Usually for global navigation. •

<section> - used to group together thematically-related content into a section in a HTML document. Each section • should be identified by a heading (h1 to h6).

<footer> - used to define the footer block of a HTML document, and/or footer of a section. •

Check out some more at w3schools - http://www.w3schools.com/html/html5_semantic_elements.asp and then begin the exercise.

Open your wk1ex2.html and wk1ex2.css files within notepad++. •

Re-save the files as wk1ex3.html and wk1ex3.css before continuing. •

As this is a pretty small webpage, converting it to semantic HTML5 tags is going to be easy. •

First, to declare to the browser that you are using HTML5, every HTML file needs to begin with the • following markup code: <!DOCTYPE html>

Place this before the <html> tag in your HTML file. •

Change your <link> to the CSS file to "wk1ex3.css" •

Next replace all <div>s with one of the HTML5 semantic tags above. For example: •

o <div id="navigation"> would become <nav>

o Do not forget to close the tag properly where previously you closed the div tag. Eg. </nav>

You should have replaced four <div> tags and their associated closing tags. Note, if you use <section>, it • requires a heading tag (h1 to h6) at the beginning of it.

Save the HTML file, and Open it in the Chrome window. •

As expected, all the styles associated to your previous id selectors no longer function. You need to change the id • selectors to the HTML tag/element selectors that you replaced them with.

Switch to your CSS file and do this now. For example: •

o #navigation would become nav as the nav tag in your HTML is no longer using an id, but the semantic <nav> tag.

Save the CSS file, and Refresh the webpage in the Chrome window. •

Your styles should now be applied to the HTML5 tags you added before. Congratulations you now have a fully • HTML5 compatible webpage.

Stick to these semantic structural tags in future exercises, as they are important. You can even have multiple • <section>s and <header>s for example, and apply a custom class or id to them, just like <div> tags.

When you cannot find an appropriate semantic HTML tag to define some content, you can instead use a <div> tag. •

ITECH2106-6106 Webpage & Multimedia Design

CRICOS Provider No. 00103D ITECH2106-6106 Lab01 Page 11 of 11

Exercise 4: Needs Analysis for Assignment 1 This exercise is designed to help you make a start on your Analysis Document assignment that is due on Friday of Week 4. Today you will focus on the Needs Analysis which is the first section of the assignment. As the Needs Analysis is not presented until Lecture 2, a brief overview of the Needs Analysis is described below:

Generally, a Needs Analysis is to establish a need for the product (in this case a personal website).

Questions that need to be asked of the Client for the product: •

o Why the need?

o What was done previously?

o Who will it benefit?

o Can an existing product be updated, or is starting from scratch more viable?

For your assignment you are asked for a description and purpose of your personal website. Begin by reading the “Major Assignment Overview” document in the Assessment section on Moodle, and then focus on the following sections for your Needs Analysis:

1. Needs Analysis

1.1. Description In this section you should provide a detailed description of the website that you will be designing and building. The website requirements are outlined for you in the “Major Assignment Overview” document, but you need to relate these to yourself, your career ambitions and achievements, as noted in the overview document. This section should also include an appropriate title/name for your personal website.

1.2. Purpose Describe in detail the purpose of your personal website. Why is it needed? Who will benefit from the website? The purpose should relate to the target audience. Think of this website as a real-world scenario with a real purpose (the purpose should not be that you are required to design and build a website for this course/assignment). What would the purpose be for a web site such as this in the real-world?

Before you leave, get your tutor to have a look over your work. For all assignment work you should make the most of your tutors while they are present in the lab class with you, and show them your progress as well as see if they have any suggestions. Remember they cannot do the work for you, but they can give you advice or refer you to online material that could help you.

Lab Week 1

HTML & CSS Introduction
Overview

This week’s lab exercises:

Exercise 1: Refresher
Exercise 2: Structure with Div
Exercise 3: Structure with HTML5 elements
Exercise 4: Needs Analysis for Assignment 1

1. Needs Analysis

1.1. Description
1.2. Purpose

ITECH2106-6106 Lab02-Code Recognition and Target Audience Analysis.pdf

ITECH2106-6106 Webpage & Multimedia Design

CRICOS Provider No. 00103D ITECH2106-6106 Lab 02 Page 1 of 5

Lab Week 2 HTML & CSS Code Recognition and Target Audience Analysis Overview This week’s lab exercises:

• HTML & CSS Code Recognition using Google Chrome’s Element Inspector

• Altering the CSS Code to quickly change the appearance of a webpage

• Continue Assignment 1 by starting on the Target Audience Analysis

Exercise 1: HTML & CSS Code Recognition Last week you created a basic webpage in HTML with some styles in your CSS file. This week you will look at a prebuilt webpage via the HTML & CSS code.

This exercise is designed to help you get more familiar with CSS and HTML code by trying to identify the specific CSS and HTML code associated with different sections of a web page. The exercises are based around the "CSS Zen Garden" webpage located at http://www.csszengarden.com/ which was set up to demonstrate the power of CSS. It is important that you begin to see the power of CSS at this early stage of the semester.

• Download the Week 02 Lab Files zip file from Moodle and extract the files.

• Make sure you can see the following file structure:

• Open the csszengarden.html file in Google Chrome.

• It’s time to learn about the power of Google Chrome’s built in Element Inspector.

• In Chrome, right-click on the C.S.S. Zen Garden image at the top of the page, and select “Inspect Element”. You should get an element inspector window pop up at the bottom of your browser:

• The Element Inspector shows the HTML code on the left panel, and the CSS styles on the right panel.

http://www.csszengarden.com/

ITECH2106-6106 Webpage & Multimedia Design

CRICOS Provider No. 00103D ITECH2106-6106 Lab 02 Page 2 of 5

• You will notice that if you entered the Element Inspector by right-clicking on the first image as instructed, the grey highlighted area will be on the <h1> tag.

• You can see that the image is contained in the <h1> tag via the right panel in which there is a style that says:

background-image: url(title.png);

o This is a style that quite obviously places an image called “title.png” as the background in that h1 selector.

o Remember from last week the CSS syntax?

o Some other properties with set values in this #pageheader h1 selector are:

o height Set the height of the element

o width Set the width of the element

o background-repeat Choose whether to repeat the image or not

o margin-top The top margin of that element

o position How the element is positioned in relation to other elements

• At the very bottom of the Element Inspector you can see all of the page elements that this <h1> is a part of in a hierarchical view:

html body#css-zen-garden div#container div#intro div#pageheader h1

o What this means is that the <h1> tag is inside a <div> with the id="pageHeader", and that is inside a <div> with the id="intro", and so forth. This is also easily visible from the HTML panel on the left.

o Remember from last week that id selectors are distinguished in CSS via a # (hash), and class selectors via a . (full-stop).

• You can see how the Element Inspector can be a very powerful tool, especially for debugging code when trying to figure out when something in your code is not working or appearing how you want it to.

• With the Element Inspector still open, mouse over different HTML tags. The inspector will highlight, on the actual webpage, the location of the content that you are hovering over. This is a very quick way to identify which HTML tags are controlling what parts of the webpage.

• Scroll down in the HTML panel of the element inspector.

ITECH2106-6106 Webpage & Multimedia Design

CRICOS Provider No. 00103D ITECH2106-6106 Lab 02 Page 3 of 5

• First hover over <div id="linkList">…</div>

o When you hover, you will see three coloured boxes appear on the webpage; Orange, Green and Blue.

o Which colour do you think represents the actual position of the "linkList" content?

o What do you think the other two colours represent?

• Click on <div id="linkList">…</div> in the HTML panel.

o You can expand this div and see its full HTML contents via the little triangle next to it.

o In the CSS on the right side panel of the element inspector, you can see the styles of the id selector #linkList

o Scroll down in the CSS panel to the very bottom.

o At the bottom is a visual representation of how the styles affect the position of the element currently selected (shown to the right).

o Blue represents where the actual block of content is, and you can see its width is 225 pixels, and height is approximately 1002 pixels.

o Green represents the padding between the content inside the element and the edge of the element, and you can see that there is padding between the content and only the top edge of 104 pixels.

o Orange represents the margin between the element and its parent element, and you can see there is a margin on the left of this block of 375 pixels.

o Finally there is also position, which shows as 300 pixels from the top.

o If you scroll back to the top of the right CSS panel in the element inspector, you can see all of these styles applied to the #linkList id selector. The visual representation of the element comes in handy when trying to work out why something is not positioning the way you want.

• Another good function of the Element Inspector is the ability to make “live” changes to CSS and see the outcome.

o With the <div id="linkList">…</div> still selected, click on Georgia, "Times New Roman", Times, serif; value of the font-family property style in the #linkList id selector of the CSS panel.

o Delete that font-family value, and then type Arial and hit enter.

o The change automatically updates the webpage to display Arial instead of Georgia.

o Try reducing the top properties value. It will alter the position of this block element.

o Note that making changes is good for quick testing but does not save to your CSS file.

• At this point you should have a good grasp of the element inspector. So have a look at different HTML tags and their associated CSS selectors.

o See if you can determine what each CSS property is actually doing in the CSS panel.

o If you find a property you are unsure of, look it up on http://www.w3schools.com.

o For example, inside the #extraDiv1 id selector what does z-index:2; do?

• Once you have completed your investigation, it is time to start changing the look of the page to something similar in layout but completely different in looks.

http://www.w3schools.com/

ITECH2106-6106 Webpage & Multimedia Design

CRICOS Provider No. 00103D ITECH2106-6106 Lab 02 Page 4 of 5

Exercise 2: The Power of CSS - Altering the Styles Once you have deciphered which code belongs to what section you should alter the code in such a way that it changes the entire look of the page. You will do this by ONLY CHANGING the CSS file.

• Open the 213.css style sheet file inside NotePad++. (It is located inside the 213 folder).

• Alter the look of the page by:

o Finding new images for each of the images associated with the page.

o Make sure that the images are resized to the size specified in the style sheet.

o If no size is available find out the size from the images contained within the zip file and resize your image accordingly (if necessary).

o Alter different elements to your liking of:

o The colour scheme.

o The fonts and font sizes.

o The images.

o ONLY change the CSS file in terms of font, colour values and images, nothing else.

o DO NOT TOUCH ANY OF THE HTML CODE!!!

o Remember to use Google Chrome’s Element Inspector to determine the selectors of each element you want to alter.

• This idea of this exercise is to help you understand the relationship between HTML code and CSS code and to give you a foundation on which to build a different web page without having to completely start from scratch.

• Further changes can be made of course, and if you feel confident do not hesitate to stop here, but for the time being this is sufficient to get you looking at CSS and how it affects HTML code in a different way.

• When you have finished, open the website http://www.csszengarden.com/213/ in your browser

o Yes, this is the same page you were editing.

o To see the power of CSS, click the link “A Robot Named Jimmy”

o Note: this page uses an identical HTML file to the previous page, only the external CSS and the styles within were changed… and while the appearance is completely different, the content remains the same.

o There are many other CSS designs of this single HTML webpage. You can see them all on the “View All Designs” link.

• Although it would be nice to think that every design has been created from scratch, reality means that most of the designs are based on other, existing layouts. AS LONG AS the original design is no longer identifiable this is not a problem. Using someone else’s design without altering it beyond recognition IS A PROBLEM however and it can become a costly one if breach of copyright can be established.

http://www.csszengarden.com/213/

ITECH2106-6106 Webpage & Multimedia Design

CRICOS Provider No. 00103D ITECH2106-6106 Lab 02 Page 5 of 5

Exercise 3: Target Audience Analysis for Assignment 1 This exercise is designed to help you continue with your Analysis Document assignment that is due on Friday of Week 4. Today you will focus on the Target Audience Analysis. The Target Audience Analysis is presented in Lecture 2. For the benefit of students that have the lecture later in the week to their lab, a brief overview of the Target Audience Analysis is described below:

Generally, a Target Audience Analysis is to establish who will be using your product (in this case a personal website).

• You should determine the demographics of the users.

o Age, Gender, Education, Interests, etc.

o Background, race, disabilities, employment status, and location are also demographics that are sometimes needed, depending on the focus of the multimedia product or web site.

• Knowing ALL the demographics is not always necessary, but knowing the age group and gender almost always is.

• The more you know about your Target Audience the better your site can be.

• A broad Target Audience, however makes designing a targeted site/product difficult, as you are catering to a large amount of tastes.

For your assignment you are asked for demographics and a justification of that user demographic for your personal website. Begin by reading the “Major Assignment Overview” document in the Assessment section on Moodle, and then focus on the following sections for your Target Audience Analysis:

2. Target Audience Analysis

2.1. Demographics Think about two of the main potential users you will be targeting for your website. Read the overview document carefully as one potential user was already identified.

Describe in detail the demographics of these two users. For each user, discuss their Age, Gender, Education Level, and Interests. If you know of, and it is applicable you may also discuss each user’s additional demographics such as Background, Race, Disabilities, Employment Status, and Location. Remember the more you hone in on your target audience the better you can design your website with the user in mind.

2.2. Justification Justify why you are targeting these specific users and their demographics, and excluding other types. For example, if you suggested you were targeting 40-60 year olds, you may justify this by saying that this age range is the typical employer age for your intended career. However, you would need to elaborate on what your intended career is and back up your statements.

Lab Week 2

HTML & CSS Code Recognition and Target Audience Analysis
Overview

This week’s lab exercises:

Exercise 1: HTML & CSS Code Recognition
Exercise 2: The Power of CSS - Altering the Styles
Exercise 3: Target Audience Analysis for Assignment 1

2. Target Audience Analysis

2.1. Demographics
2.2. Justification

ITECH2106-6106 Lab03-HTML5 Webpage Media and Competitive Analysis.pdf

ITECH2106-6106 Webpage & Multimedia Design

CRICOS Provider No. 00103D ITECH2106-6106 Lab 03 Page 1 of 6

Lab Week 3 Centred Design, HTML5 Media and Competitive Analysis Overview This week’s lab exercises:

• Creating and styling a centred design webpage within a container;

• Introduction to HTML5 media tags;

• Continue Assignment 1 by starting on the Competitive Analysis.

Exercise 1: Centred Design Webpage In this exercise you are going to create a webpage with a centred page design, as discussed in the third lecture. If your lecture falls later in the week, a brief description is provided below:

Centered design

• As the screen resolution changes, the web page stays centered in the browser window.

• Any remaining space is divided equally between the left and right side of the page in the browser window.

Begin the exercise:

• Download the Week 3 Lab Files zip file from Moodle.

• Open the week3_start.html file in Google Chrome.

o This is a barebones HTML template file for a centred design webpage.

• Also open the week3_start.html file in NotePad++.

• Notice how ALL of the CSS styles are embedded in the HTML file?

• The first thing you should do is fix this. Why?

o What happens when you create a second webpage? If you keep all of the styles embedded on both HTML pages, you already have a lot of redundant and repeated CSS code between the two pages.

o Now what happens if you want to change a style, such as the value of the height property in the header selector? With the CSS embedded in the HTML pages, you would need to change the height for the header selector on both HTML pages.

o Now even worse, what if you had to change the header selector for thousands of pages??? Save yourself the trouble and learn early that it is way more efficient to place all of your CSS code in an external CSS file.

o Then if you have thousands of HTML pages all linked to one external CSS file, you can simply edit that one CSS file to make the style change across all HTML files.

• In NotePad++, create a new CSS file and save it as “wk3ex1.css”.

• Return to your HTML file.

• Cut (CTRL-X or Edit > Cut) all the CSS code in between the <style> and </style> tags, and paste (CTRL-V or Edit > Paste) this code into the CSS file.

• Save your CSS file.

ITECH2106-6106 Webpage & Multimedia Design

CRICOS Provider No. 00103D ITECH2106-6106 Lab 03 Page 2 of 6

• Return to your HTML file and remove the <style> and </style> tags, as there is no longer anything between them.

• Create a <link> to your CSS file from your HTML code.

o If you can’t remember how to do this, open a previous lab, or search for “link” on http://www.w3schools.com to recall how to use it.

• Now the HTML and CSS files are ready to edit.

• But first, examine the HTML and CSS code, and look at each style to see how the template was created.

o What is the container doing?

• Open the wk3ex1.html file in Google Chrome. You should refresh this when you make changes to the HTML and/or CSS to see your progress.

• From this point, edit the HTML and CSS files to create the following content, layout and styles:

o In the heading area at the top of the page (inside the <header> tag) add:

o An image for a Logo on the left side (hint: in the CSS, try float)

o A heading in text to the right of the image

o Create styles for the header selector that identify:

o colour of text

o font face

o size of font

o In the navigation bar (the <nav> tag):

o Create 5 hyperlinks:

• gallery, products, reviews, contact, FAQ

o Create styles for the nav selector that identify:

o colour of hyperlink

o font face

o size of font

o colour change on mouse hover over link (hint: in the CSS, try a:hover as a selector)

o In the first content section (the first <section> tag) add:

o A sub heading

o Some paragraphs with “Lorem ipsum” text (placeholder text)

o An image that is to the right of the text

o Create styles for these tags that identify:

o The sub heading should be larger than paragraph text

o All of the text is on the left half of the section

o The image is on the right.

o colour of text

o font face

o size of font

o Leave the second content section blank for now.

http://www.w3schools.com/

ITECH2106-6106 Webpage & Multimedia Design

CRICOS Provider No. 00103D ITECH2106-6106 Lab 03 Page 3 of 6

o In the Footer area (the <footer> tag) add:

o Information regarding the web developer

o A copyright notice

o The year of creation

o Create styles for the footer selector that identify:

o colour of text

o font face

o size of font

o Background colour

o If you can’t remember, or are not sure how to create a style, do a search on http://www.w3schools.com!

o Any text you wish to place as placeholder text may be obtained from the Lorem Ipsum site While you are there, you may like to investigate how Lorem Ipsum came to be (if you don’t know already).

o Below is an example of styles for the sub heading in the first section:

h2 {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 24px;

font-weight: bold;

color: #FF0000;

}

o Notice how the styles here are applied directly to the h2 selector and not the section selector?

o This means that anytime you use a <h2> tag inside your HTML, it will apply all of the styles from the h2 selector above.

o Why not apply the styles to the section that the h2 is inside? Because it will also affect all other tags, such as a paragraph (<p> tag) that is inside the section.

o Alternatively, if you wanted to style:

o A single <h2> tag, you could attach a custom named class to that one tag. Example:

and apply styles to that class selector:

.uniqueHeading { /* insert styles */ }

o All <h2> tags within <section>, but not <h2> tags that are not in a section, you would need to use both tags as the selector. Example:

section h2 { /* insert styles */ }

o This CSS code basically states that any h2 tags that are within a section tag, will apply the styles that follow.

o Save your work as you go, and view it in the browser.

http://www.w3schools.com/

http://www.lipsum.com/

ITECH2106-6106 Webpage & Multimedia Design

CRICOS Provider No. 00103D ITECH2106-6106 Lab 03 Page 4 of 6

Exercise 2: Introduction to HTML5 Media Tags In the past, any videos and audio needed to be embedded in the webpage and plugins had to be downloaded and installed by the user to view them. Adobe Flash is a common example of a plugin.

Today, using HTML5 tags we can insert video and audio natively into a webpage and no plugins are needed as long as they meet specific codec requirements. For example

A video should be:

• MP4 (H.264 video & AAC/MP3 audio)

• WebM (VP8/VP9 video & Vorbis/Opus audio)

• OGG (Theora video & Vorbis audio)

An audio file should be:

• MP3, AAC, or WAV

• WebM (Vorbis audio)

• OGG (Vorbis or Opus audio)

Begin the exercise:

• From the Week 3 Lab File you will need the mp3 audio and mp4 video files.

• Open your previously saved HTML file from the first exercise in NotePad++.

• The second <section> tag is still empty (unless you added your own content).

o Let’s add these two media files.

o Adding video and audio with the HTML5 media tags is almost as easy as inserting an image.

• Within the second <section> opening and closing tags type the following video and audio code:

• The <video> tag does not require a width and height, but without them, it will default to the actual size of the source video file.

• The controls attribute states that play/volume/etc controls should be present. Without it no controls will display.

• The <source> tag obviously is used to set the source media file. You can have multiple sources, and the browser will load only one of the files that is compatible with the browser.

• The final lines of text in these tags only display on older browsers that have no HTML5 media support.

• Before the <video> tag, place <h2>HTML Media</h2> code, as each section requires a heading according to HTML5 specifications.

• Save the file and open it in Google Chrome.

• Play the media!

ITECH2106-6106 Webpage & Multimedia Design

CRICOS Provider No. 00103D ITECH2106-6106 Lab 03 Page 5 of 6

Exercise 3: Competitive Analysis for Assignment 1 This exercise is designed to help you continue with your Analysis Document assignment that is due on Friday of Week 4. Today you will focus on the Competitive Analysis which is the third section of the assignment. The Competitive Analysis was discussed in Lecture 2.

• Do a search on the Internet and find 3 websites (1 good, 1 average and 1 bad) that are similar to the one you are planning on making.

• They should be personal websites that showcase an individual; Not commercial, business, news, etc, type websites.

• It is quite easy to find personal websites; you can search for artists, designers, politicians, celebrities, etc.

• Each website must demonstrate something you would like to include or avoid!

• If you need a refresher on the website assignment for this semester re-read the “Major Assignment Overview” document on Moodle, and each individual assignment brief.

• Use the structure located below to record your Competitive Analysis for each website. For each question you should try to justify your answer.

• Take screenshots of the homepage for each website, you will need them for your assignment.

• DO NOT use a rating system for the websites – the analysis is designed to see what else is out there with regard to the type of website you are planning. (A rating system would be subjective and only have meaning to you).

Begin the analysis below:

3. Competitive Analysis

3.1. Good Website Use the following questions to conduct a competitive analysis of an individual’s personal website that you believe to be well-designed and that you like. Answer each question and justify your answers.

Purpose of site

• What is the purpose of the site?

• Is it clear/unclear?

• What makes this a good/bad homepage in relation to the focus of the website?

Target Audience

• What are the demographics of the target audience? Gender, Age, other demographics

• What makes you think it is catering to those demographics?

Page Layout & Content Design

• Analyse and discuss the visible content.

• Any redundancy?

• Useful? Interesting? Fun? Well-written? Scannable?

• Most important content at the top?

• Clear interesting category titles? Good division of categories on site?

• Current/Out-of-date content?

• Too much / too little content on a single page?

ITECH2106-6106 Webpage & Multimedia Design

CRICOS Provider No. 00103D ITECH2106-6106 Lab 03 Page 6 of 6

• Lots/not enough “white space”?

Visual Design

• Are images used effectively? Are they too large/too small?

• What is the main type of font used? Serif or sans serif? Why is this suitable/unsuitable?

• Is the font usage well balanced? Or use of too many different sizes?

• What colour scheme has been used? Is it well-coordinated? Consistent? Pleasing?

• In what way are the colours suitable/unsuitable for the target audience?

Overall visitor's experience

• Is the navigation logical? Is it intuitive?

• Navigation text/titles appropriate? Descriptive?

• Discuss number of links. Too many? Good selection? Useful?

• Is the page length suitable?

• Any other issues observed?

Spelling & Grammar; errors

• Discuss any errors found.

3.2. Average Website Use the same questions as above to conduct a competitive analysis of an individual’s personal website that you believe to be average or ordinary, that you equally like and dislike, or feel indifferent about. You may find some well-designed elements, together with some poorly-designed elements, affecting the overall quality of the website.

3.3. Poor Website Use the same questions as above to conduct a competitive analysis of an individual’s personal website that you believe to be poorly-designed and you dislike.

3.4. Summary of Good & Poor Designs Using dot points; make a summary list of all the well-designed elements you could potentially use in your own designs, and the poorly-designed elements you want to avoid, from each website analysed.

4. Appendix

4.1 Screenshots of Websites Take a screenshot of the home page of each website that you analysed and place the screenshots in this section.

4.2 References List any references you have used for this document (including referencing the home page URLs for your competitive analysis) in APA Style format.

Lab Week 3

Centred Design, HTML5 Media and Competitive Analysis
Overview

This week’s lab exercises:

Exercise 1: Centred Design Webpage
Exercise 2: Introduction to HTML5 Media Tags
Exercise 3: Competitive Analysis for Assignment 1

3. Competitive Analysis

3.1. Good Website
3.2. Average Website
3.3. Poor Website
3.4. Summary of Good & Poor Designs

4. Appendix

4.1 Screenshots of Websites
4.2 References

ITECH2106-6106 Lab04-More CSS Exercises - Layout.pdf

ITECH2106-6106 Webpage & Multimedia Design

CRICOS Provider No. 00103D ITECH2106-6106 Lab 04 Page 1 of 9

Lab Week 4 More CSS Exercises Overview This week’s lab exercises:

• Anchor tag styles;

• External and Internal styles;

• Two Column Layout;

• Background and Floating Images;

• Introduction to Position;

• Internal to External CSS;

The tutorial/lab for this week covers more Cascading Style Sheet exercises. These are still all plain CSS and it is important that you get a handle on these so that we can compare CSS and CSS3 later in the semester.Try and understand what the code is doing, using the explanations given at the beginning of the worksheet. Most of the coding is self-explanatory, once you are used to the syntax!

Before asking your tutor for the solution to a problem you may have with the exercises, try and find a solution on the Internet. This will give you a good idea what help and tutorials are “out there” – when you have problems with your website, you will know where to go to find answers. Don’t forget about http://www.w3schools.com

Changing the look or colour scheme of a website can be as easy as altering one file. Imagine 100 pages in a website (not unusual), now imagine having to change each page because the font colour was chosen incorrectly (I know! Should never happen!!). Defining everything that is related to “style” in a stylesheet will make alterations a breeze.

The tables below contain the most frequently used codes in Cascading Stylesheets, but are by no means all the codes that may be used. The exercises that follow the tables concentrate mainly on using the code mentioned in these tables.

Font/Text Definitions

Definition relates to example

font-family typeface. h2 {font-family: Arial;}

font-style the style of the text

normal, italic, small caps etc

h3 {font-style: small caps;}

font-size the size of the text

in points (pt), inches(in) pixels(px) or %

h4 {font-size: 20pt;}

font-weight text density – extra light, light, demi-light, medium, bold, demi-bold, extra-bold

a:link {font-weight: demi- light;}

font-variant variation of the normal font – specify normal or small caps

h2 {font-variant: small-caps;}

http://www.w3schools.com/

ITECH2106-6106 Webpage & Multimedia Design

CRICOS Provider No. 00103D ITECH2106-6106 Lab 04 Page 2 of 9

text-align the alignment of text – left, centre or right h1 {text-align: center;}

text-decoration other text formatting – italic, blink, underline, line- through, overline, or none

a:visited {text-decoration: blink;}

text-indent margins – most often used with <p>

if used with <p> use closing tag </p>!

values are “in”, “cm” or “px”

p {text-indent: 1in;}

word-spacing the amount of spaces between words -

values are pt, in, cm, px or %

p {word-spacing: 10px;}

letter-spacing space between letters -

values are pt, in, cm, px or %

p {letter-spacing: 2pt;}

text-transform transformation of the text –

capitalise, uppercase or lowercase

p {text-transform: uppercase;}

color colour of text. h3 {color: #FFFFFF;}

h3 {color:rgb (255, 255, 255);}

h3 {color: navy;}

Margin/Background Definitions

Definition relates to example

margin-left

margin-right

margin-top

space around the "page". Values are in pt, in, cm, or px

used with body entire page is affected

used with p only paragraph is affected

body {margin-left: 2in;}

p {margin-right: 12cm;}

body {margin-top: 45px;}

margin all three margin command combined. Sequence is top, right, left

p {margin: 3in 4cm 12px;}

line-height space between lines of text. Values are pt, in, cm, px or %

p {line-height: 10px;}

background-color page's background colour in hexadecimal or word code – “transparent” is also a value

body {background-color: #ffffff;}

background-image the background image for pages

specify URL where image is kept

body {background-image: url(image.jpg);}

background-repeat how the image will tile – repeat-x, repeat-y, or no-repeat

body {background-repeat: repeat-y;}

ITECH2106-6106 Webpage & Multimedia Design

CRICOS Provider No. 00103D ITECH2106-6106 Lab 04 Page 3 of 9

background- attachment

how the image will react to a scroll. body {background-attachment: fixed;}

Position/Size Definitions:

Definition relates to example

position the placement of an element on the page. Values are absolute (placement) or relative (to other images)

img {position: absolute;}

left amount of space allowed from the left of the browser screen when positioning an item – values are pt, in, cm, px or %

img {position: absolute; left: 20px;}

top amount of space allowed from the top of the browser screen when positioning an item – values are pt, in, cm, px or %

img {position: absolute; left: 20px; top: 50px;}

width width of image or page division – values are pt, in, cm, px or %

img {position: absolute; left: 20px; top: 50px; width: 300px;}

height height of image or page division – values are pt, in, cm, px or %

img {position: absolute; left: 20px; top: 50px; width: 300px; height: 200px;}

overflow what to do when an image or text is too large – values are visible, hidden, scroll

img {position: absolute; left: 20px; top: 50px; width: 300px; height: 200px; overflow: hidden;}

z-index an item's position in the layering structure – the lower the number, the lower the layer

img {position: absolute; left: 20px; top: 50px; width: 300px; height: 200px; overflow: hidden; z-index: 10;}

Exercises

The fastest way to becoming familiar with any syntax is to actually USE it. In this lab it is EXPECTED of you that you HAND-CODE most of the examples, except where specific other stylesheets are mentioned; in that case you use the one(s) provided on Moodle. When asked to test your code, use Google Chrome as per previous labs, but also give them a try on Mozilla Firefox, which is also another good browser; browser differences should be taken into account as well when creating your website!

Exercise 1: Anchor tag styles This stylesheet will manipulate the look of heading style 3, the look of the different link states and also specifies what the colour of the body text is going to be.

• Open Notepad++ and create a file called wk4ex1.css. Note the extension has to be “css”.

• Type in the following code:

ITECH2106-6106 Webpage & Multimedia Design

CRICOS Provider No. 00103D ITECH2106-6106 Lab 04 Page 4 of 9

• Observe the different ways in which the colour code is treated here.

• Create a webpage that links to the style sheet just created, using the following code:

• Save as wk4ex1.html and test the page in a browser to see what the code in the style sheet did to the page

ITECH2106-6106 Webpage & Multimedia Design

CRICOS Provider No. 00103D ITECH2106-6106 Lab 04 Page 5 of 9

Exercise 2: External and Inline styles This exercise makes use of both a linked style sheet and inline styles – the linked style sheet is the same as the one used in exercise 1.

• Download the Week 04 Lab Files zip file from Moodle.

• This exercise will use the image1.jpg. Place it in the same location you will save your HTML file.

• Open Notepad++ and create a file called wk4ex2.html

• Type in the following code:

• Save your file and test it.

• Identify and explain the parts of the above code that look after the position of the images and “ITECH2106-6106” text?

• How does z-index work?

Exercise 3: Two Column Layout In this exercise you will create 2 classes that will create a 2-column layout. Classes can be any name you choose as long as you prefix the class name with a full-stop .

Remember, a class is a CSS selector that can be used over and over on a page. An id on the other hand should be used only once (according to the standards).

• Create the following style sheet and call it wk4ex3.css.

o You will be using the classes to create two columns similar to a table, but much more powerful.

ITECH2106-6106 Webpage & Multimedia Design

CRICOS Provider No. 00103D ITECH2106-6106 Lab 04 Page 6 of 9

• You have defined 2 classes: .leftcolumn and .rightcolumn.

• You could attach these classes to a <div>, but instead lets attach them to a <section> each, as the semantic section tag makes sense for two different sections/blocks of content on the page.

• The <div> tag could still be used instead to apply styles to a block element, but you should get in the habit of using semantic tags when possible.

• Enter the following code into a new html file called wk4ex3.html

ITECH2106-6106 Webpage & Multimedia Design

CRICOS Provider No. 00103D ITECH2106-6106 Lab 04 Page 7 of 9

The layout we've just created looks like a clear example of how positioning with CSS works, but in reality it is, as yet, far from perfect. There are numerous areas that we will not be addressing but you might like to look into them:

• More formatting properties, such as use of margins etc.

• “Stretchability” – the ability to grow with the page size.

• Inheritance – especially important when you start dealing with relative positioning.

Exercise 4: Images The use of images on the page revisited, this time as a repeated background image.

• This exercise will use the bg.jpg. Place it in the same location you will save your HTML and CSS files.

• Create a style sheet called wk4ex4.css and enter the following code:

• Create the associated wk4ex4.html page as follows:

• As always, save and test…

• Make the bg image fill the entire page!

o (Hint: the repeat-y refers to the vertical repeating)

ITECH2106-6106 Webpage & Multimedia Design

CRICOS Provider No. 00103D ITECH2106-6106 Lab 04 Page 8 of 9

Exercise 5: Floating Images With tables, you can create a page full of thumbnail pictures (linked to larger ones perhaps), together with centred captions, by placing each image in its own cell and placing the caption in a cell underneath the thumbnail. This is quite a tedious task and is much easier to accomplish by setting up a stylesheet that keeps images and captions together. The added benefit of using the “float” element for this is that images that do not fit across the page will automatically overflow to the next “line” – something you cannot do with tables.

• This exercise needs images float1.jpg, float2.jpg, float3.jpg, and float4.jpg. Place them in the same location you will save your HTML and CSS files.

• First of all create a class called .floating in a style sheet (shown right) (in the same class we also define what needs to happen with a paragraph)

• You may as well save this style sheet as wk4ex5.css

• In the HTML page we need to create a <div> for each image we want to place on the page. Inside the <div> we place the image (which will be “FLOAT”ed to the left), followed by a paragraph of the caption. The style sheet will centre the caption in the <div>.

• Create the following HTML page named wk4ex5.html

• Now test the page. To see the effect of a smaller sized browser window, resize your browser window until 3 images fit across it. Observe what has happened to the 4th image.

• Resize even further and observe what happens.

ITECH2106-6106 Webpage & Multimedia Design

CRICOS Provider No. 00103D ITECH2106-6106 Lab 04 Page 9 of 9

Exercise 6: Position • This exercise requires the positioning_css.html from the Moodle files.

• Open this file in both Chrome and Notepad++.

• As you might have noticed, the text at the top of the page is partially hidden.

• Play around with the code until this text is visible and the text boxes are displayed in such a way that not one textbox blocks any text of other boxes.

Exercise 7: Internal to External CSS • Still using positioning_css.html, change the HTML in such a way that the CSS is placed in a CSS file and the HTML

code is altered to reflect that change.

• To get you started, the first line:

<div style="background-color: #292929; color: white; position: absolute; left: 0px; top: 20px; width: 100px; height: 90%; padding: 5px; padding- right: 20px;">This will be the navigation 'column', which will run down the left of the page.</div>

• Would be altered to read:

<div class="globalnav">This will be the navigation 'column', which will run down the left of the page.</div>

• With the CSS reading:

.globalnav { color: #FFFFFF; background-color: #292929; height: 90%; width: 100px; padding-top: 5px; padding-right: 20px; padding-bottom: 5px; padding-left: 5px; position: absolute; left: 0px; top: 20px

}

• Also of problem, is the <body> tag has HTML attributes controlling some styles. These are very old HTML features and very poor coding practices! Remove these from here and place as styles in the CSS file.

• That’s it!

If you have any remaining time, work on your first Assignment. It is due at 5pm on Friday of Week 4!

Lab Week 4

More CSS Exercises
Overview

This week’s lab exercises:

Font/Text Definitions
Margin/Background Definitions
Position/Size Definitions:

Exercises

Exercise 1: Anchor tag styles
Exercise 2: External and Inline styles
Exercise 3: Two Column Layout
Exercise 4: Images
Exercise 5: Floating Images
Exercise 6: Position
Exercise 7: Internal to External CSS

ITECH2106-6106_week01_CD-introduction.pptx

ITECH 2106 - 6106 Web Page & Multimedia Design

Week 1: Course Description & Introduction to Design

Commonwealth of Australia Copyright Act 1968

Notice for paragraph 135ZXA (a) of the Copyright Act 1968

Warning

This Material has been reproduced and communicated to you by or on behalf of Federation University Australia under Part VB of the Copyright Act 1968 (the Act).

The Material in this communication may be subject to copyright under the Act. Any further reproduction or communication of this material by you may be the subject of copyright protection under the Act.

Do not remove this notice.

Faculty of Science

Lecturer

Room

Work Phone

Tutor(s)

ITECH2106 / 6106 Staff

Course Description Familiarisation

Assignments

Assignment 1 – Analysis Document

Assignment 2 – Design Document

Assignment 3 – Website Development

Lab work will assist in many parts of these assignments and should NOT be ignored

Plagiarism

Do all the work yourself, as simple as that

Don’t ask or pay someone else to do it – VERY SERIOUS RAMIFICATIONS!

ITECH2106 / 6106 Course Details

AQF – Australian Qualifications Framework establishes the quality of Australian qualifications – policies and regulations. Level 7 = Bachelor Degree.

Non-engagement/Non-attendance has proven to be the main reason for failing;

Students will be given ample time in lab classes to complete parts of their assignments.

To help students start early on these assignments, lab tasks are to be completed by a certain time in the same week as they are provided.

This is to ensure that tutors can see how the students are progressing and give feedback and guidance.

Plagiarism

The simplest way to avoid a plagiarism charge is to DO ALL THE WORK YOURSELF!, but if you need to quote from a book or a webpage make sure you REFERENCE that quote and place it between quotation marks so it is clearly identified as “someone else speaking”. The reference is to appear as an in-text reference as well as a complete reference at the end of your document.

Anything you use that is not of your own making MUST be referenced where it is used. This includes images on webpages as well as any text that has been used verbatim.

All Assignments are Linked

“Major Assignment Overview” Document on Moodle

Always refer to this document when working on every assignment!

Contains the structure and content requirements that your website design and development must include.

Assignment 1 – Analysis Document

Early Intervention Task. Preliminary analysis to inform upon your future Design Document.

Assignment 2 – Design Document

Having finished analysis, create a full design document for the website outlined Major Assignment Overview requirements section.

Assignment 3 – Website Development

Build the website outlined in the Major Assignment Overview requirements section, based on analysis and designs you made in the previous assignments.

Please set to silent or turn off your mobile phones

Please don’t cause disruptions in class.

Lecture and Lab times are set

We will not wait for you to start class.

You want to talk during lectures?

If the topic is Webpage & Multimedia Design, we encourage class discussion, not private talking.

Extensions for Assignments are generally NOT given

“Rules”

Every week students will be exposed to websites that contain one or more good or bad aspects of web design

By end of semester you should be able to clearly identify positive and negative aspects of web pages

From a content and visual perspective

From a usability perspective, and

From a navigational perspective

First website to be looked at is:

http://www.lingscars.com /

What is this site all about:

http://now.sprint.com/nownetwork/

Weekly Website analysis

LingsCars

Busy, overpowering, too colorful, first impression is cars only a small factor.

Takes a while to load

Windows over windows

Problems with right online list

Scroll, scroll, scroll

Sooooo many links

Sprint

Immediately apparent the mobile phone business

Links contained

Scrolling gallery saves space

Very little scrolling

Intuitive and easy to use

But...not really unique, looks like a lot of company websites

This course is concerned with Multimedia and Web Page Design.

Web Page design is the main focus,

All design rules for web pages apply to multimedia too

Good design relies on good design “rules”

information design

visual design

usability

accessibility

Design

The design concepts associated with the creation of either multimedia products or websites are so similar that, for simplicity’s sake, we will mainly talk about “web page” and “web page design”. However, keep in mind that any multimedia product, videogame, animation etc benefits from the same “rules” as taught in this course.

Webpage & Multimedia Design is concerned with the suitable design of web pages for:

commerce;

education;

information;

charity;

Causes;

politics;

individuals.

Definition of “suitable”: Right or appropriate for a particular person, purpose, or situation

Websites

Person – Target Audience

Purpose – Purpose for having the website

Situation – for example there’s no point a company discussing a product on a website when they haven’t secured a distributor!

Good design and usability make for good products in general

Good design and usability are essential for web-based information

most web sites do not have instruction manuals

minimal explanation regarding the goals of the site

customer expectations must be met for a site to be successful

Design & the Internet

“Usability” :

the ease with which something can be used.

Here it means how intuitive and easy it is to move from page to page, site to site, section to section, screen to screen.

(Often) designers pay little serious attention to the information design phase;

Designers’ ideas take precedent over users needs;

“We know what the user wants” attitude;

Sites usually look great in the “designer’s” eyes only;

fails to meet the users’’ need(s)

Rules of good design need to be learned…

Rules are NOT the university’s rules, nor the lecturer’s rules

“rules” = “learnt the hard way”

“rules” helps avoid main pitfalls of bad web page design

Designing for the Net

One of the hardest lessons to learn for IT students is documentation BEFORE creation.

In industry NOBODY pays you before they have seen your plans.

Plans invariably have to be presented in front of a group of “stakeholders”.

Each stakeholder has their own agenda in terms of what they want from the to-be-created product.

It is impossible to please everyone, but with careful planning, taking into consideration ALL “needs” (NOT “wants”)

it is possible to get the stakeholders to agree on what is to be created.

In order to avoid scope-creep, which invariably leads to loss of income on the part of the creator!

a solid design document is required that carries the signatures of all stakeholders with decision-making power.

Successful sites are sites that integrate

Information design

Usability - the ease of use

Branding - imprinting of identity

“user” relationship-building friendliness of the site

into one coherent “whole”

Design process

Information design is the practice of presenting information in a way that allows efficient and effective understanding.

How is the information structured and presented.

The Internet invites AND inhibits creativity

Invites, because:

There is instantaneous access;

The Internet is a visual medium;

The Internet is uncensored.

Inhibits because:

Multimedia relies on fast connection speeds,

There are still layout limitations,

And technical constraints

Design for the Internet

“Inhibits”: The new National Broadband Network (NBN) will bring faster connection speeds to all Australians (IF you can get it!!)

Think about recently “The Australian government looks set to overhaul the country's copyright laws with a view to force internet service providers to begin cracking down on users who download TV shows and films over BitTorrent.”

Why does Australia download so much?

Because our service is limited (things like netflix in US allow users to stream TV legally) – legally AUS need to rely on TV stations for TV

Because we are inhibited by our speeds – we couldn’t even stream reliably anyway – So we download to watch later.

Different technologies – Smart phones, netbooks, iPads etc can also inhibit creativity on a large scale

Remind yourself constantly:

Designing for the Internet is not the same as designing print publications.

Forget about all you know about print publications

The Internet is a totally different medium

Flyers, posters etc do not belong there

Print & Internet

There is no longer a “typical” Internet user;

The Internet has matured;

The Internet has become mainstream;

It now needs to cater for a variety of users;

Over-65 has the lowest usage percentage

But has the fastest adoption rates (see next slide)

Many still traditional in viewing habits

Example: Television

Internet Users

Internet Use by Age (2000 to 2015)

http://www.pewinternet.org/2015/06/26/americans-internet-access-2000-2015/

Internet Use; Device Penetration (as of 2013)

More devices = greater internet accessibility

Household Penetration Trend, According to the finding from the connected intelligence connected home report from The NPD Group, https://www.npd.com/wps/portal/npd/us/news/press-releases/internet-connected-devices-surpass-half-a-billion-in-u-s-homes-according-to-the-npd-group/

Internet Use by Device (as of 2015)

Huge Mobile Growth

But…

Web Traffic by Device – reference “we are social” http://wearesocial.net/blog/2015/01/digital-social-mobile-worldwide-2015/

Mobile Device Use (as of Jun 2015)

10% of mobile use is in a browser

(still significant)

There aren’t any

At least not yet

The Internet is “anarchistic”

“disorder” and “lawless confusion”

A need for standards

“a set of rules and guidelines that provide a common framework for communication”

Guidance to effective webpage design is provided by the W3C

Internet Owner(s)

Anarchistic

Not governed by anyone

No control

No rules, laws or customs

Acronym for World Wide Web Consortium

In their own words: “The World Wide Web Consortium develops interoperable technologies (specifications, guidelines, software, and tools) to lead the Web to its full potential. “

Founded in 1994 by Sir Tim Berners-Lee, the original architect of the World Wide Web

Current membership (27/2/2013) stands at 387 members

Adobe is a founding member…

The W3C has provided guidance since the inception of the Internet…

W3C

How these members may affect the standards process may be gleaned from their testimonials which can be found at http://www.w3.org/Consortium/Member/Testimonial/

W3C Members show their support for standards and for W3C through a variety of means, including participation in groups, sponsorship of events, chairing groups, and implementing specifications.

First Generation : Predominantly text, monochrome monitors, low resolution and linear design; slow data transmission

Second Generation : HTML extensions such as the <blink> tag, Background images, banners and icons that replaced text

Third Generation : Site becomes an interactive experience. Plug-ins allow use of animations (eg. Shockwave player)

Fourth Generation: similar to 3rd generation but with instant messaging, live broadcasting and other real-time technologies

Fifth Generation: where to next?

Site Generations

The blink element is a non-standard HTML element that indicates to a web browser the content of that element should blink

(that is, alternate between being visible and invisible). – link on slide to blinking elements!

Early internet tag that would help spruce up an otherwise static page!

These days something like that would annoy the crap out of us!

First-ever website

Source: http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html Date retrieved: September 30, 2011

Now replicated at http://info.cern.ch/hypertext/WWW/TheProject.html

Size: 800x600 pixels

Text and links only

Skills required for website development/creation include:

Analytical skills

Graphic design - composition

Information Architecture (IA) - layout

Language skills - copywriting/copyediting

Usability design skills – intuitive design

Accessibility design skills – alternative access

Search engine optimization (SEO) skills - marketing

Designer/Developer Skills

Each of the skills mentioned above can become the basis of an entire career. In large projects you will find that the team consists of:

One or more analysts

One or more graphic designers

An information architect

An editor

A usability expert

An accessibility expert

A Search Engine Optimizer

as well as… (continue next slide)

In addition to the previous slide’s basic skills:

Graphical User Interface (GUI) design skills

Multimedia skills – animation, audio, video

Eg. Flash (becoming “extinct”), Premiere etc

Future: HTML5, Canvas 2D,

content management system (CMS) design skills

Web/Smartphone applications development

Project management

Designer/Developer Skills

A system designer

One or more multimedia designers

A content management specialist

One or more app designers

One project manager

<canvas> use scripts to draw graphics on the fly

An overview of what is required to design a site

More detailed materials will be covered in later lectures

Brief overview of site design

There are several things you need to consider when designing a web site:

AUDIENCE, audience, audience;

Navigation;

Colour;

Metaphor;

Performance;

Multimedia content.

In addition to content of course!!!

Overview - Site Design

Definition metaphor as used here:

“A thing regarded as representative or symbolic of something else, esp. something abstract.” – symbols, emblems.

Sites that fail show the following attributes:

unsuitable content

poor navigation;

text-only content;

distracting and/or interfering images;

poor use of font and colour;

poor performance.

Overview - “Bad” Sites

Sites that succeed have the following attributes:

easy to navigate;

intuitive design;

suited to their audience;

excellent use of a metaphor;

unique or inspiring;

achieve their purpose.

Overview - “Good” Sites

When we visit a webpage, we scan to try and find what we need as fast as possible, and imagery is used to help speed up that process. We can interpret something much faster with familiar styling and images.

For example, we can instantly recognize an error when there's something like an exclamation mark, or a yellow or red color. And in turn recognise “Success” / “Yes” / “Confirmation” by the use of Green

Two (2) distinct phases in the creation of a website

Design phase

Development or creation phase

Design phase

Analytical / Creative

Development phase

Technical / Creative

Overview - Website-creation phases

Design – Analytical

Colours, Fonts, Navigation, Content, etc

Development – Technical

Coding, Testing, Coding,

Creative

Creating colourful Designs, and usable interfaces, etc

a framework for visualising how all the ideas, pictures and other raw materials can be brought together into a useable interface;

breaks down the project into a set of tangible tasks and issues:

content;

structure;

look.

Overview - The Design Process

Next page explains

What is the site?

Define the product and audience, plan the project, identify the content, and organise into a flow chart or sitemap

How should it work?

Design the navigation, types of interaction and map these onto a storyboard

How should it look?

Define style, layout and produce a prototype

Overview - Three Important Questions

From previous page

content;

structure;

look.

The use of metaphors can enhance the feel of a web site

Galleries, comic strips and cartoons

TV, tabloids, magazines and newspapers

Electronic store front, museum

Rule: don’t agonize over metaphors

don’t use a metaphor if it does not help in the understanding of the site

Overview - Use of Metaphors

Image: make an otherwise plain web form more attractive. Metaphor usage is an ID card as it relates to the forms content.

Metaphors Can Put Abstract Concepts in Concrete Terms – lightbulb=innovative, invention

Metaphors Create Familiarity – recognise and associate an image

Metaphors Can Trigger Emotions – hot coffee could mean hanging out with friends

Metaphors Can Draw the Attention of Users

Metaphors Can Motivate Users into Action – example a mixing board to change songs/volumes, etc

Harmony

Elements of an interface fit together and blend into a satisfying whole

Balance

symmetrical arrangement of information

related to “harmony”

Simplicity

creates clarity, sophistication, elegance and economy

Consistency

promotes intuitive behaviour

Overview - Four Fundamental Design Aspects

“translation” of the analytical into the practical

Template and style creation

“Back-end” creation

Content development

Multimedia development

Other coding

Design documents are living documents

changes may be required to these documents

Variety of reasons – common one: change of technology

Overview view - Development process

All these issues and more will be looked at in much more detail in later lectures.

image19.png

image20.png

image21.png

image22.png

image23.png

image24.jpeg

image25.png

image26.png

image27.png

image28.jpg

image29.jpeg

image1.jpeg

image13.jpeg

image14.jpeg

image15.jpeg

image16.jpeg

image17.jpeg

image18.jpeg

image2.jpeg

image4.jpeg

image5.jpeg

image6.jpeg

image7.jpeg

image8.jpeg

image9.jpeg

image10.jpeg

image11.jpeg

image12.jpeg

ITECH2106-6106_week02_planning_IA_interface-design.pptx

ITECH 2106 - 6106 Web Page & Multimedia Design

Week 2: Planning, Information Architecture, & Interface Design

Commonwealth of Australia Copyright Act 1968

Notice for paragraph 135ZXA (a) of the Copyright Act 1968

Warning

This Material has been reproduced and communicated to you by or on behalf of Federation University Australia under Part VB of the Copyright Act 1968 (the Act).

Do not remove this notice.

Faculty of Science

The oldest university in America

And it’s School of Art website!

ABOUT THIS SITE

First a look at the explanation for the layout of the site (video)

Then Vincent Flanders’ observation ( video)

Last but not least: the site as it looks at this particular moment

Website discussion

Faculty of Science

Yale University home page - http://yale.edu/

Neat, functional, simplistic, intuitive, etc

Then you visit the school of art that ANYONE can edit, staff or student AND…….

Yale University School of Art (about page) - http://art.yale.edu/AboutThisSite

Note the footer message:

“This website is a wiki. All School of Art grad students, faculty, staff, and alums have the ability to change most of this site’s content (with some exceptions); and to add new content and pages.”

No focus, not neat, barely functional – error in images, etc, even the feedback bar has a scroll bar.

Current Yale University School of Art - http://art.yale.edu/

Terrible site.

Atrocious choice of background – that is trying to function doubly as advertisement

Let the students discuss!

Last week…

Faculty of Science

Harmony

Elements of an interface fit together and blend into a satisfying whole

Balance

symmetrical arrangement of information

related to “harmony”

Simplicity

creates clarity, sophistication, elegance and economy

Consistency

promotes intuitive behaviour

Overview - Four Fundamental Design Aspects

Faculty of Science

Sites that fail show the following attributes:

unsuitable content

poor navigation;

text-only content;

distracting and/or interfering images;

poor use of font and colour;

poor performance.

Overview - “Bad” Sites

Faculty of Science

Sites that succeed have the following attributes:

easy to navigate;

intuitive design;

suited to their audience;

excellent use of a metaphor;

unique or inspiring;

achieve their purpose.

Overview - “Good” Sites

Faculty of Science

Two (2) distinct phases in the creation of a website

Design phase

Development or creation phase

Design phase

Analytical

Development phase

Technical/creative

Overview - Website-creation phases

Faculty of Science

What is the site?

Define the product and audience, plan the project, identify the content, and organise into a flow chart or sitemap

How should it work?

Design the navigation, types of interaction and map these onto a storyboard

How should it look?

Define style, layout and produce a prototype

Overview - Three Important Questions

Faculty of Science

All the actions coloured red are required to be documented in the design document.

NONE of them should be developed first and then written up!

Content

Structure

Look

This Week

Faculty of Science

Design phase is predominantly text-based

Clients are informed via the design document

Design document = blueprint

Website

Multimedia product

Housing Industry: Builders build using architect plans

IT Industry: “builders” build with design documents

Designer is usually NOT the developer

Design & Documentation

Faculty of Science

Designer (like Architect) and Developer (builder) are usually two different people.

Your design document should be detailed enough that if you passed it to another student they would be able to build the website exactly how you envisioned just from your design.

Phase Overview (detailed in later slides)

Needs analysis

Establish the need for the product

Target Audience analysis

Who will be the user

Competitive analysis

Find out what the “competition” is doing

Information gathering

Collecting raw data

Information Architecture - Interface design

Methods and processes

Planning how the information is going to be presented

Steps in the design phase

Faculty of Science

“Competition” here is used in the spirit of “everyone else who has a product like the one I am planning”!

“Raw data” is the term used for the rough description of content WHICH WILL BE PROPERLY REDUCED IN SIZE AND REWORDED FOR USE ON THE WEB. It is important that students become totally familiar with the expression “raw data” and that they realise that it is:

Data that can NOT be used verbatim on a website or in a MM product

Textual data that needs to be reworded in line with plain language theory

Textual data that needs to be reworded for reading ONLINE

Visual data that needs to be edited

Audio data that needs to be edited

Questions that need to be asked of the Client:

Why the need?

What was done previously?

Who will it benefit?

Can an existing product be updated?

It is not always desirable to start from scratch

It may not always be possible to start from scratch

“revamping” is more difficult than “starting from scratch”

Needs Analysis

Faculty of Science

Unless extensive documentation for an existing product has been maintained with regard to the methods and processes in place,

revamping that product would be nearly impossible to do well.

Often it is better to convince the client of the need to start afresh.

Clients will usually be agreeable to the development of a new website when faced with the potential bill involving a revamp.

What are the demographics of the users?

Age,

Gender

Education

Interests etc

Knowing ALL the demographics is not always necessary

But knowing the age group and gender almost always is

The more you know about your TA the better your site can be

A broad TA makes designing a targeted site/product difficult

Target Audience Analysis

Faculty of Science

Background, race, disabilities, employment status, and location are also demographics that are sometimes needed, depending on the focus of the multimedia product or web site.

Broad TA – imagine your client wants to cater to 18 – 80, both genders, multiple worldwide races, etc. It would be difficult to serve such a varied audience well

Questions to ask:

What makes this site/product “tick”?

What do I/we dislike about it?

What ideas can be gleaned from the design?

Helpful in avoiding design mistakes

Using other designers’ products invariably shows up the weaknesses of that product

Simple mistake – “Competive Analysis”

Helpful in discovering positive user experiences

Helps avoid gimmicks and fads

Users quickly lose patience

Competitive analysis must be as objective as possible

“good”, “nice”, “like”, are emotive and should not be used

Competitive Analysis

Faculty of Science

Users, including designers who were not involved in the products being analysed, tend to find weaknesses very quickly.

It is a well-known fact that the brain tends to “fill in the blanks”*** when one has been closely involved in the creation of something.

Even if something is missing, or not quite right, “competive analysis” spelt wrong for example, the designer will fail to notice it because of the close interaction with the design and development of the product.

This is also the reason why we suggest you always show your final product to someone completely unassociated with what you have been doing.

This is the same for the checking of assignments as it is for anything else that you have been closely involved in.

*** the brain either “adds” information that is not there, OR it doesn’t see the information that IS there. The next slide tests this phenomenon >

Prepare the students before the next slide – tell them they have 10 seconds to read the slide after which you will click to hide the slide revealing the answer.

FINISHED FILES ARE THE RE-

SULT OF YEARS OF SCIENTIF-

IC STUDY COMBINED WITH

THE EXPERIENCE OF YEARS.

How many F’s in this sentence?

Note that the brain either “adds” information that is not there, OR it doesn’t see the information that IS there.

If you saw 6 F’s in the previous exercise you are supposedly a genius; 3 is apparently average, 4 above average, and 5 is rare…

The F in “of” tends to be read as “v”, explaining why most people do not see all “f”s.

Faculty of Science

The exercise text will show on slide:

FINISHED FILES ARE THE RE-

SULT OF YEARS OF SCIENTIF-

IC STUDY COMBINED WITH

THE EXPERIENCE OF YEARS.

Client preferences, most likely, are known at this stage

Process of information gathering can begin

If designing for a business, the client will be able to assist with information gathering

Client will have provided a list of items that need to be included

Further items will become known upon further analysis

Beginning “information gathering”

Faculty of Science

Collecting all information from which to create content for a site

Commonly called “raw data”

“raw” meaning “unprocessed”

Raw data needs to be reworked using rules of good content design

Raw data needs to be adapted to the need

Raw data needs to be edited

“designing for print is not the same as designing for online”!

Information Gathering

Faculty of Science

Video

minimum requirements for design document is name of each video file, file type, source, and location

Animation

Minimum requirements for design document is name of each Flash file, source, and location

Images

Minimum requirements for design document is name of each image, file type, source, and location

Text

Common types of raw data

Faculty of Science

Video: identification of the types of video required; if video needs to be created, then the design document should state this.

Animation: identification of the types of animation required; if animation needs to be created, then the design document should state this.

Images: identification of the images required on the site; if these still need to be photographed, then the design document should state this.

Text: identification of the focus of the texts is a minimum requirement; could be as simple as “homepage textbox, purpose of site, new additions”

or as complex as an entire book from which appropriate information is to be obtained.

“Raw data” section may make extensive use of hyperlinks to identify content required.

Collection of anything that may be of interest to a reader

DO NOT expect to use any of this text in the form you have collected it!!!

Good web text needs lots of raw text from which to create rich, informative content

Writing for the web – Jakob Nielsen’s rule: remove 50% of what you have written, then remove another 25% of what is left over

Outcome? You will probably still end up with more words than necessary!!!

For businesses

Advertising flyers

publications

Examples of font(s) used on business cards, letterhead, office buildings etc

Background information to the products and type of business

Raw data - text

Faculty of Science

Advertising flyers, especially those that have been successful in getting more business, are a good way to become familiar with the “tone” of the business. They can show clearly how the client wishes to be seen, eg. Friendly, sophisticated, sporty, traditional, etc.

Publications, especially those that explain in detail the background to the business/person involved are rich sources of raw data.

Fonts used on flyers, business cards, letterheads, etc. will give you a clue to the type of mood the client wishes to establish, UNLESS the client indicates that they wish to move away from that “feel”; in that case it gives you a good idea what type of fonts to avoid rather than use!

Background information: the more raw data the more you will have to draw on for inspiration for the creation of effective “blurbs” (see lecture on writing blurbs)

Term often includes “needs analysis” (NA), “target audience (TA) analysis”, “competitive analysis” (CA), and “information gathering”

However, “real” design work begins after the above has been accomplished.

The outcomes of the above must be recorded in design document

A design document is a “living document”

NA, TA, and CA will be non-changing

Information gathering is an ongoing process

Information Architecture (IA)

Faculty of Science

“real” design work because needs analysis, target audience analysis, competitive analysis, information gathering are preliminary, are all done prior to the actual design of content provision and interaction.

It will determine additional requirements related to specific content which will only become known after information gathering and looking at other sites.

Definition: specific methods and processes for

developing a site's content;

how content interacts with other content;

how users interact with the content;

Good information architecture is incredibly effective in producing a well-designed product

Knowing the basics of the IA process saves time and money

Information Architecture (IA)

Faculty of Science

Information architecture (IA) involves structuring and organising information on websites to enable your users to find the information they want.

Information architecture is vital to a well-designed site, and should aim to be natural and intuitive for your target audience.

Because different users have varying needs and behaviours online, sites need to accommodate a range of needs and behaviours.

Honing in on your TA reduces the range of needs and behaviours required.

The order in which to create the “blue print”:

Define

the goals

the user experience

the site content

the site structure

Design

the content

the visuals

Note that “visuals” are the last in the list!

Visuals must support the content

IA’s process cycle

Faculty of Science

Exception to the rule: The only visuals that have priority over the shown order are those associated with company branding.

In cases where the company brand is to be prominent, the colour scheme and logo decide the look and feel almost from the beginning of the design phase.

Site’s goals = Step 1 in IA process

Questions to ask key players:, what, who, why, how

What is the purpose of the organisation?

What are you trying to achieve now, what later?

Short term & long term goals

short and long term goals for the site?

Why will people come to the site?

“Goals” require a solid knowledge of target audience demographics

Get the TA wrong and the site/product is doomed to fail

IA Process Cycle - Define the goals

Faculty of Science

Long term and short term goals should be defined for both the company or organisation and the website itself.

Document, document, document

As mentioned, design documents are like architect plans;

They help define the look and feel of the product for EVERYONE associated with the product

Website

Multimedia products

Any product

But more importantly, what the content is going to be

And how best to communicate the content to the viewer

With goals defined – what now?

Faculty of Science

A design document is a living document; it is the blue print of what is to be created, identifying every aspect of the product

each team member can work on a specific aspect of the product without the need for constant supervision/consultation.

BECAUSE they all have the design document telling them what to do!

Define

the goals

the user experience

the site content

the site structure

Design

the content

the visuals

IA’s process cycle

Faculty of Science

2nd most important task: create the profile for “the user”

With the input of the client, define the user:

Create a list of types of potential users

list the types of users in order of importance

Analyse the users’ needs

Define how each user type will need to work with the product

Novice user & power user

Browser, buyer, researcher, etc

Define the user experience

Faculty of Science

The list of potential users is important in the development stage.

If time or money is in short supply a developer can refer to the ordered list to determine which functions need to be implemented in version 1.0 and which ones can be done at a later stage

Document

Be specific about the types of users that are most important

These need not be all potential users

But MUST be the 2 at the top of your list

Usually describing both “Novice” and “Expert” users

Providing a clear description of the main users will inform the rest of the design

With user experience defined – what now?

Faculty of Science

This section of your document should clearly state who your main target is.

Testing of the site should take into account what is mentioned here.

Example: a university library site for researchers and browsers, then the expectation is that this section contains

both a description relating to the Novice Researcher/Power Researcher and Novice Browser/Power Browser.

Implications being that for the Novice there will be suitable “handholding”

whereas for the Power User there will be a plethora of shortcuts to assist in the smart viewing of the website.

Define

the goals

the user experience

the site content

the site structure

Design

the content

the visuals

IA’s process cycle

Faculty of Science

Defining the content for a product occurs in stages:

Content inventory, grouping, and labeling

Analysis of functional requirements

Questions that need to be asked:

What content does the site need?

No details yet, just identification of types of content

What functionality will be required?

How is the content to be used

Define the site content

Faculty of Science

Defining the content and information gathering go hand-in-hand. During content inventory it is quite likely that something will be identified for which more raw data is required. Similarly, during raw data gathering one may have come across something that would be suitable for display and therefore is to be included in the content inventory.

Using the needs analysis and competitive analysis results in two lists:

one for content elements and

one for functional requirements

Types of content (elements)

Static content,

Dynamic content

Functional content and

transactional content

Eg. Member login, search requests, any form of transaction need to be placed on the “functional” list.

Content and Functional Requirements

Faculty of Science

The functional list is designed to help you make decision about what is needed in terms of back-end functionality, such as databases.

Transactional content – shopping carts, purchases

Who will provide content for the inventory?

Client first and foremost

In conjunction with the web designer

And assisted by the findings of the competitive analysis

Any other stakeholders

The content inventory step is only a list-making step

NO content editing of any kind takes place here

Example of content inventory (see next)

Content Inventory (CI)

Faculty of Science

Discussion re content inventory for assignment

Video of cute koala

Application form for membership

Membership login

Background to koala’s threat of extinction

Image gallery of koalas

Prominent people involved with STK

Environmental concerns

Urban creep

Role of koala in Australia’s tourism promotion

Koalas’ native environments

Koala breeding program information

Etc…

Inventory example “Save the Koala” website

Faculty of Science

Note that at this stage there are no content details, only identifiers

Analysis of all content and determining its importance

Revision of the lists if needed

Content for inclusion in website needs to be identified first by name, NOT full description

Compare it to making a content inventory of your wardrobe

You identify the items by name

T-shirt, shirt, pants, skirt, blouse, coat

Not by a full description

T-shirt made of pure cotton, manufactured in Taiwan, bought for $10, white with slogan front and back etc.

Full description is dealt with in the “Content Design”

Note: In your assignment 2, content design is merged with wireframes

Content Inventory

Faculty of Science

Grouping of content, then labelling of content

This is where the basis for the site’s structure is put together

Organization of lots of content into logical groups

Decisions re which inventory items belong together or are in some way related

Shifting around of elements until satisfactory groupings

Labeling of each group with an explicit label

Removes guess work out of content of group

Recording of each group and its elements

These labels may be used in navigation

Sentences are unsuitable as navigation headings

Categories & Labelling

Faculty of Science

In the content inventory for a photographer’s website, the images could be grouped under the heading:

Gallery

Portraits

Sport

Macro

Panoramas

Urban

Nature

Winter

Spring

Summer

Autumn

or “mountains”, “water”, “fire”

Categories & Labelling- Example

Faculty of Science

Example: content inventory for a photographer’s website might show the need to display all types of photos created by the photographer, including portraits, nature photos, urban images, sport photos, macro images, panoramas. Rather than having a single navigation item for each of the types mentioned, the images would be grouped under the heading “Gallery” with sub-headings “portraits”, “nature”, “sport”, “macro”, “panoramas”, “urban”. Within the content labeling at the sub-heading level, there could be one more level, for instance a further sub-division of the “nature” group into “winter”, “spring”, “summer”, and “autumn”, or “mountains”, “water”, “fire” etc.

Page	Type	Content
Home	Video	Cute Koala
	Login	Membership Login
Account	Form	Membership Application
Gallery	Image	Koala Sleeping #1
	Image	Koala Sleeping #2
	Image	Koala Parent and Child
	Image	Koala Eating
	Etc…	Etc…

Inventory example: “Save the Koala” website

Inventory now Categorised and Labelled

Faculty of Science

Once the final groupings and names have been decided, they can be used as the basis for defining the major sections of the site and the names of each section

Names are tentative at this stage – changes may still be necessary

Update of the design document with descriptions of the content groups, their elements and names.

Includes the “content inventory” as an appendix as well

Categories & Labelling

Faculty of Science

What functions are required?

And what is needed for these functions to work properly

This could relate to

Database interaction

Forums

Blogs

Membership areas

Forms

Interactive Galleries

And so on

Once known, the design document gets updated with the requirements

Functional requirements

Faculty of Science

Please note that your assignment may or may not need to have functional requirements specified. Please also note the restriction on the use of PHP and MySql!

Define

the goals

the user experience

the site content

the site structure

Design

the content

the visuals

IA’s process cycle

Faculty of Science

The foundation on which you build everything else

A well-designed structure makes it easy to define a navigation system

Designing page layouts and templates = simple process once structure and navigation systems are in place

A well-designed site structure gives immediate feedback regarding the structure of the design

Terminology most frequently used for a “site structure listing” is SITE MAP***

Site Structure

Faculty of Science

*** not to be confused with “sitemap” which actually refers to the xml file that is used by search engines (if one was created for website!)

A text or graphics-based, hierarchical map of the site***

Determining the content of a site structure map is relatively simple:

Decide upon the main sections of your structure using the previously created groups

Map out the organisation of each section with items from the content inventory.

A look at the site structure maps discussed in the textbook

Site Structure map

Faculty of Science

*** in the design document, the site structure map provides a visually clue to the structure of the site. When used as an actually map on the website itself it is very important to make sure that EVERY PAGE shown in the structure map has a physical link attached to it. The main reason to have a site map in your website is so that power users can find a direct link to the page(s) they require, without having to traverse the entire site.

Most people prefer to see a tree-structure type of map rather than text

This is referred to in IA as an “architectural blueprint”

Detailed blueprints also show on- and off-site links

Look at the next slides to see a partial site map of the National Gallery and a screen shot of the navigation

Site structure “listing” or “site map”

Faculty of Science

Website Sitemap and Structural Sitemap

Faculty of Science

This site map shows a portion of the website shown on the next slide – the website has extensive navigation, at least 3 levels deep and return visitors (power users!) can quickly find a web page they are after via the sitemap.

Bookmarking the pages of interest might result in a very extensive bookmark folder and a basic sitemap is therefore often a better tool to use to quickly get to a page in a deep and extensive website.

When using an in-depth sitemap like this it is important that indentation is carefully thought out! It is only via the indentations in the list that one gets an idea about the depth of a site.

Faculty of Science

Define Navigation

How will users use the site?

How will they get from one place to another?

How do you prevent them from getting lost?

Designing good navigation is an art

Good information architecture facilitates good navigation

Well-planned web sites suggest every type of navigation required

Organizing and designing navigation can be very complex for large sites

How NOT to do it!

Navigation

Faculty of Science

Illogical Navigation Groupings

Faculty of Science

All orange-y coloured boxes indicate links belonging to “Tasmania”.

A much more logical approach would be to group similar links into one navigation item. The images related to other states of Australia are already treated like that – “Victoria” “NSW” (instead of full name) “Queensland” etc.

Better still, since different parts of the world have a navigation link, “Australia” should perhaps be at the global navigation level, like “Canada”; that way “Victoria” can be at the secondary level under Australia and will not be confused with Victoria, Canada…

More about global, primary, secondary etc levels in next slides…

The title on the “button” next to HOME is too large and should be reworked into something shorter.

Better example:

About | Contact | Site Map (footer)

Global

Primary

Secondary

Tertiary

Utility

Footer

Local

In-text links

Navigation Terminology

Faculty of Science

Also referred to as top-level navigation

Navigation that is accessible from all pages

Consistent look and feel across the entire site

Global navigation consists of primary pieces of navigation – menu links

Primary pieces of navigation may be further divided into secondary navigation

Global/primary/secondary

Faculty of Science

Tertiary navigation pieces often are not necessary

Sites that are too deep (> 3 levels) may require tertiary navigation

If tertiary navigation is necessary consider re-categorization of pages

3 levels of information should be sufficient:

Top level = blurb

2nd level = more details

3rd level = ALL details

Tertiary

Faculty of Science

Utility = “leftovers” for which there is no category

Usually smaller navigation than other navigation pieces

Except for footer

Size of utility navigation is usually equal to the footer size

Still considered to be global because of access on all pages

Footer navigation, although global, relates to contact links only

Almost always contains an email link to the “webmaster”

Usually also has a link to the design firm or designer

Utility & Footer

Faculty of Science

Local navigation pieces are contained within one section of a website

Could be one category

Local navigation can have primary and secondary navigation

Never tertiary

“in-text” refers to all the links contained within the information

These may lead off-site, or within the site but off-page

All navigation talked about in previous slides are “in-site” navigation

Except for the in-text navigation which could lead the viewer away from the site

Local & in-text

Faculty of Science

GLOBAL

primary

Local –

these links

are not available in the global nav

breadcrumbs

Local

utility

Footer –

Normally contains some links

utility

Secondary (it is secondary to the main nav, but still global)

Traditionally a footer is a lot smaller such as this area

Navigation should be unobtrusive but prominent

Text on navigation buttons should never exceed 12 pixels

Text should always be smaller in size than body text

Once users are familiar with the navigation structure, navigation text will no longer be read

Position and meaning are stored in long-term memory after only a few uses

This is why consistency in position and look is so important

Users & navigation

Faculty of Science

“unobtrusive” = small buttons, small text, inconspicuous placing.

The designer is not the user.

Users are not designers.

Visual design must always support the content.

The execution of webpages/mm products must be close to flawless.

Adhere to GUI and Web interface conventions.

Last but not least:

There are no “correct” designs that suit everyone

Finally, some important things to remember:

Faculty of Science

A closer look at “Content Design” which forms the “guts” of the design document

IA’s Process cycle

Define

the goals

the user experience

the site content

the site structure

Design

the content Week 3

the visuals Week 4

Next week…

These were covered this week

Faculty of Science

Content design – week 3

Visual design – week 4

image11.png

image12.png

image13.png

image14.png

image15.png

image1.jpeg

image2.jpeg

image3.jpeg

image4.jpeg

image5.jpeg

image6.jpeg

image7.jpeg

image8.jpeg

image9.jpeg

image10.jpeg

ITECH2106-6106_week03_content-design.pptx

ITECH2106-6106 Web Page & Multimedia Design

Week 3: Content & Page Design

Commonwealth of Australia Copyright Act 1968

Notice for paragraph 135ZXA (a) of the Copyright Act 1968

Warning

This Material has been reproduced and communicated to you by or on behalf of Federation University Australia under Part VB of the Copyright Act 1968 (the Act).

Do not remove this notice.

Faculty of Science

If you landed on this page:

http://www.edpeixoto.com /

What is your first impression?

What would you think is its purpose?

How about this one?

http://www.clholloway.co.za/

Website Analysis

Ed Peixoto:

First Impression - Vitamin D? Milk Drink? Orange Drink? I Create Flavours? Is it some sort of energy drink company?

Try the second link in the nav bar (? – little dots on a line) – About me - Gives a bit of news, and selected works… still not clear

Click Biography – finally it’s a Brazillian Art Director/Designer.

Take a tour through the site, see if students like it or not and why.

C.L.Holloway

Immediately clear – looks like a gallery. Presented like a real gallery scrolling sideways looking at art pieces.

However the navigation is terrible. It is not global, once your scroll or click a link, you loose all navigation. At the end, the only way back is to scroll unfortunately.

Also the art pieces aren’t labelled semantically, they just have numbers.

Design

Needs analysis

Establish the need for the product

Target Audience analysis

Who will be the user

Competitive analysis

Find out what the “competition” is doing

Information gathering

Collecting raw data

Information Architecture - Interface design

Methods and processes

Planning how the information is going to be presented

Last Week – Design Phase

All steps start blank. Ask the students to recall last week and call out the steps. You can reveal them in any order the students call out. Then ask them to give a small description.

- Click the numbers to reveal that step. Click the arrows to reveal that description.

Global

Primary

Secondary

Tertiary

Utility

Footer

Local

In-text links

Last Week – Navigation Types

Global

Primary

Global

Secondary

Global

Tertiary

Utility (Global)

Utility (still Global)

Social Media

Local

Footer

In-Text

Not on this website – Breadcrumbs

(Utility)

Faculty of Science

Bring the students through each navigational element, and ask them to call out the answer before you reveal it.

This week

Content and Page Design a large part of Design Document

Information Architecture’s Process cycle

Define

the goals

the user experience

the site content

the site structure

Design

the content Week 3

the visuals Week 4

These were covered last week

Serve up content that:

Will interest the users

Will meet the users expectations

Is packaged in small chunks of high quality information

Is timely and serves its purpose

Good content design relies heavily on the harmony between content media

Appropriate, well-organised information is an absolute requirement for a satisfying user experience

Content Design – Rule #1

readers appreciate short "chunks" of information that can be located and scanned quickly.

Content chunking is a technique of combining pieces of content into sizable chunks, so that it’s easy and efficient for users to consume.

If your website doesn’t use content chunking, you’ll make users work harder than they need to consume your content.

This can cause users to miss important information, struggle to find specific information and eventually leave your site because of a poor reading experience.

Example:

1800333864 1800 333 864 1800 FED UNI

No chunking chunked into smaller strings chunked into easier scannable strings

Content design refers to the structure of the content itself - It involves

the naming of each type of content

The categorisation of like content

The extent to which the content is provided

First level / second level / third level

Page design is related to how the content is to be presented.

What it will look like

How much to present

Content

It is important to understand that content design is centred around the structure of the content, not the actual content itself. When you know the structure, the content almost “writes” itself

Content structure considerations:

First, second and third level information relates to the complexity of the information presented:

First level = overview, broad outline, main points

Second level = more detailed information but still in manageable chunks

Third level = very detailed information, usually in the form of a downloadable file for offline reading

Knowing how deep the structure of information will be makes page design much simpler; each level identified, will require its own page template

In the West readers read

from left to right, and

from the top of the page to the bottom

The top of the page is always the most dominant

Right-hand side of pages get largely ignored

Effective use of “screen real estate” is one of the most difficult design challenges

Browser “chrome” needs to be taken into account first

What is left over is “screen real estate” for the actual page

Page Design

'Chrome' is the user interface overhead that surrounds web page content.

Browsers allow users to have as many or as few bars open as they wish; realistically though designers should assume a standard 4-bar top, together with a side and bottom scrolling bar as an average

Screen Real Estate is the area left available to the web page content, after browser chrome is taken into account.

Page Design

Browser

“chrome”

Screen

Real Estate

Pages should be designed around a structure that makes sense to the users and their concerns;

Design should represent how users access information from their point of view

the majority of users are less capable computer users than IT students!

Pages, and ultimately entire sites, without a good structure invite chaos;

More importantly, they create frustrated users;

leading to loss of interest, loss of business, loss of reason for having a website at all!

Page Design

Designing for multiple screen resolutions is a necessity

Most web pages fit one of the following designs:

fixed design - as the screen resolution changes, content remains aligned to left side of the page

flexible design - as the screen resolution changes, content expands/contracts to accommodate varying screen widths

centered design - as the screen resolution changes, the web page stays centered in the browser window,

remaining space is divided equally between left and right side of the browser window

responsive design – a type of flexible design to allow for “new media” (see later lecture on CSS3, and New Media)

Page Design

With more and more users viewing websites from platforms other than their desktops/laptops it has become imperative that web pages adapt themselves automatically to a different screen resolution.

This has now been made much easier with the advent of CSS’3’s media queries.

It is no longer necessary to have a variety of different version of the same website; instead, all that is required is a series of “instructions” in the main CSS file for the website, identifying what needs to happen when content is viewed on platforms of different sizes.

In general there will be 4 such instructions covering PC, iPad, iPhone, and smartphones.

Examples:

Fixed: https://www.google.com.au/#q=google

Flexible: http://en.wikipedia.org , http://www.amazon.com/

Centered: http://federation.edu.au/ , http://www.ebay.com.au/

Responsive: https://www.youtube.com/ , http://www.microsoft.com/en-au/default.aspx

Content inventory will have produced a number of categories and possibly subcategories

Using the content inventory as a type of table of contents, raw data should be collected for each item in the table

extensive text-based information

variety visual information for each item that needs it

description of sound files and their possible sources

scripts or actual footage for required video

Content

“raw” meaning “unprocessed” data such as:

Text

Videos

Images

etc

“raw data” is information from which the “spin doctor” creates the page content

Raw data will NEVER be used in the format found

Techniques for writing for the web will be discussed in a later lecture

Attach raw data to the end of the design document

Remember: a good planning document should contain sufficient information to allow a 3rd party to create the website

without extensive consultation between key players and coders

Content – raw data

“Spin doctor” – the person responsible for creating the text on the web pages.

Long sentences and paragraphs are for books;

a spin doctor knows how to massage text into a scannable whole using just a few words.

In order to do this, the spin doctor needs LOTS of information to draw on, and this is where raw data has its place.

The data is not used verbatim but instead the information is lifted from the raw data and used in blurbs,

more detailed information, and ultimately one of more of the documents MAY be used in their entirety IF it is suitable for off-line reading.

Home page is usually treated differently from other pages

the Homepage is all about:

creating a good (first)* impression;

creating a good user experience for repeat visitors;

if the homepage doesn't communicate what users can do and why they should care about the website, you might as well not have a website at all!

the Homepage is the “calling card” for the site;

it establishes the site owner’s identity;

Private individual, organisation, business, etc

the Homepage may be flamboyant but do not make it dramatically different from the rest of the site!

treat the Homepage with great care;

First impressions matter

Homepage

Research has shown that more often than not, users arrive at a page OTHER than the homepage of a website via search results.

This means that the homepage gets looked at AFTER other parts of the site have already been viewed.

For this reason it is not desirable to have, for instance, a “welcome” message on your homepage!

The homepage should therefore encapsulate what the site is all about, including announcements re new content for those users who return on a regular basis.

Users use home pages to get an idea about what is available on the website;

the homepage is one of the few pages where visuals can be used with abandon (within reason of course).

Example: Google search- Melbourne airport arrivals

You will most likely visit the arrival page and not the home page!

Often users arrive there via some other page on your site

“Welcome” messages are therefore NOT suitable

Being “user-friendly” has a lot to do with making the user experience as pleasant as possible

Detailed information is contained in the rest of the web pages

Keep homepage content to mostly visual content

Homepage

What a good homepage should have:

Site identification– short and to the point, no long “welcome” messages

A visual map of content of site (hierarchy of the site)

A search facility

“Appetizers” – what users may find in the site

Content “latest” – keeping content “fresh”

Shortcuts – for power users and return customers

Guidance through the content – clear starting point for novices

Simplicity

Tagline – what the site is about in ONE phrase (6 to 8 words max)

Homepage

Site ID - A welcome message is fine if it is short, but after having seen it once, users do not pay attention to it anymore.

If pushed for space, this is the first item on the page that can be deleted.

HOWEVER, identification of what the site is about MUST REMAIN.

Visual map - Clear visuals assist in understanding.

To help users navigate your site make accessing of the content clear and unambiguous.

Search - If your website has a large number of pages it is wise to put in a Search facility; this should be placed in an inconspicuous place so as not to interfere with the design; most frequently Search windows are found top left or top right of the main page.

“appetizers” are little snippets of what users will find on other pages. They are shorter than blurb but with enough detail to attract users to the content.

Content “latest” is mainly there for repeat visitors to help them save time on your site; if the latest news does not interest them then they are free to leave without wasting any time wading through pages of content.

Shortcuts - Most frequently the shortcuts will limit themselves to having a sitemap with working links on the site. Simply making sure that each page can be accessed from wherever the user finds themselves is the best way to provide for power users.

Guidance - For people not used to surfing the web it is a good idea to have signs pointing to the next logical page to be read. This may be done via a simple link at the end of a page; it should never be forced on a user.

Simplicity is the key to a good website. Note “simplicity” does not mean boring! Rather than overfilling your pages with content, you should aim for minimalist design of the pages where the content stands out clearly. “Less is more” is the rule of thumb, and this goes for the use of images, fonts, videos, animations, as well as text content.

Tagline - Be able to explain the entire website in a few words and place these on your homepage, keeping in mind who the site is designed for and who is likely to visit it.

“Clean homepages can be achieved via

crisp typography,

clean, uncluttered layout,

clean, unified colour choices,

crisp imagery,

visual hierarchy, and

careful use of white or open space.

Following slides show some examples…

Examples of “clean” homepages

CP642-CP875 Webpage and Multimedia Design - TP0Y08

Clean Homepages

Cleanliness in design created via:

clean, crisp typography,

clean, uncluttered layout,

clean, unified colour choices,

crisp imagery,

visual hierarchy, and careful use of white or open space.

When all aspects of cleanliness are combined, a page never fails to attract attention.

CP642-CP875 Webpage and Multimedia Design - TP0Y08

Clean Homepages

Cleanliness in design created via:

clean, crisp typography,

clean, uncluttered layout,

clean, unified colour choices,

crisp imagery,

visual hierarchy, and careful use of white or open space.

When all aspects of cleanliness are combined, a page never fails to attract attention.

CP642-CP875 Webpage and Multimedia Design - TP0Y08

Clean Homepages

Cleanliness in design created via:

clean, crisp typography,

clean, uncluttered layout,

clean, unified colour choices,

crisp imagery,

visual hierarchy, and careful use of white or open space.

When all aspects of cleanliness are combined, a page never fails to attract attention.

CP642-CP875 Webpage and Multimedia Design - TP0Y08

Clean Homepages

Cleanliness in design created via:

clean, crisp typography,

clean, uncluttered layout,

clean, unified colour choices,

crisp imagery,

visual hierarchy, and careful use of white or open space.

When all aspects of cleanliness are combined, a page never fails to attract attention.

CP642-CP875 Webpage and Multimedia Design - TP0Y08

Clean Homepages

Cleanliness in design created via:

clean, crisp typography,

clean, uncluttered layout,

clean, unified colour choices,

crisp imagery,

visual hierarchy, and careful use of white or open space.

When all aspects of cleanliness are combined, a page never fails to attract attention.

Sketches and wireframes are used to determine where content is to be placed

the nature of the content;

Where the content is to be shown

How the content will be navigated

Detailed content development will be possible after the page layouts have been established

Establishing a page layout

Sketches

Sketches are not compulsory for the Design Document (as of 2nd half 2015), students can make sketches if they like, wireframes ARE required.

Example of sketches made during consultation with client. From these sketches it is relatively simple to create wireframes/storyboards.

Notice the lack of information other than the placeholders for content. For initial client/designer contact this is all that is necessary to begin the process of content design. Wireframes will take this step much further by providing solid information regarding text, colour schemes, media etc.

Wireframes are a step up from sketches

Good wireframes must show all interested parties:

The information design

The navigation design

The interface design

Information design:

Placement of information – information arrangement

Navigation design:

The means by which to find information

Interface design:

How users will/can interact with the product

Wire frames

Good wireframes should consist of all/most of the following:

Navigation: look, font type, font size, colour

Content: type (video/sound/text/animation), placeholder

Text: identify font, size, colour

Heading: identify font, size, colour

Branding: size, format (logo)

Footer: identify font, size, colour

Background: colour/image

Colour: must be defined as a hexadecimal value (#999999)

Font: must be mentioned by name (Arial, Garamond, etc) 35 Excellent Wireframing Resources

Content of wireframes

In the Assignment 2 Design Document – The wireframes will make up the bulk of the content design section!

Sketching and wireframe templates can be obtained free from

http://www.smashingmagazine.com/2010/03/29/free-printable-sketching-wireframing-and-note-taking-pdf-templates/

wireframes

Link: Fun With Wireframes

Image adapted from http://www.adaptistration.com/blog/2010/03/01/venture-project-update-fun-with-wireframes/

Once the page layout has been determined one or more templates may be created

Bring order to chaos

Establish a consistent, logical screen layout

Allow easy dropping in of text and graphics for each new page

No need to stop and rethink basic design approach for every new page

Page template(s)

Working memory can effectively process up to 9 elements simultaneously (7 ± 2)

More than that and cognitive overload occurs

In online design, Five Plus or Minus Two (5 ± 2) is preferable

No less than three (3)

No more than seven (7)

Applicable to

groupings of different elements, AND

Groupings of similar elements

Eg. 7 local navigation links (similar) count as 7 elements in local navigation bar but count as ONE element at the page level

Optimum items of information

Three types of memory: sensory, short-term, long-term. Directly related to: encoding (sensory) storage (short-term) and retrieval (long-term) of information.

The reason why cognitive load elements are reduced for anything that is designed for reading from a monitor is because of the delivery medium. Browser chrome must be taken into account as at least one other element that is not directly involved with the information presented, but is needed for the delivery.

browser chrome refers to the borders of a Web browser window, which include the window frames, menus, toolbars and scroll bars. When designing a Web page, the browser chrome must be added to determine the width of the page.

Large amounts of text require chunking at 3 different levels

Each level becomes more detailed

Applying the “rule”:

At the first level 5 ± 2 sentences

At the second level 5 sentences

Or three paragraphs

At the third level 5 ± 2 paragraphs

5 ± 2 text

Text manipulation is an art form

Ideally you would hire a “word smith” to manipulate your text

But most people can achieve great success by removing at least 50% of the words used

Text manipulation will be looked at in greater detail in a later lecture

“Spin-doctoring” text

Part of the user’s screen is occupied by the browser and operating system

What is left over is “screen real estate”

The design must make effective use of what is left over.

Avoiding too much white space while still using it as a layout aid – more in “visual design”

Screen Real Estate

Important design issue: web sites need to be designed to fit the most commonly used resolutions

Design must fit at least 4 different technologies:

Ipad or equivalent

Iphone

Smartphone

Unfortunately a large number of web sites are still designed for one resolution only

Resulting in “empty” looking pages when viewed on a screen with higher resolution

Eg. designed for 800x600 but viewed in 1366x768 or 1920x1080 (1080p)

Result: small look of web site

Screen resolution & good site design

If fixed or centered: design for a common lower resolution = 1024 x 768 (or 960 x 683)

Work with CSS media queries

More about media queries in the Responsive Design Lecture (week 11)

Keep design fluid

Work mainly with relative values or with percentages.

What to do…

960x683 length accounts for top and bottom browser chrome

Keep page sizes to a minimum.

Bandwidth is as yet not standard across users

Research indicates that slow-loading pages have a bail-out rate of 25% to 30%

page sizes should be consistent

A mix of small/fast and large/slow will result in a loss of confidence in the site

User feels out of control

Pages’ Download Size

Bail-out rate: the rate at which users leave the site. Distinction must be made between IT-knowledgeable users and the average web user. Research has shown that IT-knowledgeable users will disappear from sites if the waiting time is 7 seconds or higher. (Stanford-Poynter)

Avoid the advertising trap

It takes up space and User regard it as “junk mail”

Provide outgoing links where possible

Be clear where the links will take the user

DO NOT disable the browser’s Back button!

Users will not return to a site that deliberately tries to keep the user in the site

Do NOT provide links to unfinished parts of a site

"Under construction" messages are misleading

“Under construction” in someone’s head but definitely not usable as yet!

graphics should show real content, not be decorative

Infographics are an example of relevant graphics

The Do’s and Don’ts

Advertising on web pages has been shown to be ineffective for the advertiser. The people who ask money for this sort of advertising are the only ones getting rich.

Under Construction: there are millions of pages on the Web that have never been completed! If you don’t have content for a page DON’T make a blank page. Do not even refer to the page until it can go “live”

http://www.divacreative.com/blog/what-makes-a-good-infographic/

Interactive example:

http ://neomam.com/interactive/13reasons/

no-one likes having to wade through endless data and statistics to get to the information they need.

Infographics take complex information and data sets, and make them easy to digest in a visually stimulating design.

The Internet is stuffed with information and the infographic helps visualise that information simply, accurately and clearly.

When viewing each page on your site, users want to know:

Where am I? - so provide your site name, general section, and page name on each page

Where have I been? – if possible, show the path they took to get there

Where can I go? - how to get back to the home page, related pages on current level and further down

The User Rules…

In the software world the application controls the user.

In the Web world, the users are in charge

Users will almost always do those things that make no sense to the designer

What is logical to the designer is almost never logical to the user!

Look at each page from the point of view of someone who got there by mistake!

Studies have shown that users are almost always on the wrong page

The User Rules…

Interesting behaviour was observed in one of the eye track studies

Users were asked to view online advertisements containing images and text

It was discovered that our gaze will not only follow the direction in which a person or object faces, but

It will also influence the actual reading of any text in which the gaze is directed

Following slides show the results of the study using an image of a baby facing forward and side-on

The text on the screen remained the same

Observe the differences in attention

User Behaviour - research

This was only a small study – 106 people were tested. However, the results back up findings in composition studies that the viewer’s gaze can be directed and be made to rest via careful placing of anything associated with “direction”; this could be the direction someone faces, an outstretched arm, branches on trees which point in a particular direction and so on, and so forth.

Source: James Breeze, UsableWorld

Link: users ’ “landing” gaze

Note: users’ “landing” gaze upon first entering the page, was first deliberately directed to a spot in the middle of the screen, creating an identical entry-point for all participants.

When looking at the actual behaviour it was found that with the baby facing the viewer, the eye fixated immediately upon the baby’s face and remained there for several fixations; only on the 7th fixation did the gaze move to the text and remained there briefly.

Compare this to the following slide…

On the previous slide you saw how the gaze fixated on a number of different areas on the face without a particular pattern. It simply tried to “see” the face. In this screenshot however, the gaze on the baby’s face is almost incidental on its way to the text on the right-hand side.

This behaviour was observed in all 106 people tested and the following heatmap images clearly show this…

Image on this slide and the next 2 were obtained from: http://alexwhite.org/2011/10/you-look-where-they-look-research-on-design/ Date retrieved: November 14, 2011

Results were obtained with a Tobii eyetrack device.

The redder the spot the longer more people time looked at it

The shift of baby’s gaze has resulted in more people actually looking at the text on the right.

In terms of web design, we can direct people’s gaze to something we wish them to see by using images that face a particular direction.

Notice also the F-shape on the heat map in terms of where people were actually reading!

This also backs up Nielsen’s findings that in addition to top-left to bottom-right reading/scanning, the reading results in an F shape across the page.

Source: Jakob Nielsen, F-Shaped Pattern For Reading Web Content, http://www.useit.com/alertbox/reading_pattern.html Date retrieved: November 14, 2011

Create good content for online viewing from the beginning

Very short and with liberal use of bulleted lists and highlighted keywords

Simplify both text and graphics

Use plain language

Adopt existing conventions

Be specific

Reveal content by examples not hype

Show benefits, and

Carefully edit content before publishing

Approaches to design

Content design is more than simply placing content on a page

Good content design tries to “paint” the page content in order of importance

visual clarity can be achieved via

Appropriate headlines

Bolded words indicating important information

Bulleted and numbered lists

Strategically placing images that are relevant and that assist in understanding

White space

Approaches to design

White space is the unused space between paragraphs, sections, and around images, video, animation etc

Efficient use of white space creates a sense of order

Focusing and processing information becomes easier

Studies have shown an increase in comprehension of almost 20%

White space is very much part of visual design

Much more about visual design next

Whitespace

A closer look at “Visual Design”

Information Architecture’s Process cycle

Define

the goals

the user experience

the site content

the site structure

Design

the content covered this week

the visuals Week 4

Do not forget…

Assignment 1: Analysis Document due Friday, Week 4, 5pm.

Next week…

These were covered in week 2

Faculty of Science

Content design – week 3

Visual design – week 4

image11.png

image12.png

image13.png

image14.png

image15.png

image16.png

image17.png

image18.jpeg

image19.gif

image20.png

image21.png

image22.jpeg

image23.jpeg

image24.jpeg

image25.jpeg

image26.jpeg

image3.jpeg

image1.jpeg

image2.jpeg

image4.jpeg

image5.jpeg

image6.jpeg

image7.jpeg

image8.jpeg

image9.jpeg

image10.jpeg

ITECH2106-6106_week04_visual-design.pptx

ITECH 2106 - 6106 Web Page & Multimedia Design

Week 4: Visual Design

Commonwealth of Australia Copyright Act 1968

Notice for paragraph 135ZXA (a) of the Copyright Act 1968

Warning

This Material has been reproduced and communicated to you by or on behalf of Federation University Australia under Part VB of the Copyright Act 1968 (the Act).

Do not remove this notice.

Faculty of Science

Assignment 1

Analysis Document assignment is due this Friday

At 5:00pm via Moodle submission

Extensions are not given unless you have obtained Special Consideration

https://federation.edu.au/current-students/essential-info/administration/special-consideration

Forms must be submitted NO LATER than 3 days after the due date!

Eg. Forms for assignment due this Friday must be received no later than next Monday

Double check the marking distribution sheet before submission

Crisp typography,

Clean, uncluttered layout,

Clean, unified colour choices,

Crisp imagery,

Good visuals

Careful use of white or open space.

Site identification

short and to the point, no long “welcome” messages

Tagline – what the site is about in ONE phrase (6 to 8 words max)

Appetizers, Latest content, Shortcuts, Sitemap, Login.

Last Week: Good Homepage

Good Homepages?

Would you take them seriously?

http ://www.historianofthefuture.com /

http:// www.burlingtonnews.net/burlington_ufo_center.html

http ://www.gordonwaynewatts.com /

http ://www.goldenmean.info /

Website Analysis

Historian - Obvious poor choice of colours, fonts, and positioning.

Text same size and bold as Navigation.

Nav in multiple places

Why can I click some images, but not others, no consistency.

Blocked content layed over one another.

UFO – A little better layout with some whitespace and maybe a grid?

but still poor because within grid they have no padding

Distracting animations and green dividers demand attention.

Multiple colours, randomly chosen?

No specific navigation – all over the place

Gordon – the neverending page. How would you find anything?

Multiple fonts, sizes, colours

Masses of text, who would read it?

Where is the navigation? Ahhhh….its the strange multi-coloured table of 6x4 links. Yet they only count for half of the single webpage…

GoldenMean – neverending blog/list on the left? And what on the right??

Purpose? The blog(?) links to more equally bad pages!

Huge amounts of links go all over the place; internal, external.

The layout of right column changes width on each block of content

Some youtube are image, not embedded.

It would be a good idea to revisit these sites once we reach the end of the semester. You will be able to talk intelligently about ALL the design errors made and it will be a good preparation for the exam.

Design

This week

A closer look at “Visual Design”

Information Architecture’s Process cycle

Define

the goals

the user experience

the site content

the site structure

Design

the content Covered last week

the visuals Week 4

These were covered in week 2

of interest to the eyes

producing mental images

creating a “look” for content

setting the tone

impression

Invitation

generating visual attention

the creative use of visual language

ultimately… mind control!

Visual Design definition

The way the subject matter (website) is composed and the way it appeals to the human eye.

it will help create mental images of the information that is being looked at, by creating a look for the content

Good visual design will keep users longer on your site than without it –

And it helps to set the tone of the website, and a lasting impression

Good visual design will invite the user into the information presented,

It has a lot to do with psychology and how people can be “sucked in”

a good example of this is the advertising industry that uses visual design all the time – attention to visual elements (like last weeks baby)

to get people to buy/do things they had not even thought of before they saw a particular ad.

Good visual design is all about manipulating people’s minds

Visual design can increase and decrease useability

Mentally, we rank the importance of information based on visual presentation

Visual elements can focus our attention

On a computer monitor we need a mental path through the information

Visuals Affect Useability

1. The way in which we visually present the information determines how well the information will be received/retained.

2. Visual presentation relates to the colours used, the boxes in which information is presented, the background against which the information is presented, the typography on the page and the interactivity.

3. Focus attention – like the baby redirecting our attention – good. The dancing aliens – bad.

End. an intuitive, pleasing navigation system is only part of this

It is the way the eye is led through the information that is most important – unwarranted distractions cause users to tune out and move away from the site

Clarity of presentation

users can find what they want

users can complete a given task without assistance

efficiency

user does not have to waste time figuring things out

reduced training

Visuals are much more than images!!!

Clear Visuals Promote Efficiency

Efficiency refers to the way in which users can make use of the information of a website without running into problems.

Pilot training. The visuals promote efficiency and help train quicker. Opposed to reading the manual!

know the purpose of your website

know your target audience

know what content your intended audience wants

know how to apply the rules of good visual design

Principles of Visual Design

In order to create a visual design that “works” the designer needs to first know:

Why the website is to be created

Who the main users of the website will be

What it is that these users expect to find on the site

He/she then needs to manipulate the visual design in such a way that it will be attractive and informative for these users in particular.

The following slides are dedicated to looking in greater detail at what makes for better visual web pages, borrowing at times from the art world to explain certain concepts

Main elements:

Composition

Colour

Fonts

Motion

Of the 4 elements, “composition” is the most important

“Squint test”

Immediate feedback re composition

Elements of Visual Design

Composition – referring to the placement or layout of visual elements on the piece of media

Squint test instructions:

Position what needs to be viewed at about an arms-length from your eyes.

Squint your eyes until you can’t make out what is on the screen, in the photograph, painting, etc.

The pattern of blurry blobs will indicate whether you are looking at something pleasing, balanced, well-proportioned, or at some chaos.

Composition in art is related to how the eye is guided to the main focus of the art piece

Guidance is achieved in a number of ways, some of which are applicable to web design as well

Light and shadow

Distinct main focus, placed off-centre

Subconscious leading of viewer’s eye to all elements before leaving the work

Space and balance surrounding main focus

High contrast to draw the attention

Dynamic interaction

Composition

Dynamic interaction – the feeling of being drawn in to the website

Effective web design does not need to be pretty

It has to be clear and intuitive

Clarity & intuitive design can be achieved via good composition

Good composition relates to a

Sense of order

Sense of harmony

Sense of balance

Sense of comfort

Rule of thirds, OR Divine Proportion can both be used to achieve good composition

Composition

ROT is not a rule that MUST be followed. However, applying the Rule of Thirds invariably leads to better design.

Order – feels structured and neat - opposite of chaotic (like the websites we analysed this lecture)

Harmony – elements fit and blend together as a whole

Balance – elements arranged symmetrically

Comfort – not jarring or disturbing to view

The Rule of Thirds is a simplified version of Divine Proportion or Golden Ratio

For more information about DP see link and more recently link

It is a simple division of something into 9 equal parts

2 horizontal and 2 vertical lines equally spaced apart

most important items are placed on or near one of the intersecting lines

Studies have shown that these intersections are natural resting places for the eye

Improves interest in the composition

Not all 4 intersections should be used in web design

But the rule is of great assistance in positioning the most important information

Rule of Thirds

Applying Divine Proportion to your Web Designs: http://www.smashingmagazine.com/2008/05/29/applying-divine-proportion-to-web-design/

Refer to “how people” read in the Content lecture presentation

“Divine Proportion” has a large number of aliases all referring to the same: golden section, golden means, golden ration, divine ration, etc. etc. etc.

Divine Proportion states basically that if small elements in your design have the same ration to the larger elements as the larger elements have to the whole, then you will have created a more than pleasing design. Apparently our brains are attuned to this pattern…

Composition – Rule of Thirds

Image courtesy of Wikipedia

Often you will find that not ALL the intersections are used in a composition. This is quite normal. The Rule only identifies which areas are better from a compositional perspective. As with everything else, less is more, and rather than confusing the viewer with too many dominant points in one composition, the Rule is used to help place the MOST important aspect in one of the areas that is a natural resting place for the eye.

Web page application

Web page application of Rule of Thirds: observe how the shark and the orange text are placed in the area of one of the intersecting lines; this assist with the focusing. As well, the mainly static information at the bottom of the page (follow us, membership, subscribe) has been positioned near the bottom third and the “buying” section on the right is also placed along one of the verticals. From a viewing perspective the eye enters the page top-left and rests at the first intersection; sufficient interest has been created to keep the attention there longer. Further information has been placed strategically guaranteeing that viewers will investigate further, if only by reading what is presented there.

The banner and first sub heading are contained within the first intersection at the top of the page and the page is completed by links placed near and below the 2nd horizontal line.

The scroll bar on the right has been placed in a way that does not interfere with the text but as, you can see it does not extend beyond the first horizontal line.

The image of JT is kept in the section created by the first vertical and the text is begun to the left of centre near the first vertical line as well – text is not allowed to continue very far beyond the 2nd vertical

The homepage has also been carefully coloured which only serves to make a good composition even better – colour choices are talked about a bit later in the slides

Rule of Thirds creates 3 columns and 3 rows

What if you want more or less?

Many websites implement some sort of grid system, that is sometimes responsive

Simply a series of intersecting horizontal and vertical lines spaced at regular intervals

Grids can be used to respond to different resolutions or devices

Creates order from chaos

Grid System

Information source: http://www.smashingmagazine.com/2010/04/29/grid-based-web-design-simplified/

http://thisisdallas.github.io/Simple-Grid /

http://www.responsivegridsystem.com /

http://www.profoundgrid.com /

Grid Examples

In addition to the use of these systems in placing content, content itself can be used to make viewers interact better

One of the simplest ways to create a more inviting web site is via the way images are displayed

Removal of edges of images via soft feathering can give a feeling of inclusiveness

Creating a feeling of being drawn into the site

An example is shown on the next slide

Further manipulation of interactions

Static

on the outside, looking at

Static vs Dynamic

Dynamic

Drawn in

Images that start and finish with stark lines such as the edges of the first image leave the viewer firmly outside looking in;

there is a finality about the image that says “keep out”.

Web pages with stark lines do the same, they keep users at arms length and “talk at” them rather than drawing them into the site.

The second image has a gradual tapering off of the image leaving the viewer the choice to imagine what lies beyond what is immediately visible;

the viewer gets drawn into the picture and is free to make any associations.

On web pages the effect is similar; good web designers use tricks like the feathering of edges of bars and images,

as well as the AVOIDANCE of ANY stark lines to draw users into a site.

Slides 13 and 14 are examples of static and dynamic design – which one is the dynamic?

Images are read like the written word

In the Western world this is from left to right and top to bottom

Images unfold from left to right like a story

Good composition builds expectation and leads the eye to the most important part of the picture

We are conditioned to expect to see balance in the written word

Interest (excitement) may be added to a design by deliberately ignoring expectations

Balance & Expectation

Images that are well composed lead the eye to the most important part of the image;

web pages that are well composed should lead users to the most important part of the page in an intuitive way, tapping into the habit of western readers to read top left to bottom right.

Designers who create web pages for users who are not used to the western way of reading should adapt the technique to their needs.

To add “shock value” to a site it is quite ok to deliberately break the rule – but one must know the rule to begin with before one can break it EFFECTIVELY! Often, if the rule is broken simply to be different the effect of it is not what was expected and it has defeated the purpose.

Unexpected = disturbing

Examples

Expected = neutral

Unexpected = interesting

An example of acceptable and unacceptable rule breaking

The first line is expected and is therefore neutral in its effect

The second line although not expected, adds an interesting twist to the line with the user still being able to see at a glance what was written

In the third example however, normal reading is interrupted to try and work out what the designer has done – this stops the flow of information and is seen as a disturbance rather than an interesting addition

In industry a large number of people are usually involved in the design process

As a designer you need to consult with these people

A typical approach would be:

Sketch a layout for the pages (storyboarding);

Select an appropriate colour scheme.

Select appropriate font(s).

Create and/or collect appropriate images.

Make the interface easy to use.

Combine these in a template which meets the goals of the project.

How to go about designing the visuals

Identify placement of:

Headers

Navigation

Content

Footer

& Other Elements

Last Week: Sketches

Note: Sketches are not compulsory for the Design Document (as of 2nd half 2015)

Students can make sketches if they like, to help them with wireframes.

Wireframes of all pages, and Mock-up of Home page is required for Design Document.

Taken from the Content lecture: Example of sketches made during consultation with client. From these sketches it is relatively simple to create wireframes/storyboards.

To help with the design of wireframes consider using user interface elements that are freely available on the web. One such place with UI elements is: http://www.webdesignerdepot.com/2011/07/50-psd-ui-web-design-elements/

Another one: http://creativefan.com/50-ultra-high-quality-free-web-design-psd-files/

Identify:

Look

Content Type

Fonts

Colours

File Types

Of:

Navigation

Content

Text

Headings

Branding

Footer

Background

Last Week: Wireframes

Identify (where applicable)

These days a lot of visual design happens in image manipulation software

Everything but the interface/interaction can be designed in software such as Photoshop, the Gimp etc.

Advantages of creating mock-ups:

Everyone is “on the same page”

Client(s) can see what the designer has in mind

The designer(s) can get feedback regarding changes required

Mock-ups can be used to create templates with

Mock-ups are readily translated into CSS and HTML

Creating mock-ups

Mock-ups are an extension of wire-frames

Wire frames were created for initial consultation with clients

Likes and dislikes have become known

More concrete look and feel pages may now be created

Remember: wire frames are basically place-holders

Mock-ups are more concrete

Designers must expect a lot of critique after submission of mock-ups

This is the stage where real likes and dislikes become known

Designers must get a firm acceptance from clients before proceeding with more detailed designs.

Mock-ups

It is important that designers get clients to sign off on the mock-ups before anything else proceeds.

If left to change, design-creep, and ultimately project-creep will set in and the project is likely to suffer badly.

“Design creep” is a term given to the situation where the client constantly changes their mind about the look and feel of the site.

It is very important that designer establish what the clients needs and preferences are very early in the process so that design can focus on those needs.

Wireframes to Mock-ups

This example is taken from an old lab sheet.

Wireframes to Mock-ups

This example is taken from the current week 6 lab sheet.

Wireframes to Mock-ups

This wireframe shows layout, whitespace, textual areas and image areas.

What it is lacking is details of colours, font families, font sizes, area dimensions, image dimensions and filetype, etc.

This is a very detailed mockup of a webpage that is ready to be translated into HTML and CSS. Students will get exposure to this sort of web page creation in the labs. In terms of providing the client(s) with a clear idea as to what is proposed, you can not do better than this. Keep in mind this is a MOCK-UP, not a prototype; NONE of what you see on the slide as the interface and other links, works! It is only an image…

Visual design is all about the look and feel of the website

Effective visual design will take into account

Text

Navigational components

Content requirements

Multimedia needs

Remember what visual design is about

Visual design effectively increasing the efficiency of delivering the content.

Well-defined blank areas that separate chunks of content

Alleviates visual clutter

Assists in the logical layout of information

Should always be preferred over horizontal and vertical lines

White Space allows the eyes to rest

Lines keep the eyes engaged without providing content

Consider White Space

“White space” is MORE than white space!

Whitespace is simply the empty space between and around the elements of a design or page layout. This can include: space around graphics and images, margins, padding and gutters, space between columns, and even the space between lines of type. Whitespace is also referred to as “negative space”.

If your business is “motion”, use multimedia to your advantage

Film makers, Video producers, Animators

Music producers

News “papers”, News broadcasters etc.

Multimedia

If not, reconsider!

Bandwidth/download times

If you don’t need it, don’t make your site any heavier than it needs to be

Always give preference to a fast-loading website full of content!

Multimedia

Understand how your audience sees.

Know what visuals your audience associates with your content.

Use these expectations to guide your audience through your content.

Leave out unnecessary detail.

How to control minds with visual design

In the two example images:

The orange highlighted areas are deliberately enhanced visually, in order to direct the focus of the user.