Functional minimalism in web design: history, application rules and best practices. How Minimalism Can Help Your Designs White space is the right space

Minimalism as an art style originated in the 60s of the last century. America became his homeland. The main features of minimalism are the simplicity of forms of expression, as well as a literal, objective approach.

The term "minimalism" was coined by the British philosopher and art critic Richard Walheim. He singled out this direction, analyzing the work of artists who go in their works by the least interference in the world around them.

The origins of minimalism lie in such movements as pop art and suprematism. The development of the direction was also influenced by the work of K. Malevich and the trends of the Bauhaus school.

Main features

Gradually, minimalism moved away from all other styles of painting. As a result, its main features were formed. This is primarily the expressiveness of colors, as well as smoothness and geometricity.

Russian constructivism, in the wake of the increased interest in it, encourages artists to widely use industrial materials to express their ideas. Picturesque works are often characterized by asymmetry, the repetition of various geometric shapes. The space of the picture, as a rule, is simple and unloaded.

Color in minimalism performs the task of zoning space, and not expressing emotions or conveying mood. The flow is also characterized by the absence of subjectivity and realism: the artist strives to ensure that the viewer independently perceives the object.

Refusal of the necessary in favor of the most necessary

Another feature of minimalism is the desire to demystify art in order to be able to reveal what is its fundamental basis.

At the forefront of the minimalists is the form, with which they convey the depth of color. The plots of the paintings are filled with metaphors and symbols. Painters convey emotions in a non-standard way: they use lines and various geometric shapes for this. Also, the works of minimalists carry some kind of subtext, often have acute social significance.

Minimalist artists

American post-painterly abstract artist Frank Stella (b. 1936) lived primarily in New York, where he began as a draftsman and graphic designer.

In 1959-1960, a series of works by Stella "Black Paintings" was published. As the name implies, the dominance of black lines was a hallmark of the paintings.

This creative upsurge of the artist was noticed by the owner of the New York gallery Leo Castelli, who realized the genius of the master and exhibited his paintings at home.

The Black Paintings were followed by the Aluminum Paintings and then the Copper Paintings. In memory of the terrible historical events, a cycle of works “Polish Villages” is being created.

Frank Stella: "You see what you see"

In his works, Stella preferred black as the dominant color, and generally gravitated towards monochrome, but sometimes he deviated from his traditions and then works were born as in the Concentric Squares cycle, in which polychromy and relief appeared.

Frank Stella has received the U.S. National Medal of the Arts and the International Sculpture Center's Lifetime Achievement Award.

Ellsworth Kelly (1923-2015) was an American painter and sculptor, one of the main exponents of minimalism, hard edge and color field painting.

Kelly's work is characterized by exceptional clarity and simplicity. Clear abstract contours of geometric surfaces are made in intense color.

In the late sixties he worked as a sculptor, later he began to use metal in his works. In the artist's work there are a number of works in the genres of pop art and surrealism.

Ellsworth Kelly died on December 27, 2015 at the age of 92. He was awarded the US National Medal of Arts.

The Spanish artist Anton Lamasares (b. 1954) expressed his thoughts in his works in a deliberately primitive form.

Due to the lack of towels, he used wood, ribbed cardboard, packaging and varnish. Thus developed his personal artistic style that attracted the attention of critics. Initially fond of expressionism, later developed into a kind of minimalism.

At the age of 19, he participated for the first time in an exhibition of young artists held at Praza da Princesa in Vigo. Since then, exhibitions have been held a huge number of times in different countries of the world.

The artist's works are held in numerous renowned cultural institutions such as the Reina Sofia Art Center, the Galician Center for Modern Art, the Madrid Museum of Modern Art and the Marugami Hirai Museum in Japan, as well as in many private collections and foundations.

Jose Esteban Basso

Chilean artist Jose Basso can be called the standard of minimalism. The artist himself calls his style "ritual painting". His paintings are laconic, restrained and concise, allowing you to relax, relax, without thinking about what you see. A minimum of objects, pure colors, no detail, no texture, just frozen infinity….

The master's works evoke only positive emotions, filling the viewer with light and warmth and allow you to enjoy ease and simplicity, you can safely meditate in front of them.

