ui principles behind design thinking
Post on 12-Jan-2017
428 Views
Preview:
TRANSCRIPT
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
Text on photos is tricky
Some White Text
Text on photos is tricky
Some White Text
Text on photos is tricky
Some White Text
Linear vs Radial Gradients
Text on photos is tricky
Some White Text
Text on photos is tricky
Some White Text
Text on photos is tricky
Some White Text
The Hero SectionProbably the single most popular feature of websites today
www.site.com Go
“A whole section for one quote”
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
● 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
● 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
● 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
● 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
● 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
● 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
“A whole section for one quote”
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
top related