was successfully added to your cart.

WHAT’S IN?

Over a relatively short period of time, the design of websites and applications have seen a radical shift. Design seemed to transition quite quickly from skeumorphic1 and realistic appearing websites, to a far more minimalistic approach.

On the left is an example of flat design, compared to skeuomorphism on the right.

On the left is an example of flat design, compared to skeuomorphism on the right.

If you’ve ventured anywhere online in the last couple of years, chances are you’ve been exposed to this minimalist design approach.

However, simply acknowledging a design trends presence doesn’t do much as far as moving forward as a designer, and learning something from the direction this trend is heading. To start let’s take a look at what this trend is influencing, and how to shape and tame this trend to work for you in your designs.

material-design-ehsan-rahimi 

THE EARLY DAYS

First, why did a collective population quickly sway away from a committed relationship with complex shapes, textures, 3D, and drop shadows to something far more simplistic? While many people have different opinions of how this trend took hold of the world by storm, there are a few factors that many agree upon and consider to be stand outs.

Another skeuomorphic example from the old Apple iBooks app.

Another skeuomorphic example from the old Apple iBooks app.

TOO MUCH!

Since the grip of the internet has only tightened on society since it’s conception, we have been presented with more information at our fingertips than ever before. We live in an era known as the information age, more specifically modern information age. As a result, we’ve experienced what’s known as information overload. We’re given nearly unmanageable amounts of information through email spam, email notifications, instant messages, Tweets, and Facebook serving just as the tip of the iceberg2. While much some of the information we’re exposed to is important/relevant, most of it isn’t. Since the rise of the smartphone, much of the information we experience is through our small phone screens, resulting in far more clutter and disorganization in the design of web elements. Through this feeling of overwhelmed clutter, a design began to emerge which reduced the clutter within the User Interface (UI) and it stuck.

