Why rejecting shadows is NOT required for good minimalistic design
I happen to browse the internet quite a lot, even more so when I am procrastinating. And since most of my knowledge comes from me procrastinating and thus googling useless stuff, most of my knowledge consists of .html files, tidily well-ordered in shelves within my brain. Said html happens to usually contain some css to make it look younger than 2002, and said css usually uses minimalistic design. Which I actually love because it hurts my eyes less than your average windows 7 window manager.
What I don't love, however, is people thinking their minimalistic design gets any better by not applying shadow to anything, making everything flat and looking like a piece of cheap inlaying artwork (looking at you, microsoft website). There is a reason why lots of design principles like Material Design place value on the layering of elements using shadow; the reason being not applying shadow is not required to achieve minimalistic design.
When we think about minimalist design, what pops up in our minds are often minimalist frontpages of photographers web presences with only two words, a link and a small sprinkle of color to accentuate. However, minimalist web design can also encapsulate complex blogs, tools, forums, news sites and services that naturally have a lot of information to serve. We tend to forget (partly because of what is usually shown as examples of minimalist design and what isn't) that minimalist design does not mean showing little, but showing less, only the necessities, rid of all distractions. Minimalistic does not necessarily imply that there is vey little going on, but that what is going on is reduced to the minimal amount of overload possible whilst still serving its information.
The question if shadows can -and thus should- be omitted in minimalist design is easily answered with a yes when talking about really small and naturally information-light things such as frontpages, but it is far more complex when talking about naturally information-heavy things like blogs with a handful of necessary gui-elements for easy navigation, and I feel like people tend to ignore these cases and wrongly assume that shadows can -and thus, should- always be omitted even in these complex cases.
And they are wrong.
To prove my point, I'll take the central principle of minimalist design, the central idea that binds all derivatives of minimalist design, be it in physical art or be it in web design, together, and derive possible legitimations for said idea from a deductional standpoint as if I'd never even heard of minimalist design. Follow me open-minded and try to ignore your budding scepticism until I get to explain the reasons for this approach later on.
One of the most refreshing aspects of minimalist design is, from a linguistic standpoint, that the word itself is minimalistic. It's not an euphemism, it's not a summary, but it is in itself a throughout description of what divides minimalist design from other design principles:
Minimalist design is simply design that is minimalistic, and since minimalism is pretty well-defined, we can formulate the principle of minimalist design as
important things > important things + unimportant things
As you might have noticed, something being unimportant does not necessarily imply something being bad on its own. After all, having something unimportant is always better than having nothing. Whilst this might still be somewhat opinionated and can surely be debated, we can still assume that content provided in a web format, if its necessity is actively debated, is not actively worse than nothing - if it was actively BAD on its own, said badness should usually be recognized and the element removed before even questioning its compliance with minimalistic design.
Which is why we can assume that
unimportant thing > 0
The question this raises is how an unimportant things better than nothing can be worse than if it wasn't there at all once it is in conjunction with important things.
The only valid reasons are that either (a) unimportant things get better if one has nothing else, (b) they get worse if one has important things with them, and (c) important things get worse if they are in conjunction with less important things. You will have noticed that (b) and (c) are distict in that (b) is about the unimportant thing being denigrated by the important one and (c) about being the other way round.
Let's look at all of these and show why only one of them makes sense:
(a)
unimportant things get better if one has nothing else
: True, but not applying to shadows due to the supportive nature of shadows - a shadow is always cast by something, supporting it, and pretty much worthless on its own or even incapable of existing in and on itself.(b)
unimportant things get worse if one has importat things with them
: Nah, I don't think so. The good things might distract us from the unimportant things, but not focusing on something does not make it necessarily bad. Or, to be more specifically, shadows don get worse if one doesn't look at them, since they are not intended to be intensively focused on in the first place. Removing something unimportant out of fear an important thing might distract from it is generally useless on its own since it is in the very nature of unimportant things that being distracted from them does no harm.(c)
important things get worse if they are in conjunction with less important things
: If the important thing is to communicate something, this holds true. The reason why the unimportant thing might take away from the important thing is, analogous to point (b), that it distract from it. After all, whatever one intends to communicate should be focused on by the reader, and said focus being taken away by something thus takes away from the important thing intended to be focused.
Conclusively, we can agree on precisely one valid reasoning for the equation at the core of minimalist design, and use said reasoning -minimalist design attempting to remove distractions- to make a list of different "distraction types", on which we may be able to allocate the interaction between shadow and narrative to see if, and in which way, shadows might be distractive, and if the way in which they are distractive violates the reasoning behind minimalist design:
(i) important things distracting from unimportant things
(ii) important things distracting from important things
(iii) unimportant things distracting from unimportant things
(iv) unimportant things distracting from important things
But first, we will rule out which one of these distraction types it is we have to fear:
(i)
important things distracting from unimportant things
: Well... yeah, that's kinda what we want, isn't it? I mean, we want the reader to focus on what's important, and if we get them to unfocus on the useless stuff around them at the same time, that's twice the win. So nothing wrong with that.(ii)
important things distracting from important things
: Imagine having two important things. Let's call themfoo
andbar
, as all important things are called. We know that one of them will distract from the other one. Now we have two options: Leave one of them out, or bot leave one of them out. If we leave one of them out, the user will only concentrate on one of them since only one of them is left. If we don't leave one of them out, the user will concentrate on one of them, ad leave the other one out. Nothing changes. However, the option to leave something out is simply not an option if we are talking about important things. It's out of scope. I mean, look at this text. Its uppe rhalf is distracting from its lower half (which it really is, I mean, thee is actually no need to see everything one has already read on the upper half of the screen whilst reading the lower half), so if we leave it out, the reader will be less distracted from this essays lower half. I'm not being sarcastic here, I realy mean it: Deleting huge portions of this essay would seriously help remove distraction from the rest of it. Would it be a good idea, though? No, because both halves of the essay are important, and leaving one important thing away to not distract from the other important thing seriously impacts the message you want your pair of important things to communicate, together, united.(iii)
unimportant things distracting from unimportant things
: This ain't gonna hurt no one, since being distracted from something unimportant is inherently not a bad thing. After all, it is unimportant. If one distracts the reader from something unimportant, one just replaces one unimportant thing with another. I mean, they both shouldn't have been there in the first place, but who cares if they suddenly decide to switch places in the viewers mind?(iv)
unimportant things distracting from important things
: This is a real thread. You want to communicate something, and something else distracts from it. That's not what you want.
Accordingly, we can assume that the only reason shadows might contradict the reasoning behind minimalist design is reason (iv).
Now, you might raise the question why we went through all these loosely-shadow-related deductions about the nature of minimalist design up there, and that's a pretty valid question since we could've gotten to this point a lot faster by just stating that minimalist design is legitimated by the urge and need to remove distractions, which it is, according to most designers and design specifications. We would've, however, missed two important points by doing so:
Jumping straight to the reason why minimalist design is generally useful does not allow us to show that other logically derivable reasons are bad reasons, which would not allow us to redeem shadows based on one specific legitimation of minimalist design, but instead require us to show their compliance with a multitude of possible legitimations of minimalist design. We basically just ensured no smartass can come along and be like "Well, you showed that shadows don't defy the idea of minimalist design based on its most common legitimation, but here I am proclaiming that minimalist design can also be legitimated by [insert a, b, i, ii or iii]".
This was what we generated (a), (b) and (c) for.
We ended up creating a list of possible nemeses of minimalist design, and showed that all of them except for one aren't generally dreadful, which allows us to easily argue whether applying shadow to UI elements is inherently dreadful to good minimalist design or not by checking if it falls under the "dreadful distraction-type" iv or not.
This was what we generated (i), (ii), (iii) and (iv) for.
Our reasoning and its necessity might be best illustrated by a tree with two different levels, one for (1) and one for (2):
After showing the dread shadows might pose as well as our reasoning, we can finally rule out which, if any, distraction type shadows fall into, and thus, if they are truly dreadful.
To do so, we can assume we have two things:
things1 = shadows
things2 = something (partially) styled by using shadows
Of these two assumptions, the existence of thing1
is pretty much the premise of the entire discussion and can thus be assumed, and the existence of thing2
follows since a shadow never comes alone; it's always drawn by something. We can assume that nothing else except thing1
and thing2
exists, since the "(partially)"-part in the definition of thing2
allows thing2
to cover the entirety of things that are not shadows.
We don't actually need to know which case -case (i), (ii), (iii) or (iv)- we can assign this scenario to; all we need to know is if said case is case (iv) or not. For case (iv) to hold true, one of the following must apply:
thing1 is important, thing2 is unimportant, and thing2 distracts from thing1
This would require
thing1
-the shadows- to be of higher importance thanthing2
-the rest.However, since shadows themselves are pretty much useless on their own -as said before, even the very capability of shadows to exist on their own can be debated-, and since shadows usually have a supportive character in communication since they add to something instead of being something other things add information too, we can safely assume that
thing1
is of equal or lower importance thanthing2
. If the shadow was more important than what draws it, the rightful question could be raised how an accent can be more important than the letter it thrones on, an underline more important than the word it underlines, a spotlight more important than what it is shed on, to which there is no satisfying answer.thing1 is unimportant, thing2 is important, and thing1 distracts from thing2
:This case is easily contradicted by showing that
thing1
-the shadows- are not unimportant.
Case (1) is already contradicted, and to additionally contradict case (2), all that must be shown is that shadows are not unimportant.
And yes, they are not. Because shadows do not distract from communication, they do communication. Applying a shadow to something usually shows that it is supposed to be closer to the reader that whatever lays behind it, like something being stickied to a surface. And something being stickied to a surface, like a sticker, usually conveys a message about the surface, something which should be taken in relation of this surface. For example, a sticker with a price contains a message about the thing the sticker is stickied to (how much it costs), and a banner containing an icon usually means that whatever it is stickied to falls under the category symbolized by said icon. By making a banner showing an icon or some text flat, the user does not see if they are looking at the icon through a window or if it is in front of the surface surrounding it. Essentially, the user gets less information on what relates to what and what is more important than what. Shadow adds a third dimension to a text, a gui, to literally anything you want to display on a flat thing like a paper or a screen, and more dimension means more room to use placement to communicate your ideas. So shadow is not an unimportant thing. It is part of what you are doing, not just decoration, because it helps you communicate what you want to communicate, and that is what design is all about. Removing shadow because it might distract from the rest is like removing half of this essay because it distracts from the other half.
In case you have lost track of this somewhat curvy line of thought, here is the route back to where we came from:
We have now shown that shadows are not unimportant.
Thus, applying shadows does not trigger case iv.
Thus, they are not a nemesis of minimalist design.
And what can be a nemesis of minimalist design was ruled out beforehand based on a good legitimation for the existence of minimalist design, and the question what defies that legitimation.
And that this legitimation is the only really good one there is was shown at the beginning by using the underlying idea of minimalist design: minimalism in general.
♜ Tower defense
Building a castle is worth nothing if one does not defend it afterwards, and the same goes for essays. There are always things that don't fit in, as well as counter arguments who are inherently covered by ones arguing, yet might still come up. Sometimes, the coverage of counter arguments slips the attention of the reader, and sometimes, a counterpoint is better addressed in a defensive style than in an offensive style. Sometimes, you write an essay, and you can already see a very specific counter argument coming when you write it. And sometimes, instead of incorporating said argument into ones line of thought and arguments, it's easier and keeps the text from being cluttered and distracted to just prove it wrong after the line of thought is finally delivered.
If I covered a specific cornercase, yet I know people are going to miss that and come back to it, I technically covered that argument, yet it might still be worth talking about the argument at the end of the essay nonetheless. And likewise, if I know that a specific, pretty likely counterargument to my essay is logically flawed, it technically poses no "harm" to my argumentation, yet it might still be worth talking about the argument at the end of the essay to show how it is flawed.
That's why I will divide all of my essays into two parts: One main part with constructive reasoning for what I try to show, and one purely defensive part where I respond to some potential counterarguments to either show that they are logically flawed or that the point they make was already covered by my reasoning in the first part and is, in fact, not an argumentation hole. The second part might also grow after I released an essay as new arguments pile up.
So let's get started with this essays tower defensefind:
Minimalist design gets along without overlapping elements if it is well-done, so shadows are not needed to add a third dimension.
In fact, websites are usually scrollable, especially if they contain huge amounts of text. And sometimes, huge amounts of text are necessary, simply because text tends to be made out of text and people tend to read this stuff. Dynamically loading text instead of having a scrollbar is often not an option either, because sometimes, you don't want to rely on javascript, and to be honest, scrolling text is pretty damn useful.
The problem is that, even in scrollable websites, there might still be a need for some elements to be permanently visible. This includes cookie banners that legally need to inform the visitors of cookies until they click "okay" or "x" as well as up- or down-buttons needed to get back to the top of the page really fast, or gui elements if what you are scrolling through can be edited like a document in a text editor.
If you have elements that stay where they are whilst all other elements can be scrolled, it's crucial to communicate that these elements are always in front of other elements so the user gets exactly the behavior they expect, and this can -for example- be done by using shadows for elements with fixed positions. So "elements will never overlap each other if minimalist design is done properly" is pretty simplifying.
Emphasizing things (e.g. with shadows) when there are only necessary things on the screen is not required.
This is false when talking about buttons, since only necessary elements being on a screen does not mean that they don't deserve different amounts of focus. Every element moved from a screen means that it takes more time to reach one more element with your mouse, so moving EVERYTHING except for one thing off the page is usually not an option. For example, if there is an "Okay"-button, there's usually also a "Cancel"-button around, and whilst one of these might deserve more emphasisis to communicate that it is supposed to be the default option, removing the other one from the page would seriously break things. Efficiency in button pressing sometimes forces us to put more things on a page, and more things force us to add emphasises on some things.
Adding shadows to convey hierarchies is skeuomorphic and thus contradicting minimalist design.
A sceuomorphism is a design element imitating a real-life thing to communicate the way it works to the user, such as the grips on the scrollbars in Windows 7 or the way early OSes imitated plastic buttons with their buttons. And yes, sceuomorphisms are usually too opulent to be minimalistic, and tend to loose their relevance as time progresses and people get increasingly accustomed to the abstract concepts behind computer screens, as can be seen by the increasing foremarch of abstract (sometimes minimalist) design philosophies. However, what stems from history (sceuomorphic) and the ideal solution to a problem (minimalism) can sometimes overlap or even be the same. Let's take paper as an example: Paper is usually white and written on with black lettering. Texts on desktop screens are also white and covered in black letters, words and sentences. We can assume that this is for historical reasons, a sceuomorphism if I ever have seen one, yet this coloring also happens to be the ideal one even though computer screens allow other ones. Yes, one might argue that dark mode was better than light mode, but we could still assume that white mode is better and make this a thought experiment, and the reasoning would still work. This shows that something originating as a sceuomorphism does not necessarily make it non-minimalist.
The amount of things being conveyable by shadows is limited to adding a third dimension and emphasizing things.
This is broadly simplifying. Generally, a shadow can have any radius/intensity from 0 (no shadow at all) to whatever number. Thus, a shadow can communicate any scalar property a thing might have, such as its importance or z-position, but also its nestling depth (useful for comments) or even more special cases such as its evilness or the time remaining until it automatically disappears. Limiting shadows to two thinkable usages when they can communicate really any number property is boldly uncreative.
Your definition of "important" and "unimportant" are arbitrary.
No, they are not, because I have no specific definition of the concept of importance. All I am assuming is that importance is a scalar property measured subjectively by the one who judges it (the artist or web designer attempting to communicate something and placing different value on different things), and that said person draws a line between "important" and "unimportant" based on the importance of a thing at an arbitrary, yet somewhat constant, point, which is something generally possible for any scalar property.
After responding to some possible counter arguments (or maybe strawmen?) to the point I am making, I'd like to drop some words about my motivation for writing this essay and making it the first one on my website.
In general, I don't care too much about minimalist design and its use of shadows. It's not a topic I hold especially dear, or one that I can rant about for hours. Yet that's the reason why I made it my first essay: To try out the format, introduce concepts such as the Tower Defense, and show my way of thinking: to focusing on dividing questions into abstract logical problems, dividing these into different logical cases, and reassemble these afterwards, instead of weighting pros and cons against each other. I also made this essay to test out my website's coding and see if it will be correctly displayed -after all, I coded everything myself- and to get some opinions from acquaintances before I dedicate myself to more important topics.
Final words
Shadows are not automatically evil, they are not some kind of confetti sprinkled around a webpage, but actively communicate things. If used correctly, they are not some kind of decoration, not some marker to put emphasis on a button, but something that actively communicates. As they say, a shadow can say more than a thousand words. I hope that I was able to fight some prejudices against shadows in UI design, and you might have gotten somewhat closer to forgiving me for all the shadows on my website thorough this essay.