1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
|
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="dark light">
<link rel="icon" href="data:,">
<title>Proper UI Hierarchy</title>
<link href="/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" />
<link href="/rss.xml" type="application/rss+xml" rel="alternate" title="RSS feed for blog posts" />
<style>*{box-sizing:border-box;}body{font-family:sans-serif;line-height:1.33;margin:0 auto;max-width:650px;padding:1rem;}blockquote{background:rgba(0,0,0,0.1);border-left:4px solid;padding-left:5px;}img{max-width:100%;}pre{border:1px solid;overflow:auto;padding:5px;}table{text-align:left;width:100%;}.footnotes{font-size:90%;}</style>
</head>
<nav>
<a href="#menu">Menu ↓</a>
</nav>
<main>
<h1 id="proper-ui-hierarchy">Proper UI Hierarchy</h1>
<p>2019-02-05</p>
<p>I often feel like an old man when I complain about flat design and how designers these days have lost (or willfully forgotten) the skill to create accessible UIs with proper visual hierarchy. A skill which at it’s core seems so simple - yet is overlooked in almost every current modern interface.</p>
<p>I’m unable to pinpoint the exact reason why designers swapped out depth, hierarchical layouts and accessibility for muted colors, abstract imagery, illegible typography, and unimaginative flat designs.</p>
<p>But then again, maybe I’m just a design-dinosaur of a time long forgotten. Maybe I need to adapt and move with the times. Or maybe the current design trends are just lazy.</p>
<p>I’m pretty sure it’s lazy design trends.</p>
<h2 id="stop-complaining-and-do-something">Stop complaining and do something</h2>
<p>As an example, I’m going to breakdown the process of improving the overall design on a set of “flat” button elements.</p>
<p>Hopefully this demo article inspires even one designer to rethink their method when approaching UI design and push away from what is currently accepted as the “correct way to design UI”.</p>
<p>And one final note before we deep dive into this demo: </p>
<p>The statement that flat design is inherently worse than it’s predecessor <strong>is not subjective</strong>. By stripping away the visual cues that help users distinguish between interface elements you are purposely making a worse experience for them. Designers need to stop designing for other designers.</p>
<h2 id="what-we-will-be-designing">What we will be designing</h2>
<p>In this demo we will be improving the default flat design inspired button layout of the following:</p>
<p><img src="/public/images/proper-ui.png" alt="Proper UI buttons, blue and green" /></p>
<p><a href="https://codepen.io/bradleytaunt/pen/yLXJmdy">Live CodePen Example</a></p>
<hr/>
<h2 id="designing-the-skeleton">Designing the skeleton</h2>
<p>This will be our basic HTML structure, along with it’s default styling (based on today’s UI standards):</p>
<h3 id="the-html">The HTML</h3>
<pre><code><div class="buttons-container">
<button>Sign Up</button>
<button>Log in</button>
</div>
</code></pre>
<h3 id="the-css">The CSS</h3>
<pre><code>/* Parent container for the buttons */
.buttons-container {
background: #E0E9EE;
border-radius: 5px;
display: flex;
padding: 20px;
margin: 0 auto;
max-width: 300px;
width: 100%;
}
/*Shared button styles */
button {
appearance: none;
border: 0;
border-radius: 5px;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 14px;
font-weight: bold;
padding: 15px 20px;
width: 50%;
}
/* Sign up button */
button:first-child {
background: #2FBC3D;
margin-right: 10px;
}
/* Log in button */
button:last-child {
background: #459BCF;
}
</code></pre>
<h2 id="adding-simple-improvements">Adding simple improvements</h2>
<p>Gradients (not solely on their own mind you) within UI systems were initially used to help humans make connections with their analog counterparts. Something like toggles or switches matching those found in the real world, allowed users to mentally connect what that element’s function did almost instantly. </p>
<p>Be warned not to confuse this with skeuomorphic design - an element sharing similar qualities as it’s analog sibling does not instantly make it so.</p>
<p>If you ever run into a designer who rolls their eyes or scoffs at you for proposing the use of something such as gradients (in a tactful way, of course) it is safe to assume they have been brainwashed by the modern design hive-mind.</p>
<p>To disregard the use of gradients simply because the belief is “gradients are bad” is idiotic. Worse still is to do so based on the belief that “gradients aren’t <em>in</em> right now”. As a designer, your job is to design a beautiful and <em>usable</em> product - not win high-fives among your peers. /end rant.</p>
<h3 id="adding-subtle-gradients">Adding subtle gradients</h3>
<p>When gradients are implemented properly, most users won’t even be aware of their presence. The difference in color (specifically on buttons in this example) helps give the illusion of a light source in the interface, which designers can use to their advantage (ie. pull more attention to elements by “lifting” them forward on the page).</p>
<h3 id="the-subtly-improved-css">The subtly improved CSS</h3>
<pre><code>/* Sign up button */
button:first-child {
background-image: linear-gradient(-180deg, #1EB52A 0%, #0D941C 100%);
}
/* Log in button */
button:last-child {
background-image: linear-gradient(-180deg, #489FD2 0%, #0A6DAC 100%);
}
</code></pre>
<h2 id="more-depth-light">More depth & light</h2>
<p>With our subtle gradients we are closer to creating a solid contrast between interactive elements, but we can improve this even further. By adding some more depth with a harder light source and more pronounced outlines, we allow the button elements to stand out on their own more strongly.</p>
<p>This is fairly easy to accomplish with CSS using the very basic <code>box-shadow</code>, <code>text-shadow</code> and <code>border</code> properties:</p>
<pre><code>/* Parent container */
.buttons-container {
background-image: linear-gradient(0deg, #BBC6CD 3%, #E2EBF0 100%);
border: 1px solid #8D8D8D;
box-shadow: 0 2px 4px 0 rgba(42,42,42,0.40), inset 0 1px 3px 0 rgba(255,255,255,0.50);
}
/* Shared button styling with text-shadows */
.buttons-container button {
text-shadow: 0 2px 4px rgba(0,0,0,0.30);
}
/* Sign up button */
.buttons-container button:first-child {
background-image: linear-gradient(-180deg, #1EB52A 0%, #0D941C 100%);
border: 1px solid #0C6B16;
box-shadow: 0 1px 5px 0 rgba(9,116,21,0.50), inset 0 -1px 6px 0 rgba(0,0,0,0.20), inset 0 1px 0 0 rgba(255,255,255,0.50), inset 0 2px 4px 0 rgba(255,255,255,0.50);
}
/* Log in button */
.buttons-container button:last-child {
background-image: linear-gradient(-180deg, #489FD2 0%, #0A6DAC 100%);
border: 1px solid #0A486E;
box-shadow: 0 1px 5px 0 rgba(9,85,133,0.50), inset 0 -1px 6px 0 rgba(0,0,0,0.20), inset 0 1px 0 0 rgba(255,255,255,0.50), inset 0 2px 4px 0 rgba(255,255,255,0.50);
}
</code></pre>
<p>For easy reference, here is the CSS styling in it’s entirety:</p>
<pre><code>/* Parent container */
.buttons-container {
background-image: linear-gradient(0deg, #BBC6CD 3%, #E2EBF0 100%);
border-radius: 5px;
border: 1px solid #8D8D8D;
box-shadow: 0 2px 4px 0 rgba(42,42,42,0.40), inset 0 1px 3px 0 rgba(255,255,255,0.50);
display: flex;
padding: 20px;
margin: 0 auto;
max-width: 300px;
width: 100%;
}
/* Shared button styling */
button {
appearance: none;
border: 0;
border-radius: 5px;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 14px;
font-weight: bold;
padding: 15px 20px;
text-shadow: 0 2px 4px rgba(0,0,0,0.30);
width: 50%;
}
/* Sign up button */
button:first-child {
background-image: linear-gradient(-180deg, #1EB52A 0%, #0D941C 100%);
border: 1px solid #0C6B16;
box-shadow: 0 1px 5px 0 rgba(9,116,21,0.50), inset 0 1px 0 0 rgba(255,255,255,0.50), inset 0 2px 4px 0 rgba(255,255,255,0.50);
margin-right: 10px;
}
/* Log in button */
button:last-child {
background-image: linear-gradient(-180deg, #489FD2 0%, #0A6DAC 100%);
border: 1px solid #0A486E;
box-shadow: 0 1px 5px 0 rgba(9,85,133,0.50), inset 0 1px 0 0 rgba(255,255,255,0.50), inset 0 2px 4px 0 rgba(255,255,255,0.50);
}
</code></pre>
<h2 id="going-even-further-with-this-ui">Going even further with this UI</h2>
<p>This demo article only showcases how to improve on a basic button UI structure with a focus on proper hierarchy between elements.</p>
<p>Once completely developed, these element should support all interactive states (<code>hover</code>, <code>active</code>, <code>disabled</code>) and animations to make for a more engaging experience.</p>
<footer role="contentinfo">
<h2>Menu Navigation</h2>
<ul id="menu">
<li><a href="/">Home</a></li>
<li><a href="/projects">Projects</a></li>
<li><a href="/uses">Uses</a></li>
<li><a href="/wiki">Wiki</a></li>
<li><a href="/resume">Resume</a></li>
<li><a href="/colophon">Colophon</a></li>
<li><a href="/now">Now</a></li>
<li><a href="/donate">Donate</a></li>
<li><a href="/atom.xml">RSS</a></li>
<li><a href="#top">↑ Top of the page</a></li>
</ul>
<small>
Built with <a href="https://barf.btxx.org">barf</a>. <br>
Feeds: <a href="/atom.xml">Atom</a> & <a href="/rss.xml">RSS</a><br>
Maintained with ♥ for the web. <br>
Proud supporter of <a href="https://usefathom.com/ref/DKHJVX">Fathom</a> & <a href="https://nextdns.io/?from=74d3p3h8">NextDNS</a>. <br>
The content for this site is <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>.<br> The <a href="https://git.sr.ht/~bt/bt.ht">code for this site</a> is <a href="https://git.sr.ht/~bt/bt.ht/tree/master/item/LICENSE">MIT</a>.
</small>
</footer>
|
