ITB002 Professional Studies Faculty of Information Technology Faculty of Creative Industries ITB002 Week: Introduction to Web Design Oksana Zelenko Communication

ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries

ITB002 Week: Introduction to Web Design

Oksana Zelenko

Communication Design,

Creative Industries



Definition & Planning

Analysis

Design

Build

Implementation

Where are we ?

Weeks 8 & 9

ITB002


The Purpose of the Design Phase:

To make your site more effective and usable and to save you time at the code level in the long run.

• To establish a site identity (an impression or theme)

• To effectively organise the content of your Web site

• To make diagrams or plans for the structure of your Web site (including navigation)


Content of the Design Phase:

LecturesTheory and examples of Web site design principles:

• This Hour : Web Page Design (approaches to Interface Design and Information design)

• Next Hour: Web Site Design (and Interaction design)

WorkshopsImplementing the principles of visual design to develop a site identityImplementing the principles of site design to create a site map of content, story-board and paper prototype

PracticalsDeveloping a compliant Web site using HTML & Dreamweaver. You will create a personal CV site to gain the skills for your group project Echo Bay site.


Sequence of the Design Process

Analysis

Client Business

case

Definition& planning

ResponsiveProject

SpecificationPart 1

Clustering Content(sticky labels/

concept map)

Site Map

Environmental

scanning

Storyboard

Paper Prototype

Build

Template

Project Specific-

ationPart 2

Design phase

Content list

Site Identity

User/ client needs

Analysis(Including audience, context, purpose)

Build


http://www.mini.com/mini_worldwide/mini_worldwide.html

What is the point of

good design?


Communication design is not:

• Creating and supporting meaning (interface design)

• Effectively presenting content (information design)

• Grouping information and structuring relationships between grouped information (information architecture)

• Facilitating access to information, user feedback and user control (interaction design)

• About making things look pretty

• The icing on the cake

Communication design is:









Communication design is:YOUR ROLE:

what you will do









Communication design is:MATERIALS

you will work with

visualtextual









Communication design is:

Using theLANGUAGE,

PRINCIPLES andAPPROACHES of..


Communication design:

Persuades people through:

• ease of use and access• appealing visual design• meaningful user control and

interaction


Communication design:

Persuades people through:

• ease of use and access• appealing visual design• meaningful user control and

interaction

Your aim is to effectively communicate messages and…

…the parameters (conditions and constraints) of the project.

to facilitate

within


Effective communication: occurs when meaning is produced by the speaker and is understood by the listener

Communication fails: when there is a lack of shared understanding between speaker and listener


Effective communication: occurs when meaning is produced by the speaker and is understood by the listener

Communication fails: when there is a lack of shared understanding between speaker and listener

meaningful engagement and interaction

purposeful design choices


The project parameters:

To communicate effectively and facilitate meaningful interaction visual and interaction designers take into account the:

context, purpose and audience,

of the project.

Meaningful interaction is relevant interaction.


Context: The Medium

Electronic Publishing:To publish is a term derived from the book industry. It means to produce and distribute content to the public. The Internet is an electronic means of publishing. It is different to a book because of its possibilities for :

TemporalityMulti-authoring

Interlinking and non-linearity Decentralisation Participation Mass-distribution

You might choose to publish on the Internet if your project will benefit from one or more of these attributes. You will optimiseyour project if it incorporates these attributes into its design.


Context: The project

• Client

• Budget

• Existing content: what is the information to be communicated?

• Existing materials (are there predetermined logos, graphics, content etc.)


Context: The site

• Is the site local or global?

• Is it permanent or temporary?

• Is it associated with other things or stand alone?

• Is it commercial, experimental, activist etc?


Purpose:

• Billboard• Commercial or Online shopping site• Product support• Publishing• Archive• Portal• Activist site• Showcase

Is the site to operate as a:


Audience:

• Who is the target audience?• Is there more than one audience? Primary,

secondary.

(The client and the audience are not the same)

• What is the demographic of each target audience, what are their interests?

• What are their different wants and needs from the site?


Interface Design

• Design underlies all types of communication.

• Interface design is about the design of individual pages. It is primarily visual. It uses some aesthetic principles but it is not the same as art.

• The main aim of interface design is effective communication of a message or meaning to the intended audience.


Interface Design: Home pages

Purpose of a home page:

• Create a site identity • Provide an introduction (as do film titles)• Provide orientation

create a first impression

position the user


Interface Design: Site identity

