Style Guides: Consistent And Collaborative Design

“Product design is a team sport”. At Crafters, I’ve played as UI designer, UX researcher, marketing planner, roadmap planner, front-end developer… It’s very enriching, it helps you to really understand what it takes to build a product. We need to collaborate with each other and keep our product consistent. A very common problem is when design and code aren’t synchronized. We lose consistency, time and quality. Duplicated code, many shades of the same colors, too many text styles, lack of modules and patterns, a hard time coding the pages and so on. Style guides are here to help “Historically, the development and maintenance of a style guide was extremely time-consuming. Every change, big or small, required an update to the document.” — Jonathan Lieberman How Tools Have Shaped the Role of the DesignerA few weeks ago I had the opportunity to deliver a talk at Shift in Split, Croatia.uxdesign.cc We’re using Sketch with the wonderful Craft plugin. This way we can build a style guide quickly and keep it synced with the team, which helps everybody to work better. For example, below we have a project we’re working on: By generating a style guide, I could clearly see that we could improve our design by using less colors — too many were similar. Almost 50 shades of grayAfter organizing colors and styles, we ended up with a neater style guide that makes the design more consistent and also makes CSS easier to write. Colors, fonts and text styles It’s shared on Dropbox, so if someone makes any changes, it syncs with everyone’s files. No more going through 20 files to change a color or a font, yay! Some gifs found on Invision’s Dribble Craft plugin is here to help us all to design better. I’m learning more about it (and about Sketch too) in these great channels. Any thoughts on how to improve style guides and consistency? Comment below!