diff options
| author | Bradley Taunt <bt@btxx.org> | 2024-06-06 08:05:12 -0400 |
|---|---|---|
| committer | Bradley Taunt <bt@btxx.org> | 2024-06-06 08:05:12 -0400 |
| commit | 6b742c459266b18e2b375b35205ce8a6c02f0452 (patch) | |
| tree | b16fbb9a045e33dd6c97eb5ab72e6ff4d9237ea3 /build/death-of-personality/index.html | |
Initial commit
Diffstat (limited to 'build/death-of-personality/index.html')
| -rw-r--r-- | build/death-of-personality/index.html | 96 |
1 files changed, 96 insertions, 0 deletions
diff --git a/build/death-of-personality/index.html b/build/death-of-personality/index.html new file mode 100644 index 0000000..7f38b6a --- /dev/null +++ b/build/death-of-personality/index.html @@ -0,0 +1,96 @@ +<!doctype html> +<html lang="en" id="top"> +<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="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> + <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>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>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<span class="sidenote-number"></span> design is garbage, flat design is the future. And everyone drank the kool-aid without a single objection. +<span class="sidenote">I'm using this ironically.</span></p> +<h3>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><figure> +<img src="/public/images/flat-design-instagram_mabnop_c_scale,w_800.webp" alt="Instagram flat design"> +<figcaption>They completely butchered the contrast and initial readability to appease the 'flat' trend style. The personality died.</figcaption> +</figure></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> +<p><figure> +<img src="/public/images/flat-design-icons_vubivd_c_scale,w_800.webp" alt="iOS icon comparison"> +<figcaption>Look at the depth and thought put into the original iOS icons. The "newer" icon designs look like lazy and uninspired wire-frames.</figcaption> +</figure></p> +<h3>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> +<p><figure> +<img src="/public/images/flat-design-ui_d8a4lg_c_scale,w_1280.webp" alt="iOS UI comparison"> +<figcaption>More ugly wire-frame skeleton design compared to it's original counterpart. Where is the call to interact with any of these elements? Where is the hierarchy?</figcaption> +</figure></p> +<h3>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><figure> +<img src="/public/images/flat-design-buttons_s6jjpr_c_scale,w_1400.webp" alt="Buttons comparison"> +<figcaption>Comparison of button states. Which states are more instantly recognizable?</figcaption> +</figure></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 <strong>want</strong> the user to interact with)</li> +<li>a complete disregard for original design not based off every other popular product</li> +</ul> +<p><figure> +<img src="/public/images/flat-design-toggles_qfre51_c_scale,w_1400.webp" alt="Toggles comparison"> +<figcaption>The minimal / flat toggles look like unfinished prototypes.</figcaption> +</figure></p> +<h3>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 <a href="https://flexibits.com/cardhop">Cardhop</a>. 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 <i>not</i> UX design?</p> +<p><figure> +<img src="/public/images/flat-design-cardhop_nmlvmg_c_scale,w_800.webp" alt="Cardhop app icon"> +<figcaption>The gorgeous Cardhop app icon by David Lanham.</figcaption> +</figure></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 <i>shouldn't</i>.</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>
\ No newline at end of file |