All posts tagged “flat”

10 awesome free flat icons packs

first image of the post
One of the most popular trends in web design field is the flat design. Flat design is basically a minimalistic design approach which is focused on a minimalist use of simple elements, colors and typography. It is completely a new revolution in web design which believes in simplicity rather than any stylistic choices that gives […]

The post 10 awesome free flat icons packs appeared first on Design daily news.

Download the free transport icons package now!


Design daily news

Time To Go Flat: Top 50 Flat WordPress Themes That Keep Visitors With You

In the past, when you heard the word “flat”, it didn’t really mean a lot to you. It was just a word for describing things. It could have a negative or positive meaning, all depending on the context. However at present, this word has a lot of meaning for everyone at least a bit versed in web design. When you hear it, you think of a website that is up-to date and does the best presentation of what it offers.

Time To Go Flat: Top 50 Flat WordPress Themes That Keep Visitors With You

So why have flat designs become so popular? The reason for this is simple: flat designs do keep visitors on the page and bring them joy of browsing. For this purpose they employ clear-cut layouts and comprehensive navigation.

Flat templates do not over-crowd the website with contents and strive for the balance and space on the page, so that every element appears at its best. They make the website an appealing unity, rather then a collection of elements. Flat templates put highlights where necessary and go for simple elements, the message of which will be clear to every user.

We thought of presenting some flat WordPress templates to you, so that you can get the first-hand experience of flat design. The themes we’ve selected are 50 WordPress themes that will do for different kinds of businesses and blogs from photographer portfolio to construction agency website. They all take the best of the latest advances in web design and can boast of their usability, interactive features and stunning visual presentation.

The choice of CMS (Content Management System) is also not random. WordPress is the most popular and widely used website engine so far. It will allow you to easily create posts of different types, portfolio galleries and animated slideshows and will not get you stuck, even if you are a novice. With a fresh WordPress 4.0 release in September, flat WordPress themes got even more features to them allowing for easily going multilingual and more.

Take a look at these 50 WordPress themes that can be proud of their flat design. One of them can start a new era of success for your company. Do not lose your chance to stand forward online as there is hardly a better way to reach new heights in what you do!

Photographer with a Name WordPress Template

Photographer CV WordPress Theme

Details | Demo

Taxes Dream: Rodeo WordPress Website

Rodeo WordPress Theme

Details | Demo

Fun Shapes of Durable Grain: Pasta WordPress Theme

Family Pasta WordPress Theme

Details | Demo

Deep and Inspirational Photography WordPress Site

Photography Online Portfolio WordPress Theme

Details | Demo

Last Hero of the Empires: Gaming WordPress Design

Games Responsive WordPress Theme

Details | Demo

Meat Passion for Gourmets WordPress Theme

Health Benefits of Meat WordPress Theme

Details | Demo

Sexiest Lingerie Responsive WordPress Template

Refined Lingerie WordPress Theme

Details | Demo

Globally Understood: Foreign Language School WordPress Site

Foreign Language School WordPress Theme

Details | Demo

Impressive Design: Web Designer WordPress Website

Web Design CV WordPress Theme

Details | Demo

Heaven on Earth: Hotel Agency WordPress Design

Hotels Booking Agency WordPress Theme

Details | Demo

Tender Care: Medical WordPress Theme

Medical Responsive WordPress Theme

Details | Demo

Captured Happiness: Videographer WordPress Template

Happy Moments Videography WordPress Theme

Details | Demo

Sweet Dreams: Confectionery WordPress Website

Cafe and Restaurant WordPress Theme

Details | Demo

Best Rent Offers Responsive WordPress Site

Rental Services WordPress Theme

Details | Demo

Simple and Ingenious Web Design WordPress Theme

Professional Web Designs WordPress Theme

Details | Demo

Ads that Differ: Advertizing Agency WordPress Template

Advertising Agency Responsive WordPress Theme

Details | Demo

High-class Design Professional WordPress Website

HighClass Portfolio WordPress Theme

Details | Demo

Best Summer Memories: Yachting WordPress Design

Pleasant Yachting Experience WordPress Theme

Details | Demo

New Light of Your Hope: Religious WordPress Site

Enlightenment Faith WordPress Theme

Details | Demo

Simple and Comprehensive Insurance Plan WordPress Theme

Online Insurance Services WordPress Theme

Details | Demo

Wild Instincts: Hunting WordPress Template

Hunting Club WordPress Theme

Details | Demo

Safest Storage: Hosting Provider WordPress Website

Reliable Hosting Company WordPress Theme

