Design thinking is one of the key elements in the field of UI/UX engineering for the purpose of keeping a clean, informative and eye catching visual experience. In this Innovation Session by Abhiman Ranaweera of the UI/UX team, we take a look at the principles behind design thinking which drives the need for excellent UI design.

1. Principles behind Design
Thinking
By Abhiman Ranaweera

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

3. 01. Design Patterns
A design pattern is a general reusable
solution to a commonly occurring
problem

4. 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...

5. If you were designing shirts...

6. This is not in the safe zone

7. Not safe! Not safe!

8. 02. Major Layout Patterns
Modular design “is in” because it helps
responsive design

9. 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

10. www.site.com Go
“A whole section for one quote”
Super
Large 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

11. A totally legitimate graph
2008 ishMulti-column Design
CSS3 Responsive Design
somenumbers

12. 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

13. 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

14. www.site.com Go
● Cards are either in
“tile mode”
● Or they’re in “masonry
mode”
Card Layout

15. www.site.com Go
● Cards are either in “tile
mode”
● Or they’re in
“masonry mode”
Card Layout

20. 03. Alignment , Consistent
Gutters, And Vertical Rhythm

21. Human Behavior
• Users scan websites, they don’t read them
• Symmetry and balance is easy to scan
• Symmetry = beautyds

22. Beauty is a
science.
Symmetry and
average features
are easily
spotted

23. Alignment
consistent
gutters

25. Alignment and borders

27. Alignment and borders
with cards...

29. 04. The Famous “Two Color
Rule
Choose two colors at the most.

30. 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

31. Company Name
Company Name

35. Three Hues of Blue
Hue One
Hue Two
Hue Three

36. 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 :)

37. Two Blues, different Hues
If you choose a dark blue
from one hue and a light
blue from another hue,
This is bad :(

38. Choose within the same Hue

40. 05. Font Rules
Never user more than two fonts

41. 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

42. A ASerif Sans-Serif
(without)

43. Title Font
(your “stand-out” font)
After choosing the legible font, choose a title
font which complements the attitude your
brand has.

44. Title One
The quick brown fox jumps over the…
Title Two
The quick brown fox jumps over the…
Title Three
The quick brown fox jumps over the...

45. If the background is white or
off-white...
...then the legible text is almost always a
neutral color (probably gray or black)

46. If the background is the brand-
color...
… then it’s safe for the title and legible text to
be white

47. Or, with the brand-color
background...
The title can be a darker shade of the same color
with the legible text being white

48. 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

49. And under no circumstances...
...can the title and the legible text be the brand-
color at the same time in the same area

50. 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

54. 05. Photography & Graphics
Unless you’re making a dashboard,
photos are critical to good design

55. Good Sources
Get your photos from:
1.Buy from the Internet (iStock Photos, Flicker…)
2.A professional photographer

56. Photography & Graphics
At all costs, avoid doing your own photos from
your phone.

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

58. Photography & Graphics
Graphics fall into one of two categories:
1. Content
2. Design

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

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

61. Design
Content

62. Text on photos is tricky
Some White Text

63. Text on photos is tricky
Some White Text

64. Text on photos is tricky
Some White Text

65. Text on photos is tricky
Some White Text

66. Linear vs Radial Gradients

67. Text on photos is tricky
Some White Text

68. Text on photos is tricky
Some White Text

69. Text on photos is tricky
Some White Text

70. The Hero Section
Probably the single most popular feature of
websites today
www.site.com Go
“A whole section for one quote”
Super
Large Text

71. 1. The photo is most of the design
2. Neutral tint or blurry photo / text is brand-
color and/or white
3. Brand-color tint / text is all white
4. Heavy use of one brand color, light use of
the other
5. If there is a secondary brand-color in light
use, it’s probably green, yellow, or red

72. ● 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

73. ● 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

74. ● 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

75. ● 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

76. ● 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

77. ● 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

78. ● 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

79. Getting the proportions
right
You’ll probably have to crop the photo into
a panoramic
www.site.com Go
“A whole section for one quote”
Super
Large Text

82. CSS is getting awesome!
Let’s say you want to fit this photo into this
div tag...

83. CSS is getting awesome!
The problem though is that they are not the
same proportion

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

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

86. CSS is getting awesome!
background-position: center center
background-size: cover background-size: contain

87. The best photos
have the main object off
to the side with blur off to
the other side, perfect for
text

88. The best photos
have the main object off
to the side with blur off to
the other side, perfect for
text

89. Choose Photography First
Let photography influence your overall design,
not the other way around

90. 05. Light Borders &
Edges

91. Light from above

92. The “gel” phase

93. The “post gel” phase

95. 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

96. 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

97. Other rules for borders
• Always use one pixel borders
• Borders should be darker than the
object they’re surrounding

98. Example:

99. Example:

101. 05. Flat Design Flat Icons

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

103. Still a thing?
• Flat Design Still?
• Flat Icons are in for sure!
• Font Icons
• SVG Icons
• HTTP (Web) Performance

106. Image Sprite