background preloader

Beautiful Examples of Flat Icons Design

Beautiful Examples of Flat Icons Design
Flat Design is one of the newest approaches in web design, aiming for simplicity and powerful visual impact and using shapes as patterns and backgrounds. Microsoft’s Metro user interface is probably the most popular Flat Design example. We already discussed the Flat Design approach in-depth, and we did it for quite some time now. Responsive Icon This icon can be used to mark themes and layouts which are responsive and fit every device perfectly. Calendar and Night Icon There are two icons here: there is the calendar icon, which in my opinion is the result of some amazing work, and a more abstract icon, which could be used for activating a “sleep mode” for example. Mail Icon This is actually a great icon created by us at Designmodo and can be used for any mail purposes. Iconex Iconex showcases four different icons: a photo camera, a heart, a megaphone and a game controller. Misc. This pack has four vector items. Flat Design Icons Set Vol. 1 Two Flat Icons Glyph Profiles We Are Hiring Filetypes

Flat Web Design: Beautiful Examples of Websites Flat Design is a new trend labeled by the community as an interface striking similar to Microsoft’s Metro UI because it leaves drop shadows, embossing, subtle textures and gradients behind, while favoring clean layouts, sharp typography and solid colors. The new Google design and Microsoft’s come-up with Windows 8 is actually based on an older trend called Flat Design, which was not extremely popular back then, but was very easy to design, therefore people used it. In this article we would like to show what in our opinion are great examples of Flat Design websites. Examples of Flat Designs in Web Design SpellTower SpellTower is a single-page website for an Android puzzle game which uses several color backgrounds throughout the layout, as well as some buttons for their simple, clean menu. Kickfolio Kickfolio is an interactive app for the iPhone and their modern, slick website uses different solid color and buttons with slick, modern effects. Lorenzo Verzini Oak.is Etchapps Microsoft Build Windows

Web4all - En route pour le housing ! Making it Work: Flat Design and Color Trends We’ve talked a lot here about the flat design trend here at Designmodo. We’ve raved about it, showed you plenty of cool examples and even developed a free user interface kit for you to download and use for projects. But what if you want to do it yourself? One of the most important parts of the trend is color. Flat Design Refresher Flat design is a technique that uses simple effects – or lack thereof – to create a design scheme that does not include three-dimensional attributes. Some call the look of flat design simple, although it can be quite complex. Learn more about the flat design trend in a previous Designmodo article. Defining a Color Palette When it comes to color, flat design works with a variety of colors, but most commonly designers are choosing to go bold and bright. The other thing that makes flat design different in terms of color? What we are seeing more of with flat design and color though is the matching of tone and saturation. Bright Colors So where do you start? Retro Colors

hij1nx/levelweb Examples of 'Flat Design' in Web Design A couple of weeks back, we talked about the flat design aesthetic. Just in case you missed it, here is how we described flat design, “Flat design means designing without the usual gradients, pixel perfect shadows, and skeuomorphism that’s been rampant in recent years to achieve what appears to be a ‘flat’ interface.” And yes, just in case you haven’t yet jumped onto the flat web design bandwagon, today we have put together 20 awesome examples (plus some Dribbble shots) that illustrate beautifully the concept of ‘flat’ in web design. Microsoft SpellTower Supereight Studio Hundreds Women and Tech Etch Build 2012 LayerVault Squarespace Combadi Buffalo 2012 Year on Twitter Voice and Tone The Next Web …some ‘Flat’ Dribbble shots… For some more Dribbble examples click here: Flat Design on Dribbble. More on Flat Design… What Skeuomorphism Is (And Isn’t) Skeuomorph on Wikipedia The Flat Design Era On the “flat design” aesthetic Is “Flat” UI design better?

Raccourcis Photoshop (mac et pc) « Blog Tuto On s’est dit que ça vous ferait plaisir.. Un joli et joyeux regroupement, de ce qui nous semble être les raccourcis clavier Photoshop les plus importants. Un peu manuel d’utilisation, aussi, qui assume pleinement le rose ; cette couleur à travers laquelle vous allez, désormais, voir votre life ! De quoi gagner en efficacité, en confort d’utilisation et en dextérité. N.B. Raccourcis Photoshop Pc Raccourcis Photoshop Mac

Almost Flat Design | Matthew Moore Design Flat design is both hot and controversial in world of user interface. Microsoft led the charge to introduce it to the masses and many others have followed suit: LayerVault, The Next Web, and more. Many designers have been calling it a fad since early on, thanks in large part to the UX problems it presents in interfaces that reach a certain level of complexity. Flat design is beautiful and refreshing. It’s also generally faster to design and easier to make responsive. From Apple (left) to Google (center) to Microsoft (right), today’s tech giants are pushing very different visual design aesthetics. A Way Out Of Here With any great debate, the best solution usually lies somewhere in the middle. There is a way to take all of the good things from flat design and apply them in a way that is still usable, even for highly complex interfaces. Gmail (web + iOS), Google Maps (iOS), and Google+ (iOS) are the most prominent examples of what you could call Almost Flat Design. It’s not just Google.

Fresh Resources for Designers and Developers – April 2013 We are already in the second quarter of the year. While some people might fool you with jokes, we will share goodness instead, especially for designers and developers. In this round, we have some great tools for you to facilitate your work — from a tool that allows you to create customized grid paper for sketching or wireframing to one that aid optimizing your webpage load. Let’s check them out. Paperkit If sketching and wireframing is what you always do before Photoshop(ing), then you need this tool, Paperkit. Then you can download it in PDF format for printing. Web Development Estimator As a freelance worker, your client will certainly request your service pricing rate. One of the limits of this tool, however, is that it only supports Dollar, Pounds, Yen, and Euro for the currency symbol. Lorem Pixel Lorem Pixel is a tool to generate a dummy image for you to design prototypes, both for Print and Web. All in all, it’s a great tool to complement its sibling Lorem Ipsum, worth bookmarking.

The future of iOS design? — Product Design Sweating the details of iOS 7 “Completely flat,” “Like Android,” “Microsoft-flat,” etc., etc., etc. The talk about how Apple is going to “flatten out” its UI style has set the rumour-mills ablaze with completely spurious conjecture. So I thought I’d add to it. However, let’s approach this not from “what one insider source told someone” but instead from evidence of progression within some of the top iOS apps. Let’s start with homescreen icons given it’s the most obvious port of call. Above is a selection of some of the most popular, well-known or lauded apps for the iOS platform. To me, there is a distinct movement towards a particular style and I would be very surprised if Apple were ignorant of it. One of the jobs of a designer is that you’re very sensitive to trying to understand what goes on between seeing something and filling out your perception of it. — Jony Ive

Live Tools - Form Builder Form Container Form Title Corner Roundness Border Thickness Highlights & Shadows Container Colors Form Fields Field Titles Field Colors Button Settings Highlights The Ui Store is packed with tons of Ui tools, premium quality design resources and other cool Ui design goodies. <form class="form-container"> <div class="form-title"><h2>Sign up</h2></div> <div class="form-title">Name</div> <input class="form-field" type="text" name="firstname" /><br /> <div class="form-title">Email</div> <input class="form-field" type="text" name="email" /><br /> <div class="submit-container"> <input class="submit-button" type="submit" value="Submit" /> </div> </form>

Related: