2013年6月24日 星期一

40 beautiful flat ui design inspiration

40 beautiful flat ui design inspiration

 Spell Tower

best flat ui design inspirations
Most flat ui web design has multiple bold colors, which is similar to the metro ui design. This example uses a single color which creates a sharper focus on the words presented.

Invoisse

flat ui design idea Another example of a single color flat ui design. Very striking and great for highlighting one action that you want your visitors to take.

SumAll

flat ui design inspiration for software business
An all white web design for a business application. The flat design in this case helps to convey the message that the software is easy to use, without any unnecessary clutter.

Squidee

flat ui design inspiration for software companies One of the most minimal design that I have seen for a software website. Nevertheless, the main message is still being conveyed strongly through its  flat UI design.

Plover

flat ui design inspiration for online software A minimalist flat UI design. The message is clear and a new visitor will know what the website is all about by reading the text alone. A very good example.


Flat UI design for agencies websites

Advertising or design agencies are among the first business to adopt the Flat UI design trend. As such, it is common to see examples coming from such businesses.

Hum Creative

flat ui design inspiration Bold colors with clean lines. A clear focus on the typography. No depth effect. This is a classic example of a flat ui design from Hum Creative.

Imavex

flat ui design inspiration for business site With the exception of the table which use color tones for a 3D effect, the rest of the page sticks mostly to the flat UI principle. Colors are bright with a focus on clean line and bold text.

OurNameIsMud

flat ui design inspiration for agencies With such a nicely executed flat design for their own home page, it will not hard not to be convinced that they are capable of creating beautiful websites for your business.

Fhoke

flat ui design inspiration for marketing agencies Just words and a blurred image but the color combination brings everything together into one nice package.  The call to action is also very well defined.

MadeByFibb

flat ui design inspiration for design agencies A metro style inspired flat UI design.  There are no 3D effects and the blocks of colors help to differentiate the different sections of the website. Flat design doesn’t always mean boring or minimalist.


Flat UI design for portfolio websites

The next set of examples look at some beautiful examples from portfolio or personal websites.

Roy Barber

flat ui design inspiration for portfolios A single color theme applied to a portfolio website. It works as the white color screams for your attention. Notice that none of the logos have any 3D or shading effects.

Big Human

flat ui design inspirations An image based application of the flat ui design concept. Nicely done and one for your inspiration.

The Hungry Workshop

best flat ui design inspiration Another example of an image based flat ui design. You can use such a design for a photography or portfolio website.

Jake Giltsoff

flat ui design inspiration for portfolio A minimal and clean site to showcase your work and portfolio.  Different colors are used in each block to represent the different areas for the site.

Clinttabone

flat ui design inspiration for portfolio website A white and super clean implementation of the flat design. Hard to put it off with an all white background but this portfolio website has done it successfully.


Flat UI design for conferences

The third set shows how flat design UI can be used for events and/or conference websites as well.

Future Insights

flat ui design inspiration for business Future Insights implemented the flat ui design nicely on its website. Words are bold and clean, with each speaker being presented clearly.

Build Conference

flat ui design inspiration for conference Build Conference 2012 has a nice flat UI design with bold colors separating each section of the website.  Nothing but beautiful typography on the website to deliver its message.

Circle

flat ui design inspiration for events The word circles might have some hint of shading. Outside of that, the rest can be considered flat design with the use of warm colors and clean lines.

Dropbox Developer Conference

flat ui design inspiration for conference and events Dropbox is well known for its minimalist design. This event page from them shows the same characteristic. Everything is flat save for the DBX logo.

Lean Analytics Workshop

flat ui design inspiration for workshops Beautiful flat UI design for a workshop webpage. The use of the big image does not deviate from the flat design principles. In fact, it helped to act as a powerful contrast for the black and white wording.


Flat UI wordpress themes

If you just want to have a flat UI design right out of the box without doing coding work, then you might like some of these flat UI wordpress themes.

Cluster – Flat ui wordpress theme

