5 ms·

That's a lot of words. I'll counter with my own shorter list for those without the stamina. 1. Become very strong at raw CSS. 2. Learn how to use your termina

by snide 3y ago

That's a lot of words. I'll counter with my own shorter list for those without the stamina. 1. Become very strong at raw CSS. 2. Learn how to use your terminal. 3. Start making "polish" PRs in whatever site / app you work on. 4. Pick up skills from engineers organically around you as you clean up the front of the frontend. 5. Learn that design is meant to move, and pick up animation! If you really learn CSS, like becoming the best person at your company in it, you will become immensely valuable to your team. Every great coding designer I've known got there because they were frustrated their engineering team would miss details from their designs. They learned how to clean up behind them, and then next thing they knew they were delivering coded prototypes, and not designs to their feature teams. They knew static designs would fall apart, and had the stamina to work on the three issues that come up most in web design: text truncation, focus issues and media query issues. Source. Coding designer that's been at it for 25 years. I've worked at every level of design: from grunt, to open source system-designer, to Head of Design at a public company for a 45 person design team. Gave it all up to get back in the code and hack! Coding designers are the best! Pair them with a strong visual designer and a patient engineer and you will have an awesome product. Side note. I've worked in dozens of front-ends over a long career. CSS is the only constant.

capableweb 3y ago
> 5. Learn that design is meant to move, and pick up animation! If you do, please don't force users to endure slow animations or slow "micro interactions", make it do what it does fast, especially if you're building applications people use professionally. > Side note. I've worked in dozens of front-ends over a long career. CSS is the only constant. Same here, and I'd add that JavaScript (not TypeScript, not React, not X) has also been a constant for me.
- tough 3y ago
  The web is still reducable to javascript, html and css, as much cruft as we like to put inbetween nowadays before outputting those
flashgordon 3y ago
Oh man how do I find someone like this. As a backend/infra dev I respect, fear and loath (in the reverse order) css. If you can find your complement(s) there is nothing like it!
- throwawayai2 3y ago
  As a designer who know how to code, I would love to know how to find a job like this.
  - filoleg 3y ago
    Not sure about today (since I don't work there anymore), but my org at Microsoft back about 5 years ago had a role that was pretty much like what this comment chain is talking about. IIRC they called it "design engineer". Not sure where in the org structure they fell under (i.e., whether they reported to design managers or engineering managers, i think it might've been under engineering managers), but I worked with a few of them directly, and it was amazing. I was working on the front-end of a web app, so I did quite a bit of design implementation handed to me by designers. But for some very tricky styling or just in general, occasionally, design engineers would come out to help.
  - e-_pusher 3y ago
    My company is big on hiring designers who can code. We are in the humane tech / hw / AI space. My email is in my profile, feel free to reach out if interested!
- mortenjorck 3y ago
  I've tried to move toward this kind of arrangement in the past, but have never quite broken through. While I'm fluent in HTML/CSS, the major obstacle to actually committing code as a UX/UI designer has been the codebase itself. I can pop open a web inspector and make a bunch of changes, but that's the easy part. Unlike when I'm working on my own, far simpler side projects, I can't just switch over to VS Code and paste the changes in to the requisite selectors: Assuming I have a local environment set up (no easy feat itself!), now I have to track down React components, find their stylesheets, perhaps follow some leads out to other stylesheets coming from different libraries... It's all something I'd love to get to a point of familiarity with in my next job (which I am currently looking for!), but the upfront time investment (in part by the developer to explain the repo to me) has kept it just out of reach so far.
uxcolumbo 3y ago
Good points. Interested to find out more what you mean with this: > 5. Learn that design is meant to move, and pick up animation! I mainly work with 'Enterprise' or B2B users. My experience those users don't care about animations. They just want the fastest way from A -> B and don't get in their way. What's your experience and with what type of users? I get frustrated with animated interfaces on the web. It usually means my laptop fan spins up because the designer wanted to show off how cool all those CSS animation thingies are. UI animations seen on mobile apps are better, e.g. subtle animations used in Apple's music app improve usability. I usually try to stick to using it for making signifiers clearer, to show state changes or for feedback. This is a good book: https://rosenfeldmedia.com/books/designing-interface-animation/ https://rosenfeldmedia.com/books/designing-interface-animati...
- idopmstuff 3y ago
  My whole career has been in enterprise software, and I've found that the actual end users like the same sorts of things you find in well-designed consumer apps, because that's what they're used to. I think when you say "UI animations seen on mobile apps are better, e.g. subtle animations used in Apple's music app improve usability." that really nails it - nobody wants overly artsy animations (in consumer or B2B software, in my experience), but subtle use of animation can make the product feel more responsive in a way that improves the user's perception of it.
