Apr
10

Tips of the Month: How to Create Depth in Flat Design

posted by: Wan-Ting Huang

When I first encountered “flat design,” I fell in love with it. I thought: What could be more tempting than a clean and minimal interface-design style that can be even more beautiful and functional than visually busy solutions? As would any designer who is eager to try something new, I started to “flatten” all my incoming UI/visual design projects and hoped the results would look just as good as those beautiful examples I found online.

However, soon after I tried flat design in a couple of projects, I noticed something was wrong.

It wasn’t that my works looked absolutely horrible, but something just didn’t feel right. I almost thought my flat designs were “too flat.” Overall, the works lacked personality and vibe, and everything looked so plain and dull.

Following frustration after frustration, I realized over time that a lot of special attention needs to be paid to create some tiny little “depth” in the flat world to keep the final design looking vivid and interesting. That extra depth not only provides more affordances and visual cues, but it also improves usability overall.

Here, I’ve created some example screens to showcase the tips I employ to create depth when making a flat-design interface. Although these screens are far from perfection, I hope they can at least be a starting point for you when brainstorming different visual design directions.

1. Colors

Cognitively, human eyes are more sensitive to some colors than others. (See this detailed graph.) Thus, a colorful design can naturally bring more layers and contrasts into an interface than a monochromatic approach can. The dashboard from Fitbit, Apple’s Healthbook app, and the to-do-list app Clear, for example, all incorporate a very colorful palette into their interfaces.

color

2. Photography

Not every theme is appropriate for a colorful design. Oftentimes, corporations’ identities are limited to only one or two primary colors. In this case, photography — especially full-spread photos with a bit of perspective — becomes a nice medium to bring more depth to a flat interface. It works really well on many companies’ landing pages like Airbnb and Treehouse. You can find more examples that combined photography and flat graphics together on Land Book.

photo

3. Subtle Layer Effects

I used to think that one of the principles of flat design was to avoid using layer effects as much as possible. Things like drop shadows were evil. However, after taking a closer look at many flat design examples, I was surprised by how many flat-looking interfaces actually have a lot of layer effects applied. Those effects are subtle to a point that they look “Almost Flat.” One example that might be familiar to you is Google’s web interface. For instance, Gmail’s page is generally flat, but subtle shadows are applied to buttons, where the “extra depth” is needed to enhance usability.

layer effect

4. Subtle Gradients

I used to think that gradients, like layer effects, were one of the most evil techniques when it comes to flat design. Ever since iOS7 was released, people have criticized its dramatic and inconsistent gradients. (See this Tumblr thread.) Although it’s very easy to overdo gradients and make designs look garish, gradients can be a great tool to create that tiny extra affordance when applied moderately.

5. Blending Mode: Multiply

When it comes to creating flat-looking icons and illustrations, I really enjoy playing with the multiply blending effect between different-colored shapes. This technique creates a darker shade in the intersecting areas, which creates that extra layer of depth but still goes hand in hand with flat design. Some examples are websites from General Assembly and 23andMe as well as the iOS7 Photos icon.


Note: Blending modes let you vary the ways that the colors of objects blend with the colors of underlying objects. It’s a common feature in graphic design programs like Adobe Photoshop and Illustrator. (See more blending options: Photoshop, Illustrator.)

Other “Outside-of-the-Box” Inspiration

Flat-design interfaces tend to look alike when everything is minimal to an extreme. It’s getting harder and harder to create something original by just looking at other well-designed apps and websites. In order to think outside of the box, I often turn into illustrators’ portfolios to get more inspiration. Some flat-looking illustrations that I like a lot are from Kelli Anderson, DKNG Studios and Jack Hughes, to name a few.

Bottom Line

The decisions made in visual design are closely tied not only to pure aesthetics but also usability. The tips mentioned above are meant to provide some ideas — which doesn’t imply that one method is better than the other or that the methods are mutually exclusive. Oftentimes, I’ll try a combination of different approaches and see how things play out. No matter what technique is used in the end, the result should always be a conscious decision that enhances the overall interaction with the UI and reflects a brand’s identity.



1
Comments | Post a New Comment


April 18th, 2014 at 3:09 am

This is great. Over the next couple of years UI design will settle on an optimal blend of the recent pure flat aesthetic with some of the useful effects demonstrated in the article.

Apr
04

Spotlight on Experience: March Edition

