32
Visually Pleasing Composition Ms. Rishu Bhalla Lecturer,CSE Lecture no:15

HCI_Visually Pleasing Composition

  • Upload
    anik

  • View
    488

  • Download
    1

Embed Size (px)

DESCRIPTION

— Balance— Symmetry— Regularity— Predictability— Sequentiality— Economy— Unity— Proportion— Simplicity— Groupings

Citation preview

Page 1: HCI_Visually Pleasing Composition

Visually Pleasing Composition

Ms. Rishu Bhalla

Lecturer,CSE

Lecture no:15

Page 2: HCI_Visually Pleasing Composition

Contents

Recapitulation

Objective

Topic to be covered

Class Exercise

Summarization

Page 3: HCI_Visually Pleasing Composition

Recapitulation

Interface Design Goals

Screen Meaning and Purpose

Organizing Screen Elements Clearly and Meaningfully

Ordering of Screen Data and Content

Screen Navigation and Flow

Page 4: HCI_Visually Pleasing Composition

Objective

To study the qualitiesof Visually Pleasing Compositionin order to understand the principlesof good screen design as a designerin a more effective manner.

Page 5: HCI_Visually Pleasing Composition

Introduction

A visually pleasing composition draws attention subliminally, conveying a positive message clearly and quickly.

A lack of visually pleasing composition is disorienting, obscures the intent and meaning, slows one down and confuses one.

A design communicates to the user nonverbally but quite powerfully.

Page 6: HCI_Visually Pleasing Composition

Cont.....

The qualities that helps a design make visually pleasing includes Balance, Symmetry, Regularity, Predictability, Sequentiality, Economy, Unity, Proportion, Simplicity and Grouping.

Page 7: HCI_Visually Pleasing Composition

What does the two images suggest?

Page 8: HCI_Visually Pleasing Composition

Balance

Instability Balance (Stability)

Page 9: HCI_Visually Pleasing Composition

Create equalbalance by providingan equal weight ofscreen elements leftand right, top andbottom.

Page 10: HCI_Visually Pleasing Composition

What is common in these images?

Page 11: HCI_Visually Pleasing Composition

Symmetry

Page 12: HCI_Visually Pleasing Composition

Create symmetry byreplicating elementsleft and right of thescreen centerline.

Page 13: HCI_Visually Pleasing Composition

Compare the two images....

Page 14: HCI_Visually Pleasing Composition

Regularity vs Irregularity

Page 15: HCI_Visually Pleasing Composition

Regularity

Create regularity by establishing standard and consistently spaced vertical and horizontal alignment points.

Use similar elementsizes, shapes, colors,and spacing.

Page 16: HCI_Visually Pleasing Composition

Can you Interpret this graph?

Page 17: HCI_Visually Pleasing Composition

How predictable is this graph?

Page 18: HCI_Visually Pleasing Composition

Predictability

Create predictability by being consistent and following conventional orders or arrangements.

Page 19: HCI_Visually Pleasing Composition

Pick the odd one out?

Page 20: HCI_Visually Pleasing Composition

Sequentiality

Page 21: HCI_Visually Pleasing Composition

Sequentiality can beachieved byalignment, spacingand grouping

Page 22: HCI_Visually Pleasing Composition

Economy

Provide economy by using as few styles, display techniques, and colour as possible.

Page 23: HCI_Visually Pleasing Composition

Unity

Create unity byusing similarsizes, shapes,or colours forrelatedinformation

Leaving lessspace betweenelements of ascreen than thespace left at themargins.

Page 24: HCI_Visually Pleasing Composition

Proportions

Keep aesthetically pleasing proportions.

Page 25: HCI_Visually Pleasing Composition

Which one looks more simple?

Page 26: HCI_Visually Pleasing Composition

Simplicity

Optimize the number of elements on a screen ,within limits of clarity.

Minimize the alignment points, especially horizontal or columnar.

Page 27: HCI_Visually Pleasing Composition

Which phenomena is represented here?

Page 28: HCI_Visually Pleasing Composition

Grouping

Page 29: HCI_Visually Pleasing Composition

Grouping

Provides functional grouping, spatialgrouping, even space controls, visualreinforce grouping, provides meaningfultiltles.

Page 30: HCI_Visually Pleasing Composition

Class Exercise-What modifications can be brought in this form?

Page 31: HCI_Visually Pleasing Composition

Summarization

Visually pleasing composition by the designer motivates, attracts and directs the user to use that particular design.

The qualities for a visually pleasing composition includes Balance, Symmetry, Regularity, Predictability, Sequentiality, Economy, Unity, Proportion, Simplicity and Grouping.

Page 32: HCI_Visually Pleasing Composition