concepts of interface and interaction design

Trang 2

No part of this book may be reproduced or copied in any form or by any means — graphic, electronic or mechanical, including photocopying, recording, taping, or storing in information retrieval system or sent or transferred without the prior written permission of copyright owner Aptech Limited

Trang 3

Preface

This book introduces the user to the fundamentals and principles of user, Web, and visual interface design The ARENA Design team has designed this course keeping in mind that motivation coupled with relevant training and methodology can bring out the best The team will be glad to receive your feedback, suggestions, and recommendations for improvement of the book

ARENA Design Team

Trang 5

Table of Contents Table of Contents User Interface DeSỈQI <5 << HH ni HH nh Hi 1 1 001.1 1 01-1086 / 81(24-is-189.-‹s rann 1 ®¿-Ic-[ei21051/e86)01//-0810i-i:-ie-88/- AB nnnnn 1 Building Blocks of 0 j1 208i (2ii-ie-88 0s cAnnn 3 SUITITI[ý - - - 2E 222512222511 15211 155231155 111111 1115211111 TT TT TT TT TH cv và 5 =2 nh 5 5

Web Page Design - - <5 sọ nọ HH HH HH Họ nh nh kh nh hi vế 7

Trang 7

User Interface Design Learning Outcomes In this session, you will learn to -

> Describe user interface design

> Explain the characteristics of Web interface design

> Explain visual interface design and the elements that contribute in making the design effective

In earlier times, Web interface design focused on navigation and presentation of information However, in recent years, Web interface design is referred to as an application-focused interface It is a matter of balancing the structure and relationship of menus, content, and other linked documents or graphics It focuses on creating a hierarchy of menus that is natural, well-structured, easy to use, and truthful

(2

4.4 | What is User Interface Design? a

User interface design is the design of applications and Web sites; it is the interaction between the application and the user and focuses on the working and selection of tools that make the interface user-friendly

According to Jef Raskin, the interface is product 1 Hence, for an effective design, the interaction between the user and the application should be clear and a design should be worked upon in the early stages of development

[iva] Characteristics of Web Interface Design A

Before deciding on the interface design, you should be able to

answer the following questions: Aesthetics

> Where will it be used - the Web or any other application?

> What makes a good user interface? NY | 4

> Whatarethecharacteristics that should be incorporated

to make a design effective? Characteristics of

On a macro level, any good interface should have the

Trang 8

Concepts of Interface and Interaction Design Designs should be clear and include the following elements: > Visual elements All new website > Metaphors KH Tà bits > Functions

> Words and text

Example: Snapshot of the Podcast homepage that has an icon- based navigation system across Refer to Figure 1.2

1.2.2 Conciseness

Conciseness is a vital ingredient in designing an interface When information presented on screen is concise, users do not have to

spend a lot of time reading text Home Glegal ({C$% (24XHTML = Blog Thanks gh Macle ona Mac

Example: The label, ‘Search Here ’, and the magnifying glass

icon indicate the purpose of the text box Refer to Figure 1.3 Figure 1.2: Podshop homepage

(Image courtesy: http://podshop.com/)

1.2.3 Familiarity

Interfaces should be designed in such a manner that they can be naturally and instinctively comprehended and should consist of elements that are familiar When something is familiar, you know how it behaves, and you also know what to expect Identify things that

are familiar to your users and integrate them into your user interface Figure 1.3: Example of conciseness iat lela 9 Widgets

Example: Folder-type tabs are commonly used to navigate on

Web sites and applications This familiar appearance makes it easy for the user to understand its working Refer to Figure 1.4 Figure 1.4: Example of familiarity 1.2.4 Responsiveness Responsiveness = Good Speed + Good Feedback ® Improves user experience and reduces the waiting hours

Trang 9

User Interface Design

Example: A progress bar is a good option for

depicting a page that loads gradually After all Progress Bar

displayed at once Refer to Figure 1.5

Figure 1.5: Example of responsiveness

1.2.5 Consistency

Consistency allows users to recognize and comprehend patterns It enables users to apply this knowledge while working with scenes that have similar patterns

Example: Refer to Figure 1.6 In the figure, the user interface, icons, navigation system, background, speech bubbles, and peapod graphics appear at

the same place on each page of the Web site

1.2.6 Aesthetics Figure 1.6: Example of consistency

An interface need not attract audiences A good (Image courtesy: http://podshop.com/)

interface that meets the users’ requirements can create the best experience for your

application @)‹ 3 googl.coin Flix

Ve Favorites | 8 coogle

Example: Google is known for its

minimalist interfaces It has subtle Figure 1.7: Example of aesthetics

gradients and pixel thin highlights that help in making the icons very evident and focuses on function over form Refer to Figure 1.7

(Image courtesy: www.google.co.in/)

[iiss] Building Blocks of Visual Interface Design :

Visual interface design is the process of

representing the interface visually and = ™ |

communicating its meaning to the audience t “ˆ

Visuals are created by combining the core Home Blog Chat E-Mail Download

elements in a meaningful manner They are primarily used for communication purposes

Name:

The essential elements of visual interface design

are as follows: Address:

> Layout and_ positioning: Layout

provides structure, defines hierarchy and oe =

relationships, and positioning improves : _ =

the flow Refer to Figure 1.8 :

» Shape and size: Shape differentiates Figure 1.8: Example of layout and positioning

elements; size indicates importance - bigger

the size, easier the usage, and better interface efficiency Size also helps create contrast Refer to Figures 1.9 and 1.10 In Figure 1.9, the Web site uses a huge headline with contrasting colors to catch the users’ attention Similarly, in Figure 1.10, the ‘Join Now’ button that has a white outline emphasizes on the action

Trang 10

Concepts of Interface and Interaction Design

and also throws light on the icons and accompanying JR

text

> Color: Colors express meanings and are used to

divide the page into sections and highlight important _ DIGITAL MMGNAI3CHY

elements Colors draw attention of the user when \ / DIGITAL CREATIVE STUDIO

used in contrast with the background Refer to

Figure 1.11 DIGIUURU IS THE SH0WCASE 0F CREATIVE DIRECT0R CRAIU JAMIESON

> Contrast: Differentiates between the most important and least important elements of an interface Refer

to Figure 1.11 where emotions are brought out with Figure 1.9: Example of contrasting colors and

the use of a colorful green background typography

> Texture: Creates a realistic effect and throws lighton _—_ (Image courtesy: http://digiguru.co.za/)

the aesthetic qualities Refer to Figure 1.12 where reddish hues of the wooden texture are used to merge with the photograph in the background It gives a sense of warm and welcoming feeling to the site

> Directattention: Inadditionto color, size, and other factors, animations

when used in combination with Figure 1.10: Example of shape and typography

colors and contrast help gather attention

(Image courtesy: http://www.storenvy.com/) > Icons: Makes the interface visually appealing Refer to Figure 1.13 Piss f emotiiiš AB0UTTHISSITE PIM ae | kh PUTTS ps e ehh (ustiostum) fF aa®-

Figure 1.11: Example of contrast

Figure 1.12: Example of texture

(Image courtesy: http://www.emotionslive.co.uk/)

Trang 11

Er Summary SA

In this session, User Interface Design, you learned that:

> User interface design is the process of creating design based on the users experience and interaction > The factors that contribute in making a good Web page design are: e Clarity e Conciseness e Familiarity e Responsiveness e Consistency e Aesthetics

> Visual interface design is the process of designing the physical representation of an interface It aims at helping users understand the working of an application

> The essential elements of visual interface design include:

e Layout and positioning

e Shape and size e Color e Contrast e Texture e Direct attention e Icons 4.5 | Exercise a 1 Before designing an interface it is essential to understand what makes a good interface a True b False 2 Aesthetics allow users to recognize and comprehend patterns a True b False 3 make the interface visually appealing a Icons b Colors c Animations d Tables 4 From the following, identify the option that is an essential element of visual interface design a Clarity b Conciseness c Aesthetics d Texture

5 Responsiveness is a combination of and

a Clarity, Aesthetics b Good speed, Good feedback

c Aesthetics, Conciseness d Layout, Positioning

Trang 13

Web Page Design Learning Outcomes In this session, you will learn to -

> Explain the importance of a good Web site design

> Explain the components that contribute in creating a good Web site design > Explain the grid theory

> Give examples of the Rule of Thirds

A good design is subjective and depends on various factors

[2a] Defining Good Design (2

2.1.1 Perspectives of Good Design

Design is about communication Usability and aesthetics are the two perspectives of any design Refer to Figure 2.1

2.1.2 Aspects of a Good Design

A Web site should be self-contained and work cohesively, so that users are:

> Pleased by the design and drawn to the content > Able to navigate easily and intuitively

> Able to recognize each page as belonging to the site

mu Users are pleased by the design and drawn to the

content

Figure 2.1: Perspectives of design

A good interface should navigate well and the “ou pec 9

design should act as a link between the interface

and the content Refer to Figure 2.2 that depicts a hee wo

combination of aesthetics and usability Š/2. .⁄<« Inc HOME EXPERIENCE SERVICES RESOURCES CONTACT eae m Users are able to navigate easily and aq intuitively “

The main navigational elements should be aie ` rN obese

clear and descriptive Secondary navigational Vite ba

elements, search fields, and outgoing links should

be less prominent so that users focus on relevant Figure 2.2: Image depicting a combination of aes-

information and at the same time are aware where to thetics and usability

look when they need to move to other content Refer to Figure 2.3

N

Trang 14

m Users recognize each page as belonging to the site

A common theme across all pages amidst the various content and layout helps in holding the design together Refer to Figure 2.3, where, in addition to intuitive navigation, a common theme has been used across all the pages RORTHCOURS my Container NÑORTHCOL Content White Space Figure 2.3: Image depicting an example of intuitive navigation Figure 2.4: Components of Web page design 4 [22] Components of Web Page Design -

Design components help in designing and deciding the vital options for the company and the Web site Refer to Figure 2.4 for the various design components Refer to Table 2.1 to take a look at the description of each design component Container Contains the various elements of a Web page and can have either fixed or flexible width Logos Identity elements that increase brand recognition and are mostly placed at the top of the page

Navigation Elements that help the user navigate through the pages with ease

Content The focal point of any design

Footer The element that generally occupies the bottom of the Web page and contains

information for copyright, legal, and contact, and other links to the main sections

Sidebar Optional element that contains secondary information and can be aligned on either

side of the page

White space The negative space that helps the design create balance and unity

Table 2.1: Design components and their description Note

For Web sites that use horizontal and vertical navigation, the sidebar is often replaced with the vertical navigation element

Trang 15

Web Page Design

El Grid Theory (2)

2.3.1 The Golden Ratio - Overview

Grids refer to a network of X and Y pixels They are used for the placement and alignment of visual objects on the Web page, which in turn brings visual structure and balance

to the design Grids also provide an organized methodology for planning systematic layouts

The Grid theory (also known as the Golden Ratio or the Divine Proportion) dates back to the era of Pythagoras, who alternatively refers to this theory as the Golden Ratio Pythagoras and his followers defined numbers as ratios than single units According to this theory, a line can be cut by dividing its length by 1.62

This theory is also useful while designing Web pages When used in design, it is observed that compositions divided by proportionate lines have an aesthetic appeal The Golden

Ratio when applied to posters, layouts, and brochures Figure 2.5: Example of the Rule of Thirds provide logical guidelines that are attractive and have a

unique appeal

(Image courtesy: http://demandware.com/) 2.3.2 The Rule of Thirds

The Rule of thirds is a simplified version of the Golden Ratio In the Golden Ratio, a line is bisected into two sections; whereas, in the Rule of Thirds, a line is bisected into thirds Refer to Figure 2.5 for an example of the Rule of Thirds

Ey Summary @

In this session, Web Page Design, you learned that:

> Design is about communication and revolves around the two aspects - usability and aesthetics

> For adesign to be effective, it should be pleasing, should have navigational elements that can be accessed with ease, and should have an interface that appears familiar

> Design components play a vital role in designing and deciding the vital options for the Web site of the company

> Grids are a network of X and Y pixels They are used for the placement and alignment of visual elements on the screen The Rule of thirds is a simplified version of the Grid theory

> In the Grid theory, a line is bisected into two sections; whereas, in the Rule of Thirds, it is bisected into thirds

Trang 16

Ei Exercise

1 Efficiency and functionality are the two elements that contribute an aesthetic value to the design

a True b False

2 Acommon theme across pages

a Holds pages together b Distracts audiences

c Is agood way to include images d Reflects the capability of the designer

3 The Grid theory is alternatively referred to as the

a Rule of thirds b Design components

c Divine proportion d Pythagoras theory

Trang 17

Principles of Web Interface, Web Page Layouts, and Usability 3 Learning Outcomes In this session, you will learn to -

> Explain the importance of design principles while designing a Web site Differentiate between fixed and liquid width layouts

List the pros of cons of fixed and liquid widths Describe the layouts used for Web page designing V VY VY Explain the importance of usability testing and interface design

Web interface design involves the use of various principles, which when used effectively help in delivering an effective product In addition to the principles, there are various other factors that have to be considered while designing Web pages

(3)

3.4 | Principles of Web Interface t

The principles of Web interface play a major role in designing Web sites Refer to Table 3.1 to view the principles and their description

Principles of Web Interface Description

Know your user Users are the cornerstone of all marketing Hence, it is important to understand

the demographics of the users and their intention behind accessing the Web site

Do not make users think Web page design should be crisp, clear, and self-explanatory Steve Krug’s law

of usability states that the Web page should be obvious and self-explanatory

Focus users’ attention A good design attracts audiences Moderate use of visual elements and easy

navigation makes the design effective

Structure A user interface should be designed with a purpose and all information should

be sorted in a clear and organized manner

Simplicity Designs should be simple, timed, and provide accurate information It should

be free of unnecessary visual elements that will distract attention from the key content and navigation Visual information should focus on and communicate relevant information

White space According to Simon’s law, “hierarchical structures reduce complexity — the

better you manage to provide users with a sense of visual hierarchy, the easier your content will be to perceive.”

Trang 18

Principles of Web Interface Description

Visible language Aaron Marcus states that, “organize, economize, and communicate are

the three fundamental principles involved in the use of the so-called ‘visual language’, which in other words is the content users see on screen.”

Key elements:

> Organize: Consistency, screen layouts, relationships, and

navigability

> Economize: Simplicity, clarity, distinctiveness, and emphasis > Communicate: Maintain balance in legibility, readability, typography,

symbolism, multiple views, color, and texture

Clear navigation Navigation should be clear with consistent use of icons, graphic identity

schemes, and such other elements Information should be available with ease

Key elements:

> Placement of the permanent navigation link should be apart from the content

> Use of colors, tones, and shapes to differentiate navigation > Emphasizing the navigational elements

> Clarity in text

Direct access Design should be well organized such that the content is easily accessible and

not detached from the main menu pages of the Web site

Design conventions Conventional designs help reduce the learning curve, gain the users trust and

confidence, and prove the designer’s credibility Elements like the header and footer together make a familiar starting point for Web interface designs Adopting these conventions while designing Web pages help adapt users

focus on the content, features, or products

Table 3.1: Principles of Web interface

1H Web Page Layout (2)

3.2.1 Fixed and Liquid Widths - Overview

Web pages are designed either in fixed width layout or liquid width layout

a Fixed width layout

> The width is fixed and is set with a specific numeric value

> These layouts allow direct control over the appearance of the page

> These layouts allow designers to make minute adjustments to attain consistency

Refer to Figures 3.1 and 3.2 As depicted in the figures, the width of the Web page remains unchanged even when the size of the Web browser is reduced

Trang 19

Principles of Web Interface, Web Page Layouts, and Usability

as Liquid width layout >

> >

It depends on the width of the viewer’s browser These layouts are best suited for Web sites with a

The width is flexible and stretches to occupy the width of the entire browser

lot of information that has to be portrayed in very little space It helps in maintaining consistency in size and page widths

Refer to Figures 3.3 and 3.4 As depicted in the figures, size of the browser

ee ee ee eee eee anes IW vow: redenvelgpe.com -¢ 'WheiblePeN *Đ Google â) Buenos Aires Photogra S Shabdkosh: aft gar http: //services.osourc Login Page redENVELOPE s> 1" tai SH0P 6 DAYS - DEALS 50% ag Pa] mem DAILY DEALS! shop todays deals read more + Figure 3.1: Fixed width layout with the browser maximized

(Image courtesy: http://www.redenvelope.com/)

‘Amazon.com Camera, Photo & Video: Digital cameras, Digital SLAs, and lenses from Canon, Nikon, Sony & other leading brands, camcorders, shoot EIE)SI Ble Edt View History Bookmarks Tbols Help: a are « a [ whzbleFeN *Ñ coogle ( Buenos Ares Photogra S Shabdkosh: sft grx htfp;//services.osourc, OS (ey Niranjan’s Amazon.com | (Gf Today's Deals Gifts & Wish Lists | Gift Cards Search ‘All lectronies _— - -e] (3- 2) L2 togn Page amazoncom — Si auc [camera & Photo Brands | ect Salers | DigtalSLRe Lenses | Port-and Shects

Camera Deals Store eo

Big Deals on Cameras, Camcorders, and more »s:sssow i

HotidayDeats ondotat ta Check out Camera, Photo & Video Free Memory Card and HORI Cable from nerosscs vn Soert Power For aimed tine, purchase a

Browse Our Camera & Photo Lightning Deals 2 qualifying Canon Powershot

card and mini-HDMI cable at no additional charge when you buy from Amazon.com > Leam more

digital camera with HO video

great pricas far holiday gifting

Like us on Facebook fy a att Soy pa Digtal Upto $160 Gt on Seect Sony Lenses SLR and Get Save up to $100 on select

Sony lenses when you buy from amazon.com

‘Through November 29, buy 2 qualifying Sony digital SLR and

BLACK Y

mm Electronics >toprow

Black Friday Week Deals

Browse Camera, Photo & Video Tổ CỔ ni

the width of the Web page changes depending on the

RedEnvelope Official fe - Anniversary, Birthday, & Personalized Gifts - Mozilla Firefox I=ll3l

Fie Edt View History Bookmarks Tools Help

zs

ie redenvelope.com wa

'WhizblePBN “4 Google ©) Buenos Aires Photogra S Shabdkosh: ai gra http://services.osourc > redENVELOPE search > catalog radio SH0P 6 DAYS -: DEALS "ND, ' oR) Peer 1g Figure 3.2: Fixed width layout with the browser size changed

(Image courtesy: http://www.redenvelope.com/)

Amazon.com Camera, Photo & Video: Digital cameras, Digital SLRs, and lenses from Canon, N

File Edt View History Bookmarks Tools Help \@! RedEnvelope Official Site - Anniversary, ¢ a ° Cano © WhizblePBN ›*Š Google (3 Buenos Ares Photpgra S Shabdkosh: gì ees Cm om @ Amazon.com Camera, Photo & Video: Dig | 3- ⁄ amazon.com/Camera- anon-Sony/t Fy + Ct amazon.com — DiaISUR a ees

AiBeonn uma | tutteRr Camera Deals Store big Dealson Cameras, Camcorders and more ese

Camera, Photo & Video fn Am cng Ca om

Browse Our Camera & Photo Lightning Deals

a’ ‘eich 122 eens) ‘ura cunning son; pt Cit SL ana Gxt Up too omen Sl Coming Soon!

Deel tants: 12:46:46

FT to Pe LTS

mm Electronics vases Black Friday Week Deals

Camera, Photo & Video < Figure 3.3: Liquid width layout with the browser maximized

(Image courtesy: http:/www.amazon.com/)

Figure 3.4: Liquid width layout with the browser size changed

(Image courtesy: http://www.amazon.com/)

Trang 20

3.2.2 Fixed and Liquid Widths - Pros and Cons

Both, fixed width and liquid width layouts have its own pros and cons Refer to Table 3.2 Pros Cons

Fixed width > Designer has more control > Can appear dwarfed in large

over the appearance of the browser windows

image that Is floated within > Takes control away from the

the content user

> Allows for planned white space

> Narrower text blocks

improve readability

Liquid width > Adapts to most screen > Text spans across a wide

resolutions and devices distance, hence becomes

> Reduces the need to scroll difficult to read

> More difficult to execute successfully

> Can lead to a lot of white space

Table 3.2: Pros and cons of fixed and liquid widths (aÀ

[as] Different Types of Layouts

There are various layouts that can be used to represent content However, the most commonly used layouts that make good sense are the left- column layout, right-column layout, three-column layout, expansive footer navigation layout, and

three columns with content first layout BETO

Black Estate is a remarkable

place for wine

a Left-column layout

The left-column layout is the most commonly A oe |

used and comfortable format for designers p \

and users This is because, left navigation is V7

faster and well-organized as compared to any other format It helps users scan through content with ease Usually, people have a tendency to

scan through content in a vertical fashion This is facilitated with the left column navigation However, a major drawback of this kind of navigation is that it can lack creativity Refer to Figure 3.5

Figure 3.5: Example of left-column layout (Image courtesy: http://www blackestate.co.nz/)

m= Right-column layout

Right-column layout is effective when emphasis has to be thrown on the content visually This kind of navigation is useful in designing a Web site that appears different and is commonly used for news sites, social networks, and Web sites Refer to Figure 3.6

Trang 21

Principles of Web Interface, Web Page Layouts, and Usability a Three-column layout

Three-column layout, as the name suggests, has three columns with a wider center column This kind of navigation is best used when there is either a lot of navigation, or short bits of content, or lot of advertisements to display The most important thing to be borne in mind while designing such a layout is that it is essential to include white space, so that the layout does not appear cluttered Refer to Figure 3.7

mu Expansive footer layout

Unlike earlier times, where the footer was used for main links and copyright notice, nowadays elements like blogrolls, linkrolls, and flickr badges are becoming a part of this section Recently, designers have also started including additional navigational elements and content to some extent on the footer Refer to Figure 3.8 = Three columns with content first layout

Many Web sites are designed in a three columnar format where the content appears first - at the far left of the display This placement of content helps in easy transition Refer to Figure 3.9

Keep it short & sweet é "=" LORD LERELY ith

w CN tome @ asournistonnsie ADvENTURESTHUSTAR @ DONATE @ avouTMRraxron [LOIS

Fat-Man Collective Ga các 02627 eee 9® SN rs LORDSHIP

\k j2 s0 S00 LIKELY VS ELEMENTAL khác nea cu tesosoaose67e89‹ 2 We 6 Thinkers Designers Developers

We are a lovely bunch of Digital Creatives i ae an a

We are based in Barcelona & London Nhu

We have all sorts of clients HN

\Ve speak Espaiiol Ms

he = ASA RICH, powerful, incredibly handsome and

Figure 3.7: Example of three-column layout

Figure 3.6: Example of right-column layout (Image courtesy: http://www.lordlikely.com)

(Image courtesy: http://www.fat-man-collective

com)

Meet Django

Django ts a high-level Python Web framework that

encourages rapid development and clean, pragmatic design

Oerelcced by a fast-monng oninw-nems cosrabon, O}ang0 was intensive deadings of 2 leoc£ Web Se an ) ` IN 6 = IN À\ National Geographic Expeditions =) if IN) Fe ‘Le

SINCE 1999, WE'VE BEEN MAKING WEB AND MOBILE STUFF FOR START-UPS, NON-PROFITS, ANO BIG BRANDS

The Django framework

® FourLabs 40st Sealy Back Wy Yur Ota ae meee

Figure 3.9: Example of three-column with content

Figure 3.8: Example of expansive footer first

(Image courtesy: http:/www.viget.com/) (Image courtesy: http://www.djangoproject.com/)

Trang 22

3.4 | Usability @

Interface design and usability testing are interrelated and are the vital ingredients of any Web page design Usability testing measures if the Web site is user-centric and is conducted with the aim of improving the Web site design On conducting a Web site test, it provides users with relevant information, and also helps deliver interfaces that are void of cumbersome graphics and images

A user-centric design aims at making the Web users’ experience productive, efficient, pleasing, and stress free In order to achieve these goals, it is essential to put the user in control and respect their skill level It is also important to be consistent with the working of the Web site and organize information in a logical manner such that it is easy to follow and interpret

3.5 | Summary Ge

In this session, Principles of Web Interface, Web Page Layouts, and Usability, you learned that:

> The principles of Web interface design play a major role in designing Web sites Each of these principles have a specific role to play

> Ona broad level, Web pages are designed either using fixed width or liquid width In fixed width layouts, the width is fixed and is set with a specific value In liquid width layout, the width is flexible and stretches to occupy the width of the entire browser Each of these layouts have its own pros and cons

> In addition to fixed width and liquid width, left-column, right-column, three-column, expansive footer navigation, and three columns with content first layouts can be used to design Web pages EG Exercise Ga 1 Hierarchical structures increase complexity a True b False 2 helps reduce clutter and segregates content with ease a Icons b Tables

c White space d Images

3 Organize, , and communicate are the key principles involved in the use of visual language

a Visualize b Tabularize

c Economize d Structurize

4 The layout that stretches to cover the entire width of the browser, in spite of the browser size being changed, is referred to as

a Fixed width layout b Liquid width layout

c Left-column layout d Expansive footer navigation

5 The expansive footer navigation is the most commonly used by Web site designers

a True b False

Trang 23

Glossary A Aesthetics The study of rules and principles of art Clarity Clearness of appearance Conciseness To express in a clear and succinct manner F

Fixed width layouts

Layouts with a fixed width that are set with a specific numeric value G Grid A framework of crisscrossed bars | Interface

The layout of an application’s graphic or textual controls that is in conjunction with the manner in which the application responds to the user activity

L

Layout

The art of arranging graphic matter on a Web page Liquid width layouts

Layouts with flexible widths that stretches to fit the end users’ Web browser

Trang 24

R

Rule of Thirds

It is a rule of thumb in visual arts According to this rule, an image should be imagined as divided into nine equal parts by two equally spaced horizontal and vertical lines, where the most important elements are placed along these lines or at their intersections

S

Staging

The proper positioning of a character on the background using positive and negative shapes

U

Design of applications and Web sites Usability testing

A technique used to evaluate a product by testing it on the users

v

Visual interface design

A process of designing the physical representation of an interface

W

Web interface design

Interface design associated with the development of Web pages

Định dạng
Số trang	30
Dung lượng	11,67 MB