Progress Bars vs. Spinners: When to Use Which
4-Second Rule
If you want users to stay on your app, don’t use spinners for processes that take longer than 4 seconds to load. A research study has found that most users’ tolerable wait time is 4 seconds. This means that their behavioral intentions begin to change after 4 seconds.
Grid Navigation Effects with jQuery
Today we want to share some neat grid navigation effects using jQuery. In our examples we will show you ten ways how to navigate through a set of thumbnails. We’ll take a look at some of the possibilities and how to apply the effect.
Using Motion For User Experience On Apps And Websites
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!
Sass Burger
What’s New and What’s Changed in Bootstrap 4
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’s a list of fun apps to build!
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!
Using Gradients In User Experience Design
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.
How To Export SVGs For The Web From Illustrator by Colin Lord on CodePen
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).
7 Practical Tips for Cheating at Design – Refactoring UI – Medium
- Use color and weight to create hierarchy instead of size
- Don’t use grey text on colored backgrounds
- Offset your shadows
- Use fewer borders
- Don’t blow up icons that are meant to be small
- Use accent borders to add color to a bland design
- Not every button needs a background color
How to find great Natural Gradient
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.
Web Typography: Designing Tables to be Read, Not Looked At · An A List Apart Article
Set tables as text to be read
More Padding, Please! – Wayfair Design – Medium
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.”
Writing-first Design
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.
Skeuomorphism, Flat Design and The Rise of Type Design
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.2017 Design Trends Guide
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.
Buttons in Design Systems – EightShapes – Medium
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.
Build a Style Guide Straight from Sass
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.