React Helsinki 2018

Workshop day by a front-end developer

MOI-moi 👋
This week I am in Finland to learn a new langage an improving my skill in React and React Native. On this article, I am going to share with you my notes and links about the first day of workshop.

You want to improve your design skills?
Follow the advices about Styleguide Design Developement.
If you are more in the mobile world, I have some useful links for you.

In short, here is the twitter feed of this great event.


Component Design Workshop

With Andrey Okonetchnikov and Artem Sapegin

What is the difference between German government website and the Austria one ?

The German version have a design system

In the Austria version it’s not the case.

The results?
No consistency in terms of branding and the users needs to “learn” how to use the website every time because there is no pattern for navigation.

Why do I need a Design System?

Take the example of Lego. They are using bricks (aka primitives) to build almost everything. It’s perfect for a design system, with basic things you can build different products.

If I use a Design System it’s gonna slow down the development of my product.

I agreed with this point for new projects.
But, the more you are going to add features / components / content on your website / application, more duplications are going to be introduce.
The codebase is growing, hard to maintain.
At the end of the day, It takes more time without style guide.

And we didn’t talk about how to educate and scale the team working on your project.

The broken windows theory is a criminological theory that visible signs of crime, anti-social behavior and civil disorder create an urban environment that encourages further crime and disorder. We don’t want the same for our codebase
The broken window theory

Ok, I am convinced now. Where should I start?

Style Guide Design Workflow

1. Content Inventory
Take screenshots and isolate all the components of your UI.
You can use the anotate app

2. Build a roadmap
Now that you have a list off screenshots, it’s time to make a plan and use this GitHub issue template.

Remeber that Style Guides are the single source of truth.

3. Choose your tool

Components are primitives

You can compose components from primitives

  • Human friendly API
  • Easier to communicate the intent via code
  • Easy to fix or refactor all instances at once
  • Enforce the design across the application

Don’t make CSS class names as an API, instead use primitives:

// DO
<Button primary> ... </Button>
// DON'T
<button type="button" class="btn"> ... </button>

Exercices

You want to sharpen your skills and learn how to use Styleguidist? You can download the sources on GitHub

In the meantime, I updated my mind-mapping about Design System

Design System Mindmap


Thanks for reading! If you have feedback or suggestions, you can find me here:

I Hope this motivates you to start hacking your next project. Just drop me a message if you have any questions — I would be glad to help you!