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

2. ITB002 Professional Studies Faculty of Information Technology Faculty of Creative Industries

3. ITB002 Professional Studies Faculty of Information Technology Faculty of Creative Industries Definition & Planning Analysis Design Build Implementation Where are we ? Weeks 8 & 9 ITB002

4. ITB002 Professional Studies Faculty of Information Technology Faculty 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)

5. ITB002 Professional Studies Faculty of Information Technology Faculty of Creative Industries Content of the Design Phase: Lectures Theory 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) Workshops Implementing the principles of visual design to develop a site identity Implementing the principles of site design to create a site map of content, story-board and paper prototype Practicals Developing 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.

6. ITB002 Professional Studies Faculty of Information Technology Faculty of Creative Industries Sequence of the Design Process Analysis Client Business case Definition & planning Responsive Project Specification Part 1 Clustering Content (sticky labels/ concept map) Site Map Environmental scanning Story board Paper Prototype Build Template Project Specific- ation Part 2 Design phase Content list Site Identity User/ client needs Analysis (Including audience, context, purpose) Build

7. ITB002 Professional Studies Faculty of Information Technology Faculty of Creative Industries http://www.mini.com/mini_worldwide/mini_worldwide.html What is the point of good design?

8. ITB002 Professional Studies Faculty of Information Technology Faculty 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:

9. ITB002 Professional Studies Faculty of Information Technology Faculty 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

10. ITB002 Professional Studies Faculty of Information Technology Faculty 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 visual textual

11. ITB002 Professional Studies Faculty of Information Technology Faculty 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 the LANGUAGE, PRINCIPLES and APPROACHES of..

12. ITB002 Professional Studies Faculty of Information Technology Faculty of Creative Industries Communication design: Persuades people through: ease of use and access appealing visual design meaningful user control and interaction

13. ITB002 Professional Studies Faculty of Information Technology Faculty 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

14. ITB002 Professional Studies Faculty of Information Technology Faculty 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

15. ITB002 Professional Studies Faculty of Information Technology Faculty 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

16. ITB002 Professional Studies Faculty of Information Technology Faculty 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.

17. ITB002 Professional Studies Faculty of Information Technology Faculty 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 : Temporality Multi-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 optimise your project if it incorporates these attributes into its design.

18. ITB002 Professional Studies Faculty of Information Technology Faculty 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.)

19. ITB002 Professional Studies Faculty of Information Technology Faculty 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?

20. ITB002 Professional Studies Faculty of Information Technology Faculty 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:

21. ITB002 Professional Studies Faculty of Information Technology Faculty 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?

22. ITB002 Professional Studies Faculty of Information Technology Faculty 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.

23. ITB002 Professional Studies Faculty of Information Technology Faculty 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

24. ITB002 Professional Studies Faculty of Information Technology Faculty 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”

25. ITB002 Professional Studies Faculty of Information Technology Faculty 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

26. ITB002 Professional Studies Faculty of Information Technology Faculty of Creative Industries http://www.bmw.com/ The BMW Web site What is its message? “We are a sophisticated, dynamic, hi tech, stable company”

27. ITB002 Professional Studies Faculty of Information Technology Faculty 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/g amepics/fresh.gif www.fotocommunity.de/.../ cat/494/display/1079205 www.screensavershot.com/ sports/cold.jp

28. ITB002 Professional Studies Faculty of Information Technology Faculty 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)

29. ITB002 Professional Studies Faculty of Information Technology Faculty 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 …

30. ITB002 Professional Studies Faculty of Information Technology Faculty 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

31. ITB002 Professional Studies Faculty of Information Technology Faculty of Creative Industries 3) Cultural Associations: Colours can also operate as signs that require common cultural (national) understanding UK, US, Aust: Danger France: Aristocracy China: 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

32. ITB002 Professional Studies Faculty of Information Technology Faculty of Creative Industries Matthews, Kiana K. (1999). Aesthetics and Usability (Advanced Topics in User Interface Design), University of Colorado at Boulder

33. ITB002 Professional Studies Faculty of Information Technology Faculty of Creative Industries 4) Shared community meaning Colour

34. ITB002 Professional Studies Faculty of Information Technology Faculty 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

35. ITB002 Professional Studies Faculty of Information Technology Faculty 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 temperature Stability by reducing these. Barbara Bolt, 2002 Colour

36. ITB002 Professional Studies Faculty of Information Technology Faculty 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

