Manually Installing the Contentful Guide: Gatsby Starter Project

As I am preparing for Contentful certification I have been trying to go more heavily through the documentation and run some of their demos. I came across the contentful-cli command contentful guide from a video titled, "A web project in 5-minutes using the Contentful...

How BrowserStack can speed design reviews for teams using Jira

In fast moving web projects, the design review is an important part of the cycle. This is the place where the design team takes a look at a beta version of the product. And then they document everything that is not inline with the brand or design intent of the...

Design Systems Crash Course: Introduction

Hello and welcome to this page. What follows is a 3 part email course that used to live as an email course behind DesignSystemsCrashCourse.com (now dead). It has been featured on podcasts such as Python Talk, Freelancers Podcast, and UI Breakfast. I believe there is...

Get Started with Frontend CSS Frameworks using Python and Django

​Get Started with Frontend CSS Frameworks using Python and DjangoGetting started with a CSS framework can be a daunting task. There tends to be a lot of information, a lot of details, and a lot of emphasis on complicated frontend tooling.Sometimes all you need is a...

Why do I think about design systems while waiting for food?

Today while waiting in a line for a buffet, I had a thought. I wondered why they always serve a buffet when there are many people to feed. Here I was in line with a bunch of professors and hungry grad (and potential grad) students. Everyone was getting hungry and...

Why do I always use a git repo to organize my Sass?

Yesterday I talked about the work a design system for Marcus' new site and how I organize things at a 10 thousand foot level. Today I want to talk more about the details of the project. Specifically how I am organizing the project for the front-end build out + living...

What‘s the big deal with the Box Model anyway?

Today I was doing research for and upcoming course I am working on. I was looking at the CSS Box Model and how other people were going about explaining it. It is already explained well. And that is the problem. In fact, I came across no less than 10 great explanation...

What emergency pothole repair means to your app

Traffic in the Bay Area can be bad, but it seems I have had triple bad luck in the past few weeks. Don't worry, I assure I will bring this back to Design Systems Engineering. First, I was thwarted on my way to Santa Cruz by a crazy failed robbery attempt. The robber...

How do I know people are confused about the Box Model?

Yesterday I spoke about why the box model is fundamentally important in modern front-end code. I got some great responses and in general, most people seem to be confused about this. This does not surprise me. Over the past few years I have done workshops around the...

From the lab: Marcus Handa Design System

In my Design Systems Crash Course I talk about two of the most effective ways to gain control back on your projects: front-end code and living / coded styleguides. In theory, this might sound good. However, it can be difficult to understand the benefits, without...

Experts & Influencers interview about Design Systems Engineering

Recently I was interviewed by Hau Ngo host of the Experts and Influencers Podcast. In this fast paced 18 minute episode I touch on the following topics How the technology has changed over the last 15 years New challenges for teams that face increasingly complex...

Dealing with design anti-patterns in web projects

Over the years I have noticed three patterns that always seem to get in the way. Slight variations from page to page–AKA inconsistencies. Many page specific variations–often spacing related. Complex patterns with many nested components–sometimes necessary. Thinking...

CSS Quick Tip for Troubleshooting Front-end Code

This weekend I have been thinking a lot about what goes into creating solid front-end code. A lot of that is creating a nice translation of the design into a responsive format. Understanding that underlying system is critical to being able to quickly articulate...

How to connect Brand.ai + ZURB Foundation using Gulp step-by-step

In the past I have talked about my latest work in the lab: creating an integration between Brand.ai and ZURB Foundation. I have also talked about the benefits you can gain by using such a system. Yesterday I shared a video where I walk you through the actual process...

What are the benefits of using Brand.ai with Sass based web app?

There are certainly other ways of creating Design Tokens. And Brand.ai also has other functionality that goes beyond this. there are other ways of approaching Design Tokens such as Sales Force's Theo project. Yesterday I shared a preview of an integration with ZURB...

From the lab: Brand.ai + ZURB Foundation Integration

Services like Brand.ai provide a great way to bootstrap your process. You can start building out a functional design systems engineering process fast. It provides a easy to use web interface for managing colors, fonts and graphic assets. One of its most interesting...

What secrets does this painting hold for building a design system?

At Penn State's School of Visual Arts I teach a course called Scripting Fundamentals for Visual Artists and Designers. This weekend I was grading the first assignment I was thinking about how it relates back to design systems engineering. The first project is to copy...

What are some good strategies for working with colors in Sass?

Yesterday, while stuck in traffic, I was listening to the Styleguide Podcast Episode 1 with Jina Bolton. It got me thinking about color and color variable names in Sass. Today I am back on a project I worked on more than a year ago and I can see how things have become...

Sometimes life throws you a curve ball

Today I wish I had a more awesome email for you. Something focused on Design Systems Engineering and providing a lot of value. But, sometimes life throws you a curve ball. Today is one of those days. I could have never predicted a bank robbery which closed down the...

What do design systems and electronic music have in common?

Today I went for a trip to Guitar Center to purchase a new MIDI controller. This got me thinking. Back in the old days of music recording all you had was a 2-track recorder. You had to do everything in one take. It didn't matter if songs or instruments were similar...

What is the right approach to fast paced web projects?

When working on a fast-paced web project different approaches are often needed. Design typically works from a bottom up approach. This means they go through many iterations. Then through a process of refinement they get smaller and smaller subsequent sets of designs...

How does front-end code get lost in translation?