flat ui wordpress theme inspiration A great looking theme with a responsive flat UI design. Best suited as a portfolio website or a personal blog.

Vetro

flat ui wordpress theme inspirations Another responsive flat UI wordpress theme. Supports a whole range of layouts and customisation. One of the most flexible theme for creating flat UI website.

Essential : A flat ui wordpress theme for business

flat ui wordpress theme design If you are a business looking for a flat ui design, then this wordpress theme is for you.  It featured pre built sections for product showcase, customer testimonials, team profile etc. A very useful business wordpress theme run out of the box.

Stand – A flat design wordpress portfolio theme

flat ui wordpress portfolio design Stand is another responsive portfolio wordpress theme that has a nice flat UI design.

Realia – A flat UI real estate wordpress theme

flat ui wordpress theme for real estate One of the few real estate wordpress themes that use flat UI design. Very little gradient and shading is seen in this theme. Everything is clean and sharp to best view the images and property listing.


Flat mobile UI design

Flat UI design can also be seen in mobile. Here are a few that caught my eyes.

GetThingList

flat mobile ui design This is a to do list app. Notice all the icons and fonts have no shadow effects unlike what most apps have. This will become more common as mobile designers start to adopt flat UI design in their work.

 Fantasy Leagues App

flat mobile ui design inspiration A good example on how to display profile pages using mobile flat ui design.  The only thing that is not really flat is the shading on the image. If you removed that, everything else uses the flat UI principle.

Go Travel

flat mobile ui design example A nice combination flat mobile UI showing flat icons and categories.

Coffeely

flat mobile ui design inspirations Displaying menu items in the flat design style can look gorgeous, as shown in the example above. The trick is to use nice typography with lots of space to create the minimalist look.

New Email App Concept

flat mobile ui designs Nice use of flat design in status update. This app is a work in progress showing how email interface can look in an app environment. This can work well for status update as well.


Flat UI design for ecommerce

It is challenging to use flat design for ecommerce stores as most of them want to show depth in their product range. Fortunately, there is a handful of examples that show how this can be done successfully.

Hardgraft

flat ui design inspiration for ecommerce This producer of bags uses flat design to showcase its wonderful hand crafted bags. Using flat design here makes each product almost like a work of art. Very nicely done.

LeRockwood

flat ui design inspiration for ecommerce stores I never thought using a human model can look so ‘flat’ but lerockwood.com has done it, in a good way. Without the depth effect, the user actually has better focus on the product itself.

Doubeau

flat ui design inspiration for online stores A nice way to showcase its only products, which is ties, in a focus and beautiful way. In this case, a flat design UI makes a lot of sense as it  is a single product ecommerce store.

FreshProduct

flat ui design inspiration for ecommerce shops This is a not a pure flat UI design for ecommerce. While everything about the site, including menu,  search, drop down etc is all flat UI design, some of the images do convey a 3D or shadow effect.

Snowbird

flat ui design inspiration for business website A nice business website that fully uses the flat design UI. Although it doesn’t have color blocks, everything else is clean and well organized with a hierarchical structure.


Flat UI design for dashboard

It is now more common to see dashboards using flat ui design. I think that is a great trend since a cleaner and more focus design can help us understand the data presented in a dashboard environment.

Concept UI for dashboard

best flat ui design for dashboard A great concept design for presenting information in an dashboard environment.  Using a flat design makes the information much clearer to understand and easier to digest.

VPS iPhone Dashboard

flat mobile ui design for dashboard A great example on how to use flat mobile UI design for a dashboard interface on mobile.  The main chart is presented sharply using one half of the space while the other half is used to present the numerical info.

Concept dashboard by robbert esser

flat ui design for dashboard A very clean and minimalist dashboard. Everything is flat and that makes the data jumped out even more. Great for people just want to focus on the numbers.

Toggl

best flat dashboard ui design
A new flat UI design dashboard for toggl users.  I am sure they will appreciate the cleaner look.

Free PSD file for flat UI dashboard design

flat dashboard ui design psd

沒有留言:

張貼留言

google ad