I’ve been a fan of user-friendly user-configurable information management web apps for a long time. I love AirTable, I loved (the now defunct) FieldBook even more. I’ve enjoyed the power of Notion.so, Quip, Slab, and Confluence as team wikis and collaborative spaces. I wrote an article a while about about putting your design system in a wiki which was all about creating organization structures and page templates to make your team’s product design system great inside of a wiki — a tool that is simple for non-developers to use.

I am a developer, I do love putting design systems in…

I’ve worked on a few different design systems over recent years, and they all have unique properties that affect how we organized them. Specifically the most technically-ambitious design systems lived directly next to the code that consumed it, and the most design-ambitious systems needed to include hundreds of prototype page templates and variants of those pages for user testing and stakeholder review.

First let’s clarify definitions. I believe a Design System, a Component Design System, and a Pattern Library are all good names for the same thing, a web-based, documentation site that shows designers and developers what UI components are…

I build design systems for my clients. One recent project involved taking a couple static CSS and JS files and refactoring them into a flexible, well documented system composed of many individual components.

Why create a design system?

• It offers a central location for code documentation to improve communication on dev and design teams.
• It is a way to design in the browser, creating responsive styles and using the actual web technologies that are necessary for moving from static comps or wireframes to final implementation.
• It gives you a workbench for testing UI widgets in isolation, and producing the final…

I find myself in the position of choosing many products for managing web development work in a small team. The goal is to prepare this team for scaling, but I don’t want to fall into the trap of over-optimization. This team should be able to effectively balance design and development. Sometimes I get really focused on choosing the absolute best solution and software for each problem. I regularly create spreadsheets comparing all the competitors in a solution space. So I thought I might share what I’ve come up with lately.

The risk of doing that level of research and planning…

I needed to figure out how to build a router for a single page app. I’ve used vue-router many times and it works really well for vue projects, but for my custom framework I needed to find a more imperative and functional approach. In my framework I am avoiding all configuration objects. So, I added two functions to the main app class: registerRoute() and navToRoute()— I also added a couple helper functions: getRouteLink() and navToPath().

When you are initially setting up your app you will call registerRoute which is meant to receive an identifier (which is usually an enum value)…

Design systems are a way of progressing, in stages, from concepts and prototypes to implementation and functionality. The modern app design process is one of delivering an interface in layers.

I personally do most of my work on responsive web apps, so I can’t really speak to iOS or Android layout code. When you build a web interface there are particular capabilities of the platform that are inherently limiting on design. The good news is that we have a ton of capabilities now on the web platform for building attractive and complex layouts, but you don’t really use those capabilities…

As a freelance designer who develops — I find myself having to cross multiple stacks and design and build products across many disciplines, apps, architectures and languages.

So, here are some of the web app “stacks” I’ve worked in over the past 2 years.

#1 The Enterprise

• MS SQL Server
• Windows
• ASP.Net 4x
• jQuery + Backbone
• SCSS

#2 The Small Startup Team

• Ruby on Rails
• SublimeText
• LESS
• Bootstrap
• Sketch

#3 The Large Startup Team

• Ruby on Rails
• React
• Styleguidist
• Affinity Designer

#4 Experiments

• CouchDB
• Node + Express
• Auth0
• Vue.js
• Element UI
• VS Code

# 5 New Experiments

• FRETS js
• Netlify

#6 The Sprawl

• Ruby on Rails
• RubyMine IDE
• Docker
• Figma
• Sketch
• SCSS + Bootstrap
• JQuery + Vue

#7 Fast and Cheap

• MySQL
• PHP Laravel
• Vue
• Photoshop

#8 UX This Thing

• RealtimeBoard.com
• Sketch
• Adobe XD
• Lookback.io
• Notion.so

#9 The New Wordpress

• Contently
• Netlify
• Nuxt.js Static Site Generation

Let’s look back at a few decisions that I made when I started my freelance business and how they have turned out. I offer this as a long term review of the tools I’ve chosen as well as a little bit of historical accounting for future me.

Business Accounting Software: Pancake

I researched a lot of different options. I have a whole spreadsheet from last year when I researched the options.

I ended up trying out and.co, and Wave before settling on Pancake. This decisions has worked out pretty good. My wife does a lot of the book-keeping. But I like knowing that I…