- pipeline_peak 3y ago
  > It usually means my laptop fan spins up What laptop do you use?
sourcecodeplz 3y ago
This guy frucks!
- cutler 3y ago
  Russ Hanneman
exodust 3y ago
> 2. Learn how to use your terminal. In what world does the order of learning go CSS > Terminal for the "designer who codes"? In no way should that be on the list for the author's target audience.
- zamnos 3y ago
  I disagree but probably the level of "learn the terminal" is the source of disagreement. Coming from nothing, cd and ls do actually take a second to wrap your head around. I don't think a designer/developer necessarily needs to be able to pipe commands to each other but running yarn and hitting ^C is something every web dev should be able to do, even if it isn't second nature. It's second nature for us but I've been at it since the DOS days,
  - exodust 3y ago
    I remember using and hating DOS. I swore never to go back once it disappeared around 1998. Using terminal is going back, so I don't use terminal. No idea what "running yarn" means, and I don't intend finding out. I'm too busying with actual web development! :-)
- snide 3y ago
  Just about any application in a team is going to require you to run the application locally so you can work on it. That immediately means you need to understand how to navigate your terminal, run commands and install software through package managers. Almost always, doing so is made more difficult if you don't understand what your .bash_profile does. This isn't about learning the full unix suite, it's about knowing enough to get the product you're working on running locally. Speaking from experience, I've known so many designers who were simply ineffective in their feature teams because they had no ability to even see the feature be developed locally. They all required a developer to push up a staging environement, generally later in the product build. Designers who can actually run the software early and give feedback during this time have a leg up on those that can't.
  - exodust 3y ago
nerdchum 3y ago
How to learn CSS really well? any good resources you recommend? I found it very easy to get started but very very challenging to get good.
- flappyeagle 3y ago
  I learned it by getting ton of reps coding blog layouts. These days you can start by learning the heck out of flexbox. Take a design and implement all of the layout using nested divs and flexbox.
postalrat 3y ago
There isn't any correct way to structure CSS. Even if you are the best you will still have people telling you are wrong or they don't want their styling structured how you suggest.
xtiansimon 3y ago
Or even simpler—change your career to programmer, and bring your thoughtful aesthetic sensibilities to the fore where needed and _permitted_ by your developer colleagues.

by snide 3y ago

capableweb 3y ago

> 5. Learn that design is meant to move, and pick up animation! If you do, please don't force users to endure slow animations or slow "micro interactions", make it do what it does fast, especially if you're building applications people use professionally. > Side note. I've worked in dozens of front-ends over a long career. CSS is the only constant. Same here, and I'd add that JavaScript (not TypeScript, not React, not X) has also been a constant for me.

tough 3y ago
The web is still reducable to javascript, html and css, as much cruft as we like to put inbetween nowadays before outputting those

flashgordon 3y ago

Oh man how do I find someone like this. As a backend/infra dev I respect, fear and loath (in the reverse order) css. If you can find your complement(s) there is nothing like it!

throwawayai2 3y ago
As a designer who know how to code, I would love to know how to find a job like this.
- filoleg 3y ago
  Not sure about today (since I don't work there anymore), but my org at Microsoft back about 5 years ago had a role that was pretty much like what this comment chain is talking about. IIRC they called it "design engineer". Not sure where in the org structure they fell under (i.e., whether they reported to design managers or engineering managers, i think it might've been under engineering managers), but I worked with a few of them directly, and it was amazing. I was working on the front-end of a web app, so I did quite a bit of design implementation handed to me by designers. But for some very tricky styling or just in general, occasionally, design engineers would come out to help.
- e-_pusher 3y ago
  My company is big on hiring designers who can code. We are in the humane tech / hw / AI space. My email is in my profile, feel free to reach out if interested!
