Photo of steel structure high above a city.
Photo of steel structure high above a city.

The problems with design-code hand-off are still manifold. I’ve been doing this for like 20 years and the process of turning visual direction into interactive applications is still fraught. Here are a few hints and principles to help you understand where this problem space has evolved lately.

  1. Use Figma, but it’s not magic. Figma is an excellent design tool that is more accessible to devs since it’s web-based and collaborative. …

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

Photo by Vanessa Bucceri on Unsplash

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…

While creating a new design system I imported some legacy jQuery code and learned the process for creating a future-proof codebase with TypeScript and Rollup.js.

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…

Photo by Ash from Pexels

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

#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

  • Sketch
  • Adobe XD

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

Not exhaustive. But, almost.

I ended up trying out, 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…

If you’ve been doing javascript development on the web (or applied for any developer jobs recently), you know about React, Angular and Vue. Each of these is a modern, powerful, and well-maintained framework for creating interactive and rich javascript applications on the web. They attempt to make it easy to compose user interfaces of reusable parts for consistency. Usually you reach for a framework like this when you want to build a SPA (single page app). Sometimes the ecosystem, the tooling or community around the project is more compelling than the syntax and code architecture itself.

Libraries tend to grow…

Tim Bendt

Senior Software Engineer at Invisible Technologies, UX Design, Front-end developer, and world-travelling toddler-wrangler.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store