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 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...

Today I ran into an obscure JavaScript error that seemed to only be present on the CMS build. I ran through the usual suspects: trying a few tricks I know, scouring Google and Stack Overflow for a similar answer, and hitting up the GitHub issues on the related...

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...

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...

Today a link came across in Front-end Focus called the Front-End Developer Handbook 2017. Here is the description from the email: "Cody Lindley’s popular guide to the practice of front-end engineering, how to learn it, and what tools to use, has been updated for...

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...

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...

Today I read an interesting article by Viljami Salminen titled On Design Tools and Processes. In the article Viljami gives you a flash tour trough the history of graphic design. His point was that, many of the tools we are using today still use this paradigm of the...

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...

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...

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...

This weekend I read a flurry of articles and emails about container queries. There is a lot of optimism for this new technique that exactly zero modern browsers. Like all emerging ideas on the web, it is great to be ahead of the wave to better understand what is...

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...

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...

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...

Sometimes it is just easier to explain things in a video. https://jamesstone.wistia.com/medias/6jw7scruz7

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...

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...

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...

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...

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...

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...

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...

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...

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...

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 |...

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'...

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...

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,...

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...

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...

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...

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...

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...

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...

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...

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...

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 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...

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...

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...

Recently, I was responsible for maintaining a static prototype. At the start we used it a lot and that was fantastic. Everyone was on the same page. We were making some awesome progress. But as we got closer and closer to the finish line, the prototype started to fall...

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...

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...

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...

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 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...