Designing with Storybook
Tags: react, storybook, webdesign, webdev
Published: 2018-12-21 07:28:41

---
title: Designing with Storybook
published: true
description: I can't imagine how much creativity gone lost when we had no Storybook or an alternative.
tags: react, storybook, web design, web development
canonical_url: http://metamn.io/react/designing-with-storybook/
cover_image: https://thepracticaldev.s3.amazonaws.com/i/qmkwitt1050ac2wj8v69.png
---


I can't imagine how much creativity gone lost when we had no [Storybook](https://storybook.js.org/) or an alternative.

Storybook ([live on metamn](http://metamn.io/mr-ui/)) is an user interface development environment. Up until now we had integrated development environments (IDE) for any kind of development *but* UI.

Now with Storybook you are able to:

1. **Tweak** live your work to find edge cases.
2. **Test** it instantly in different contexts like backgrounds and viewports.
3. Have immediate **accessibility** feedback.
4. **Document** your work and experiments in a beautiful way.
5. **Save** every experiment you do for curiosity and later reuse.

And the list is continuously expanding. For me the best part is saving the experiments.

I'm creating experimental user interfaces where every piece of UI on the screen is handmade. More, every single UI piece fits the underlying content which changes from site to site, brand to brand.

This takes lots of experimentation. Just take a look at Lynx & Hare, a landing page I've created recently, and unfortunately not with React and Storybook.  

For this project I had no input (zero questions answered in the Design Brief) just 'let it be something like between retro gaming and finance'.

After I've sketched up the first version the direction suddenly went to minimal, *my style*, &mdash; I've even added a PacMan !!! which I had to throw out. Together with that retro button bringing back that 90s feeling.

![Bye Pacman!](https://thepracticaldev.s3.amazonaws.com/i/jflydw4jtvehuemiw5nt.png)

![That button!](https://thepracticaldev.s3.amazonaws.com/i/nnw53j60v3r7zsyq11d2.png)

After creating *my style* ...

![My style](https://thepracticaldev.s3.amazonaws.com/i/7l635sgkqdlgh6a0j93m.png)

... still the result was not good enough, so I've created a third variant.

![I don't know who's style!](https://thepracticaldev.s3.amazonaws.com/i/mt035b90qqiqgx8xpjlt.png)

I wish I had Storybook at design time. Now all my work would be nicely cataloged, documented, buttons would stick together with other buttons, fonts in the same way, color schemes with another colors schemes,
and in plus I would have live all those variations I have now only as screenshoots somewhere on my hard drive.

A variant on red:

![The last variant in red](https://thepracticaldev.s3.amazonaws.com/i/edrmh9zqv1k7wurmo4n5.png)

This one with a Canvas background and particles moving with the cursor.

![The last variant with canvas gradient](https://thepracticaldev.s3.amazonaws.com/i/qmkwitt1050ac2wj8v69.png)

Or these, a completely new iteration with type set on a dynamic cell matrix.

![Type on a matrix](https://thepracticaldev.s3.amazonaws.com/i/ijcz6n1z1h2qf8wx61t8.png)

On gray background:

![Type on a matrix, gray](https://thepracticaldev.s3.amazonaws.com/i/pn7ytpgjuz805dlhj5w4.png)

... and the underlying cell matrix. I don't have the rotated and skewed screenshoots &mdash; they are neat!

![The cell matrix](https://thepracticaldev.s3.amazonaws.com/i/5a4hrulubaimum9m92zq.png)



Now I've [saved the project to Storybook](http://metamn.io/mr-ui/?selectedKind=Playground&selectedStory=Lynx%20%26%20Hare&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook-addon-background%2Fbackground-panel&background=beige), at least the layout. You can play with live. And I'll use it as a demo project across the entire UI library in the future.

Just to remind me to be thankful for Storybook every time I use.