Details | Demo

Harmony Within: Yoga Club ResponsiveWordPress Site

Yoga Responsive WordPress Theme

Details | Demo

More then just a Car: Vehicle Gallery WordPress Template

Car Responsive WordPress Theme

Details | Demo

Home of Light and Comfort WordPress Theme

Ingenious Architecture WordPress Theme

Details | Demo

Appartments of Your Dreams WordPress Website

Window Responsive WordPress Theme

Details | Demo

Luxury for You: Automobiles WordPress Design

Prestigious Automobile Manufacturer WordPress Theme

Details | Demo

Always at the Right Place! Cabs WordPress Theme

Fast and Furious Cabs WordPress Theme

Details | Demo

Helping Hand for Those in Need WordPress Template

Tender Heart Community WordPress Theme

Details | Demo

Unique Memories that Last: Videography WordPress Site

Videographer WordPress Theme

Details | Demo

Space of Comfort: Architecture WordPress Website

Pro Construction Office WordPress Theme

Details | Demo

Ambitious Projects: IT Company WordPress Theme

Trustworthy IT Company WordPress Theme

Details | Demo

Proactive Business Responsive WordPress Template

Doing Business WordPress Theme

Details | Demo

In Step with Modernity: Constructions WordPress Website

Architecture Guru WordPress Theme

Details | Demo

Effective Advertisement Responsive WordPress Design

Interactive Ad Group WordPress Theme

Details | Demo

Stable Profits: Financial Advisor WordPress Site

Financial Advisor Responsive WordPress Theme

Details | Demo

Freedom of Freelancing WordPress Template

Online Presence of Freelancers WordPress Theme

Details | Demo

Best Fun from Kids to Grandparents: TV Channel WordPress Theme

TV Channel Responsive WordPress Theme

Details | Demo

Expanding Connections: Networking WordPress Website

Communications WordPress Theme

Details | Demo

Photo Guru: Photography Responsive WordPress Site

Photographer Portfolio Responsive WordPress Theme

Details | Demo

Finding the Answers: Modern Church WordPress Design

Religious Responsive WordPress Theme

Details | Demo

Trustworthy Forecast Responsive WordPress Theme

Weather Responsive WordPress Theme

Details | Demo

Surfing in Comfort: Internet Cafe WordPress Template

Internet Cafe WordPress Theme

Details | Demo

Lasting Home Renovation WordPress Website

Build Renovate WordPress Theme

Details | Demo

Charged with Energy Beach Volleyball WordPress Site

Beach Volleyball Club WordPress Theme

Details | Demo

Fast Browsing, Reliable Support: Internet Provider WordPress Theme

Fast Internet Provider WordPress Theme

Details | Demo

Shining Steelworks: Metal Processing WordPress Template

Steelworks Responsive WordPress Theme

Details | Demo

Skillful Eye: Photographer Responsive WordPress Website

Photographer Portfolio Responsive WordPress Theme

Details | Demo

Awesomeness of the World: Travelog WordPress Site

Travel Responsive WordPress Theme

Details | Demo

Perfect Taste of Tradition: Restaurant WordPress Design

European Restaurant Responsive WordPress Theme

Details | Demo

Visit us at InstantShift.com

PSD to HTML


InstantShift

The flat UI toolkit: 10 free flat UI resources

first image of the post
Designing in today’s world is absolutely different than it used to be. It has evolved and developed certain level of standard which is very high compared to its predecessors. At the moment, flat designs are the one hitting the market. That is why today, here we have the collection of flat UI kits that will […]

The post The flat UI toolkit: 10 free flat UI resources appeared first on Design daily news.

Download the free transport icons package now!


Design daily news

Fantastic Flat Superhero Illustrations from Bunka

The flat design trend is fairly shaking up all aspects of the graphic design industry. We are entering a new era of simple and minimalistic modes of communication in which flat design seems to deliver in the best possible manner.

Inspired by the flat format of design, French graphic designer Bunca has used the same methodology and created a series of minimal and flat superhero illustrations. These illustrations cover a wide range of superheroes including the likes of Judge Dredd and the Teenage Mutant Ninja Turtles. But some of his designs, like that of Batman and Spiderman, clearly stand out from the rest. Take a look at his beautiful creations and see if you can spot your favourite hero.

You might also like to check out the Flat Design Superheroes from Jeffrey Rau, or Superhero Shadows, a dark & minimal poster series from Lily’s Factory.

Flat Heroes Illustrations by Bunka

flat heroes illustration series posters

flat batman robin sitting down illustration series posters

