Digital experiences are emulating real life more and more every day. This may seem counterintuitive, considering the hate that rains down on skeuomorphic visual design, but there’s a lot more to emulating real life than aesthetics. Interface designers can emulate real-life physics and movement on a digital screen. This type of motion is becoming more common, which is why it’s becoming easier for people to understand computers. We’re not getting better, the interfaces are!

Menu -> X transition

In a way or another, pretty much everyone has used Bootstrap at least once. Millions of websites, prototypes, and themes for well-known CMSs (such as WordPress) are based on Bootstrap. The framework is simple to install, easy to use, and incredibly time-saving. It's built on high quality HTML, CSS, and JavaScript that allows you to create good-looking designs with a minimal effort.

Here are 8 fantastic projects to train your coding muscles! The goal is to build each app with whatever technology stack you prefer. Keep it conflict free, use whatever you want!

Today you’ll learn how to use gradients for a website in Adobe XD through a very useful tutorial.

Always decide on a light source. This will help you decide which are the lighter and darker areas in the gradient.

Chris Gannon:
Personally I prefer and use the Asset Export panel. It's quicker, produces cleaner SVGs and is more flexible (drag and drop several assets and it will export them all separately; drag and alt-drop several assets and it will export them as one).

1. Use color and weight to create hierarchy instead of size
2. Don’t use grey text on colored backgrounds
3. Offset your shadows
4. Use fewer borders
5. Don’t blow up icons that are meant to be small
6. Use accent borders to add color to a bland design
7. Not every button needs a background color

In my opinion the greatest inspiration for finding great natural gradients is nature. Specifically, the sky. It’s most basic colours are blue and red, but in truth, it’s so much more than just that. Subtle changes in hue emulate waves, the irregular and imperfect clouds simultaneously both ruin and enhance the big picture, and should the sun ever rise or set, the whole thing is thrown into complete disarray, that, while one would think would ruin the experience, everything still sets into a perfect harmony. I have never seen a sky that didn’t somehow inspire me to feel something bigger than all the artists of our civilization have ever managed to create.

Set tables as text to be read

If you overhear a design QA session between a product designer and an engineer, odds are you’ll hear the product designer say something like this:
“Can you add 8 pixels of padding here and also there? … Actually, let’s make it 16 pixels.”

Sketching is great, but before I start sketching, I start writing. Writing first has lots of advantages, regardless of the project you’re working on. Here are a few examples.

The Rules of Type Design

Here are my proposed rules for Type Design:

You can use lines or strokes.

You can use icons.

You can use typography.

You can change the color of the background.

You can use images.

Each year we learn something new about design and 2016 was no different.
After last year’s article had such a success we decided to make some predictions for 2017, so let's get started!

Design trends are influenced by media, technology, the fashion industry and, lately usability. A trend emerges slowly, gradually, making its way into all design branches, and then disappears in exactly the same way. Basically a design trend's life is no longer than one or two years. Design in 2017 will continue the trends that materialized in 2016 while adding some new influences, but the feeling is well known and familiar and you may have seen it in the past couple of years. The main influencer remains Google's Material Design, that suffers a few changes.

That’s why Buttons are arguably a design system’s most important component. Devilishly simple, they offer a simple label in a defined region I can press. As such, buttons are where you apply a design language’s base attributes in ways that’ll ripple throughout more complex component later.

Here’s 12 lessons I’ve learned when working the primary button, secondary buttons, and a whole host of other button types in an emerging system.

The Basics of Node-KSS

To achieve our goals of a platform agnostic, low-friction style guide, we landed on kss-node, which is itself a Node.js implementation of Knyle Style Sheets (KSS), a Ruby library that:

... provides a methodology for writing maintainable, documented CSS within a team. Specifically, KSS is a documentation specification and styleguide format.

The basic principle is that your style guide is generated via comments you create in your CSS, SCSS, Sass, LESS, etc.

Tips for designing and building a consistent design system.

Without doubt, I get asked about design systems more than anything else. So, having spent the majority of the past few years thinking about how to design, build and present design systems for products like Marvel, Bantam and Modulz, I figured I’d share some of what I’ve learned along the way.

Static site generators are quickly becoming a big part of the professional website builder’s toolbox. A new static website generator seems to pop up every week. Figuring out which one to use can be like a walk in the jungle.