Web sites produce a primary message. eg:

• “We are a professional, reliable and stable company”

• “We offer quality, exclusivity and service”

• “Our products are fresh” etc.

• “I am innovative, cutting edge and dynamic person or product”


To produce a site identity we can harness various design elements:

(colour, image, line, composition, text and navigation)

to:

provoke a feeling, create a mood or signify (mean) things

They do this by evoking shared perceptions, memory or experiences.

Interface Design: Site identity


http://www.bmw.com/

The BMW Web site

What is its message?

“We are a sophisticated, dynamic, hi tech, stable company”


Design elements to harness for a site identity:

1. Colour 1) Perception: physiological impact (universal)

Blue is a cool colour - It creates the impression of cold, fresh, hard as ice

www.aerogfx.com/ Wallpapers/Ice.jpg

http://www.boardsandbits.com/gamepics/fresh.gif

www.fotocommunity.de/.../ cat/494/display/1079205www.screensavershot.com/ sports/cold.jp


If pure, bright, highly saturated, contrasting colours - they appear dynamic, vibrant.

Red and yellow are warm colours: They create the sensations of hot, activity (fast)

Leo Burnett agency, Gustaf Hultberger (Art Director)


This image by Cindy Sherman uses a combination of warm colours to create a sense of abjection or nausea

If applied to interior design …


2) Perception: object association

art.kht.ru/kht_gallery/ images/dalcombank1.j

http://www.henristudio.com/images/show-hi-tech-pumps.jpg

www.esa.int/export/ esaCP/SEMSLK1PGQD_index_1.htm

Colour


3) Cultural Associations:

Colours can also operate as signs that require common

cultural (national) understanding

UK, US, Aust: Danger

France: AristocracyChina: happiness, prosperity

and anger

India: life, creativity …

Colour

http://cazou.tyrhius.free.fr/anger.gif

www.baazee.com/jsp/ BidForm.jsp?Trade_TradeId=...

www.stclair.cc.mi.us/ redcarpetaffair/40.htm


Matthews, Kiana K. (1999). Aesthetics and Usability (Advanced Topics in User Interface Design), University of Colorado at Boulder


4) Shared community meaning

Colour


Make sure that you understand the meaning and impact of colours you use. Are these meanings shared and understood by your local/ global audience?

Or are you inadvertently creating meaning?

Colour


In formal design terms we refer to: • Temperature (cool to warm)• Tone (light to dark)• Saturation (intensity)

5) Impact:

We can create dynamic energy through:increased saturation, tone and/or temperatureStability by reducing these.

Barbara Bolt, 2002

Colour


Beware:

But it can be overdone …

Increased intensity = difficult to read

Colour is expensive in print production. It is free to produce on screen (and it does not add to download time in the way images do). Therefore many designers use colour in tables for design purposes.

Colour


Reduce clutter

http://www.yahoo.com/: http://www.google.com.au/


5) Choosing a background (creating negative space)

A dark background takes the metaphor of a film or blackboard …

A pale background takes the metaphor of paper


http://tscp.open.ac.uk/t183/html/lesson2/eyescanning.cfm.htm


2. Form and Line



Form and line: Eye tracking

Eye tracking is a means of determining the movement of a reader's eye as (s)he views a screen interface design.Using the conclusion of eye tracking studies, designers can effective enhance screen interface design

• Skin Electrodes• Contact Lens• Head Mounted• Remote Systems• (Desk or Computer-

based)


Form and line: Eye tracking

Aggregate eye-tracking graphs depict viewing intensity in key regions

“Scanpath” output depicts pattern of movement throughout screen. Black markers represent fixations.

Cornell University, Computer Science & Human-Computer Interaction


Form and Line


1) A sense of static stability and balance: regular, horizontal solids

2) The impression of logic, precision through the symmetry and proportion of the square (multiplies into grid = rationality, order)

3) A suggestion of of eternity, peace, unified, completion by a circle

4) A feeling of softness, comfort and safety by an oval

5) A sense of energy, dynamism, movement and direction by a triangle (and arrow):

Form and Line


1) A sense of static stability and balance: regular, horizontal solids

2) The impression of logic, precision through the symmetry and proportion of the square (multiplies into grid = rationality, order)

3) A suggestion of of eternity, peace, unified, completion by a circle

4) A feeling of softness, comfort and safety by an oval

5) A sense of energy, dynamism, movement and direction by a triangle (and arrow):

Form and Line