In addition to painting, the artist is also involved in photography and computer graphics, and of course, all these works are also characterized by restraint and laconicism.

Flow evolution

Gradually developed such areas of minimalism as neo-minimalism and post-minimalism. The first is characterized by inaccuracy, vagueness, and the representatives of the second are distinguished by their desire not so much to convey the idea itself, but to focus on the method of such transmission.

Purpose of minimalism

The significance of this direction in art lies in the struggle against academicism and dogmatism, the desire for simplicity, the complete rejection of all sorts of excesses in favor of the depth of meaning. To do this, artists are revising existing canons, abandoning old rules in favor of new ideas for conveying color, and also using images of geometric shapes.

Minimalism today

In our time, the ideas of minimalism have penetrated various industries, for example, interior design, landscape design, fashion design and more. Also, minimalism has not bypassed information technologies, for example, web design and software (development of software interfaces). Quite often we can see the results of the influence of minimalism in the development of technical solutions, for example, in the automotive industry, in household and engineering equipment.

In our wall painting works, our studio also sometimes uses the principles of minimalism.

Minimalism in graphic design is a simplification of the composition, an emphasis on an important detail.

Nothing superfluous and a lot of empty space. Basically, works made in this style use 1-2 colors and several shades of these colors. A clear font does not carry a visual load and uses no more than 2-3 typefaces.

