Towards more engaging flat designs
Some of our site’s sections can be best described as “almost-flat”, a term coined by designer Ryan Allen and recently mentioned by UXPin’s Jerry Cao in his article on the future of flat design. According to him, flat design has evolved (and will continue to evolve) towards more depth and clean animations. At Creative Market, we’ve brought in subtle textures and shadows that reflect our brand’s identity system, but preserved the clean aesthetic and performance benefits of flat design elements.
In this example, our homepage design uses flat elements like clearly defined color sections and flat icons at the top. We combine them with light textures and shadows to add a level of depth and warmth.
We’ve also experimented with almost completely flat designs, which have helped tackle content-rich projects like this 2014 roundup and our recent 1 Million Members celebration site.
Flat design doesn’t have to be monotonous. In this example we experimented with pixelated flat icons.
To add visual interest to this timeline we created a background pattern with scattered flat shapes.
5 Trends for 2015
In his article for The Next Web, Jerry Cao takes note of 5 innovative techniques that we agree should be in every flat designer’s toolbox in 2015:
1. Long Shadows
Often placed at 45º angles, long shadows bring a much-needed level of depth to flat designs. This icon set is a great example of the long shadow trend:2. Bright Color Palettes
The growing popularity of certain flat UI frameworks and templates has helped introduce some vibrant color schemes to the world of web design. These 50 color swatches are some of the most widely used:3. Simple Typography
Readability and legibility are key in flat design, and some typefaces manage to make both possible with a simple yet sophisticated aesthetic. While many designers seem to have a preference for modern sans-serif fonts, a slab or serif can work just as well. The Texta Family, pictured below, is a great resource to keep typography simple and user-friendly.4. Ghost Buttons
As their name indicates, ghost buttons are meant to complete a function without visually disturbing the user. We often see them as outlined, clickable links that have interesting hover effects and unintrusive inactive states. The circled arrow icons below offer the possibility of going from outlined to filled or colored to create attractive ghost buttons.5. Minimalism
Including as many elements as necessary, but not more, helps us create uncluttered interfaces that users can easily interact with. The “less is more” principle plays an important role in web design, especially when users are increasingly exposed to visual saturation. Designing with a minimalist aesthetic does not come naturally to all of us, and looking at examples like these can help us get a better feel for how it works:Trends come and go, but principles remain.
The idea of “Flat Design”, i.e. making things appear as if they’re lying flat on a single surface, is a popular trend. And like any trend, it’s subject to fade away and make room for others. However, keeping designs lean and easy to load are principles behind flat design that are likely to carry on for a while, as they are fundamental concepts of web design.Products Seen In This Post:
Chris Madrigal is a front end engineer based in Nevada City, California. Chris makes sure that everything you see at Creative Market looks beautiful and pixel perfect. He is a technology freak, web enthusiast, and lover of tall snowy mountains.
Download these worksheets and start practicing with simple instructions and tracing exercises.
Download now!
Making beautiful design simple & accessible to all.
View More Posts
