MORE ON FLAT DESIGN

flat-iphone-salmon

Most online design started off as flat due to the limitations and difficulties of programming anything else. Depth was achieved by creating backgrounds and buttons and rollovers in Illustrator, Photoshop, or Fireworks.

When new devices and technologies emerge, we’re easily enthralled by what they can do and how we can advance interactivity. This interface excitement is often followed by a return to a focus on content – or going “back to the basics,” if you will.

Sophisticated style and CSS programming evolved, and naturally everyone jumped on the bandwagon to show that “we also know how to do that.” In similar ways, layout programs such as QuarkXPress and InDesign adapted drop shadows and blends that made it easier to create depth perception in designs without having to run everything through a time-consuming process in Photoshop.

(It might be interesting to bring up architecture here: Architects are also influenced by technology, and here we see more complex, organic structures and intricate surfaces – in many ways the opposite of graphic design. The advancement of 3-D printing technology might influence architecture even more in the future.)

Screen dimensions and pixel density are the restricting factors of hardware. Typographic scale and font weight determine both the aesthetics and usability of a flat design.

The same content needs to be delivered on devices of various dimensions, which has increased the need for and use of responsive design. One argument for using minimal design is that it can reduce loading time.

 

Things change


flat-poster-designNow that we have been seeing 3-D and skeuomorphic (a physical ornament or design on an object made to resemble another material or technique) design for a while, it’s just human to want a change. It’s liberating to “think simplistic” about the basics of design again.

Over the past few years, Google has shifted toward flat design but didn’t do it as a major redesign; rather, it slowly implemented new design pieces to each of its products. Android made a shift toward flat design with its Ice Cream Sandwich release two years ago.

Apple is moving in a similar direction with its iOS7 release, where flat background screens will feature the same color as the casing (of the iPhone).

It’s interesting that Apple has been using almost-flat design in its advertising for some time now, especially in ads associated with the iPod. Now, we see solid colors used in iPhone 5 campaigns.

Skeuomorphic design: a physical ornament or design on an object made to resemble another material or technique.

Skeuomorphic design: a physical ornament or design on an object made to resemble another material or technique.

flat-combo-colors

Bevel no more


The iOS7 is not fully flat, but flatter than previous versions of the operating system. The products themselves are manufactured in solid colors, with cases that can be mixed and matched in a variety of hues. “Express yourself” is now the slogan. The company has moved away from glossy and beveled icons with strong drop shadows. Instead, we see smooth and subtle gradients, light soft shadows, and vivid and bright colors.

flat-mobile

Mobile tech companies are moving toward flat design in their efforts to improve the overall user experience; at least that’s what’s being said and written about it.

flat-screen

Less is more again


Generally speaking, the more design elements added, the busier the resulting design. Gradients, shadows, patterns, and textures can bring a design to life, but too much of any of them can quickly clutter it up into a huge mess. This “mess” became a style in itself in the ‘90s, when clashing, overlapping type became the trademark for many designers.

Stripping away common UI elements – drop shadows, bevels, textures and the like – puts more importance on the fewer remaining elements. “Do I really need that?” is the driving force behind flat design.

Improving the user experience is not only about simplifying the user interface by making it look flat. Rather, those are the methods used to emphasize what matters most: the content.

The goal for any design project should be to improve user experience by focusing on good quality content, and letting the content shine without distractions from other purely decorative page elements.

Simplifying the overall layout might be a better approach than implementing a fully flat design. Think “edit” and “less is more.”

flat-ecommerce

The return of the grid


The grid plays an important role in interface design. When attempting to establish order and make usability intuitive across a project with a restricted set of visual elements, using a grid is helpful. Without 3-D elements, basic layout principles such as scale and placement become the best means by which to establish visual hierarchy. A flat design can be based on a more complex structure without feeling messy.

A carefully chosen broader color palette is an instrumental component in flat design.

In a flat UI, indicating that an element is interactive can be a challenge. This can be resolved by using contrast. In a white layout, the interactive elements might have color. In a text-driven design, simple iconography can be used. If the headlines are large and all lowercase, links can be small and uppercase.

flat-museo

 

Slab fonts and larger type


Although sans serifs tend to feel cleaner, the many new slab fonts seem to be popular, at least in web design. Easy to read on small screens, the direct, in-your-face look of slab fonts definitely defines “now.” Larger type online is also a part of this trend. This trend is strong in Scandinavian design but less so in the U.S.

The interfaces on mobile phones tend to use thinner sans serif fonts. As screen size and pixel density continue to increase on mobile devices, thinner and smaller type can be presented with better clarity.

flat-citizen

 

Icons


The use of icons is essential in flat design. Well-designed icons convey a call to action without any words. Tapping on a phone icon makes a call without having to display a phone number; the same goes for email icons. Print design can only use icons to lead the eye to where to find this information, but the information still has to be spelled out. Font Awesome, the iconic font designed for Bootstrap, is a set with more than 300 icons that easily can be implemented in web design. Many advanced WordPress themes include icons.

tont-awesome

 

flat-mobile-2

Flat design is “in” right now because of the focus on user experience – it’s all about the user experience everywhere. But does it hold up over time? Design trends change all the time; this trend is bound to change and evolve, as well. Web browsers still cannot render live type in curves or perspective. When that happens, can we expect more “organic” and fewer grid-based designs – because we’re human and not square? Time will tell.

 

Start typing and press Enter to search