The design industry sure does see it’s changes in the course of a year. Remember the Web 2.0 days? Those were the days of shiny buttons, glossy text, and tight line heights. Looking back on those designs now, it makes you wonder, what were we thinking? Nothing you could do to a design with big glossy text and outrageous shiny buttons would make it look good now. It seems as if the design world has become desensitized to gradients for the most part. Since some of the early Zune interface changes, Microsoft has single handedly moved the industry in a more metro style approach to UI. Apple has jumped on the bandwagon, by stripping their skeuomorphic approach from previous releases of iOS to a flat aesthetic.
Of course those shiny buttons, and gradient text had their purpose. The purpose was to attract attention to a call to action. A big button with gloss, who would miss that, right? We also had badges that would be just as glossy to call attention. The fact of the matter is there is a much better way to execute these types of call to action segments. As designers, we’ve learned more about how to make these cleaner, and more approachable through beauty. Through the transformation out of the web 2.0 days. We’ve cleaned up the clutter, increased whitespace, stopped using Arial and lastly moved away from gloss. Moving into a direction that used gradients, textures, noise, bevels and so much more to achieve visual stimulation. Now quickly moving to a more flat design approach.
Some people might be wondering what flat design is. Simply put, flat design is the use of color without the use of color shift such as gradients. It can also refer to the lack of textures, borders, inner shadows and bevels. We’ll explore the difference of flat design, and how a super subtle color shift can enhance your designs to the next level.
I love flat design, especially when it’s executed well. Sometimes designers do not implement flat design in a well balanced manner. When we think of flat, we think of boring. That’s why it’s very important to delicately handle flat design. A great user experience also depends on user interactions such as swipe menus, animations, etc. This is especially true for flat designed user interfaces. Using colors that work in harmony does wonders, but also adding a bit of extra “flair” to this - just not 37 pieces.
In the example above we can see just how much difference a subtle gradient can make. I still consider this style to be a flat design. There are no borders, or inner shadow to give it a casting light, or any other effects than a slight color shift. This small style diversion can do wonders for your design.
Recently I redesigned Refresh Denver, a local meet up for web professionals in the Denver area. Let’s break down the redesign of the site and take a look at the flat elements in combination with elements that are textured and not so flat.
The header and navigation area are super clean. The logo for Refresh Denver is all flat, there is no gradient color shift whatsoever. The header top line is the same flat color with no color shift above the logo. Next we have the introduction header below the navigation.
Using a very slight texture on top of the header image gives this header area the perfect touch, and darkens the image to the exact hue that I wanted to coexist with the color combinations that I chose to design with. As you can see, the slight gradient buttons make the design much more colorful and inviting. Would completely flat work here? Yes, it would. However, this is a community site, and I wanted it to be vibrant, so I decided to add a slight texture and small color shift gradient using Photoshop gradient overlays.
Although the site is using a slight texture and small color shift in the header area, the site mainly uses flat design techniques. As you will notice, on the register for event section, I decided to use circles to make the section seem more interesting visually. Patterns like this can do wonders for your UI’s aesthetics. I did not make these circles with gradients, they are white circles with a blend mode of overlay and an opacity level set at 20%. They make this section feel more alive, especially since we’re using a small amount of overall space here for the event ticket.
The content area of the site really uses great whitespace, and has a super flat appeal. I wanted the user to focus on the upcoming events at this point in their visitation to the Refresh Denver website and not get distracted. Remember content is king, and if the user is distracted by visuals in important content areas, this could spell disaster. Thus, there are no extreme visual design elements in this part of the website. The buttons have the same style as the header and remain that way throughout the site. Consistency in all design is very important.
No matter what design style you’re using, involving the user early on will prove to be a valuable tool. No one will tell you how the user experience is better than the user. Usability tools are super important for determining the right direction whether it’s for design or interaction. Here are some amazing tools you can use to get your users involved early:
Flat design works really well. However, it isn’t perfect for all situations. Imagine your favorite Xbox or PS3 game, say Call of Duty, in all flat design. Not such a good experience. Usability over design is always a good rule of thumb. However, if you make an interface that is not only super usable, but beautiful as well, you’ve created a great user experience. A good combination of flat, subtle color shifts, slight textures and use of patterns make for amazing user interfaces that can still be considered flat. The takeaway is: if your web or mobile app does not feel right with totally flat design, expand your horizons by adding subtle visual effects.