Principles of Beautiful Design

Established rules and conventionsBy Sayed Minhal – Front End Designer & UI Developer

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

Designing is Communicating

It is stuff that works and presents information well, but looks ugly or fails to fit with the client’s

brandV/S

beautiful stuff that is hard to use or inaccessible

Designing is…

Web Page Anatomy

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

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

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

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

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

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

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

The Device The Screen The User The Data

The Context

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

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

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

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

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

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

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

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.

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

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.

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.

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.