UI Principles Behind Design Thinking
-
Upload
cake-labs -
Category
Technology
-
view
428 -
download
0
Transcript of UI Principles Behind Design Thinking
![Page 1: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/1.jpg)
Principles behind Design Thinking
By Abhiman Ranaweera
![Page 2: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/2.jpg)
Roadmap•Design patterns•Alignment, Gutters and Vertical rhythm•Color rules•Font Rules•Photography and Graphics•Light borders and edges•Flat Design
![Page 3: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/3.jpg)
01. Design PatternsA design pattern is a general reusable solution to a commonly occurring problem
![Page 4: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/4.jpg)
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...
![Page 5: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/5.jpg)
If you were designing shirts...
![Page 6: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/6.jpg)
This is not in the safe zone
![Page 7: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/7.jpg)
Not safe! Not safe!
![Page 8: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/8.jpg)
02. Major Layout PatternsModular design “is in” because it helps responsive design
![Page 9: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/9.jpg)
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
![Page 10: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/10.jpg)
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
![Page 11: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/11.jpg)
A totally legitimate graph
2008 ishMulti-column DesignCSS3 Responsive Design
som
e nu
mbe
rs
![Page 12: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/12.jpg)
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
![Page 13: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/13.jpg)
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
![Page 14: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/14.jpg)
www.site.com Go
● Cards are either in “tile mode”
● Or they’re in “masonry mode”
Card Layout
![Page 15: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/15.jpg)
www.site.com Go
● Cards are either in “tile mode”
● Or they’re in “masonry mode”
Card Layout
![Page 16: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/16.jpg)
![Page 17: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/17.jpg)
![Page 18: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/18.jpg)
![Page 19: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/19.jpg)
![Page 20: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/20.jpg)
03. Alignment , Consistent Gutters, And Vertical Rhythm
![Page 21: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/21.jpg)
Human Behavior•Users scan websites, they don’t read
them•Symmetry and balance is easy to scan•Symmetry = beautyds
![Page 22: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/22.jpg)
Beauty is a science.
Symmetry and average features are easily spotted
![Page 23: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/23.jpg)
Alignmentconsistent
gutters
![Page 24: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/24.jpg)
![Page 25: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/25.jpg)
Alignment and borders
![Page 26: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/26.jpg)
![Page 27: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/27.jpg)
Alignment and borderswith cards...
![Page 28: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/28.jpg)
![Page 29: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/29.jpg)
04. The Famous “Two Color RuleChoose two colors at the most.
![Page 30: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/30.jpg)
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
![Page 31: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/31.jpg)
Company Name
Company Name
![Page 32: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/32.jpg)
![Page 33: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/33.jpg)
![Page 34: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/34.jpg)
![Page 35: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/35.jpg)
Three Hues of Blue
Hue One
Hue Two
Hue Three
![Page 36: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/36.jpg)
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 :)
![Page 37: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/37.jpg)
Two Blues, different Hues
If you choose a dark blue from one hue and a light blue from another hue,
This is bad :(
![Page 38: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/38.jpg)
Choose within the same Hue
![Page 39: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/39.jpg)
![Page 40: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/40.jpg)
05. Font RulesNever user more than two fonts
![Page 41: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/41.jpg)
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
![Page 42: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/42.jpg)
A ASerif Sans-Serif
(without)
![Page 43: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/43.jpg)
Title Font(your “stand-out” font)
After choosing the legible font, choose a title font which complements the attitude your brand has.
![Page 44: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/44.jpg)
Title OneThe quick brown fox jumps over the…
Title TwoThe quick brown fox jumps over the…
Title ThreeThe quick brown fox jumps over the...
![Page 45: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/45.jpg)
If the background is white or off-white......then the legible text is almost always a
neutral color (probably gray or black)
![Page 46: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/46.jpg)
If the background is the brand- color...… then it’s safe for the title and legible
text to be white
![Page 47: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/47.jpg)
Or, with the brand-color background...The title can be a darker shade of the same
color with the legible text being white
![Page 48: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/48.jpg)
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
![Page 49: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/49.jpg)
And under no circumstances......can the title and the legible text be the
brand-color at the same time in the same area
![Page 50: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/50.jpg)
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
![Page 51: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/51.jpg)
![Page 52: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/52.jpg)
![Page 53: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/53.jpg)
![Page 54: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/54.jpg)
05. Photography & Graphics
Unless you’re making a dashboard, photos are critical to good design
![Page 55: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/55.jpg)
Good SourcesGet your photos from:
1.Buy from the Internet (iStock Photos, Flicker…)
2.A professional photographer
![Page 56: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/56.jpg)
Photography & GraphicsAt all costs, avoid doing your own photos from your phone.
![Page 57: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/57.jpg)
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.
![Page 58: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/58.jpg)
Photography & GraphicsGraphics fall into one of two categories:1. Content2. Design
![Page 59: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/59.jpg)
Content Graphics
There are very little rules to content based graphics, other than they need to complement the content they belong to.
![Page 60: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/60.jpg)
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
![Page 61: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/61.jpg)
Design
Content
![Page 62: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/62.jpg)
Text on photos is tricky
Some White Text
![Page 63: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/63.jpg)
Text on photos is tricky
Some White Text
![Page 64: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/64.jpg)
Text on photos is tricky
Some White Text
![Page 65: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/65.jpg)
Text on photos is tricky
Some White Text
![Page 66: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/66.jpg)
Linear vs Radial Gradients
![Page 67: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/67.jpg)
Text on photos is tricky
Some White Text
![Page 68: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/68.jpg)
Text on photos is tricky
Some White Text
![Page 69: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/69.jpg)
Text on photos is tricky
Some White Text
![Page 70: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/70.jpg)
The Hero SectionProbably the single most popular feature of websites today
www.site.com Go
“A whole section for one quote”
SuperLarge Text
![Page 71: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/71.jpg)
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
![Page 72: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/72.jpg)
● 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
![Page 73: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/73.jpg)
● 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
![Page 74: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/74.jpg)
● 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
![Page 75: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/75.jpg)
● 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
![Page 76: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/76.jpg)
● 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
![Page 77: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/77.jpg)
● 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
![Page 78: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/78.jpg)
● 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
![Page 79: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/79.jpg)
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
![Page 80: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/80.jpg)
![Page 81: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/81.jpg)
![Page 82: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/82.jpg)
CSS is getting awesome!Let’s say you want to fit this photo
into this div tag...
![Page 83: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/83.jpg)
CSS is getting awesome!The problem though is that they are
not the same proportion
![Page 84: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/84.jpg)
CSS is getting awesome!But with CSS3, you can do background-size: cover
![Page 85: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/85.jpg)
CSS is getting awesome!Further, you can do background-position: center center
![Page 86: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/86.jpg)
CSS is getting awesome!
background-position: center center
background-size: cover background-size: contain
![Page 87: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/87.jpg)
The best photoshave the main object off to the side with blur off to the other side, perfect for text
![Page 88: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/88.jpg)
The best photoshave the main object off to the side with blur off to the other side, perfect for text
![Page 89: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/89.jpg)
Choose Photography FirstLet photography influence your overall design, not the other way around
![Page 90: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/90.jpg)
05. Light Borders & Edges
![Page 91: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/91.jpg)
Light from above
![Page 92: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/92.jpg)
The “gel” phase
![Page 93: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/93.jpg)
The “post gel” phase
![Page 94: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/94.jpg)
![Page 95: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/95.jpg)
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
![Page 96: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/96.jpg)
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
![Page 97: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/97.jpg)
Other rules for borders
•Always use one pixel borders•Borders should be darker than the
object they’re surrounding
![Page 98: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/98.jpg)
Example:
![Page 99: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/99.jpg)
Example:
![Page 100: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/100.jpg)
![Page 101: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/101.jpg)
05. Flat Design Flat Icons
![Page 102: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/102.jpg)
Flat Design•Solid colors or gradients•No drop shadows•No 3D tricks with borders•No gel nonsense•Just solid colors
![Page 103: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/103.jpg)
Still a thing?•Flat Design Still? •Flat Icons are in for sure!
• Font Icons• SVG Icons• HTTP (Web) Performance
![Page 104: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/104.jpg)
![Page 105: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/105.jpg)
![Page 106: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/106.jpg)
Image Sprite
![Page 107: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/107.jpg)
![Page 108: UI Principles Behind Design Thinking](https://reader036.fdocuments.in/reader036/viewer/2022062503/5876712f1a28abd0018b628d/html5/thumbnails/108.jpg)