Help me transition from UX design to UI development
May 14, 2019 9:54 AM Subscribe
I’ll soon be starting a new role as a UX designer at a small company and would like to level-up my skillset to contribute more to the UI engineers I’ll be working with. What tools and workflows are you using, and where should I be upping my development skills to improve communication and minimize design/dev gaps?
I’ve been a UX design manager the last several years in a siloed environment where our teams typically design in Sketch/Principle and deliver via Zeplin/Invision Inspect. I’m moving to a React JS shop where I’ll start by creating a design system as well as designing a fair amount of visualizations. My eventual goal is to contribute front-end production code.
I have a degree in Computer Science from the early 2000s, along with front-end skills that tapered off about 6-7 years ago when I moved into leadership positions. I’m pretty comfortable with HTML/CSS/JQuery, less so with ES6. I’ve dabbled in D3 as well. If I should I dive deeper into React, do you have any recommended resources given my background? Are there tools (Storybook?) or environments (React Studio?) that UI developers prefer? FWIW, I’m being hired for my design skills, but I’d like to feel more productive to this smaller team and also have a desire to up my development skills on the side.
I’ve been a UX design manager the last several years in a siloed environment where our teams typically design in Sketch/Principle and deliver via Zeplin/Invision Inspect. I’m moving to a React JS shop where I’ll start by creating a design system as well as designing a fair amount of visualizations. My eventual goal is to contribute front-end production code.
I have a degree in Computer Science from the early 2000s, along with front-end skills that tapered off about 6-7 years ago when I moved into leadership positions. I’m pretty comfortable with HTML/CSS/JQuery, less so with ES6. I’ve dabbled in D3 as well. If I should I dive deeper into React, do you have any recommended resources given my background? Are there tools (Storybook?) or environments (React Studio?) that UI developers prefer? FWIW, I’m being hired for my design skills, but I’d like to feel more productive to this smaller team and also have a desire to up my development skills on the side.
Best answer: Just learn React for now, it's a good skill to have in general. It will pay off in this job, and elsewhere, since it's very popular. I would check Reddit's /r/react (or whatever it's called there) subreddit to get an overview of the current landscape, and there will likely be easy to find learning resources listed there (or stickied, or in a FAQ, etc.).
posted by rhizome at 12:38 PM on May 14, 2019 [2 favorites]
posted by rhizome at 12:38 PM on May 14, 2019 [2 favorites]
Best answer: If you want to contribute to code at some point in the future then I think your first milestone is to ramp up your core JavaScript skills (jQuery doesn't count). React is very JS. If it's been a few years since you've done any FE work I wouldn't start with ES6+ - I would hit the ES5 books/tutorials first for a refresher, and only then advance to the feature enhancements that ES6+ provides when you're comfortable. Around that time you can start to work through some of the official React docs, and online tutorials.
A few further thoughts:
Once you've found your feet with the new company perhaps you can pair-program with a FE developer for a couple of hours a week.
In parallel with that you can obviously also start looking at your new team's code to see how what you're learning is being used in practice.
You check out the MDN documentation. I refer to this at least once a day.
While quite technical Axel Rauschmayers's Exploring ES6 is a good resource.
posted by urbanwhaleshark at 3:37 PM on May 14, 2019
A few further thoughts:
Once you've found your feet with the new company perhaps you can pair-program with a FE developer for a couple of hours a week.
In parallel with that you can obviously also start looking at your new team's code to see how what you're learning is being used in practice.
You check out the MDN documentation. I refer to this at least once a day.
While quite technical Axel Rauschmayers's Exploring ES6 is a good resource.
posted by urbanwhaleshark at 3:37 PM on May 14, 2019
Best answer: I also think learning React is the best place to start.
When I started my current role, I needed to learn React very quickly and used Learning React.js by Eve Porcello on LinkedIn Learning (a.k.a. Lynda.com). I went from nothing to contributing to our product in a week.
At the time, I was working on a master's degree in computer science (no prior bachelor's in the subject) and had experience with HTML, CSS, JQuery, JavaScript, and some boring non-front-end languages.
That said, I wasn't a hard-core JavaScript expert. You don't really need to be - React has excellent documentation. I've found it much more user-friendly than writing plain JavaScript by hand. Getting up to speed with the toolchain was the biggest learning curve for me, and the Eve Porcello video uses a very similar toolchain to the one we use at my company. We also make heavy use of Storybook.
As long as you have coding experience, you should be fine. I've been picking up ES6 as I go by looking at other developers' code. Whenever I see some weird shorthand in the product, I look it up and start using it once I understand it. Some videos on LinkedIn Learning also cover it more formally.
posted by marfa, texas at 4:58 PM on May 14, 2019 [2 favorites]
When I started my current role, I needed to learn React very quickly and used Learning React.js by Eve Porcello on LinkedIn Learning (a.k.a. Lynda.com). I went from nothing to contributing to our product in a week.
At the time, I was working on a master's degree in computer science (no prior bachelor's in the subject) and had experience with HTML, CSS, JQuery, JavaScript, and some boring non-front-end languages.
That said, I wasn't a hard-core JavaScript expert. You don't really need to be - React has excellent documentation. I've found it much more user-friendly than writing plain JavaScript by hand. Getting up to speed with the toolchain was the biggest learning curve for me, and the Eve Porcello video uses a very similar toolchain to the one we use at my company. We also make heavy use of Storybook.
As long as you have coding experience, you should be fine. I've been picking up ES6 as I go by looking at other developers' code. Whenever I see some weird shorthand in the product, I look it up and start using it once I understand it. Some videos on LinkedIn Learning also cover it more formally.
posted by marfa, texas at 4:58 PM on May 14, 2019 [2 favorites]
Agree on React and/or Angular. You might also consider some of the BI tools like Tableau, Qlik, and Microstrategy - there's a lot of work thats is half programming half front end design on those platforms for the foreseeable future.
posted by specialk420 at 10:36 PM on May 14, 2019
posted by specialk420 at 10:36 PM on May 14, 2019
« Older Cross Country Trip Planning, 1899 Edition | What to do about mold on bathroom ceiling Newer »
This thread is closed to new comments.
posted by Citrus at 10:03 AM on May 14, 2019 [1 favorite]