1. SCCT2013Integrative Media Basic Principles of Application Design
2. Topics:7.1 Appearance design7.2 Elements of design7.3 Layout and flow7.4 Guideline for interactive design7.5 Interaction design7.6 Integration of media elements7.7 Technical aspects and problem solving
3. 7.1 Appearance DesignWhat is visual appearance ? In the design of media, either for a web-based or offline product, its appearance must be able to capture the users’ attention and should be good enough to engage them.
4. 7.1 Appearance DesignWhy visual appearancedesign important? “Great visual design sets a product apart. It creates confidence, engenders trust and encourages people to connect with your product. For these reasons, lucid, elegant and engaging visual design has always been central to every product to be created”
5. 7.1 Appearance DesignExample: Website design “Website design should be visually interesting. Website design can reflect a specific product, describe the character of the company, as well as personal visualization . The first thing that visitors caught when arriving at some website is the website design (layout, images, and other design elements), visitors do not read the content first, instead they scan the entire page and then decide to continue explore the content or leave the website. Especially for the first-timer visitors who visit a website, the first impression they captured would be decisive, whether the website is worth visiting again or not. ” http://satudigit.com
6. 7.1 Appearance DesignExample: Website design Website impression can be constructed by using visual design, website can be built into various characters. It is important to determine the proper character, which is in accordance with the mission and background of the website. As a simple illustration, website for finance company should give the impression of professional, safe, and at the same time can strengthen the trust of their visitors. Personal websites, or personal blogs, can be displayed more relaxed, informal, warm, not too rigid and demanding, so that visitors can feel a personal closeness to the website owner. Personal website can be showing the impression of cheerful, active and dynamic, or it may be mysterious, or other, depending on the personality you want to display to visitors.http://satudigit.com
7. 7.2 Elements of design Lines A line is a collection of points along a straight path that goes on and on in opposite directions. A line has no endpoints. Lines could be used to create mood Lines could also be used to create contour and gesture
8. 7.2 Elements of design Shapes The external form or Shapes are limited to appearance of someone or two dimensions: something. length and width. It is an enclosed space, the Geometric shapes - boundaries of which are circles, rectangles, defined by other elements squares, triangles of art (i.e.: lines, colours, and so on - have the values, textures, etc.). clear edges one achieves when using tools to create them. Organic shapes have natural, less well- defined edges (think: an amoeba, or a cloud).
9. 7.2 Elements of design Texture The feel or shape of a surface or substance; the smoothness, roughness, softness, etc. of something. Texture can be created from manipulation of different color tones
10. 7.2 Elements of design Colour Color is very influential in design. Each color has its own character, and describe a particular atmosphere. Color scheme (color combination) in the design should be able to represent the desired character. Excessive color combinations will distract users from the content.
11. 7.2 Elements of design Colour Scheme In colour theory, a colour scheme is the choice of colours used in design for a range of media. Colour schemes are used to create style and appeal. Colours that create an aesthetic feeling when used together will commonly accompany each other in colour schemes. Monochromatic: the use of white and black to create ranges of shade and tint
12. 7.2 Elements of design Complementary: A basic colour scheme will use two colours that look appealing together. More advanced colour schemes involve several colours in combination, usually based around a single colour; for example, text with such colours as red, yellow, orange and light blue arranged together on a black background in a magazine article. Analogous: Colour schemes can also contain different shades of a single colour; for example, a colour scheme that mixes different shades of green, ranging from very light (almost white) to very dark. Triadic: Combination of primer colour blue, red and green.
13. 7.2 Elements of design Use of the phrase colour scheme may also and commonly does refer to choice and use of colours used outside typical aesthetic media and context, although may still be used for purely aesthetic effect as well as for purely practical reasons. This most typically refers to colour patterns and designs as seen on vehicles, particularly those used in the military when concerning colour patterns and designs used for identification of friend or foe, identification of specific military units, or as camouflage.
14. 7.2 Elements of design Space Space can be used to both separate and connect elements in a design. Wider spaces separate elements from each other and narrower spaces connect elements to reveal relationships between them. Overlapping elements maximizes their relationship. By controlling and shaping space in our designs, we create rhythm, direction, and motion. We create design flow through our use of space.
15. 7.2 Elements of design Space can be used to convey a variety of meanings, some of which include quality – wealth, luxury solitude – abandonment, loneliness cleanliness – bleached, washed purity – unsullied, unadulterated spirituality – sacredness, connection to something greater openness – distance, infinity calmness – placidity, inaction
16. 7.2 Elements of design Whitespace does three main things in a design. Creates groupings of elements Creates emphasis and hierarchy Improves legibility Consistent use of white space across pages connects those pages. Space is layout. Space can also show difference. Sections within site can maintain consistent space within the section and differ from other sections.
17. 7.2 Elements of design Whitespace gives a place for the eye to rest, which it needs in order to absorb the message you’re trying to communicate. It’s a visual cue that there’s a break in the content or that the content is finished. Whitespace makes your page and site easier to navigate. Consistent use of negative space is a hallmark of professional design. Look at any design that strikes you as amateur. I can almost guarantee little thought will have been given to the space within the design.
18. 7.2 Elements of design Negative space can be active or passive. When the space in a design is symmetrically balanced the space becomes passive. It’s static and formal and for the most part boring. When negative space is asymmetrically balanced it becomes active. It’s dynamic and modern and interesting.Further reading: http://webdesign.about.com/od/webdesignbasics/a/whitespace.htm
19. 7.2 Elements of designHow to Use Space in Design Space in web design can be divided into to types. Micro whitespace – is the space within elements, such as the margins surrounding text and the leading between lines of text or the spaces between the individual characters. Macro whitespace – is the space between major elements in your design. These spaces tend to be larger and are usually immediately apparent
20. 7.3 Layout and Flow What is Layout? “Layout is the design and placement of visual elements on a page” (Graham, 2005) KISS The more stuff being put in the layout, the more complicated the task will be Arrange Layout as simple as possible, minimizing elements that are not important, maximize whitespace (distance between elements). Website with good layout, easy to navigate, visitors are easy to find something, and quickly find what they want. Further reading: http://www.smashingmagazine.com/2008/09/03/40-creative-design-layouts-getting-out-of-the-box/ http://webdesignledger.com/inspiration/48-examples-of-excellent-layout-in-web-design
21. 7.3 Layout and Flow What is Design Flow? Flow is the way the eye moves or is led through a composition. While most of us will naturally move from one element to another in our own fashion, a designer can control to some extent where the eye moves next. By following basic design principles the design can help shape the message and through the use of visuals, the content can be more inviting to read.
22. 7.3 Layout and Flow Graham (2002) defines flow in design as having two components: Verbal Flow – the path taken when reading text on the page Visual Flow – the path taken when looking at images and graphics on the page Good flow can lead the eye from element to element and present information in the order you want it to be seen. That will aid the reader in understanding the information presented and allow you to better influence how your message is perceived. http://www.vanseodesign.com
23. 7.3 Layout and Flow How to Improve Verbal Flow Since verbal design flow refers to reading text, you can improve flow by making your copy easier to read. When thinking about verbal flow understand where your reader will naturally read next. To make copy easier to read you can: Develop a consistent typographic style across your site – Be consistent with your use of font size, face, and color Choose a font for your copy that is easy to read – Your copy is not the place for a fancy font Place headings close to the text they refer to, captions close to images. Organize your text elements so it’s clear what goes with what Watch the width of columns – Don’t make columns to wide or too narrow as each hinders reading Develop a vertical rhythm in your type – Use consistent line heights and vertical margins and paddings http://www.vanseodesign.com
24. 7.3 Layout and Flow How to Improve Visual Flow Assuming a left to right reading direction as in English, the natural visual flow for people will be a backwards “S” pattern. You can alter that natural pattern with the images you use, where you place those images, and how images, graphics, and text are mixed on the page. Many images have a direction. An arrow, a hand pointing, a face looking in one direction. Your eye will speed up or slow down depending on the direction it was moving when it fell on the image. If the eye is moving to the right and then comes upon a face looking right it will continue to move right slightly faster. If the same eye encounters a face looking left it will slow down or even reverse direction to the left. You can use images to control or redirect the visual path the eye is taking. http://www.vanseodesign.com
25. 7.3 Layout and Flow Vertical or horizontal lines can stop the eye right in it’s tracks. Use the direction of images to control the the speed and direction of flow Create barriers when you want to reverse the eyes direction Create open paths to allow easy movement through your design Use contrasting colors and shapes to pull the eye
26. 7.3 Layout and Flow Design Flow Across Your Site Flow exists on the single page as well as across site. Low can be strengthen flow across site by being consistent from page to page. Human beings seek patterns. Design repetition will help strengthen the general flow when viewing your site. A consistent typographic style and a grid-based layout help maintain the pattern and strengthen the flow of your site. Designing repetition into pages and across site will aid flow. Changing the layout from one page to the next will impede flow. http://www.vanseodesign.com
27. 7.4 Interaction design What is Interaction Design? is "the practice of designing interactive digital products, environments, systems, and services." “Interaction design defines the structure and behavior of interactive systems”. heavily focused on satisfying the needs and desires of the people who will use the product. The practice typically centers on “embedding information technology into ambient social complexities of the physical world”.
28. 7.5 Guideline for interaction design Simple and natural dialogue. No irrelevant information. Natural and logical sequence. Speak the user’s language. Rather than system-oriented terms. Minimize the user’s memory load. From one part of the dialogue to another. Provide context clues, help facilities.
29. 7.5 Guideline for interaction design Be consistent: In use of words, phrases. In required user actions. Across subsystems. Provide feedback within a reasonable time. Provide clearly marked exits. To cancel an action. To "undo" an action.
30. 7.5 Guideline for interaction design Provide shortcuts for experienced users. Provide good error messages: Defensive (non-criticizing). Precise. Constructive. Error prevention: Don’t put user in situation where an error can be made.Check out: http://it.toolbox.com/blogs/enterprise-solutions/gui-screen-design-checklist-20426
31. 7.6 Integration of media elements Integration of media elements requires the following steps: Planning and organizing information Storyboarding Acquiring & preparation of media Integrating the media elements Further reading: http://resources.edb.gov.hk/com-lit/it04/text_unit08.htm http://www.youthmediareporter.org/2009/08/integrating_elements_med ia_art.html Check out : http://www.webdesignfact.com/2010/10/beautifully-integrated-social-media.html
32. 7.7 Technical aspects and problem solving Technical aspects: Need to understand appropriate software or authoring tool to be used. Critical elements: Tools Product Designer/Developer Users
33. 7.7 Technical aspects and problem solving Choosing appropriate tool: Function Content Hardware Software Performance Interface design Databases Reliability Maintenance