Google Fonts are easy to implement, but they can have a big impact on your page load times. Let’s explore how we can load them in the most optimal way.

“[…] never solve the problem I am asked to solve. […] Because, invariably, the problem I am asked to solve is not the real, fundamental, root problem.” — Don Norman in The Design of Everyday Things

When we finally shipped the feature, however, we realized that filters weren’t what users wanted at all. They wanted something much more basic: content that was relevant to their unique situation, with the minimal number of steps required to get it. Giving our users what they wanted taught us this lesson the hard way.

Create animation magic using keyframes, animation properties like timing, delay, play state, animation-count, iteration count, direction, fill mode and will-change.

“Almost everybody I know who does interesting, creative work went through a phase of years of where they could tell that what they were making wasn’t good as they wanted it to be… It is only by going through a volume of work will you close that gap, and your work will be as good as your ambitions” — Ira Glass

Every month I reflect on ‘How I can be a better Designer’. I learned through my background in visual arts that you can train yourself to draw better in a shorter period of time (literally).
I experimented with this in the Summer of 2013. My goal then was to achieve realistic sketches of eyes that captured human emotion. To do this I gave myself a 30-minute time limit and these were the results…

1) 8–6–4–2 Rapid Prototype Method
The premise of this method is to sketch for 8 minutes, 6 minutes, 4 minutes and 2 minutes with quick 2 minute feedback sessions in between.

2) A Twist on the #DailyUI Challenge
Maybe you’re like me and you’ve received the congratulatory email on Day 100 🎉 with nothing to show for it. This was the simple twist I added to get myself started.

3) Solve a Problem you’ve encountered
Take a moment in your day-to-day to note down real world problems that you wish there were better solutions for. You might already a list or two or five. It’s time to solve that problem.

A curated collection of dark UI to inspire you in your product design process.
Even more examples of dark UI could be found on our amazing visual search.

Here’s a tiny trick for making your hover states stand out, and also a cool way to target the siblings of the thing you’re hovering over. The effect is a mixture of two effects:

Scale the hovered item
Fade out the siblings

1. Lack of Planning for Edge Cases (Say NO to Lorem Ipsum)
   Using lorem ipsum and stock photos, you can easily create a beautiful, harmonic design… that will quickly be irrelevant to reality. Your beautiful design will be broken once it’s been filled by the real content.
2. Inadequate Screen Annotations
3. Frustrating Error States
4. Lack of Typography Hierarchy
5. Inadequate Padding and Spacing

We have a whole selection of ways to align things in CSS today, and it isn’t always an obvious decision which to use. However, knowing what is available means that you can always try a few tactics if you come across a particular alignment problem.

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.