React for designers
There is no doubt that React has become the developers first-choice for building rich web applications. Maybe is time for designers to climb aboard?
I have spent the last 10 years designing websites. Coming from a graphic design background my early works was often Photoshop sketches. Like a lot of us, responsive design made me do more in HTML and CSS and it was wonderful. Being forced to think in systems and code made me a much better designer. Building with the real building blocks of the web was fantastic.
But the need for prototyping richer interactions came rather quickly. Prototyping in code and not being able to do animations, transitions, step-by-step forms, callouts and modals just felt like an halfway run.
The need for prototyping interactions
All my developers friends and colleagues pointed at React and ES6. And Oh Yes! the road have been painful. It took me around 6 months, a lot of googling and reading, late nights feeling dumb and a not a very happy wife. But was it worth it? Definitely. Learning new things is by nature painful and time consuming, but at the same time the most satisfying thing a human being can do. And luckily, I am still married.
Why React is great for designers
When using React I get the same feeling as when i started to use SASS. Even though the complexity had increased, making color systems, typography hierarchies and spacing rules was a lot easier than before. React give me the same, but this time for the whole user interface.
We’re not designing pages, we’re designing systems of components.
— Stephen Hay
I love the thoughts behind Atomic design and the thinking about reusable design patterns. Everything is components, and a component can consist of other components making a design pattern. And React is components. Interactive components combining both presentation and interaction. In React it is not just easy to think in reusable components, you are forced to. Because this is is the core concept of React. A concept that could not fit us designers any better.
Work together on the real thing
Finding good ways for designers and developers to working together in a fun and creative way can be challenging. I am a strong believer in that working together in a cross-functional team with the real product is the best solution. To do this, is may time for our designer to pull up ours sleeves and dive into a real application. Even thought it may sounds terrifying, knowing a bit of React can actually make it happen.
}export default Button;