Benefits of learning to code and using React as a product designer.
I have recently started my journey at Flatiron school’s Immersive Software Engineering program. Some of my friends have asked why I ended up joining a coding Bootcamp. For example, is it for a new career transition as a front-end developer? As a matter of fact, it is not. For my first blog topic, I would like to talk about why I joined this Bootcamp and my initial impressions of the React library experience.
To give you a quick summary of my background, I’m a graduate student at IIT Institute of Design majoring in Human-Computer Interaction and have previously worked as a UX designer at a Home Appliance company.
Why do I need this skill?
I agree that it’s not required for designers to know how to code because the goals and strengths of each individual vary. However, since collaboration with developers is unavoidable during the project, it is clear that having coding skills will help you achieve more communication and realistic goals.
What convinced me to learn to code?
- Increased sense of understanding for the design
Developers usually plan the overall structure of code, and then begin implementing detailed functions when the design is completed. Some things I’ve heard a lot while collaborating with developers are “I don’t think it’s going to be possible to build this function because of time constraints” or “Let’s update it to the next version.” Every time this has happened, I felt that the time I had spent thinking about designing became meaningless, and sometimes I was hesitant to make new suggestions.
Developers and designers alike strive for realistic implementation in a project, but sometimes designers are imagining new things, and developers are responsible for implementing actual results.
I believed that if I had experience with coding, I would be able to understand the developer’s situation more and suggest a design that is feasible with less cost in terms of time. I also felt that coding would allow me to try many things with a wider perspective.
2. Providing clear design specifications
To communicate design elements on the page with the developer, the designer first creates a wireframe, and then uses various prototyping tools to explain detailed interactions. However, despite making a high-quality wireframe and prototype, it does not necessarily ensure that it can be perfectly implemented as an actual interface.
In particular, efficient communication between developers and designers has become possible through various prototyping tools such as Framer, Principle, and Flinto, although designers with beginner coding skills can express their needs more realistically and accurately.
3. Enhanced communication
Designers and developers each use terminology habitually that may feel frustrating if you are not understanding it in conversation. For example, a developer once asked me, “Should this user’s information be stored continuously?”. At the time, I partially understood what this meant but I didn’t know where this information would be stored and what the next steps would be for the developer to store the information. Although I’m still a novice in coding, all the words are now much clearer.
Why is learning React beneficial to the designer?
In recent weeks I have been learning Vanilla JavaScript and React Library. Especially for designers who are just learning to code and are curious about React, I will briefly write a story about my experience as a designer, learning React and the benefits I noticed.
First of all, what is a React?
React is a JavaScript library for UI development made by Facebook. There were many ways to develop UI before, however, React was made to convert complex UI to be more logical, simple and efficient. Again, React is not a language, but a library used for efficient UI development on JavaScript.
Why React?
- Useful for creating design systems
One of the most used design tools in practice is Sketch. Design components frequently used in the tool are made into symbols and reused whenever necessary. Similar to creating a button in the Sketch tool and changing only the text or color, React has similar features. React is component-based, and individual units are gathered to form a single screen. Like seen when making a design system in a sketch and reusing it, react can also make UI into components and reuse them through props and state in multiple pages.
2. Many good external libraries
With CSS frameworks such as Semantic-UI and Material-UI and very powerful libraries such as Lottie, you can easily implement the UI style you want on the screen without downloading it directly. In particular, the advantages of using Lottie in React are huge. Previously, Adobe After Effects was usually used to add animations to websites. However, the time cost to modify is large, and the animation quality is lowered in the process of rendering. However, Lottie allows us to add animated images and manipulate them with simple code. In react you can add these awesome animations pretty easily.
Reflecting on my journey so far, I believe that learning to code and use React has strengthened my abilities to be an effective collaborator in product development. I hope that my story is inspirational to designers who are thinking about learning to code and interested in React library! This blog has just been a glimpse into the beginning of my journey and I plan to write about the specifics of my experiences with coding in the following posts.
Thank you for reading my blog!