batman flat illustration series posters

flat heroes spiderman illustration series posters

flat underwear illustration superheroes

flat superheroes illustration series posters

teenage mutant hero turtles flat illustration series posters

judge dredd flat superheroes series posters

flat heroes illustration series posters

The post Fantastic Flat Superhero Illustrations from Bunka appeared first on Speckyboy Web Design Magazine.


Speckyboy Web Design Magazine

How Flat Design Increases Conversion Rates

There are many arguments for and against flat design, so in this article I wanted to take a quick look at how flat design can actually affect your bottom line. When it comes to arguments, nothing speaks louder than actual dollars.

I examine three case studies where flat design has increased conversion rates (and in some cases sales!) and how you can apply these to your next project.

Read to the end to get my free bonus resource: “25 conversion rate best practices to test in your next design.”

Minimalism Increases Conversions by 261%

Let’s take look at our first case study and see how minimalism can increase conversions.

Underwater Audio redesigned their website with a flat layout. They A/B tested a more complex version of their homepage against a stripped-back minimal version.

Underwater Audio redesigned their website with a flat layout

They made the design much simpler by removing some product information and images. They also removed social proof, something that is often thought to increase conversions, but in this instance, it did not.

The simpler version had a conversion rate increase of 261% or 3.6x. Customers liked the minimal approach more.

Content-First & Mobile-First

When approaching a design with a content-first approach, eg starting with all the copywriting before even thinking about sketching a wireframe. A few things happen.

Firstly you end up with a content inventory which helps you visualize the page hierarchically before getting bogged down with too many layout options. Secondly it helps you refine the content and copy into something concise.

By reducing your unique value proposition to it’s simplest form you make the user experience of the page much better. When it is clear what people are looking for and what they should do next, they enjoy the experience.

The user should be able to tell within a split second why they are on the page and how they can actually benefit. Benefit, not your features, it’s the benefits that sell.

Mobile-first design takes into account the huge number of people surfing the web from mobile devices. The website or app is optimized for the smallest screen first and then feature-enriched as the devices get larger and connections get faster.

Because good developers care about performance they care about what actually makes it onto the page. Resulting in the content again being streamlined and considered in much more depth.

As you can see the two go hand in hand and result in fast loading, concise, well thought out content that speaks to the users needs and wants.

Content-first and mobile-first says ‘We give a shit.’ Flat design says ‘How we give a shit.’

Elements are bigger, simpler, type is generally larger and padding and margins increase. On touch devices this means bigger touch points, easier navigation and, of course, an improved user experience.

The decision to strip back and simplify at every point, from content, coding, and designing, has a cascading effect of clarity and focus on the overall brand communication.

And remember the best converting pages have only one focus per page.

A Flat Button Increases Conversions by 35.81%

Many marketers argue that designers should use buttons with drop-shadows and gradients, so that they stand out more, especially when it comes to primary calls to action.

Sounds logical, what I’ve seen and what this next case study shows is that button design comes down to contrast, not shadows and gradients!

this next case study shows is that button design comes down to contrast

In this instance they were able to increase not only click-throughs, but sales by 35.81%, by simply changing to a flat designed button.

No gradient or text shadow. Simple flat design, with CONTRASTING white text and a simple border radius.

Another win for flat design.

Bad Flat Design Can Reduce Discoverability

However it’s not all good news for flat design.

The Windows 8 Metro style UI is a classic example of flat design gone wrong. With no clear separation of elements including clickable area’s or inputs, it is hard to know what to click. Even though the new look is more aesthetically pleasing it falls short because there is still a need to make objects look actionable; if not through details like shadows then in other ways.

The Nielson Norman Group conducted a study with 12 experienced PC users who struggled not only with the two environments the new OS offers (touch and classic, who wants to learn an interface twice!) but with knowing and clearly seeing where to click and interact.

The ‘Change PC settings’ is actually a button here… dodgy.

The Change PC settings is actually a button here… dodgy

However given the right approach, even this level of minimalism can still be functional if usability is taken into account (sorry Microsoft). Take for example the beautifully crafted Take Your Pulse website below.

Take for example the beautifully crafted Take Your Pulse

Even though many areas are not clearly defined as buttons or inputs, because of the subtle animations, the buttons still make themselves known and usable while the design speaks for itself.

Readability Increases Task Completion

Flat design has a focus on legibility and creating truly great reading experiences (yes I’m thinking of Medium.com too!). With so many elements stripped away you are often just left with the copy.

A study by MIT showed that when faced with cognitive tasks users that are shown easy to read typefaces performed much better than users that were shown hard to read ones.

