2013 - a year of great hoopla surrounding the trend to flat design in
UI. The amount of speculation and unsupported attribution is
astounding. In the age of social media anyone is a commentator and thus
everyone has a theory and a soapbox from which to proclaim it. Why is
flat design so popular? How did this come about and why did it catch on?
Many
theories are to be found by anyone looking for answers. To begin with,
let us dismiss some of the easier targets, the theories put forth by
people partaking of the ever popular "It must be so because I think it
so" method. Theory: Graphic designers are busy - flat design is faster
i.e. easier. This idea is nearly beneath comment. It is the kind of
nonsense espoused by people who have little experience in the day-to-day
world of getting professional work done. The fact of the matter is that
the more fluff and ornamentation one has to work with, and the more
external justification one can bring to bear on any work of art, the
less scrutiny the real questions about choices and layout receive. A
historical example will well illustrate this. We may like or dislike the
David Carson / Raygun aesthetic (it is certainly outdated), but it will
be immediately recognized to anyone who has worked in this style, that
the irreverence is liberating. Impose a grid or golden mean based
critique on such a work and what do you get? One finds few if any
answers. The appeal of this and similar styles is the energy of the
unrestrained creative process apparent in the finished work. While
'harder vs. easier' is a slippery slope we don't want to venture upon,
it is not reckless to go as far as saying that in any sort of art
production, that irreverence is 'easier' than accuracy. Accurate
attempts can be critiqued in terms of finite success, but abstraction
and experimentation need to be critiqued in a less finite way.
Exceptionally simple styles must adhere to some guidelines to have
power. The starkness puts the subtle relationships of colors in the
palette out front; their success or failure cannot hide behind gradients
and drop shadows and skeuomorphic faux-realism. To design WELL in this
style, a designer must pay exceptional attention to grids, guides, and
proportions, as well as type choices, kerning, and color balance, or the
design will display an awkwardness that is unsettled and lacking in
gravity or stability. A designer working with fewer elements both on the
micro level - no gradients or outlines or shadows, and the macro level -
fewer items on the screen and more negative space, is forced to
consider the details of each far more closely. The skeuomorph justifies
itself - the button appears to be an actual button. It is the easy way
out. This could not be more true than it is in the age of design kits;
collections of ready made faux-real interface elements ready for
drag-and-drop designers to do with what they will. The result has a
built in appeal of polish and professionalism, and the client can see
that it looks like what it is (supposed to be).
Theory: Flat
designs represent smaller data footprints significant enough to affect
performance. One may hope that the designers asserting this are not the
same ones building the enormous and overburdened sites with superfluous
decoration (chrome) animation, and flash architecture. Such sites are
most unhappy landings for impatient Internet visitors. Performance is
actually driven far more substantially by network traffic and calls to
external content and links, as well as client side processing. A quick
comparison between the file sizes of highly stylized assets and simple
ones will reveal little difference, and the ability to draw them on the
client side (with CSS 3 for example) is trivial. Simply put, the size,
bandwidth, and performance aspects of flat vs. complex design assets are
a non-issue. The advent of CSS 3 and client side (Java / Postscript
style page definition) may be partly responsible for introducing the
look, but it is spurious to suggest that the differences in performance
are anything other than trivial.
What is really driving this
trend? A couple of possibilities are apparent. People who work in UI and
UX these days are familiar with the concept of wireframing - creating a
mockup of the interaction design in a clickable prototype. These
wireframes are sometimes crude, though often highly finished, but in
either case they show: button here, menu there, etc. In short, they can
easily be construed to be specifying a page or screen layout whether
this is the intent or not. This interaction design may inadvertently
step on the toes of the visual design. This can become an issue given
another paradigm well known to commercial artists: The consensus. As
professionals within an organization or with clients, we perform a
continuous tightrope act, navigating between the ideal artists vision /
progressive and/or elegant solution, and the clients or stakeholders
(sometimes provincial) tastes. This is a process and this process lives
and breathes on proposal / review / iteration. With respect to this
process and wireframes, this can lead to the 'coloring-in' of an
interaction design (including its layout) with little aesthetic input
from the visual designer. This is easily understood with some typical
and all to often heard quotes from clients such as, "Is this what the
final is going to look like? and "Why did it change? I liked it how it
was". One can see how this type of client might easily get 'stuck' on a
wireframe and insist that it be colored-in without any 'self indulgent'
visual designers making it any more complex than in need be. Before this
devolves to become a facetious and humorous cartoon, the author will
interject that he has been (more than once) in the exact same situation:
e.g. the client wants the rough he got attached to, to be colored-in
without changes, and then proceeds to choose the colors. Did the trend
of wireframing act as a precursor to flat design? It may have. The
process described here certainly has happened many times over has
resulted in flat interfaces, which if nothing else, contribute to the
momentum in this direction.
Add to Cart
0 comments:
Post a Comment