Today I am thinking a lot about what is it exactly that happens when a project goes from design and gets translated into a responsive design. I am talking specifically about going from tools that designers use such as Sketch or Photoshop to HTML, CSS (Bonus for using...

Having some fun with color

Earlier today I came across a great color tool. It lets you add your own palette and then see which combinations will meet accessibility guidelines. Color tint stacks are one of the things that Nathan Curtis recommends as a reusable component for a design system. He...

“Yeah, I know Bootstrap” and why you should run for the hills

I have been doing workshops and teaching front-end design and development for some time and I have recently come to this conclusion. Almost no one is teaching modern devs to create pixel-perfect front-end code. Instead, they often have to hack together some (twitter |...

What is the answer to all great engineering questions?

Dr. Brennan at Penn State once told me the answer to all great engineering questions is, "it depends." I have talked about why MailChimp's Pattern Lib is awesome + why you might not want it. I have also talked about 2 other reusable component's from Nathan Curtis'...

What do you get when you cross code pairs and markdown?

Yesterday I wrote about how MailChimp's Pattern Library is pretty awesome. But copying it exactly might not be the best decision for your organization. Today I will continue with the breakdown against Nathan Curtis' medium article titled "Design System Doc...

Why is the MailChimp Pattern Lib so powerful?

When some people think of a styleguide or a design system, they automatically think of the MailChimp Pattern Library (also sometimes referred to as the MailChimp Styleguide). One common misconception is that your own design system must closely mimic the scope, style,...

Myth! It is the maintenance that will kill you

You may have heard stories about people not being able to support their system. Perhaps how it slowly fell out of sync. Some even claim that it became useless because no one would use it. I am here to debunk that myth. Design Systems don't need beaucoup time in...

How much time does it take to build a design system?

Another popular misconception is this.  Design Systems take a ton of time to build. It is easy to take a look at some of the most prominent ones that hit the front page of Designer or Hacker News and think, "wow, that must have taken for-ev-er!" Companies that are...

Magic Mirror on the wall, who is the fairest styleguide of all?

One myth surrounding design systems is that it is the same as a styleguide. A styleguide, especially a living or coded styleguide can be a fantastic addition to your Design System. However, it is not always necessary. Also, a styleguide does not necessarily make a...

How to make your next redesign almost automatic

In anticipation of some media coverage the founder of Snowflake Stories LLC approached me about doing a redesign. A fresh coat of paint so to speak. For most projects this often ends up being an UX heavy buildout. Because we had approached UX first, we had a bit of a...

Who knew I needed to be more consistent?

Consistency is one of the biggest advantages in Design Systems Engineering. Recently I had a firsthand account while working on SnowflakeStories.com The site is using the JAM Stack. The pseudo-back-end is created by a program called Ruby Middleman. The visual layer is...

Going UX Lite

In user experience there is often a heavy emphasis on doing research. Often this involves doing user research studies. Here you might extensively interview. Or you might watch focus groups directly use your product or app. Although this is a fantastic approach and one...

The right framework

Recently I discussed extending a framework to increase your output. Here I want to expand upon that idea and let you know what is the best framework for nearly any web project. It should come as no surprise that I am a proponent of the ZURB Foundation framework. I am...

Designers View on a Designer Last approach  

Recently I had a chat with Marcus Handa. He is the UI Designer who assisted me with the award-winning SnowflakeStories.com. What follows are some of the key takeaways from our conversation. Like what's in it for Marcus? What are some tangible benefits? And how does a...

Visual design will delight no questions asked

When most people think of a heavy UX change on a site or app they often think about the visual design first. Initially there might be wireframes or other quick thoughts as an overview. But often teams start think in terms of color and visual design right away. On...

UX is the magic that makes your app sing

UX can mean a lot of things to different organizations and everyone might have a different process. However, I have seen many projects that perhaps approach the visual spectrum of design before getting the UX of their site of app solid first. I would recommend taking...

Sketching + code is the best tool in the world

SnowflakeStories.com uses a radical new way for building sites called JAM Stack, but how did we get there? And how does it relate to Design Systems Engineering? Early on meeting with the founder, Jill Barletti, I knew I had discovered a rare gem of a project. She...

Turn the tables and never again break your stakeholder’s heart

One of the problems I experienced on a recent project was that there was not a common reference point. The designs were not locked down and there was little consistency. The backend was in flux and not functional at all. In short there was nothing that could be shown...

Getting from point A to B without a communications breakdown

Recently I worked on a product where there was a heavy division in labor. There was the agency. There was the design team. There was the back-end team. And there was the front-end development. While initially this might sound like a great division of labor, it can...

Scaffolding is key to keeping projects on track

Across many of my projects one of the biggest issues was that most the time the backend wasn't complete. Compounded by pseudo-agile approaches (waterfall development meant to more agile-like) stakeholders often expect to see templates built out one-by-one and in pixel...

3 colors you definitely don’t want to use on your app

I recently was working on a project when without warning the colors went crazy on the production app. In short, the colors looked terrible on the production app. But what do I mean by terrible exactly? Before the change, there was a beautiful and intentional set of...

Going off brand

I recently worked on a project where they hired an agency for a UX heavy buildout. They didn't have the funds to have every little nuance built out, which is common, so there was some translation in between. But what happens when you don't have a solid set of tools to...

The Mixin: Dropping Sass News, Design Tokens and the Hateful Weight

The Mixin bills itself as a Sass Front-end Meetup and I have been wanting to go for quite some time. What follows is my major take aways from the event. Getting to the Event at PlanGrid I took the BART in to the 16th Street and Mission Station and it was a quick 2...

Save on Development Costs by Using a Framework

When approaching a new project, people generally look at two options. Either they’re considering using a framework solution like ZURB Foundation or they’re thinking about custom building all the code. There are a lot of people out there that will tell you not to use...

ZURB Foundation 5: Clean + Organized

In this presentation I share my best practices working with ZURB Foundation. Keep your projects clean and organized and make your code more maintainable and readable. ZURB Foundation 5: Clean + Organized from James Stone A mostly css framework jQuery + JS: required by...