Flat UI Kit by Riki Tanone (http://dribbble.com/shots/947782-Freebie-PSD-Flat-UI)

Flat UI Kit by Riki Tanone (http://dribbble.com/shots/947782-Freebie-PSD-Flat-UI)

SIMPLICITY

Instead of focusing on targeting everyone and trying to do everything, web apps and similar websites have been finding a lot of success through targeting a niche market and offering extremely focused tools/services with limited features. This is opposed to the way that traditional software used to be developed jam packed with a plethora of features to help explain a high price point. Thus shifting towards micro-apps influences a simpler UI3.

KING of CONTENT

Again, as most of my blogs seem to say, Google seems to have it right when they say that content reigns as king4. Even though the public tends to gravitate towards technologies and devices that are flashy, shiny, and help us to interact more, a return to content usually follows. The vast majority of our time on digital devices/computers is spent through media consumption. Again, with all of this information present in our lives, and with a lot of our time spent on our devices consuming said information, the design of the interface just gets in the way.

TECHNO-LITERACY

As new technologies and devices make a larger and larger market penetration into our population, obvious controls and functions have become more subtle. Developers tend to trust their users a little more with finding functions within their application and software more than in the past.

Cezanne Android app with a Flat Design. https://dribbble.com/shots/1236803-Cezanne-Android-app

Cezanne Android app with a Flat Design.
https://dribbble.com/shots/1236803-Cezanne-Android-app

TECHNO-INFLUENCE

Like water, most software is limited/contained by the platform in which it is held. From screen dimensions to pixel density (a palm pilot vs. a new retina display), the hardware ultimately confines the software. When we look at minimal design through a design perspective, when a user is presented with very limited/simplistic designs, each element that is shown, needs to be well thought out and executed5-6. Typographic scale and weights end up determining a large portion of the UI successfulness7.

RESPONSIVENESS

With Google updating their algorithms to make it much harder for non-responsive websites to become highly ranked8, the importance of designing mobile-responsive sites is paramount to your websites success. This change by Google didn’t come without a fair warning, however. With the internet becoming more and more commonly viewed on mobile devices, the fact that Google would update their algorithm to reward those who design for mobile was pretty well expected. Because of this massive change and acceptance of mobile devices, User Interfaces (UIs) have had to become much more fluid and easy to navigate. While responsive design in itself, however, doesn’t call for a specific design style/aesthetic, the advantage of minimalistic/flat design does lend itself to responsive design quite nicely though, because of its clean nature and easy to see features. Designers may also find that employing a flat design on their website may help their site experience faster loading times, through overall page-weight reduction by eliminating unnecessary items9.

An example of how google views responsive design.

An example of how google views responsive design.


responsivewebdesign

Click here to read my post on responsive web design.

PUT IT TO WORK

So you’ve spent your last 2-3 minutes reading all about the theory and logistics behind why flat/minimalistic design has become so successful and popular. If that convinced you try to design your next website with a minimalistic feel to it, then let’s talk about some practical ways to implement a flat design. Start by trying to get rid of every “fancy” element to your website, and you’ll see how important the core elements of your design quickly become. Eliminating things like drop shadows, textures, etc. will help you to see this a lot quicker10.  The suggestions in this article can apply anywhere, but we’ll be looking at their application in regards to flat design and minimalistic UIs.

KEEP IT SIMPLE

When designing a website, you most likely have your own unique workflow that works best for you. You’ve optimized it for speed, efficiency, and good design, but now you want to start making websites that use a flat design concept. Employing some of these tips/tricks into your own workflow could help you achieve the look you want, while still retaining as much of your speed and efficiency as possible.

Gather some inspiration. Around my workspace and desk, I have things that help me to concentrate, while still giving some inspiration. Behind my desk, hanging on the wall is a piece of artwork that lists out 29 ways to help clear your head and keep your work creative.

Purchase here: http://visual.ly/29-ways-stay-creative

Purchase here: http://visual.ly/29-ways-stay-creative

Looking at others’ work also helps serve an important purpose to getting you inspired. Try visiting websites such as the AWWWARDS website for some great examples of websites that employ flat design.

Show your design off to others. Getting helpful criticism from your colleagues may give you new ideas and concepts you hadn’t thought of before. Also try leaving your desk, or working on another project for a bit. This gives your brain time to rest and allows you to view the work like a fresh set of eyes when returning to your project.

View your drafts side by side. When I’ve hit a creative wall when designing websites, I’ll sometimes save multiple versions of a page. When pulling the two, three, or four different versions up next to each other, it makes it much easier to eliminate what is and isn’t working. This trick could save you from moving a picture around a webpage for an hour.

Keep stripping away. Minimalistic design isn’t about keeping every cool little element you get attached to. It’s about functionality and efficiency that becomes apparent through clever designing. One thing I learned in my college art classes, was that becoming attached to your artwork (while sometimes good/appropriate) can hinder your overall design. When looking at developing your flat website, keep asking yourself if you really need the element you just added, and only keep the things vital to then overall functionality of your website.

COLOR

Flat design requires a good color palette. I use a workflow that is designed around hex coding in relation to web design. If you would like to read about how to create a color palette from a picture, or how to create a color palette all from one color, check out my other blog here.

Consider making design that has a broad color palette. A lot of designers stick with what feels safe and easy, thus narrowing their color choices and making the design a little more predictable. When working with flat design, an opportunity to expand your choices is present, so take advantage of it.

When adjusting your hues and lights and darks of your colors, you should make sure that you’re adjusting the hex code itself instead of just making change based on how it looks. Modifying the hex code itself ensures that the changes you are wanting to make will translate across all devices and screens, no matter their color calibration. You can see how to do this here.

Click here to view my blog post on making Hex Code work for you.

Click here to view my blog post on making Hex Code work for you.

TYPE

Much like how google says that content is king11, in flat/minimalistic design typography is king12.

When making choices on what fonts to implement into your site, I look at bold/clean fonts for headers, such as a sans-serif font (since that helps you narrow down your choices at all). Serif fonts have their strengths. In print. According to Stacey Kole,13

“This is because the serif make the individual letters more distinctive and easier for our brains to recognize quickly. Without the serif, the brain has to spend longer identifying the letter because the shape is less distinctive. An important exception must be made for the web. Printed works generally have a resolution of at least 1,000 dots per inch; whereas, computer monitors are typically around 100 dots per inch.”

Using visually appealing font pairings can help your design come a long way. Since most sites are easily integrated with Google Fonts, I use the site http://fontpair.co/ to help get ideas as to what fonts may work for a particular clients project. The genius of this site lies within the ability to edit both example headers and body text together to see what your copy will look like with the current font pairing without changing the layout and format of your website. If none of the examples or suggestions seem to work for me, fonts can be installed, but most often this site has everything you’ll need and more.14

INTERACTIVITY

Interactivity is the make-or-break feature to keep your users attracted and engaged on your site. A lot of times, web designers are looking for a type of secret ingredient to make their website stand out from the rest. I’ll give you the answer: Website Interactivity.15 When you’re designing your website/mobile app/whatever-it-may-be with a flat style, flat UI must also be addressed. Using icons, flourishes or other tools we normally would think to employ can be a slippery slope leading away from flat UI. Some ways to show that an element of your site is Interactive (clickable/performs a function) are:

Contrast. This seems almost as though it should be common sense, but one of the easiest ways to indicate an element as interactive is through contrast. If the majority of your website is red, then you could make all the interactive elements a different color, such as white.16 Color isn’t the only way you can contrast elements of your website, either. If you have a lot of text, think about making flat buttons, flat icons, changes in size of the text, or another way to show that an element stands out from the rest.

I can’t stress enough that the interface of your design should be simple, flowing, and intuitive. No one wants to hunt around for the menu, back button, or anything else that should be easy to find. Again, this is about minimalism and an easy to use layout.

LETS END THIS

As many famous artists over the decades have showed us, rules can be broken.17-20 While we use basic rules for web design, saying that the aforementioned suggestions are the only way to do something would be just a tad egocentric. Spending time developing your own methods for creating clean, flat designs could yield some absolutely draw-dropping results. Does using flat design in your artwork mean things such as “no gradients! no shadows! no serf fonts!”? No. Get out there, experiment, and use this blog as inspiration/help for getting started making your own designs stand out from the rest.

Click to view sources:

1. http://www.webdesignerdepot.com/2013/12/infographic-flat-design-vs-skeuomorphism/

2. Hemp, P. (2009, September). Death by information overload. Harvard Business Review,

    87(9), 83-89. Retrieved from http://hbr.org/

3. http://lifehacker.com/tag/microapps

4. https://support.google.com/webmasters/answer/66361?hl=en

5. “Exclusive: Quantum Paper And Google’s Upcoming Effort To Make Consistent UI Simple”.

    Android Police. Retrieved 16 May 2015.

6. Chris Smith (30 July 2014). “Google’s Material Design is about to change the way we look at

    the worldwide web”. BGR.

7. http://fontfeed.com/archives/styles-weights-widths-it%E2%80%99s-all-in-the-type-family/

8. http://www.practicalecommerce.com/articles/83483-SEO-Google-to-Make-Mobile-friendly-a-Ranking-Signal

9. http://www.sitepoint.com/optimizing-responsive-design-websites-for-performance/

10. http://designshack.net/articles/graphics/5-former-design-trends-that-arent-cool-anymore-so- stop-using-them/

Leave a Reply