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
|
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="data:,">
<title>The Death of Personality</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;}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="the-death-of-personality">The Death of Personality</h1>
<p>2017-11-01</p>
<p>On September 18, 2013 truly original product design (everything from icon and app design to UI and experience interactions) began it’s fast decline into the abyss with the release of Apple’s iOS 7 update. It was called revolutionary. It was seen as a ‘new age’ of design. I think it was a big mistake.</p>
<p><img src="/public/images/flat-design-tombstone_cfkyrq_c_scale,w_700.webp" alt="Flat design tombstone" /></p>
<h3 id="stepping-backwards">Stepping backwards</h3>
<p>Let me start off by saying I understand where they were trying to take mobile app design as a whole. “Less is more”, “cleaner UI to let the content be the focus”, “more touch based interactions”. The problem is that they cranked the dial too far in the other direction.</p>
<p>Because of this, a large movement was created based around the idea that skeuomorphic design is garbage, flat design is the future. And everyone drank the kool-aid without a single objection.
I’m using this ironically.</p>
<h3 id="icons-with-no-identity">Icons with no identity</h3>
<p>Do you remember Instagram’s original app icon and UI? Do you remember how everyone initially praised it? Show those old designs to the same designers who loved it only a few years ago, and they will now laugh at how “bad” it is.</p>
<p>Unfortunately the same can be said for Apple’s system icons across both iOS and macOS.</p>
<p>I believe Apple took the concept of a ‘consistent’ design system across their iconography too literally. All the system icons should compliment one another, but they shouldn’t lose their own individual look and feel.</p>
<h3 id="lackluster-ui">Lackluster UI</h3>
<p>The once inspiring and hierarchically consistent interface of both iOS and macOS was also quickly swatted away. In it’s place we as users saw the removal of depth, initial visual cues as to what was interactive and what was static, and sadly even the overall color was muted.</p>
<h3 id="impact-on-the-web">Impact on the web</h3>
<p>This may not have been a bad thing if it was self-contained to Apple itself. The problem is that Apple has such a huge influence on the design industry - although that is starting to diminish, due to disasters like the iPhone X - that everyone starts to mimic and copy their style. This includes designers of sites and progressive web apps.</p>
<p>With the evolution of websites morphing into progressive web apps, designers have felt the need to start implementing this bland style for their design systems.</p>
<p>What we got in return:</p>
<ul>
<li>washed out colors</li>
<li>zero gradients for depth</li>
<li>the removal of all drop shadows (in meaningful ways that is)</li>
<li>the same generic Helvetica-based typefaces</li>
<li>the absence of hover states on interactive elements</li>
<li>a lack of any proper information density</li>
<li>an overkill of whitespace</li>
<li>one dimensional buttons (you know, the thing you want the user to interact with)</li>
<li>a complete disregard for original design not based off every other popular product</li>
</ul>
<h3 id="breaking-free-of-the-modern-era">Breaking free of the ‘modern era’</h3>
<p>Thankfully, there are still a few good designers who continue to create original and inspiring work not based solely on current trends.</p>
<p>Flexibits recently launched a new contact app for macOS called Cardhop. While the UI still shifts a little too far to the ‘flat trend’ for my liking, they thankfully hired the very talented David Lanham to design the beautiful application icon.</p>
<p>This is where visual design shines. Icon designs like Cardhop’s are what allow individual applications to stand out in the dock or mobile home-screen among all the others. So how is that not UX design?</p>
<p>The current trendy thought process from designers that “visual design doesn’t involve UX design” is garbage. Neither are mutually exclusive and I think anyone who believes so is being incredibly short-sighted.</p>
<p>If you’re a designer, please stop riding trends and make your work visually beautiful. That doesn’t mean you need to sacrifice usability or function, but just put more love and confidence into your profession. Companies like Apple and Google don’t control how everyone else’s apps and sites should look, and based on their current design decisions - they shouldn’t.</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://git.sr.ht/~bt/barf">barf</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>
|