Marcel Duchamp - Nude Descending a Staircase

Giacomo Balla, Dynamism of a dog on a leash.

What impression is being created by these images? How is it produced? Marcel Duchamp - Nude Descending a Staircase

Form and line:


http://www.mediainspiration.com/contents/downloads/wallpapers/largewallpapers/wallpaper.energy.jpg

Form and line:


3. Font:

We can also create an impression or theme through our choice of font


What type of music do they play?When combined, the quality of line, the spaces between

letters, colour, capitals or lower case, together create a certain rhythm through which we grasp the impression and the overall sense of the type of music the orchestra plays.

St Lucia Orchestra

St Lucia Orchestra

St Lucia Orchestra

St Lucia Orchestra

Font:


Screen considerations:

Font:

Serif ? sans serif ?



Serif is easier to read in print form (book, newspaper)Sans serif is easier to read on screen, from a distance)

Verdana is a font that was especially designed for the web



4. Language


Compare the use of language on these sites


Recap: Effective communication occurs when meaning that is produced by the speaker and is understood by the listener through shared signifying systems, languages and techniques for producing and deciphering meaning.


Purpose of a home page: Orientation

Your web page should make your navigation clear, consistent and easy to access.

Use multiple types of navigational devices. Some people find text clues easier, some look for visual clues, some always use a universal navigation bar.


Menu

Bar

Universal Navigation Bar

Highlighted text

Icons

Orientation: navigation


Interface Design: Wayfinding

Abstract and pictorial signs convey meaning across cultural boundaries and are understood quickly and easily

Bhaskaran, L., (2004) Size Matters, Switzerland


Wayfinding: icons and pictograms

• extract extraneous information to relay a message or meaning through reduced visual form.

• use an economy of line and form, and can be easily read when reproduced at a variety of scales, in a variety of locations and in a variety of mediums.

• They are visual shorthand that are concise and precise.


(Wileman, 1980)




Pictograms designs for use in Online Visual Counselling tools developed for Kids Helpline (Funded by Australia Research Council; Researched and developed at QUT, Creative Industries, in collaboration with Kids Helpline, 2003-2005)


• Gestalt is a branch of psychology

• It was founded in Germany in the 1930’s and 40’s

• “the gestalt laws of perceptual organisation” explain human perception of structure in the environment and how we perceive groups or elements of objects.

• Gestalt theory has been very influential in logo design and, more recently, HCI (Human Computer Interaction)

Gestalt theory:


Simple, symmetrical shapes are most easily recognised

Solid shapes appear solid and

stable (corporate identity).

Closed shapes imply consistency.

Gestalt theory:


Closed figures are more easily perceived than open or incomplete ones. We tend to close incomplete figures and identify them as a single unitary one.

We complete incomplete shapes.

Gestalt theory:


Gestalt theory:

Topic 4: Interaction Design (Interface) Topic 4: Interaction Design (Interface) Wayfinding and orientation

1968 Mexico op art 1972 Munich

QuickTime™ and aTIFF (LZW) decompressor

are needed to see this picture.


•Information design is not about the accurate representation of reality but effective communication of concepts and relationships.

Homepages: Orientation, Maps and Gestalt


Proximity occurs when repeated elements are situated close together.

Small multiples in close proximity tend to be perceived as a group.

Delaware for men’s fashion trade fair in Florence, 2003

Gestalt theory: grouping

(repetition)


We remember information by grouping similarities and separating differences.



The map of London Underground utilizes these principles of proximity, grouping, similarity, connectedness, and continuity (information design)



Links between maps and web design:

• Data is presented by grouping

and categorised through similarity

• Strategies of size, colour, consistency, layout

• Grouping of equal importance can

be easily distinguishable






Sets of small multiples



Core shape: oval (protection, security)Core approach to design inspired by: company logoAnd applied to: layout, image frame, icon design)Gestalt principles: grouping, repetitionColour: blue hues (calm, relaxing, consistent)Quality of line: brush stroke (creative, dynamic)


Conclusion

Good design combines textual and visual elements to most effectively

communicate a message and create concise, accessible meaning within the

parameters of the audience, context and purpose

of the Web site.


Practical and Workshop

This week:• Curriculum Vitae or Resumé

and the team web site• Create a concept map and site identity• HTML

• Next Week: • Site design

Documents

ITB002 Professional Studies Faculty of Information Technology Faculty of Creative Industries ITB002 Week: Introduction to Web Design Oksana Zelenko Communication