It's All Just Systems Design
Ian Storm Taylor
Lesson 31
As someone who designs and codes, I find new similarities between visual design and programming every day. At Segment.io I work on all of our visual design, but also on our Javascript library and components. I've found the same principles to apply to both fields, and I think it's crucial for more programmer and designers to realize that. Hopefully after today's lesson you'll realize that you've been designing interfaces all along!
A well-designed visual interface has lots of the same features as a well-designed programming interface. Just like an API, a visual interface is designed to serve the user. They both strive to provide the user with the simplest solution that solves their problem. They both benefit from frequent refactoring to clean up debt. They're both made by combining many smaller components that do a single thing well into a larger product.
Lots of interface designers already think about their interfaces like programmers think about APIs, they just might not realize it. If you remember only one thing, remember that "interface design" principles aren't limited to visual interfaces.
-
Atomic Web Design
Brad Frost informs us of a new way of approaching interface design, thinking of in terms of components, instead of the page-based model we've always used. It maps directly to the same idea of components, packagings, modules, or gems in programming.
-
Styling a Component
Ryan Singer's article about component styling is a perfect example of how you need to think about frontend components as more than just pixel-perfect layouts. Just like designing an API, you need to think through the primary use cases and apply sensible defaults to your design, so that the user has less work to do on their end.
In Ryan's case, he could achieve the same visual look with using either multiple margins or a single padding, but the single padding is a clear winner in terms of user experience for the developer because it makes for less brittle components. -
API Design
In case it wasn't already obvious, the beginning of this excellent article by Matt Gemmell outlines why API design and interface design share so many similarities. An API is an application programming interface after all! And conversely, your visual interfaces can gain a lot from borrowing concepts from API design and programming.
-
Refactoring GitHub's Design
A good example of programming-thinking applied to design is the idea of refactoring, which designers are constantly doing while iterating on an interface. Just like in programming, your goal is to maintain functionality while rejigging the way you achieve that functionality. In programming, your public methods signatures stay the same, but their internals change. In visual design, the functionality of the product stays the same, but the visuals might change slightly to simplify the mental model for the user.
If you take a second to think about refactoring your own interfaces, I'll bet a few optimizations spring to mind. The beautiful thing about thinking in terms of individual, reusable components while designing the visual parts of an interface is that it translates perfectly to the code you'll be writing to build it. When you find the right abstraction everything will just fall into place. -
Component
Thinking in terms of small components starts really paying dividends when you re-use their simple APIs across all of your different projects. That's where component(1) comes in, and I implore you to try it out. It makes it absolutely trivial to use components that others have written.
There's already a huge library of Javascript components, but we're also starting to see visual UI elements being fleshed out as well. Things like counters, fonts, iPhone templates, loading indicators, tooltips and even stacks of paper! If you're feeling adventurous you can even start writing your own...
Ian Storm Taylor
Co-founder, Segment.io
I'm a designer+developer, and a co-founder of Segment.io, where I spend as much time writing Javascript as messing around in Photoshop. It's all just systems design, really. I write, tweet and dribbble.