mortenjorck 3y ago
I've tried to move toward this kind of arrangement in the past, but have never quite broken through. While I'm fluent in HTML/CSS, the major obstacle to actually committing code as a UX/UI designer has been the codebase itself. I can pop open a web inspector and make a bunch of changes, but that's the easy part. Unlike when I'm working on my own, far simpler side projects, I can't just switch over to VS Code and paste the changes in to the requisite selectors: Assuming I have a local environment set up (no easy feat itself!), now I have to track down React components, find their stylesheets, perhaps follow some leads out to other stylesheets coming from different libraries... It's all something I'd love to get to a point of familiarity with in my next job (which I am currently looking for!), but the upfront time investment (in part by the developer to explain the repo to me) has kept it just out of reach so far.

uxcolumbo 3y ago

Good points. Interested to find out more what you mean with this: > 5. Learn that design is meant to move, and pick up animation! I mainly work with 'Enterprise' or B2B users. My experience those users don't care about animations. They just want the fastest way from A -> B and don't get in their way. What's your experience and with what type of users? I get frustrated with animated interfaces on the web. It usually means my laptop fan spins up because the designer wanted to show off how cool all those CSS animation thingies are. UI animations seen on mobile apps are better, e.g. subtle animations used in Apple's music app improve usability. I usually try to stick to using it for making signifiers clearer, to show state changes or for feedback. This is a good book: https://rosenfeldmedia.com/books/designing-interface-animation/ https://rosenfeldmedia.com/books/designing-interface-animati...

idopmstuff 3y ago
My whole career has been in enterprise software, and I've found that the actual end users like the same sorts of things you find in well-designed consumer apps, because that's what they're used to. I think when you say "UI animations seen on mobile apps are better, e.g. subtle animations used in Apple's music app improve usability." that really nails it - nobody wants overly artsy animations (in consumer or B2B software, in my experience), but subtle use of animation can make the product feel more responsive in a way that improves the user's perception of it.
pipeline_peak 3y ago
> It usually means my laptop fan spins up What laptop do you use?

sourcecodeplz 3y ago

This guy frucks!

cutler 3y ago
Russ Hanneman

exodust 3y ago

> 2. Learn how to use your terminal. In what world does the order of learning go CSS > Terminal for the "designer who codes"? In no way should that be on the list for the author's target audience.

zamnos 3y ago
I disagree but probably the level of "learn the terminal" is the source of disagreement. Coming from nothing, cd and ls do actually take a second to wrap your head around. I don't think a designer/developer necessarily needs to be able to pipe commands to each other but running yarn and hitting ^C is something every web dev should be able to do, even if it isn't second nature. It's second nature for us but I've been at it since the DOS days,
- exodust 3y ago
  I remember using and hating DOS. I swore never to go back once it disappeared around 1998. Using terminal is going back, so I don't use terminal. No idea what "running yarn" means, and I don't intend finding out. I'm too busying with actual web development! :-)
snide 3y ago
Just about any application in a team is going to require you to run the application locally so you can work on it. That immediately means you need to understand how to navigate your terminal, run commands and install software through package managers. Almost always, doing so is made more difficult if you don't understand what your .bash_profile does. This isn't about learning the full unix suite, it's about knowing enough to get the product you're working on running locally. Speaking from experience, I've known so many designers who were simply ineffective in their feature teams because they had no ability to even see the feature be developed locally. They all required a developer to push up a staging environement, generally later in the product build. Designers who can actually run the software early and give feedback during this time have a leg up on those that can't.
- exodust 3y ago

nerdchum 3y ago

How to learn CSS really well? any good resources you recommend? I found it very easy to get started but very very challenging to get good.

flappyeagle 3y ago
I learned it by getting ton of reps coding blog layouts. These days you can start by learning the heck out of flexbox. Take a design and implement all of the layout using nested divs and flexbox.

postalrat 3y ago

There isn't any correct way to structure CSS. Even if you are the best you will still have people telling you are wrong or they don't want their styling structured how you suggest.

xtiansimon 3y ago

Or even simpler—change your career to programmer, and bring your thoughtful aesthetic sensibilities to the fore where needed and _permitted_ by your developer colleagues.