Web Design Trends: Flat is Where It’s At
What is flat design?
Flat design is simply a trend in which the designs look FLAT. There are no 3D or life-like elements. No textures or glossy buttons.
The idea is to eliminate any design distractions and focus on the content while effortlessly guiding the users to the end goal (purchasing your products or paying for your services!)
The flat design trend gained popularity after Microsoft unveiled its new mobile platform. Soon after, Apple followed suit with the new, flat, iOS7 design. Now thousands of other sites are shedding their skeuomorphic skins and revealing their simple and user-friendly designs.
Issues You Might Run Into
The content you are sharing has the biggest impact on the success of the design. If your information is unorganized, your site will appear just as unorganized. Flat design relies heavily on a clear visual hierarchy to guide the users effortlessly through the information you are providing for them. Without that hierarchy your users will feel as though they are lost in a sea of words. It is best to break your content into smaller chunks so that it is easier to show your users which sections of information they should be looking at first.
Users will also need to be able to distinguish between static and interactive elements on the site. Buttons and text fields need to be plain and simple, but intuitive as well. When you are designing remember that your site users aren’t stupid; make your buttons stand out by making them a contrasting color and increasing their size. I promise your audience will know it’s a button (even if it doesn’t have a perfectly shiny exterior and a rollover that sparkles brighter than Edward Cullen in the sunlight.)
The biggest benefit to flat design is that it puts the content directly in the spotlight.
Benefits of Flat Design
You’ve probably heard the statement “content is king” thousands of times before. The biggest benefit to flat design is that it puts the content directly in the spotlight. Have you ever looked at a website on your smartphone and noticed that the background makes the tiny text hard to read and the links that are WAY too small to click? Wouldn’t it be nice if the text was easy to read on a plain background with buttons that are easily clickable? That is exactly what flat design aims to do; strip away all the embellishments and textures to reveal the meat and bones of your site, the content.
Another huge benefit to flat design is that your message isn’t hiding behind any graphical elements and huge blocks of text. When a user visits your site they want to know about YOU. Flat design eliminates clutter and forces you to get straight to the point with your content. Your users will feel they know you much quicker and will be more likely to make a purchase!
Creating a Flat Design
Once you have an idea of how your content will be organized it’s time to start designing. Use fonts that vary largely in size and weight to show the difference between titles and body text. Alternating blocks of bright colors and text will guide the users eye around the page. Occasionally you may run into a few snags while designing your flat website. These are a few pointers I’ve come across that might help you as well.
•Keep asking yourself “Do I really need that?” Sort through the clutter of your site and you will end up with a clean design that will help to convey your message clearly and quickly.
•Use a grid and stick to it. That is, unless you are breaking the grid to put emphasis on a specific element. A grid will help keep your site looking clean maintain equal spacing between each element.
•Use fonts that are easily legible at any size to ensure that both cell phone and desktop users will be able to read your content.
•Don’t be afraid to use a wide variety of colors and hues. Because your design is much simpler, it won’t look as cluttered if you add a few more colors here and there.
•The purest colors on the color wheel will look best in contrast with the plain background and text. Use colors that pop to direct the users attention to specific elements.
•Compare two or more designs side by side with varying color and font combinations, different spacing, or a completely different layout. You’ll be able to quickly decide which you like best.
•Still feeling stuck? Take a break. Fresh eyes almost always help me when I’m struggling.
Here are some great examples of websites that use flat design that you can use as inspiration:
canopy.co Canopy is an example of a website that uses flat design to showcase products. The products themselves are the main focus of all the pages on this site. And since the products vary significantly, the simple shapes and relatively neutral color palette help every single product to stand out.
soworldwide.org Serving Orphans Worldwide is a beautiful example of how simplifying the rest of the design can increase the impact that your imagery will have on your users.
obabyapp.com O Baby, like Serving Orphans Worldwide, is a great example of how well flat design supports photography. This website is also a great example of how to tastefully apply a larger color palette to a design. Each of the different artwork categories have a different background color.
Pace Law shows that flat design isn’t just for product websites. This law firm uses flat design to show their site users what they are all about with a professional, yet trendy website design.
On top of using flat design, the Pace Law, O Baby and Canopy websites are all great examples of responsive design!
Figuring out how to strip down the design of a site without losing vital content tends to take a bit of work. Just remember that if you’ve done your job correctly your site visitors will be able to do theirs with ease, and they will thank you for that. If you are on the hunt for a new flat web design, or simply just have a question, be sure to contact us.
Post by KEYSTONE CLICK.