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.

My favorite CSS “trick” would have to be these 3 lines of CSS:

• { background-color: rgba(0,255,0,0.1); }

I’ve been using this snippet for years! It makes debugging layouts a breeze and is quite insightful when dealing with the box model.

The ingredients of a successful data table UI

Data is useless without the ability to visualize and act on it. The success of future industries will couple advanced data collection with a better user experience, and the data table comprises much of this user experience.
Good data tables allow users to scan, analyze, compare, filter, sort, and manipulate information to derive insights and commit actions. This article presents a list of design structures, interaction patterns, and techniques to help you design better data tables.

Brandon replacement

A couple of examples of modules which do the escaping correctly are
Mojo::Util
and
HTML::Entities

Today, we are in the early stages of such a revolutionary shift, brought about by CSS Grid Layout. Much of what we know of the possibilities, limitations and best practices surrounding web layouts is effectively rendered obsolete by this new layout module, and in their place we find new possibilities, limitations and best practices that will take us into the next era of web design.

The internet has shape preferences, and they’re more meaningful than you think

On Thursday, Twitter threw us a curveball (sorry) and smoothed out the once-square avatar photos into orbs floating around the timeline. The change is notable, but the circle vs. square debate is far from new. There are arguments in favor of both when applied to internet design; circles indicate a person rather than content, which typically comes in a grid-like shape. So what is the current state of shapes on the social web?

In CSS, you have two techniques for visualizing change that are competing for your attention: Animations & Transitions. In this article, let's examine the similarities and differences between them so that you can know when to use which.

To make the most of this article, it would be helpful for you to be familiar with using both animations and transitions. If you haven't had a chance to get your hands dirty with them, the Creating a Simple CSS Animation and Looking at CSS3 Transitions tutorials will help you get started.

In 2008, I worked on Boots.com. They wanted a single-page checkout with the trendiest of techniques from that era, including accordions, AJAX and client-side validation.

Each step (delivery address, delivery options and credit-card details) had an accordion panel. Each panel was submitted via AJAX. Upon successful submission, the panel collapsed and the next one opened, with a sliding transition.