The natural evolution of user interface design

The modern movement of the web


In the 19th century, with the advent of mechanized mass production, an excess was created both in production and in consumption. Objects that served no purpose and cheap imitations started to became common. And mass produced ornament was unleashed.

Ornament in the form of handcrafted decoration had a reputation of being expensive, and used to be a symbol of wealth and luxury. With the evolution of mechanized processes, these kind of decorations became cheap and quick to make, they were mass copied, without any thought of what type of design would be better suited for mass production.

After World War I, designers at the time were becoming increasingly aware of the challenges and problems of an industrialized society.

This sociological phenomena gave origin to the modern design movement, this movement was characterized by clean geometric forms, plain surfaces and the use of modern materials such as chromium plated steel and glass, the use of color was also very restrained.

Decoration was not necessary and was many times seen with disdain, Adolf Loos, wrote an essay titled Ornament and Crime The lower the standard of a people, the more lavish are its ornaments. To find beauty in form instead of making it depend on ornament is the goal towards which humanity is aspiring.”

For the modern design movement, beauty and elegance were to emerge from the design of the content itself, not from a superficial coat of decoration.

In The Decorative Art of Today, Le Corbusier said that “The luxury object is well-made, neat and clean, pure and healthy, and its bareness reveals the quality of its manufacture”.

Villa Savoye is a house projected by Le Corbusier — is considered one of the 20th century modern architecture greatest icons

By 1920 modern design ideals started to spread and had a very important focal point at Germany in a school whose influence has been tremendous, the Bauhaus. The students were urged to explore industrial materials and processes, to experiment freely, but always to keep in mind the purpose of their design should serve, form should follow function, creation for use.

One of the great innovators of this school of thought was Ludwig Mies van der Rohe. His sleek Barcelona chair is an example of the values that guided his work: economy of line, beauty of proportion, and extreme precision.

Mies van der Rohe, Barcelona chair, — economy of line, beauty of proportion, and extreme precision are revealed in this chair.

Dieter Rams also applied this principles thoroughly in industrial design, and the products he and his design team developed for Braun, are reflective of a way of thinking that came from Bauhaus and the modern movement.

His ten principles for good design are still valid today for any design:

“For me good design is innovative, useful, aesthetic, understandable, unobtrusive, honest, durable, thorough to the last detail, concerned with the environment and, last but not least, achieved with as little design as possible”
Dieter Rams
Braun SK 61 phonosuper -Hans Gugelot + Dieter Rams 1961
Dieter Rams Braun RT 20 tischsuper 1961

In 1960, Dieter Rams designed the 606 Universal Shelving System. This is a reflex of his design principles. This design with 54 years old still looks good and modern, its reusable, durable and modular and is still produced and sold today.

606 Universal Shelving System

If we compare the history of architecture and industrial design, with the history of user interface design, we can establish a relationship and see a similar evolution. All of the design disciplines mentioned above, evolved from a very basic form, that due to improvements in manufacture and technology suffered from excess and careless use of the tools available, and from that excess a more pure and honest form has risen.


From rudimentary to skeuomorphic to flat

Looking at the history of the web, we can see that the first websites were very rudimentary in design terms, no proper styling technology had emerged yet, so at that time we had websites that were based solely on basic typography and color.

With the unveiling of CSS we saw an evolution in color and layout.

New forms of layout, better control over fonts, gradients, shadows and animations started spreading all over the web, very often, not adding more value to the user or the content itself.

Then skeuomorphism started rising having its main precursor at apple, this style was based on symbols borrowed from the real world, for the sole purpose of making an interface look familiar to the user. This was used to attract and introduce users, to new mediums and interactions of the digital world. But if you use a real object as a base for your design, you are inevitably inheriting its real world limitations, therefore not taking full advantage of the capabilities of the digital form.

Apple podcast app

After skeuomorphism and with the quick adoption of new technologies, there was a comeback to a pure digital look that walked away from the limitations of skeumorphism, this style relies mainly on typography spacing and color to bring order to the digital canvas, this is what we nowadays call flat design, this i believe is the beginning of the modern movement of the web.

Windows 8 stocks app
IOS 7

Simplicity

Today’s constant flow of information is overwhelming, we’re constantly filtering and evaluating everything.

Therefore there is a need and a desire for simplicity, reduction of clutter and simple and honest products.

Following this trend there seems to be a growing number of apps that are highly focused and have a very limited number of features. Traditional software, websites and apps tend to get filled with lots of features and options, many times just in a need to justify an overrated price tag and to disguise their lack of utility and content.

Highly focused apps tend to prefer simplicity over options, ease of use over features.

“Simplicity is the ultimate form of sophistication”
Steve Jobs

How is great design achieved

From the article learning to see at http://ia.net/blog/learning-to-see/
“There is plenty of good design that is ugly, and of course there’s good design that both works well and looks pretty. But a design that doesn’t work can never be substantially good — ugly and broken is just worthless crap, and pretty and broken is phony or kitsch”
Oliver Reichenstein

Good design is an evolutionary and iterative process, it doesn’t get done at the first time and it takes a lot of trial and error to evolve in the right way.

To achieve great design you first need to understand and know who you’re designing for, you need to know your users needs and what are their expectations about your product, you need to empathize with them, and really get to know and feel the problem you’re trying to solve, what are you trying to achieve.

By looking to the diagram above how do you get to the beautiful quadrant?

“Usually you move from the center to the upper left into Bold. Because first of all you need to make it work. Once you are there, you need to move to the right. How do you get from Bold to Beautiful?
You don’t get there with cosmetics, you get there by taking care of the details, by polishing and refining what you have. This is ultimately a matter of trained taste, or what German speakers call Fingerspitzengefühl (literally, “finger-tip-feeling”).”
Oliver Reichenstein in Learning to see

To achieve the beauty quadrant you need to establish a proper foundation that allows you to evolve, you need to understand what you’re doing, why you’re doing it and where you’re going very clearly. With this information in mind you need to lay a path that allows you to evolve, refine and iterate, and maybe if you’re good and work hard you’ll get to the beauty quadrant.

In the picture below you’re looking at 50 years of design evolution of the Porsche 911.

Porsche 911
True simplicity is, well, you just keep on going and going until you get to the point where you go… Yeah, well, of course.”
Jonathan Ive
Show your support

Clapping shows how much you appreciated Luis Vieira’s story.