background preloader

Principles of Flat Design

Principles of Flat Design
Flat design – the design community just can’t stop talking about it. And feelings are strong. Most designers either can’t get enough of this trend, or absolutely hate it. I am somewhere in the middle. Good design is about creating something useful that works. So let’s examine what makes something flat. No Added Effects Flat design gets its name from the shapes used. The concept works without embellishment – drop shadows, bevels, embossing, gradients or other tools that add depth. Nothing is added to make elements look more realistic, such as tricks designed to make items appear 3D in skeuomorphic design projects. So what makes it work? Simple Elements Flat design uses many simple user interface elements, such as buttons and icons. Each UI element should be simple and easy to click or tap. In addition to simple styling, go bold with color on clickable buttons to encourage use. Need help getting started? Focus on Typography Type should also tell users how to use the design. Focus on Color

Flat design - Swiss design inspiration ? Flat design - un concept graphique en vogue ces derniers temps, mais peut être pas si jeune qu'on le croit. De nombreux webdesigners l’emploient aujourd’hui pour le redesign ou la réalisation de nouveaux sites Web et applications. Cette tendance popularisée par le Metro style de Windows 8 et la refonte de l’univers Google, fait des émules dans de multiples créations. Flat design – une question de typographie ? Certains vous diront que le flat design ne s’apparente pas à un style ou à une période mais plutôt aux bases fondamentales du design graphique. Aucune 3d-ification, ni surcharge du design par des effets de textures, de profondeurs ou de dégradés. Le design se limite à l’emploi de couleurs souvent très vives et la typographie y occupe une place prédominante. Exemple flat design – The Experiential Company Cela passe par l’utilisation d’une police sans-serif de grande taille. Karl Gerstner: Review of 5 X 10 Years of Graphic Design etc. Toujours pas de définition pour le flat design

Skeuomorphism in User Interface Design, What is It? In the last few weeks the debate over skeuomorphism has been getting more and more heated. I would like to make two points for you in this post. First, what skeuomorphism actually is – as I’ve seen so many people not fully understand it – and two some examples of it for you to get inspired by. What skeuomorphism actually is? Skeuomorphism is the imitation of another object by copying its material AND shape AND functionality. I have noticed way too many people assume that skeuomorphism is only about the texture like faux leather or faux wood. Let’s take a look at the famous – or infamous if you prefer – Apple newsstand bookshelf. What is it not? Some things are sometimes confused to be skeuomorphism when they are not. So anything that was created for the digital world without being first a physical object is not skeuomorphism. Of course, this is following the definition very strictly. Is it bad or good? It is ever going to go away? Personally, it is like country music to me…

Designing Screens Using Cores and Paths Imagine you’re on one side of a grass lawn and you want to reach the bus stop on the opposite side. Do you walk on the sidewalk around the edges or cross in the middle? Assuming the grass is dry and it’s not prohibited, you’d probably take the shortest path and walk across the lawn to the bus stop. If others have done so before, you may see a beaten path that you could follow. Such unplanned paths connect the shortest distance between two points, and we can find them everywhere in our surroundings. Architect Christopher Alexander recognizes desire lines in his renowned book, A Pattern Language (1976)[2]. To lay out paths, first place goals at natural points of interest. In principle, Alexander’s approach is to begin with the goals—the things people ultimately want—and then link them together in the most useful way. Typically in web design, the opposite approach is the rule: designers begin with the homepage. Inspired by “desire lines”, we can reverse this tendency in Web design. 1. 2.

Adham Dannaway » A systematic approach to logo design By Adham Dannaway on September 26, 2012 Designing a logo can be a very time consuming process as it is often quite difficult to come up with logo design ideas that match our clients requirements. There are so many different elements you need to consider when designing a logo including colours, typography, balance and symbolism to name a few. So where do you start? So you have just finished talking to your client about the new brand they want you to create. Do some research First thing’s first, we need to do some background research. It’s also important to do some background research on your client’s business. Generate some ideas Once we’ve done some research and have a pretty good feel for what’s needed we can create what’s called a “morphological matrix” to help us brainstorm ideas. A morphological matrix is basically a table with the logo design components in the left hand column and your ideas on the right. Decide on the type of logo Illustrative Logo Iconic Logo Typographic Logo

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? 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? When it comes to color and flat design, many of the traditional rules about color pairing and matching are thrown out of the window in favor of palettes that span the rainbow with lots of pop. Retro Colors