posted by: EchoUser

From the launch of Android Wear to Facebook’s acquisition of Oculus to Intel’s acquisition of BASIS Science, we saw a lot of wearable technology design chatter in March. The latest design frontier seems to be taking a giant leap toward becoming mainstream.

How will wearable technology reshape everyday tasks such as telling time and writing text messages? What would happen if vendors began personalizing experiences based on real-time biometric data, such as your heart rate or time slept? And what could this mean for our privacy and security? We’re excited to see these sorts of discussions on the rise. A future where everything is connected might be here sooner than you think.

Here is a round-up of some articles that got us talking over the past month:

  • If Google Glass is Just a ‘Prototype’ Why is it Pairing Up with Luxury Sports Eyewear? by Jon Phillips, IDG News — Google announced a strategic partnership with Luxottica, makers of Ray-Ban and Oakley, to manufacture and distribute Google Glass frames. It’s a fascinating partnership indicating the importance of design and distribution in bringing this bleeding-edge technology to a mainstream audience. Will Google succeed in broadening its appeal?
  • Google Wearables 2.0: How Android Wear breaks from Glass by Scott Stein, CNET — In March, Google released a preview SDK for Android Wear, its Android-based wearables platform. Unlike Google Glass, Android Wear isn’t a prototype; it’s a fully-formed version that’ll be baked into lots of apps and devices. CNET gives us the lowdown on what the SDK says about Google’s vision of mainstream wearables. “Google Glass is all about being on your face. Android Wear shifts that focus to the wrist,” Stein notes.
  • Apple’s Healthbook App Gives a Glimpse of What an iWatch Could Possibly Do by Kevin Tofel, GigaOm — Leaked information about Apple’s upcoming Healthbook app for iOS shed light on the types of quantified data you may be able to track on an iPhone. Tofel notes that the app will also be able to track “heart rate, blood pressure, oxygen levels in the blood, sugar levels and hydration,” although the current iPhone can’t actually monitor any of these functions. This makes us wonder whether Apple will make this possible in the next iPhone, or if it will release an API for existing wearable manufacturers. Either way, we can’t wait to see Apple’s vision for this space!
  • Why Apple Can’t Match Google’s All-seeing New Smartwatches by Christopher Mims, Quartz — According to Mims, Google will beat Apple in the wearables space because it’s gotten a huge head start in one area: predictive technology. He writes: “The more Google knows about you, the better it can predict what you might want to do or know about next. And having an always-on companion like an Android-powered smartwatch can only make Google’s knowledge of the people it makes money from through advertising that much more complete.”
  • Apple, Google and Intel are Laying the Foundation for the Internet of You by Jennifer Darmour, VentureBeat — “Wearable technology is on a collision course with the Internet of everything. When the two collide, we will enter into a new era of the Internet of you,” muses UX designer Jennifer Darmour, in this fascinating analysis. She focuses on the potential of collecting biometric data via wearables to create a personalized experience.

What made your watch list in March? Hit us in the comments section, or @EchoUser on Twitter, to keep the discussion going!

Want to see what’s been making our list all year long? Check out all of our Spotlight on Experience posts.



0
Comments | Post a New Comment


Mar
31

This Was March at EchoUser

posted by: EchoUser

From Texas to India, Canada’s glaciers to California’s waterfalls, EchoUser was all over the map this March. Here’s some of what we got up to:

Experience Researcher Boaz Gurdin brought his CAPTivate Framework for designing users’ time to South by Southwest Interactive.

Boaz also wrote for VentureBeat on why enterprise apps could be due for a Facebook-like fragmentation, re-imagining the Microsoft Word experience in the process.

The San Francisco Egotist got to know EchoUser by profiling our company and interviewing president and co-founder Mick McGee.

Speaking of Mick, we got to know him a little better ourselves!

And on a personal note, this month we …

  • Tackled the Wapta glacier traverse in Canada (above)
  • Skied many miles in the Colorado backcountry
  • Traveled to India, Texas, Florida, Georgia (in a snowstorm!), and Hawaii, among other lovely locations
  • Biked to and from Santa Cruz
  • Prepped for a triathlon at Lake San Antonio
  • Hiked to waterfalls in Bolinas
  • Took on many other adventures great and small

And we’ll leave you with this — a sign (…get it?) of things to come!



0
Comments | Post a New Comment