I recently returned from a trip to La Palma in the Canary Islands and I had a fabulous time. And staying on the edge of a rustic volcano in the tropics I didn’t expect to find anything Design Systems related, but I was quite wrong.
Download
Top of the Naval Museum: to scale replica of Santa Maria
In the La Palma Naval Museum (itself being a building that is a replication of the Santa Maria ship that Christopher Columbus sailed) I found and even smaller version of itself in a specific context.
And yes, we are about to go super Meta. Meta-Meta if you will.
Download
La Palma historical ship yard depiction (model at bottom)
Here is a mini-shipyard (inside of the museum / ship building), milled out of historical trees growing on the island, which was a step over point for the Spanish during the old conquering days. On the plaque there was a small story. The ship builders, using only hand tools built the ship by taking a look at the model (should read Styleguide or Design System) to understand how to put it together, and how to create each individual piece. You can imagine them running back and forth comparing what they are doing to the smaller model ship.
Download
The Model – What your design system / styleguide should look like
The most important thing to point out here is that this is not a fully realized ship. It is just the “bones” of the ship, and just enough information for the builders to create a larger structural version. When you approach your guide or system, think back to this and ask your self, am I providing just enough information just in time, or am I building some complex model that no one will be able to follow. We might be building websites and apps, but as the complexity rises, you are going to have to start to provide a plan and a structure if you want your project to “float.”
This week it was suggested that my Styleguide in 60 product was engineering focused and perhaps not that appropriate for designers.
To address that concern I have several links for those who are just dipping their toes into the side of a systems based approach. Nothing beats having real code loaded in the browser, but these tools will get you pretty close. And in a more designer friendly way.
Probably the best way to get started with a living styleguide. It will cover just the basics like design tokens and fonts, but it is a good start.
I haven’t used this myself, but it is a graphic prototyping system, that has been extended encompass developer documentation and styleguides. I am not sure that it is a proper design system in the fact that it doesn’t lock in with frontend code, as far as I know, but again, a good place to start.
The oldest of the auto-redlining apps. If you are working with sketch and handoff to developers, this is a great place to start. Free for one active project.
Sympli: Bring digital products to life faster and easier.
A great alternative to Zeplin, does more or less the same thing. Different pricing structure and model which may or may not be a good fit for your team.
Avocode - PSD & Sketch designs to web, iOS and Android code
I haven’t used this, but like the two choices above, could be a good fit for your team. You will need to compare features and see if it is a good fit.
A short note on auto-redlining programs. You need to collaborate with your developers when making a styleguide. You need to understand how they are going to use this information and help them craft a nice intermediary step. Otherwise you are still just kicking your designs over the wall and hoping for the best, just with a fancy tool.
Adios amigos! Until next time.
–James