From Frog, How To Collect Consumers' Data Without Freaking Them Out Personally, I’m having trouble giving it up. By "it," I mean information about me, details that I’ve worked hard to safeguard and keep private. In fact, the same companies that are now soliciting, or simply taking, my personal data still encourage me to create strong user IDs and passwords to protect my privacy. After working in the product strategy, design, and development industries for nearly 25 years, I’ve seen how relinquishing some of my autonomy can be a good thing. Here are five tips for brand leaders to consider when harvesting personal data so consumers feel okay about giving it up. Listen to Your Consumers Successful dental visits and successful data withdrawal have one thing in common—when performed by experts, they can be pain-free and both parties benefit from the experience. Disney is a good example of this. Be Transparent About Data Usage In any relationship, shady maneuvers raise eyebrows and suspicion. Offer Elective Data Sharing Offer Consumer Benefits

Flat Design: Can You Benefit from the Trend? Flat design – a concept popular many years ago in design – is making a comeback. With many redesigns and new websites employing a flat design scheme, the trend is appearing almost everywhere, both on websites and in app design. Its popularity has been made even more popular by the releases of Windows 8 and the new Google design, which includes a completely flat aesthetic. And other popular sites use this theme as well. Can you make it work for your project? Flat design can be both beautiful and charming. What is Flat Design? Flat design is a method that does not use any extra effects to create a scheme that does not include any three-dimensional attributes. Flat design is just that – flat. Flat design is not completely without effects, it just lacks added extras to create “artificial” depth and dimension. Techniques Forget all the decorations. Focus on the color. Focus on typography. Focus on the words. Simple user interface and UI elements. Create hierarchy. Naming Flat Design Conclusion

Why Scrolling is the New Click by anthony on 01/10/12 at 12:18 pm Which is better for users, scrolling or clicking? This is the question that designers have to think about when they’re designing page flow. Clicking offers users a menu of links that take them to a new page. Scrolling offers users all the content divided into different sections on a single page. Many years ago, clicking was the simple answer to this question. There are advantages and disadvantages to both scrolling and clicking. Users get content in the order that it’s designed on the page with a glimpse of everything. Scrolling keeps users in their reading flow. Clicking doesn’t win out on speed or ease of use, but it also has its advantages. Each page will have a link that you can share with others. There are trade-offs between clicking and scrolling.

Flat Design « Blog Tuto Flat Design : Règles strictes et clairement établies, approche visuelle minimaliste parfois radicale ; réflexion globale sur le Web Design, partie intégrante d’un même mouvement comprenant le Responsive Design, volonté de bousculer les normes esthétiques imposées, au centre de quelques débats qui agite les acteurs concernés, etc. ; autant d’éléments qui pourraient permettre d’envisager le Flat Design comme l’expression d’une véritable intention artistique. Mais nous n’en sommes encore pas là… ps : l’image d’intro du billet est un petit clin d’oeil à Say Fat, une boutique de tee-shirts appétissante… Définition de Flat Design Le Flat Design se caractérise par une approche visuelle minimaliste établie selon : Quelque infidélités ; le « presque flat » Partant de ses fondements théoriques mais s’imposant une approche esthétique moins radicale, on constate des variations et divergences : La conception skeuomorphiste Le signe de maturité du Web Design ? Un courant artistique ? Conclusion Ressources :

From Google Ventures: 5 Rules For Writing Great Interface Copy For many technology companies, design is mysterious. So when I work with startups, I try to demystify design by talking about processes and skills. The idea is: Design is not a magical creative thing that designers are blessed to do. It's rational and objective, and the components are pretty easy to understand. People are often surprised when I tell them writing is a design skill. I used to work with an excellent visual designer who hated being called a visual designer. At Google Ventures, my partners and I get to try different approaches to design all the time—we work with different startups every week. We think this is pretty amazing—and no one is more amazed than me! (What’s interface copy? 1. Some say short is best. My principle: Clarity is king. • Be specific. • Watch for jargon and abbreviations. • Front-load your labels (i.e., put the important words up front). • Don’t be lazy. These are small things, for sure. 2. Everyone wants to stand out. 3. 4. 5.