1. Good design is about effective communication through functionality, usability, accessibility and brand alignment. 2. Every web page has basic elements like a container, identity/logo, navigation, content and whitespace that follow design principles. 3. User experience design must consider the context of different devices, screens, users, and data to create intuitive, focused interfaces that minimize cognitive load through hierarchy, simplicity and perceptual grouping principles.

1. Established rules and conventions
By Sayed Minhal – Front End Designer & UI Developer

2. 
 What is meant by “Good Design”?
 Is it good look and feel, aesthetic and visual appeal?
 Is it good functionality?
 Is it usability aspect?
 Is it accessibility of information?
Defining Good Design

3. 
 Designing is Communicating
It is stuff that works and presents information well, but
looks ugly or fails to fit with the client’s brand
V/S
beautiful stuff that is hard to use or inaccessible
Designing is…

4. 
Web Page Anatomy

5. 
 Every web page has a container. This could be in the
form of the page’s body tag, an all-containing div
tag. Without some sort of container, we’d have no
place to put the contents of our page.
Containing block

6. 
 When designers refer to an identity, they’re referring
to the logo and colors that exist across a company’s
various forms of marketing, such as business cards,
letterhead, brochures, and so on.
 The identity block increases brand recognition while
informing users that the pages they’re viewing are
part of a single site.
Logo

7. 
 It’s essential that the site’s navigation system is easy
to find and use
 At the very least, all main navigation items should
appear “above the fold.”
 Users can move about easily via intuitive navigation
 A navigation structure that not only changes
appearance when hovered over with the cursor, but
also indicates the active page or section helps users
to recognize where they are, and how to get where
they want to go.
Navigation

8. 
 Content is King….
 A typical website visitor will enter and leave a
website in a matter of seconds.
 If visitors are unable to find what they’re looking for,
they’ll undoubtedly close the browser or move on to
another site.
 Footer contains Copyright information and mark the
end of webpage.
Content / Footer

9. 
 The graphic design term whitespace (or negative
space) literally refers to any area of a page without
type or illustrations.
 Without carefully planned whitespace, a design will
feel closed in, like a crowded room.
 Whitespace helps a design to breathe by guiding the
user’s eye around a page, but also helps to create
balance and unity
Whitespace

10. 
 Dutch painter Piet Mondrian as the father of graphic
design for his sophisticated use of grids.
 By using the Grid system we can line up elements and
also can maintain the proportions.
 Greek mathematician Pythagoras observed a
mathematical pattern that occurred in nature and referred
to this pattern as the golden ratio or golden ratio or divine
proportion
 A line can be bisected using the golden ratio by dividing
its length by 1.62. This magical 1.62
 number is really 1.6180339 …,
Grid Theory

11. 
 A simplified version of the golden ratio is the rule of
thirds. A line bisected by the golden ratio is divided
into two sections, one of which is approximately
twice the size of the other.
 Dividing a composition into thirds is an easy way to
apply divine proportion without your calculator
The Rule of Thirds

12. 

13. 
 The Device
 The Screen
 The User
 The Data
The Context

14. 
 Developers can take advantage of native
functionality across devices.
 Different screen resolutions, web interface, or Mobile
interface like Android, BlackBerry, WP7, or iOS
device.
The Device

15. 
Web/Android/iOS/BB
 The Android user
base has grown to be
a strong competitor
in the mobile market,
for the flexibility of
Android design.
 Android convention
is to place view-
control tabs across
the top, and not the
bottom, of the screen.
 Parallax scrolling is
common in Android
applications
 Apple can reject an
application from the
official App Store
because of design
problems.
 iPhone users
generally hold from
the bottom of the
device, so main
navigation items
should be in reach
of user thumbs.
 Support standard
iOS gestures, such
as swiping down.
 BlackBerry includes
native support of
corporate emails; and
runs on many devices
with hard keypads,
which is favored by
users with accessibility
issues as well as late
adopters to touch-
screen interfaces.
 Use BlackBerry UI
components, not the
tabs or other
components.
 Press the track pad:
Default option, like
revealing the menu

16. 
The Real Estate
 Know the context of
use
 Who are the users?
 What do they need?
 Why would they come?
 How will they use?
 When they will use it?
 Where will they access
and use information?
 The Constraints
 Display a telescoped view
of almost limitless
information
 Cognitive load increases
while attention is diverted
by the needs to navigate
 Cognitive load is the
mental effort to
comprehend and use an
application

17. 
 Limit the features available on each screen, and use
small, targeted design features.
 Content on the screen can have a secondary use
within an application, but the application designer
should be able to explain why that feature is taking
up screen space.
 Banners, graphics, and bars should all have a
purpose.
The Solution:
1 - Embrace Minimalism

18. 
 Help users fight cognitive distractions with a clear
information hierarchy.
 Draw attention to the most important content with
visual emphasis.
 Users will be drawn to larger items, more intense
colors, or elements that are called out with bullets or
arrows; people tend to scan more quickly through
lighter color contrast, less-intense shades, smaller
items, and text-heavy paragraphs.
The Solution:
2 - Use Visual Hierarchy

19. 
 A smaller file size is a good indicator of how fast an
application will load.
 Focused content means users won’t leave because it
takes too long for the overwhelming amount of
images per screen to load
 And users won’t be frustrated with the number of
links that must be cycled through to complete a task
The Solution:
3 - Stay Focused

20. 
 While standing in line at the bank or a restaurant,
people pull out their mobile devices to check in,
entertain, and consume another dose of content
 According to German psychologists Gestalt: The
Gestalt Principles refer to theories of visual
perception developed in 1920s which states:
 Every cognitive stimulus is perceived by users in its
simplest form. Key principles include proximity, closure,
continuity, figure and ground, and similarity.
Understanding Users

21. 
Proximity
 Users tend to group
objects together.
Elements placed near
each other are
perceived in groups;
 Many smaller parts can
form a unified whole.
 Icons that accomplish
similar tasks may be
categorically organized
with proximity.
 Place descriptive text
next to graphics so that
the user can
understand the
relationship between
these graphical and
textual objects.

22. 
Closure
 If enough of a shape is
available, the missing
pieces are completed by
the human mind. In
perceiving the
unenclosed spaces,
users complete a
pattern by filling in
missing information
 Harness the closure
concept to create icons
with a strong primary
silhouette, without
overloading users on
pixelated and overdone
details

23. 
Continuity
 The user’s eye will
follow a continuously-
perceived object. When
continuity occurs, users
are compelled to follow
one object to another
because their focus will
travel in the direction
they are already
looking
 The user perceive the
horizontal stroke as
distinct from the curled
stroke, even though
these separate elements
overlap.

24. 
Figure and Ground
 A figure, such as a
letter on a page, is
surrounded by white
space, or the ground.
 Primary controls and
main application
content should
maintain a distinct
separation between
figure and ground.

25. 
Similarity
 Similar elements are
grouped in a semi-
automated manner,
according to the strong
visual perception of
color, form, size, and
other attributes (see
Figure 4-5). In
perceiving similarity,
dissimilar objects
become emphasized
 Strict visual grids
confuse users by
linking unrelated items
within the viewport.
The layout should
encourage the proper
grouping of objects and
ideas.