What is flat design?
Ao meu ver aquele preceito antigo "Menos é mais", esta voltando a tônica. Aquele design poluido e cheio de elementos em flash e autorrelevos usado na web, com botões com estilo de gotas que vinha dominando a criacão, esta com seus dias contados.
Is this the future of user interface design? Designer Luke Clum examines the emerging trend for flat design and what you can learn from it.
In the past, web designers put a particular focus on showing off their skills by packing sites with flashy illustrations and animations that supposedly wowed their visitors. Then came a shift toward skeuomorphic design , which attempted to bring real life to the screen, with faux-realistic textures, drop shadows and real object characteristics.
Today all that's now giving way to the flat design trend, which opposes all of these 'artificial' design techniques, in favour of a more simplified, classically digital aesthetic. If you’re looking for a user-centric web design style, this trend might be just what you need...
No entanto, só porque o design não tem qualquer design chamativo não significa que este estilo é chato. Design brilhante, cores contrastantes, fazem ilustrações e botões facilmente chamar a atenção e guiar o olhar do usuário. O objetivo do imaginário minimalista também contribui para o caráter funcional do design plano.
O design minimalista que enfatiza a usabilidade sempre teve a sua vez. Veja este interessante artigo de Lucas Clum, ele é um designer e desenvolvedor web em Seattle/USA.
.....................................................................................................................................................
Is this the future of user interface design? Designer Luke Clum examines the emerging trend for flat design and what you can learn from it.
In the past, web designers put a particular focus on showing off their skills by packing sites with flashy illustrations and animations that supposedly wowed their visitors. Then came a shift toward skeuomorphic design , which attempted to bring real life to the screen, with faux-realistic textures, drop shadows and real object characteristics.
Today all that's now giving way to the flat design trend, which opposes all of these 'artificial' design techniques, in favour of a more simplified, classically digital aesthetic. If you’re looking for a user-centric web design style, this trend might be just what you need...
What is flat design?
Windows 8 is at the forefront of the flat design trend
Flat design is a minimalistic design approach that emphasizes usability. It features clean, open space, crisp edges, bright colours and two-dimensional/flat illustrations.
Microsoft was one of the first to apply this design style to its interface, seen by some as a backlash against the popular skeuomorphic design that Apple kicked off with its iOS interface. Instead of converting a real-life object, such as a calendar, into a tiny realistic illustration, advocates of flat design identify apps with simple, icon-like images.
Rather than bringing aspects of real life to an interface, this illustrates a clear separation between technology and tactile objects.
Minimalist doesn't mean boring
In flat design, ornamental elements are viewed as unnecessary clutter. If an aspect serves no functional purpose, it's a distraction from user experience. This is the reason for the minimalistic nature of flat design.
However, just because it lacks any flashy design doesn’t mean this style is boring. Bright, contrasting colours make illustrations and buttons pop from backgrounds, easily grab attention, and guide the user’s eye. The purpose of minimalistic imagery also contributes to flat design’s functional character.
Quick to grasp
Simple images convey messages more quickly than detailed illustrations. Images like icons can indicate universal actions or purposes so that everyone can easily understand them.
It’s easy to see an immediate difference between a skeuomorphic and a flat design. Notice how the bigger, solid colour blocks are more attention-grabbing and the meaning of the icons can quickly be perceived.
Xero's guide to cloud computing uses flat design to make its message easy to follow
This cloud computing guide from online accounting service Xero uses a combination of flat illustration and iconography to demonstrate different benefits of working with the cloud. The simplicity of the imagery makes it easy to understand the message, which takes away any need for excessive copy.
What you can learn from it
Flat design reverts back to the basics of design as a functional tool. A website is designed and judged by how well it works, as opposed to what it looks like.
This raw functionality forces a site’s focus to be on user experience, so websites that employ this design style successfully are likely to receive positive feedback as being user-friendly.
How to do it
To design an effective flat site, all design elements must be centered on this idea of simplicity.
Solid, vivid colours give aspects the emphasis needed to set them apart in place of illustrative detail; sans serif typography provides a clean, crisp supplement to illustrations; text is concise and to-the-point; UI elements like buttons and links are clear and noticeable.
Everything should be designed with the same goal in mind to create a cohesive visual and functional web design.
Examples of flat design
Colours and icons help make meaning clear with minimal copy
This trip planning app design by Indonesian user interface designer Bady makes it extremely easy to book a flight based on packages and budgets. Everything is clear and understandable, and the design relies mostly on colours and icons to give meaning. The copy is concise, and the UI aspect of searching for an ideal flight is obvious.
The LayerVault app's site shows how animation can fit into a flat design approach
LayerVault is a site dedicated to providing a user-friendly means for designing and storing files. The entire design and workings of the site reflect this purpose.All illustrations, colours, type and UI elements reflect flat design, which emphasizes its commitment to being easy to use. It even features simple animation, which shows that flat design can still take advantage of different design mediums without becoming distracting.
Flat design doesn't depend on bright colour
This weather app UI design shows that flat design can be successful even without the use of bright colour. The crisp iconography and large typography draw attention to the most important aspects of the weather, which is what the user is looking for.
When exploring flat design in your work, make sure to design every aspect with a minimalistic and user-centric perspective to ensure a unified interface. Once you’ve successfully done this, your users will appreciate the functional nature of your website.
Flat design is a minimalistic design approach that emphasizes usability. It features clean, open space, crisp edges, bright colours and two-dimensional/flat illustrations.
Microsoft was one of the first to apply this design style to its interface, seen by some as a backlash against the popular skeuomorphic design that Apple kicked off with its iOS interface. Instead of converting a real-life object, such as a calendar, into a tiny realistic illustration, advocates of flat design identify apps with simple, icon-like images.
Rather than bringing aspects of real life to an interface, this illustrates a clear separation between technology and tactile objects.
Minimalist doesn't mean boring
In flat design, ornamental elements are viewed as unnecessary clutter. If an aspect serves no functional purpose, it's a distraction from user experience. This is the reason for the minimalistic nature of flat design.
However, just because it lacks any flashy design doesn’t mean this style is boring. Bright, contrasting colours make illustrations and buttons pop from backgrounds, easily grab attention, and guide the user’s eye. The purpose of minimalistic imagery also contributes to flat design’s functional character.
Quick to grasp
Simple images convey messages more quickly than detailed illustrations. Images like icons can indicate universal actions or purposes so that everyone can easily understand them.
It’s easy to see an immediate difference between a skeuomorphic and a flat design. Notice how the bigger, solid colour blocks are more attention-grabbing and the meaning of the icons can quickly be perceived.
Xero's guide to cloud computing uses flat design to make its message easy to follow
This cloud computing guide from online accounting service Xero uses a combination of flat illustration and iconography to demonstrate different benefits of working with the cloud. The simplicity of the imagery makes it easy to understand the message, which takes away any need for excessive copy.
What you can learn from it
Flat design reverts back to the basics of design as a functional tool. A website is designed and judged by how well it works, as opposed to what it looks like.
This raw functionality forces a site’s focus to be on user experience, so websites that employ this design style successfully are likely to receive positive feedback as being user-friendly.
How to do it
To design an effective flat site, all design elements must be centered on this idea of simplicity.
Solid, vivid colours give aspects the emphasis needed to set them apart in place of illustrative detail; sans serif typography provides a clean, crisp supplement to illustrations; text is concise and to-the-point; UI elements like buttons and links are clear and noticeable.
Everything should be designed with the same goal in mind to create a cohesive visual and functional web design.
Examples of flat design
Colours and icons help make meaning clear with minimal copy
This trip planning app design by Indonesian user interface designer Bady makes it extremely easy to book a flight based on packages and budgets. Everything is clear and understandable, and the design relies mostly on colours and icons to give meaning. The copy is concise, and the UI aspect of searching for an ideal flight is obvious.
The LayerVault app's site shows how animation can fit into a flat design approach
LayerVault is a site dedicated to providing a user-friendly means for designing and storing files. The entire design and workings of the site reflect this purpose.All illustrations, colours, type and UI elements reflect flat design, which emphasizes its commitment to being easy to use. It even features simple animation, which shows that flat design can still take advantage of different design mediums without becoming distracting.
Flat design doesn't depend on bright colour
This weather app UI design shows that flat design can be successful even without the use of bright colour. The crisp iconography and large typography draw attention to the most important aspects of the weather, which is what the user is looking for.
When exploring flat design in your work, make sure to design every aspect with a minimalistic and user-centric perspective to ensure a unified interface. Once you’ve successfully done this, your users will appreciate the functional nature of your website.
Comentários