37. ITB002 Professional Studies Faculty of Information Technology Faculty of Creative Industries Reduce clutter http://www.yahoo.com/http://www.yahoo.com/: http://www.google.com.au/http://www.google.com.au/

38. ITB002 Professional Studies Faculty of Information Technology Faculty 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

39. ITB002 Professional Studies Faculty of Information Technology Faculty 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

40. ITB002 Professional Studies Faculty of Information Technology Faculty of Creative Industries

41. ITB002 Professional Studies Faculty of Information Technology Faculty 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)

42. ITB002 Professional Studies Faculty of Information Technology Faculty 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

43. ITB002 Professional Studies Faculty of Information Technology Faculty of Creative Industries Form and Line

44. ITB002 Professional Studies Faculty of Information Technology Faculty 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

45. ITB002 Professional Studies Faculty of Information Technology Faculty 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

46. ITB002 Professional Studies Faculty of Information Technology Faculty 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:

47. ITB002 Professional Studies Faculty of Information Technology Faculty of Creative Industries http://www.mediainspiration.com/contents/downloads/wallpapers/largewallpapers/wallpaper.energy.j pg Form and line:

48. ITB002 Professional Studies Faculty of Information Technology Faculty of Creative Industries 3. Font: We can also create an impression or theme through our choice of font

49. ITB002 Professional Studies Faculty of Information Technology Faculty 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 Font:

50. ITB002 Professional Studies Faculty of Information Technology Faculty 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

51. ITB002 Professional Studies Faculty of Information Technology Faculty of Creative Industries Design elements to harness for a site identity: 4. Language

52. ITB002 Professional Studies Faculty of Information Technology Faculty of Creative Industries Compare the use of language on these sites

53. ITB002 Professional Studies Faculty of Information Technology Faculty 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.

54. ITB002 Professional Studies Faculty of Information Technology Faculty 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.

55. ITB002 Professional Studies Faculty of Information Technology Faculty of Creative Industries Menu Bar Universal Navigation Bar Highlighted text Icons Orientation: navigation

56. ITB002 Professional Studies Faculty of Information Technology Faculty 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

57. ITB002 Professional Studies Faculty of Information Technology Faculty 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.

58. ITB002 Professional Studies Faculty of Information Technology Faculty of Creative Industries (Wileman, 1980)

59. ITB002 Professional Studies Faculty of Information Technology Faculty of Creative Industries

60. ITB002 Professional Studies Faculty of Information Technology Faculty of Creative Industries

61. ITB002 Professional Studies Faculty of Information Technology Faculty 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)

62. ITB002 Professional Studies Faculty of Information Technology Faculty 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:

63. ITB002 Professional Studies Faculty of Information Technology Faculty of Creative Industries Simple, symmetrical shapes are most easily recognised Solid shapes appear solid and stable (corporate identity). Closed shapes imply consistency. Gestalt theory:

64. ITB002 Professional Studies Faculty of Information Technology Faculty 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:

65. ITB002 Professional Studies Faculty of Information Technology Faculty of Creative Industries Gestalt theory: Topic 4: Interaction Design (Interface) Topic 4: Interaction Design (Interface) Wayfinding and orientation 1968 Mexico op art 1972 Munich

66. ITB002 Professional Studies Faculty of Information Technology Faculty 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

67. ITB002 Professional Studies Faculty of Information Technology Faculty 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)

68. ITB002 Professional Studies Faculty of Information Technology Faculty of Creative Industries We remember information by grouping similarities and separating differences. Gestalt theory: grouping

69. ITB002 Professional Studies Faculty of Information Technology Faculty of Creative Industries The map of London Underground utilizes these principles of proximity, grouping, similarity, connectedness, and continuity (information design) Gestalt theory: grouping

70. ITB002 Professional Studies Faculty of Information Technology Faculty 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

71. ITB002 Professional Studies Faculty of Information Technology Faculty of Creative Industries Gestalt theory: grouping

72. ITB002 Professional Studies Faculty of Information Technology Faculty of Creative Industries Gestalt theory: grouping Sets of small multiples

73. ITB002 Professional Studies Faculty of Information Technology Faculty of Creative Industries Gestalt theory: grouping Core shape: oval (protection, security) Core approach to design inspired by: company logo And applied to: layout, image frame, icon design) Gestalt principles: grouping, repetition Colour: blue hues (calm, relaxing, consistent) Quality of line: brush stroke (creative, dynamic)

74. ITB002 Professional Studies Faculty of Information Technology Faculty 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.

75. ITB002 Professional Studies Faculty of Information Technology Faculty 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