SCCT2013Integrative Media

Basic Principles of Application Design

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

7.1 Appearance Design

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.

What is visual appearance ?

7.1 Appearance Design

“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”

Why visual appearance design important?

7.1 Appearance 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. ”

Example: Website design

http://satudigit.com

7.1 Appearance 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.

Example: Website design

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.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

7.2 Elements of design Shapes

The external form or appearance of someone or something.

It is an enclosed space, the boundaries of which are defined by other elements of art (i.e.: lines, colours, values, textures, etc.).

Shapes are limited to two dimensions: length and width.

Geometric shapes - circles, rectangles, squares, triangles and so on - have the clear edges one achieves when using tools to create them.

Organic shapes have natural, less well-defined edges (think: an amoeba, or a cloud).

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

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.

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

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.

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.

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.

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

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.

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.

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

7.2 Elements of design

How 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

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

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.

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

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

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

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

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

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”.

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.

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.

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

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_media_art.html

Check out : http://www.webdesignfact.com/2010/10/beautifully-integrated-social-media.html

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

7.7 Technical aspects and problem solving

Choosing appropriate tool: Function Content Hardware Software Performance Interface design Databases Reliability Maintenance