I just want to collect all the main principles & rules in one place, so that other designers who want to start animating interfaces don’t have to search for additional information.

How to make optically balanced icons, correct shapes alignment, and perfect corner rounding. An illustrated guide.

What is bigger: a 400-pixel square or a 400-pixel circle? Geometrically speaking, their width and height are equal. But look at the picture below. Our eyes immediately detect that the square outweighs the circle.

Practical suggestions to improve your UI micro-interactions.
Let’s see some examples of UI animations going from good to great. With a little bit of tweaking here and there, you can elevate your UI patterns with animation.

Hand-picked HTML and CSS code examples, tutorials and articles

In a short series of articles, I’m going to spend some time in detailed unpacking of Flexbox — in the same way I have done in the past with grid. We’ll have a look at the things Flexbox was designed for, what it really does well, and why we might not choose it as a layout method. In this article, we will take a detailed look at what actually happens when you add display: flex to your stylesheet.

Use a text input font size of at least 16px. If your text inputs have a smaller font size than that, iOS browsers will zoom in on the left side of the text input, often obscuring the right side and forcing the user to manually zoom out after using the text box.

When picking a base size for a desktop website or web app, you can break down most designs into one of two types:

Text-heavy pages. Articles, blogs, news, etc. These are pages where the primary purpose the user has on the page is to read. There is very little in terms of interaction – perhaps just clicking a few links.
Interaction-heavy pages. Apps that involve more hovering, clicking, searching for an item in a list or table, editing, typing, etc. There may be plenty of text on the page, but it’s not stuff you read straight through like a book.

5. DOM Search by CSS Selectors
6. Material and Page Color Palettes
7. Multiple Cursor
8. Get the current element with “$0”
9. View Event Listeners
10. Media Query
11. Copy Response
12. Run Predefined Snippets

How a Block Formatting Context (BFC) behaves is easiest to understand with a simple float example. In the below example I have a box that contains an image that has been floated left and some text. If we have a good amount of text it wraps around the floated image and the border then runs around the whole lot.

There are two ways in which we ordinarily fix this layout problem. One would be to use a clearfix hack, which has the effect of inserting an element below the text and image and setting it to clear both. The other method is to use the overflow property, with a value other than the default of visible.
.outer {
overflow: auto;
}

Adding a hamburger menu was convenient, but removing it ultimately led to better business performance.

Whether that’s by making the hamburger toggle action more explicit, or removing it completely — the gains can be considerable.

We’ve taken the learnings from these tests forward and are avoiding hamburger menus where possible. One recent example is a relatively complex e-commerce site, for which we’ve designed a site structure tailored around mobile optimised navigation — allowing us to expose the menu items by default.

Humans can’t endure boredom for a long time, which is why products that are built for non-exciting, repetitive tasks so often get abandoned and gather dust on computers and phones. But boredom, according to psychologists, is merely lack of stimulation, the unfulfilled desire for satisfying activity. So what if we use the interface to give them that stimulation?

• Gameification
• Humor
• Animation
• Art

What are user flows and why you need to use them. An illustrated guide on going from “WTF, am I looking at”, to a clear design of how your app works.
All together now!
Let’s say you’re a billionaire and want to use your massive marketing and PR team to come across as a bored polymath who funds his crazy ideas with novel products like roofing torches. WTF!? Say it with me: what’s the flows?

A font superfamily is set of typefaces (example: merriweather and merriweather sans) that have been specifically designed to look good together.

Here are 10 Google Font superfamilies you should know about

User Preference of Error Message Locations

Users rated which error message location they found most satisfying. There was a strong user preference and expectation for right of the field placement.

Error messages placed to the left of the field were rated the worst. Error messages placed above the field caused the highest cognitive load followed by error messages below the field.

As a web designer, you’re probably well aware that Great fonts are essential to great design.
This article is all about fonts. We have collected 14 unbelievable Google Web Fonts that makes your heading or headline of your website attaractive.
The fact is that the headlines are more important than you may think. and Many designers also agree this point.

clearfix, centering, font-size

In this tutorial you’ll learn about using gradients on the web. I’ll give you some examples, some exercises (such as how to create gradients for borders), and I’ll also throw in some useful resources which will make creating gradients a lot easier.

"User experience is the net sum of every interaction a person has with a company, be it marketing collateral, a customer service call, or the product or service itself. It is affected by the company’s vision and the beliefs it holds and its practices, as well as the service or product’s purpose and the value it holds in a person’s life."

"Every detail of a company and its product says something about it. User experience strategy and design ensures that these messages are put forth with intention and purpose. Design extends into each and every detail, and each and every detail can indeed be designed."

"The job of a designer, just like that of a writer, is to twist and stretch and shape a conceptualized piece of work over and over again until it becomes the masterpiece the world needs it to be."

"A user's experience belongs to the user. An experience cannot be designed. It can, however, be influenced. A designer’s job is to be the influencer."

Shadows And User Interface Discoverability Link
There’s a reason GUI designers incorporate shadows into their designs — they help create visual cues in the interface which tell human brains what user interface elements they’re looking at.

Instead I’m going to show you a simple color workflow that you can use in your next web project.