Model
The application.
View
What the consumer (user) sees. Often HTML, JSON, or XML.
Controller
A thin layer connecting the View and the Model.

Almost every MVC tutorial that I see confuses the data model with the Model.

Time and time again, it seems like reaching for input type="number" is a good idea, but it almost always isn’t. While input type="number triggers numeric keyboards on touchscreens leading to better mobile UX, that can also be accomplished by configuring the pattern attribute in a certain way (Zach Leatherman has a great deep dive post into all of this).

Do it yourself using the aforementioned CSS/Sass, or take a shortcut by using a plugin like Animate.CSS. It contains ready-to-use utility classes for common animations, such as fades, slides, shake, and many more.

The first thing to look at is the timing function. In the above example, we’re using a linear timing function, which means that the box is constantly moving at the same speed. In some cases, this is desirable; however, in the real world, motion usually doesn’t work like that.

Elevation is the relative distance between two surfaces along the z-axis.

Elevation in Material Design is measured as the distance between Material surfaces. The distance from the front of one Material surface to the front of another is measured along the z-axis in density-independent pixels (dps) and depicted (by default) using shadows

In this article, we take a look at the alignment properties in Flexbox while discovering some basic rules to help remember how alignment on both the main and cross axis works.

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.