TLDR: Designers and developers should work with the same building blocks.

A little bit about myself

I’m a frontend developer, I have worked in the industry for about 4 years. Majority of my work these days involves building pixel perfect ui screens sketched by actual designers. But it is not always this way. For personal projects I usually do design myself and it’s usually just very rough napkin sketches. Let me summarize how I have approached development based on these different design requirements.

Napkin sketch

A napkin sketch does not have to be on a napkin. It’s a term commonly used for a rough drawing of a layout in a notebook or on any other piece of paper. Even though napkins are fairly common, they are not very convenient to draw on. Anyway, this is how I created my first app interfaces for projects back in college. I was not any good at drawing. Haha, I was not any good at development either. But where there is a will, there is a way.

Napkin sketch illustration [1]

For development I decided to go with Bootstrap. Version 3 was just coming out. There was flat design and more functionality out of the box. I was blown away how easy it was to create modern looking websites. I did not even bother customizing the default styles, it was perfect.

Basic Sketch design — wireframe style

This is just a step up from the previous approach. I was still drawing very rough sketches of wireframes, but this time digitally. This means erasing a line is as easy as pressing cmd z. The sketch can be as detailed as I need. Adding more items becomes easy with automation of repetitive parts. Need to draw a list of items? Just cmd c/ cmd v.

Digital sketch illustration [2]

The development process did not change. I would still be using Bootstrap. There was another very similar library called Zurb Foundation[3], which supposedly was easier to customize. But I never bothered to learn a different api for building forms and buttons that look exactly the same.

Sketch design with UI kit from scratch

There start to emerge certain patterns. Every screen has buttons. Some screens have multiple buttons. Buttons, buttons, buttons. Time to make a reusable component out of them. I mean symbols. Buttons can be different colours. And different states, such as disabled, active. Now I have something that resembles a UI kit. A collection of reusable parts for building user interfaces. This greatly speeds up prototyping, and allows for much more detailed mock screens.

Some of UI1 symbols

But how do I code all of this? Theoretically, I could drop Bootstrap, and start writing my own css classes for buttons. But then I would have to come up with new button class names, which is difficult. And it’s going to be even more difficult to remember them later. Anything thing

I could do is write some css that overrides Bootstrap’s classes. Which is actually what I often ended up doing. But turns out there is a better way. Bootstrap supports theming. Which is basically a bunch of sass variables, and setting them allows you to compile your own, unique version of Bootstrap.

Sketch design with an off the shelf UI kit

So, given that I am going to be using Bootstrap for development, would not it be convenient to sketch mocks using Bootstrap itself? There are projects out there, such as bootsketch[4], that allow you to prototype using elements from Bootstrap. No need to create your own buttons in sketch, hooray!

For development you can use the same Bootstrap theme from the previous approach. With the exception, that the mock is going to have the default Bootstrap look & feel, and the developed app is going to have the unique theme you created with sass variables. But this is already a much nicer prototyping experience. And the mock screens can be as detailed as the real thing.

Sketch design with a custom & maintained UI kit

But, can we do pixel perfect prototype screens? Well, yeah. You could manually customize the sketch file with Bootstrap symbols. But there is a better way. Over the last few weeks my friend Oleg and I worked on a tool[5], that lets you easily create a Bootstrap based UI kit for both design prototyping work and actual web development. It comes with a sketch file with responsive symbols, overrides and icons; and a bootstrap theme, both compliled & minified. You can simply drag’n’drop the css file into you bootstrap project to integrate the theme. This saves a ton of time, and it’s very easy to create a unique-looking Bootstrap theme and a sketch file with all the same components that Bootstrap provides. You can have pixel perfect UI mocks and develop a webapp in no time.