"Faster than you think" (It's faster than you think)

A user-friendly and attractive website is the basic rule of modern web design. To achieve a good result allows the application of the principles of minimalism.

In this article, we will explain minimalism in web design, how to apply it correctly, what to consider when designing minimalistic interfaces, and also explain why sometimes “less is more”.

Minimal Design: A Brief History

Some web designers mistakenly think of minimalism primarily as an aesthetic choice. To avoid this trap, let's clarify the roots of this movement.

Despite the fact that this is a fairly new trend for design, its main ideas have been around for a long time. When discussing minimalist design, one immediately comes to mind the traditional Japanese culture that values ​​balance and simplicity. Japanese architecture, interior design, art and graphic design embody minimalism.

"Victorious wind. Clear Day" by the Japanese artist Katsushiki Hokusai (1830). Using simple colors creates a sense of calm

As a Western movement, minimalism began its existence in the early 20th century. Influenced by the introduction of modern materials such as glass and steel, many architects have begun to incorporate minimalist designs into their buildings. Ludwig Mies van der Rohe, a German-American architect, was one of the pioneers of the minimalist movement. He is credited with the first application of the phrase "less is more" to architectural design.

German Pavilion in Barcelona, ​​designed by Ludwig Mies van der Rohe in 1929

The concept of “less is better” has moved from architecture to other arts and industries: interior and industrial design, painting and music. As a visual design trend, minimalism became popular in the 1960s as artists moved towards geometric abstraction in painting and sculpture. The artistic movement found its expression in works associated with the Bauhaus school. One of the famous minimalist artists who influenced the movement was Donald Judd, whose artwork is full of simple shapes and color combinations.

In various fields of fine art, the key principle of minimalism left only the essential part of the function to focus the attention of the recipient, as well as enhance the overall elegance. As Donald Judd said: Form, volume, color, surface - this is something in itself. It cannot be hidden as part of a completely different whole. Forms and materials should not change depending on their context».

In his work, Judd sought autonomy and clarity for the constructed object and the space it created.

What is "minimalistic web design"?

Today, minimalism is emerging as a powerful technique in modern web design. It became popular amid a reaction to the trend towards increasing complexity in design. Visual complexity has been proven to affect the user experience of a site: the more elements in a design, the more complex it will look to the user. When applied correctly, minimalism can help us focus our designs on simplifying user tasks. A study by EyeQuant suggests that clean design results in a lower bounce rate. Minimalism has brought additional benefits to websites, such as faster loading times and better compatibility with different screen sizes.

Perhaps one of the most famous examples of minimalism in web design is Google Search. Google has been prioritizing the simplicity of its interfaces since its beta offering in the 1990s. The home page is completely designed around a central search function. Everything that does not work for branding is removed.

The Google home page hasn't changed much in 15 years.

The principle of simplicity may lead to the false belief that minimalism is not difficult to implement, but in fact it means much more than just "less." Let's define the characteristics of minimalism.

Only important

A minimalist strategy in web design is to simplify interfaces by removing elements and content that do not support user tasks. To create a truly minimalistic interface, the designer needs to strictly arrange the elements, showing only the most important of them and discarding everything that distracts users from the main thing (for example, unnecessary embellishment). Every element in a design, be it an image or text, has a purpose; it should not be used unless it adds further clarity to the message.

At the same time, make sure that by removing or hiding unnecessary content, you do not interfere with basic user tasks. The idea is to make the message more clear, not hidden. So, design around the content and leave enough visible elements (such as the main navigation) so that users don't get lost.

negative space

Unsurprisingly, the most common element of minimalism is the lack of elements. Negative, or white, space (Negative/White Space) is a distinguishing feature of minimalism, it is this that gives it its power of impact. Negative space is simply empty space between visual elements. Having white space means more emphasis on the elements present. In Japanese culture, there is a "ma principle": the space between objects is perceived as a means of emphasizing the value of these objects.

While negative space is often referred to as white, it doesn't have to be that color. Some sites use full color backgrounds.

The main design element associated with minimalism in most people's minds is negative space.

Visual characteristics

In a minimalist design, every detail matters. What you decide to leave is very important.

flat texture

Minimalism often resorts to flat textures, icons, and graphic elements. Flat interfaces do not use obvious lighting effects, shadows, gradients, or other types of textures that would make elements look glossy or 3D.

Minimalist visual hierarchy with an emphasis on flat UI elements is quite common on modern websites

Catchy photos and illustrations

Images are the most visible type of art used in minimalist design. They provide emotional connections and create a special atmosphere. But a photograph or illustration must follow the principles of minimalism. The wrong image (photo with a lot of details or distracting elements) will offset the benefits of the minimalistic interface surrounding it and destroy the integrity of the structure.

All characteristics of minimalism should be expressed in images

Limited color scheme

Color plays a significant role in web design as it is able to establish both informational and emotional connections between a product and a user. Color can create visual interest or grab attention without requiring any additional design elements or graphics. Designers who strive for minimalism tend to make the most of a few chosen colors, and it's not uncommon to use only one color (monochrome color scheme).

As visual information is reduced, the color palette becomes more visible and its impact on the user increases.

Spectacular typography

In addition to color, another major visual element is typography. Bold font instantly draws attention to words and content, helping to create an eye-catching visual impact.

Use typography to convey meaning and create visual interest

Contrast

Since the goal of minimalist design is ease of use, high contrast textiles or graphics can be a good choice. High contrast can direct the user's attention to important elements and make text more readable.

Often, minimalist design uses only one color as an accent, highlighting the most important elements of the page.

Best Examples

Because minimalist design requires the same level of clarity and functionality as "normal" design, but with fewer elements, there are some problems for developers.

Achieve a Single Composite Center

The philosophy of minimalism is centered around the idea of ​​design around content: content is king and visual structure should be a good backdrop for it. The goal is to make the message clearer, not only by eliminating distractions, but by focusing on what's important. In this case, a strong focal area is of particular importance.

Follow the "one concept per page" rule and center it around one visual

Create high expectations with the top of the screen

An area on a page that is visible before any action is required encourages users to explore the site further. To guarantee this development, you need to provide interesting, intriguing content. Place meaningful content at the top of the screen with plenty of white space around it, then increase the amount of content on the page as you scroll down.

This is what the Apple home page looks like above the fold line.

Write capacious texts

Remove unnecessary. Your text should include only the bare minimum of words necessary to adequately communicate your message.

Get rid of all unnecessary words.

Simplify navigation (but don't hide it)

Minimalism should be simple. One thing that simplifies the user experience is the ability to handle tasks easily and seamlessly. The most contributing factor to this is intuitive navigation. But navigation in a minimalistic interface is a serious problem: in an attempt to remove all unnecessary elements and streamline content, developers partially or completely hide the navigation. The menu icon that expands a full list of items remains a popular choice for many professionals, especially in minimalist web design and mobile user interfaces (User Interface, UI). This often leads to low discoverability of navigation elements. Take the hidden navigation of this website:

Quite often, simple, minimalistic user interfaces carry hidden complexity. In this case, the main navigation options are hidden by default.

Compare with the always-on navigation of this site:

In most cases, always-visible navigation is better for users.

Remember that simple navigation is always one of the main goals of web design. If you're building a minimalist site, make sure your visitors can easily find what they're looking for.

Use functional animation

Like any other element, animation should follow the principles of minimalism: it should be implemented subtly and only when necessary. Good animation has meaning and functionality. For example, you can use animation to save screen space (showing hidden details on hover). The animation in the example below adds discoverability to the elements and makes the usual task more interesting:

Animation makes interaction with the site more dynamic.

Use minimalism in landing pages and portfolios

While in general the content-driven minimalist design philosophy applies to every site, sometimes this aesthetic can be inappropriate. Minimalism is well suited for creating portfolio sites and landing pages that have fairly simple goals and relatively little content. Marie Laurent's portfolio is a typical example of what many designers would call a minimalist website.

At the same time, applying minimalism to a more complex site can be difficult. The absence of important elements can harm a site rich in content (low density of information forces the user to scroll further in search of content). The best solution would be to create a landing page in the style of minimalism, leading to more detailed pages.

Conclusion

Minimalistic sites have a simple interface that removes unnecessary elements and content that does not support user tasks. What inspires this design is the combination of usability and high aesthetics: a beautiful, easy-to-navigate website is a powerful communication tool.

Minimalism originated in the 1960s in America. Over time, this style has changed, but is still popular. Paintings, clothes, interiors… you can find it everywhere. Today we will talk about minimalism in graphic design.

Today, minimalism as a style in graphic design is not yet able to compete with other abstract and loaded styles (grunge, vintage, pop art, etc.). it is not used extensively enough, but in the near future, minimalism may catch up and even overtake some styles, as people have already “overeaten” abstract and bright, bulky and loaded graphic materials.

Criteria for minimalism

So, what is minimalism directly in graphic design? This is a simplification of the composition, the use of free space in their works, the emphasis only on the main details and their selection, a simple presentation of topics, conditions, products.

Ergonomics / usability
Minimalism affects criteria such as ergonomics, i.e. using less to create the desired composition, observing the relationship between the elements of the subject (for example: 2 or more different elements in an illustration), creative work (for example: graphic performance of several products of one manufacturer in one material), etc.

Speaking accessible, this is: the correct and simple use of only the necessary - removing all unnecessary (or not introducing it at all) we get free space. The correct setting of free space in work gives ergonomics, does not distract and concentrates on what is needed. In other words, we get usability at work.

Think well over the design elements, it is better to pay attention to one element than to "rivet" ten more.

Use of color

Color in minimalist graphic works is an important criterion, namely color contributes to perception. Often 1-2 primary colors and several shades of selected colors are used for one work. The most commonly used colors are white, black, gray and yellow, as well as their many shades. But this is not a rule, no one restricts the use of only classic colors.

Sometimes, when reading various articles about minimalism in design, one has to observe people saying that it is worth strictly limiting the palette to black and white. In my opinion, this is a misconception, in this direction you can use any colors, the main thing is the observance of the composition (subject or purpose of the work) with the selected colors.

Font and text / typography

Typography is also quite an important criterion for minimalist design. Here the choice of typefaces depends on the subject or purpose of the work. The font should be meaningful, visually accessible and not carry a visual burden. It is advisable to use no more than 2-3 typefaces (for example: 1. title, 2. text, 3. callouts and copyrights; or 1. title, 2. slogan, 3. text).

In general, the use of typography directly in minimalism (graphic design) is quite flexible, you can choose a non-standard font, make an accent in the form of increasing the necessary text, increase indents, etc. But in this case, the main thing is the correct selection to the subject and the conclusion of the text in the composition. For example, I prefer standard fonts (Arial, Helvetica, Garamond, Trebuchet MS, Verdana, Times) with changes in the necessary parts (for example, in illustrations or printing). I like the strict use of the font. Well, in general, it all depends on the subject or direction of work, and the headset can be different.

The main thing is to limit the number of typefaces, the correct positioning of the text in the work (placement, position, indents, ratio to other elements).

Conclusion by criteria

It is worth noting: the composition without unnecessary elements (only the necessary), the use of free space, the choice of color (s), based on the subject or working conditions. Less variegated colors (better to use strong or soft colors/tones/shades), less number of colors, typeface suitable for the subject or working conditions, fewer fonts used, giving emphasis to the font (size, indents, positioning and placement, correlation with other elements ), the correct position of elements and highlighting important details.

On my own behalf, I will say that everyone has a vision of minimalism in their imagination, and everyone can have their own. The minimalist direction has no standards, the main thing is to avoid excess, use less and maintain functionality. Those. simple work with the desired effect (advertising, illustration, cover, etc.).

Even if it is impossible to remove unnecessary elements from the work, you can use not the style of minimalism, but its properties: with the help of free space, the right colors and font accent, you can highlight (submit) the main details of the work, thereby taking unnecessary elements to the background ...

Examples of Minimalism in Graphic Design Industries

Well, now it's worth taking a look at the work in the minimalist style in the branches of graphic design.

Packaging design (products)

Shown here is an example of packaging design simplification - creating in a minimalist style.

Polygraphy: posters

Graphic posters (posters) for films in the style of minimalism.

Printing: book covers

Graphic design of book covers in a minimalist style.

Illustrations / computer wallpaper

Minimalism in computer graphics, namely in the performance of wallpapers for the OS desktop.

We have translated for you an interesting note by TheNextWeb author Amber Lee Turner, which tells about the origins of flat design, how it changes interfaces now and what lies ahead for the flat style in the future.

If you are even slightly interested in graphic design, then you must have heard about the term “flat design”. This direction first appeared on the Web a few years ago, and recently flat design has taken off and has become super popular thanks to large companies that have begun to actively use flat design.

But where did this most flat design come from? And why do we watch it on the Internet? Like everything in design, knowing the history of this style will help you make more informed decisions when using flat design.

Let's take a look at what flat design is, what past design trends have influenced it, and find out how it became so popular.

What is flat design?

Those of you who are not familiar with the meaning of flat design should know that flat design is a design style in which elements are devoid of any stylistic features and do not look like the embodiment of real objects (so-called skeuomorphism).

From a non-professional point of view, flat design is devoid of elements such as gradients, shadows, textures, which are designed to make elements more voluminous and realistic.

Today it seems that designers gravitate towards flat design a lot because it is perceived as fresh and modern and allows you to focus on what matters most: content and message.

By getting rid of all kinds of stylistics, designers make their projects more durable, and now using flat design is the most correct strategy.

But this does not mean that other styles are not taken into account at all. Often, to denote the opposite of the flat style, the term "rich design" is used, which is characterized by the presence of a large number of all kinds of embellishments - bevels, reflections, shadows, gradients. "Rich design" is used to make things more "tactile", more user-friendly when browsing a website and using mobile apps.

It is important to understand that “rich design” is not the same as skeuomorphism. Skeuomorphism involves the deliberate use of physical analogues of certain elements (toggle switches, buttons, skin textures, and so on) to make them look familiar to users.

Where did flat design come from?

Most of what we see now on the Internet or in the digital world comes from printed and artistic ancestors. While it is difficult to say exactly when the era of flat design began and where its origins are, there are several clear periods in design and art where the flat style drew inspiration from.

swiss style

The Swiss Style (sometimes referred to as the International Typographic Style) is the first flat design inspiration that comes to mind, so it's worth taking a closer look at it.

Swiss design is mainly focused on the use of guide grids, sans-serif typography and a clear hierarchy of content and design. During the 1940s and 1950s, Swiss design could often be seen in many photographs as a design element.

Typography is one of the key elements of the Swiss style, and one cannot fail to mention the Helvetica typeface, which also appeared in Switzerland in 1957 and is actively used to this day.

It is interesting to see how flat design was used even before it was introduced into their work by Microsoft and Apple and made it popular, because the Swiss style can be traced even in Germany in the 20s of the XX century. At that time, it became very popular and its elements were used by the famous German Bauhaus school - art lovers will not lie that the Bauhaus places a lot of emphasis on typography, which has a lot in common with the Swiss style.

Minimalism

A huge influence on flat design can also be found in the history of minimalism. Today, the term "minimalism" is often used interchangeably with flat design, but minimalism has been around long before flat design existed. Minimalism has its own long tradition in architecture, fine arts, and design.

Minimalism has a rich history and encompasses many different art forms, but where flat design is now dominant, minimalist elements are often used. Such elements of minimalism as strict geometric shapes, bright colors, clear lines are also used in flat design.

One of the most famous minimalist works of art is this Blue Age painting by Yves Klein:

It's safe to say that the mixture of Swiss style and minimalism has greatly influenced flat design and the modern look of the digital world.

The era of flat design from Microsoft and Apple

History repeats itself and the same is true for flat design. As we learned above, flat elements could be found back in the 20s of the XX century.

Quite a few lone designers have worked with flat design, but it was Microsoft and Apple that made it so popular. Well, let's talk about them.

Microsoft and the Metro interface

Microsoft started working with flat design long before the introduction of the Metro interface. In the mid-2000s, Microsoft released an iPod competitor, the Zune (I'm sure some of you still remember that name - ed. note).

It was with the release of Zune that a unique design style appeared, in which the emphasis was placed on large typography. The design of the Zune software was very different from most Microsoft software products of the time. After all, Windows Phone 7 came out only at the end of 2010, and the design of this mobile operating system took a lot from the Zune software interface. Large and bright shapes based on guide grids, sans-serif typography (grotesque), flat icons.

Microsoft will soon call this interface Metro

This design has become so popular that Microsoft has released the Windows 8 desktop OS, which is based on the Metro interface. Clear square shapes, emphasis on typography, bright colors - all this has also migrated to personal computers. The same interface is used in almost all Microsoft products, including the Xbox 360.

How Apple shook up skeuomorphism

Despite the fact that Microsoft has been working on a flat interface for a long time, Apple also had a trick up its sleeve. At first, Apple slightly hinted that it was going to abandon skeuomorphism, and with the announcement of iOS 7 in June 2013, it became clear that the Cupertinos were determined to use flat design.

Since Apple had a lot of adherents at that time, the release of “flat” iOS 7 made this design style more popular than ever. And this happened in an extremely short time (meaning a quick transition from iOS 6 to iOS 7 - ed.).

Apple's design aesthetic has strongly influenced the design of mobile apps and websites, as most designers have finally come to consider this style as the most modern and appropriate. When Apple switched to a flat style, skeuomorphism instantly became obsolete and a huge number of sites and applications urgently needed a redesign.

This can be clearly seen in mobile applications that have seriously changed their design and interface to meet the standards of iOS 7. And this allowed users to get used to the flat iOS 7 relatively quickly.

Adaptive design

It's also worth noting that one of the reasons why flat design has become so popular is the so-called "responsive design". With the development of Internet technologies, users of various devices began to access the Network - and first of all, from mobile devices. This forced designers to use responsive design so that sites look equally good on full-fledged computers, as well as on smartphones and tablets. And designers have used a lot of “flat” elements when designing responsive websites.

Flat style allows web design to be more efficient. Without unnecessary interface elements, sites load faster, giving the user the opportunity to focus on content.

It is also well in line with the trend of increasing screen resolutions on mobile devices. It's much easier to display clean and simple shapes and typography than it is to load heavy images every time that look different on different screen resolutions.

The future of flat design

Of course, we do not have a glass ball that predicts the future, but it is quite clear that flat design, like everything else, is not eternal and will subsequently be replaced by some other style. After all, flat design has obvious flaws and designers will continue to experiment, which will eventually lead to the emergence of a new dominant style that will leave flat design in the deep past.

In this regard, it is interesting to see what kind of design work is currently being done at Google. On the one hand, there are a lot of flat elements in their applications, but Google has not abandoned many elements of skeuomorphism - for example, they still use shadows. Apparently, the "corporation of good" wants to take the best from each of the styles and create their own, unique style.

Now flat design is perceived as an exciting fashion trend, and this is certainly an important milestone in the history of design. But do not forget that in many ways, flat design is just the reincarnation of Swiss style and minimalism in the new digital world.