design in ui: visuals and aesthetics - swapnil acharya
DESCRIPTION
Mr. Swapnil Acharya, one of the trainers during Ncell App Camp 2014, gave training on designing for User Interface.TRANSCRIPT
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