Design in UI: Visuals and Aesthetics - Swapnil Acharya

Design in UI: Visuals and AestheticsSwapnil Acharya

Salvador DalíMay 11, 1904 – January 23, 1989

Gestalt Principle How people tend to organise visual elements into groups or unified wholes when certain principles are applied.

ProximitySimilarityCommon FateClosure

What do you see..

a) Six squares?b) Three groups of two squares?

• Items close together appear to have a relationship

• Distance implies no relationship

PROXIMITY

Our eyes/brain logically group together visual elements that are similar to one another.

SIMILARITY

Again, what do you see..

a) Six circles?b) Three groups of two circles?

How would you interpret this?

a) Three action buttons.b) Two green and one white button.

Buy now Make a Gift Cancel

Our eyes/brain associate elements that are similar toone another (not same as similarity for grouping).

COMMON FATE

Lines are not aligned

• do not have common fate

• do not seem grouped together

Lines are aligned

• do have common fate

• do seem grouped together

Our eyes/brain logically group together visualelements that approximate a closed shape, to form that closed shape.

CLOSURE

What do you see..

a) Twelve dotsb) One circle

Now, what do you see..

a) Ten dotsb) One circle

ELEMENTS OF DESIGN

Elements of design work together to…• Convey “look and feel” of something• Convey a message• Convey image, impression or mood.

OrganisationColourTypographyAlignment

3C’s of Organisation Clarity, consistency and contrast.

Clarity• Tell your users upfront what they

need to do and what they can expect subsequently

• Strengthen the impact of the message

• Promote simplicity, elegance, class and refinement

Consistency• If you set your rules in the beginning,

make sure you keep them till the end• Applies to layout, colour, images, icons,

typography and text• Within screen, across screens• Stay within metaphor everywhere• Platform may have a style guide -

Follow it!

Contrast• Support skimming and tell things

apart• Lead the user’s eye to next action• Help distinguish important items• Help quick decision-making for

users

ECONOMY OF VISUAL ELEMENTS

Less is more

In page layout, illustration and sculpture, white space is often referred to as negative space. It is the portion of a page left unmarked: margins, gutters, and space between columns, lines of type, graphics, figures, or objects drawn or depicted. The term arises from graphic design practice, where printing processes generally use white paper. White space should not be considered merely 'blank' space — it is an important element of design which enables the objects in it to exist at all; the balance between positive (or non-white) and the use of negative spaces is key to aesthetic composition. Inexpert use of white space, however, can make a page appear incomplete.

Use whitespace

Whitespace doesn’t need to be “white”.

Reduce clutter

Minimise controls

Alignment & Grid

Alignment• Allows eye to parse display more

easily• Group items logically• Guide the user’s eyes though the

content• Conform to Gestalt Principles

Grids• are (hidden) horizontal and vertical

lines to help locate components• Align related things• Group items logically

Colour

How to use colors• Display colour images on black background• Choose bright foreground colour (white, bold green…)• Be sure foreground colours contrast in both brightness and hue

with background colours• Use colour to draw attention, communicate organisation, to

indicate status, to establish relationships• Avoid using colour in non-task related ways

Call for action

Status, actions and elements

Typography

Typography (from the Greek words τύπος (typos) = form and γραφή (graphe) = writing) is the art and technique of arranging type in order to make language visible. The arrangement of type involves the selection of typefaces, point size, line length,leading (line spacing), adjusting the spaces between groups of letters (tracking) and adjusting the space between pairs of letters.

• Characters and symbols should be easily noticeable and distinguishable.

• AVOID HEAVY USE OF UPPERCASE.• Studies have found that mixed case

promotes faster reading.

Considerations

• ReadabilityHow easy is it to read a lot of text

• LegibilityHow easy is it to recognise a short burst of text

• Typeface = font(not really, but close enough)

Sans-serifSerif Monospace

Decorative Script Handwriting

Types of Types

Weight of TypesRegularMedium Light Ultra Light Italic

Heads up: Mobile applications generally do not use italics. Even light and ultra light types are rare.

Light Italic Ultra Light Italic Bold Bold Italic

Platform-specific types

iOS uses Helvetica

Android uses Roboto

Windows uses Segoe

Icons

Small picture or symbol serving as a quick, "intuitive" representation of a software tool, function or a data file accessible on the system.

Icon

• Launcher Icon• Menu Icon• Notification Icon• Tab Icon• Status Icon• List Icon

Types of Icons

• Be consistent with UI workflows, types and buttons• Make touch mode “hit areas” large enough• Use big readable fonts and large icons• Integrate tightly with other applications• Keep localisation in mind• Encourage thumbing by default

Considerations

AESTHETICS

What is beauty?

GOLDEN RATIO & FIBONACCI SPIRAL

RULE OF THIRDS

Imagine a canvas as divided into nine equal parts by two equally spaced horizontal lines and two equally spaced vertical lines, and that important compositional elements should be placed along these lines or their intersections.

The Rule

LETS GET GOING THEN…

Read and understand the Human Interaction Guidelines laid down by popular platforms.

https://developer.android.com/design/

https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/

http://dev.windows.com/en-us/design

Break few things, nobody gets it right in first few attempts.

Keep reading.. when you think you’ve mastered it all, there is already something new you will need to dirty your hands on.

Make something new.pleasing and useful.

Make somethingnew.pleasing and useful.

THANK YOU