itb002 professional studies faculty of information technology faculty of creative industries itb002...
TRANSCRIPT
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
ITB002 Week: Introduction to Web Design
Oksana Zelenko
Communication Design,
Creative Industries
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
Definition & Planning
Analysis
Design
Build
Implementation
Where are we ?
Weeks 8 & 9
ITB002
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
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)
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
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.
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
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
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
http://www.mini.com/mini_worldwide/mini_worldwide.html
What is the point of
good design?
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
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:
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
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:YOUR ROLE:
what you will do
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
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:MATERIALS
you will work with
visualtextual
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
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:
Using theLANGUAGE,
PRINCIPLES andAPPROACHES of..
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
Communication design:
Persuades people through:
• ease of use and access• appealing visual design• meaningful user control and
interaction
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
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
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
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
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
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
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
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.
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
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.
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
Context: The project
• Client
• Budget
• Existing content: what is the information to be communicated?
• Existing materials (are there predetermined logos, graphics, content etc.)
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
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?
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
Purpose:
• Billboard• Commercial or Online shopping site• Product support• Publishing• Archive• Portal• Activist site• Showcase
Is the site to operate as a:
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
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?
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
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.
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
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
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
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”
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
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
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
http://www.bmw.com/
The BMW Web site
What is its message?
“We are a sophisticated, dynamic, hi tech, stable company”
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
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
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
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)
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
This image by Cindy Sherman uses a combination of warm colours to create a sense of abjection or nausea
If applied to interior design …
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
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
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
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
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
Matthews, Kiana K. (1999). Aesthetics and Usability (Advanced Topics in User Interface Design), University of Colorado at Boulder
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
4) Shared community meaning
Colour
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
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
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
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
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
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
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
Reduce clutter
http://www.yahoo.com/: http://www.google.com.au/
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
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
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
http://tscp.open.ac.uk/t183/html/lesson2/eyescanning.cfm.htm
Design elements to harness for a site identity:
2. Form and Line
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
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)
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
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
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
Form and Line
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
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
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
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
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
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:
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
http://www.mediainspiration.com/contents/downloads/wallpapers/largewallpapers/wallpaper.energy.jpg
Form and line:
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
3. Font:
We can also create an impression or theme through our choice of font
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
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:
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
Screen considerations:
Font:
Serif ? sans serif ?
Serif ? sans serif ?
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
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
Design elements to harness for a site identity:
4. Language
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
Compare the use of language on these sites
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
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.
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
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.
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
Menu
Bar
Universal Navigation Bar
Highlighted text
Icons
Orientation: navigation
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
Interface Design: Wayfinding
Abstract and pictorial signs convey meaning across cultural boundaries and are understood quickly and easily
Bhaskaran, L., (2004) Size Matters, Switzerland
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
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.
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
(Wileman, 1980)
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
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)
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
• 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:
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
Simple, symmetrical shapes are most easily recognised
Solid shapes appear solid and
stable (corporate identity).
Closed shapes imply consistency.
Gestalt theory:
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
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:
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
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.
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
•Information design is not about the accurate representation of reality but effective communication of concepts and relationships.
Homepages: Orientation, Maps and Gestalt
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
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)
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
We remember information by grouping similarities and separating differences.
Gestalt theory: grouping
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
The map of London Underground utilizes these principles of proximity, grouping, similarity, connectedness, and continuity (information design)
Gestalt theory: grouping
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
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
Gestalt theory: grouping
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
Gestalt theory: grouping
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
Gestalt theory: grouping
Sets of small multiples
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
Gestalt theory: grouping
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)
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
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.
ITB002 Professional StudiesFaculty of Information TechnologyFaculty of Creative Industries
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