In the first half, the testers were given the candle problem, and in the second half, they were given the remote associates test.

During the candle problem, 4 of the participants in the easy to read typography group successfully completed the test, while 0 participants in the hard to read typography group completed the task.

In the remote associates task, participants in the easy to read typography group completed 52% of the task at an average speed of 6395 ms, and the participants in the hard to read typography group completed 48% of the task at 6715 ms.

Here we can see readability and clarity, a core focus of flat design, improves UX and enables users to complete tasks easier and quicker.

Why Great Flat Design Is Hard

People like intuitive interfaces. Skeuomorphic design aims to be explicitly intuitive by relating tasks and representation to real world objects.

Raskin (1994) says designs are intuitive when they feel familiar. Intuition therefore comes from past experiences that we can draw on easily, reducing the learnability of an interface. Skeuomorphic designs aim to harness these familiarities to improve the user experience, so that the patterns you learned in the real world are mirrored in the interface.

However the real and digital world are not one and the same. A folder for instance on a computer can hold infinite numbers of files, have nested folders and all sorts of complicated intricacies, while the real world version cannot. Therefore this intuition can only be taken so far.

Spool (2005) says that intuition comes from bridging the gap between the users current knowledge and required knowledge of the system for effective use. He refers to this gap as a ‘Knowledge Gap.’

Flat design is new, and still developing it’s design patterns. This means that it is intrinsically harder than skeuomorphic design to get right.

However when we combine existing design patterns with flat design, taking into account what we know about content-first, mobile-first, typography and contrast, and ensuring that our minimalist approach does not remove elements and details necessary to maintain Spool’s knowledge gap, the result can be wildly successful designs.

Conclusion

Flat design is no trend, it’s here to stay, but only when paired with content and mobile-first approaches that present information in intuitive and familiar ways.

When our designs are flat, simple and content focused with good reading experiences, we can dramatically increase the likelihood of users completing desired tasks per page or view.

Users complete tasks, conversions go up and more often than not that means more revenue as well.

Bonus Resource

I’ve put together an additional 25 ways you can use conversion rate best practices to help improve your next design, a cheat sheet for your next project. Click the big flat button below to download it:

25 Conversion Rate Best Practices to Test in Your Next Design →

The post How Flat Design Increases Conversion Rates appeared first on Speckyboy Web Design Magazine.


Speckyboy Web Design Magazine

Buying a Resale Flat? Here is a Checklist that You Should Consider

When you decide to buy a resale flat, there are couple of aspects to be considered before buying a resale flat. For instance, if you are planning to buy a resale flat in Pune and checking out for…

For full article and other interesting tech related stuff visit the website.
SkyTechGeek

The beginner’s guide to flat design

Read more about The beginner’s guide to flat design at CreativeBloq.com


In the past, web designers put a particular focus on showing off their skills by packing sites with flashy illustrations and animations that supposedly wowed their visitors. Then came a shift toward skeuomorphic design, which attempted to bring real life to the screen, with faux-realistic textures, drop shadows and real object characteristics.




Creative Bloq

10 Free and Awesome Flat Social Icon Sets

Social media icons by their nature, are logos. They have a stylized and distinctive design that is instantly recognizable. That recognition comes from both the use of a stylized symbol, with the use of color. Social media networks such as Facebook, Twitter and Pinterest, all use a very distinctive symbol with an associated color.

Take Facebook as an example with its distinctive royal blue background and white colored F. Take away the blue, and the Facebook F has much less impact. On the other hand, the little Twitter bird is so recognizable, that it can be completely stylized and changed. But with social media, the whole idea is to get people to click. Sometimes keeping things simple and easily recognizable, is the best way to go for design with social media.

Icons …

Read more »

Copyright ©2014 Web Design Fact. All Rights Reserved.


Web Design Fact

Building a Custom WordPress Registration Form with Flat UI

You’re reading Building a Custom WordPress Registration Form with Flat UI, originally posted on Designmodo. If you’ve enjoyed this post, be sure to follow on Twitter, Facebook, Google+!

register-form-wordpress

In a previous article, we walked through building a custom login form which can be embedded in a post or page using a shortcode and in a specific theme location using template tag. A lot of WordPress users would prefer custom login and registration forms because the defaults are very basic, don’t match the website […]


Advertise here with BSA


Designmodo

Forget flat design – check out these realistic icon designs

Read more about Forget flat design – check out these realistic icon designs at CreativeBloq.com


Do you prefer these realistic looking icons to flat design ones?




Creative Bloq