UI Principles Behind Design Thinking

Principles behind Design Thinking

By Abhiman Ranaweera

Roadmap•Design patterns•Alignment, Gutters and Vertical rhythm•Color rules•Font Rules•Photography and Graphics•Light borders and edges•Flat Design

01. Design PatternsA design pattern is a general reusable solution to a commonly occurring problem

Design patterns are “safe zones”

•“thinking outside the box” is not as cool in design

•Don’t do anything too crazy or unusual

Oh, and most importantly...

If you were designing shirts...

This is not in the safe zone

Not safe! Not safe!

02. Major Layout PatternsModular design “is in” because it helps responsive design

www.site.com Go

● All content and graphics are centered

● Always a left menu, maybe a right menu

● Optimal for 1024 resolution

● A billion articles on “how to do multi-column layout in CSS?”

Layouts of the past, before 2008

www.site.com Go

“A whole section for one quote”

SuperLarge Text

● Panels extend to edges of screen

● Content however still has fixed width in the center

● The first panel is usually large, graphical and is known as the hero

● Panels alternate in color

● For some reason there’s always circles

Panel layouts, for content sites

A totally legitimate graph

2008 ishMulti-column DesignCSS3 Responsive Design

som

e nu

mbe

rs

www.site.com Go

● Always a lightgray or gray-ish background

● Cards are always white

● Works well with social media sites

● Works well with dashboards if you add a sidebar

Card Layout

www.site.com Go

● Always a lightgray or gray-ish background

● Cards are always white

● Works well with social media sites

● Works well with dashboards if you add a sidebar

Card Layout

www.site.com Go

● Cards are either in “tile mode”

● Or they’re in “masonry mode”

Card Layout

www.site.com Go

● Cards are either in “tile mode”

● Or they’re in “masonry mode”

Card Layout

03. Alignment , Consistent Gutters, And Vertical Rhythm

Human Behavior•Users scan websites, they don’t read

them•Symmetry and balance is easy to scan•Symmetry = beautyds

Beauty is a science.

Symmetry and average features are easily spotted

Alignmentconsistent

gutters

Alignment and borders

Alignment and borderswith cards...

04. The Famous “Two Color RuleChoose two colors at the most.

Two colors explained...Let the logo’s color determine the one or two

colors for your design.

* Shades of gray (including black and white) are considered neutral colors and don’t count towards overall number of colors

Company Name

Company Name

Three Hues of Blue

Hue One

Hue Two

Hue Three

Staying in a Hue is Good

You can choose different saturations and ligntnesses of the same hue

As long as you stay in the same hue, this is only using one color

This is good :)

Two Blues, different Hues

If you choose a dark blue from one hue and a light blue from another hue,

This is bad :(

Choose within the same Hue

05. Font RulesNever user more than two fonts

Legible Font

Start by choosing your legible font, which is the font used for the larger bodies of text.

It can be Serif or Sans-Serif, but Sans-Serif is more popular. You can’t go wrong with one of these:

Open Sans, Lato, or Roboto

A ASerif Sans-Serif

(without)

Title Font(your “stand-out” font)

After choosing the legible font, choose a title font which complements the attitude your brand has.

Title OneThe quick brown fox jumps over the…

Title TwoThe quick brown fox jumps over the…

Title ThreeThe quick brown fox jumps over the...

If the background is white or off-white......then the legible text is almost always a

neutral color (probably gray or black)

If the background is the brand- color...… then it’s safe for the title and legible

text to be white

Or, with the brand-color background...The title can be a darker shade of the same

color with the legible text being white

However, with a white background......it is not okay to have the title be a

neutral color like gray while the legible text is the brand color, especially a bright one like this green

And under no circumstances......can the title and the legible text be the

brand-color at the same time in the same area

The same is true of pure white text on a pure black background

Avoid pure black text on pure white backgrounds - it’s harsh on the eyes.

The same is true of pure white text on a pure black background

05. Photography & Graphics

Unless you’re making a dashboard, photos are critical to good design

Good SourcesGet your photos from:

1.Buy from the Internet (iStock Photos, Flicker…)

2.A professional photographer

Photography & GraphicsAt all costs, avoid doing your own photos from your phone.

Photography & GraphicsIf you must take your own photos, take them when the Sun is low on the horizon. This is when the light is the best.

Photography & GraphicsGraphics fall into one of two categories:1. Content2. Design

Content Graphics

There are very little rules to content based graphics, other than they need to complement the content they belong to.

Design GraphicsDesign graphics are fixtures to your design. They are not tied to a particular piece of content. Design Graphics complement your design or brand

Design

Content

Text on photos is tricky

Some White Text


Some White Text


Some White Text


Some White Text

Linear vs Radial Gradients


Some White Text


Some White Text


Some White Text

The Hero SectionProbably the single most popular feature of websites today

www.site.com Go


SuperLarge Text

1. The photo is most of the design2. Neutral tint or blurry photo / text is

brand- color and/or white3. Brand-color tint / text is all white4. Heavy use of one brand color, light

use of the other5. If there is a secondary brand-color in

light use, it’s probably green, yellow, or red

● The photo is most of the design

● Neutral tint or blurry photo / text is brand- color and/or white

● Brand-color tint / text is all white

● Heavy use of one brand color, light use of the other

● If there is a secondary brand-color in light use, it’s probably green, yellow, or red































Getting the proportions rightYou’ll probably have to crop the photo

into a panoramic

www.site.com Go


SuperLarge Text

CSS is getting awesome!Let’s say you want to fit this photo

into this div tag...

CSS is getting awesome!The problem though is that they are

not the same proportion

CSS is getting awesome!But with CSS3, you can do background-size: cover

CSS is getting awesome!Further, you can do background-position: center center

CSS is getting awesome!

background-position: center center

background-size: cover background-size: contain

The best photoshave the main object off to the side with blur off to the other side, perfect for text

The best photoshave the main object off to the side with blur off to the other side, perfect for text

Choose Photography FirstLet photography influence your overall design, not the other way around

05. Light Borders & Edges

Light from above

The “gel” phase

The “post gel” phase

Use Borders Lightly

Not all background transitions need a border between them, but if you use one, the border must be a darker hue of which ever background is the darkest

Correct Incorrect

Use Borders Lightly

If one of the two colors is an actual color while the other is a shade, the line should the the darker version of the color

Correct Incorrect

Other rules for borders

•Always use one pixel borders•Borders should be darker than the

object they’re surrounding

Example:

Example:

05. Flat Design Flat Icons

Flat Design•Solid colors or gradients•No drop shadows•No 3D tricks with borders•No gel nonsense•Just solid colors

Still a thing?•Flat Design Still? •Flat Icons are in for sure!

• Font Icons• SVG Icons• HTTP (Web) Performance

Image Sprite

Technology

UI Principles Behind Design Thinking