Hacker News Reader

> 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.

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

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-animati...

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.

> It usually means my laptop fan spins up

What laptop do you use?

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!

As a designer who know how to code, I would love to know how to find a job like this.

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.

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!

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.

I find jumping at new codebases highly rewarding, somewhat getting to peel the onion by yourself is the best way to get familiar with it.

You could use AI tools to emulate a co-worker putting you up to speed probably nowadays.

Learn tailwind and read their design book.

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.

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.

> 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.

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,

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! :-)

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.

HTML, CSS and Javascript do not require ANY use of terminal, commands or package managers, or even knowing those things exist.

The designer who wants to code can learn and develop locally all day long without touching terminals or package managers, or any of that boring lifeless crap that will drive them away.

If the designer who wants to code wishes to version control, they could use Github Desktop or other similar non-terminal applications. You can push and pull all day long without touching a terminal. Github Desktop is a nice, lightweight application that works well and is easy and reliabe. I use if often.

An example: The designer who wants to code may decide they want to make an interactive animation. This means they are about to embark on a journey of HTML DOM, CSS, and javascript. It DOES NOT mean they are embarking on a journey of typing a bunch of distracting non-code into a lifeless terminal. Forget about that. Focus on code - HTML, CSS, JS.

> "They all required a developer to push up a staging environement"

Oh no! How dare they!

If the developer hasn't made a staging environment, I'd be asking why not. It's not hard, and is appreciated for sending preview links to internal non-technical colleagues or clients who wish to see progress or specific features. Staging environments are a very good idea, are you suggesting they are not?

I think they are referring to "needing a developer" to push to staging, not that there wasn't a staging environment. That means the designer who codes is still blocked by available developer time, and if the developer is out that they, they what? just don't work for the day?

This not-entirely-hypothetical individual just started learning to code. Getting caught up with package managers isn't great, but are you expecting them to write all of the code they need from scratch? Don't professional developers use other people's work (aka libraries) to make their job easier? Why wouldn't a beginning developer also want access to those same libraries?

What's easier, writing a whole interactive animation library from scratch, or using someone else's library that implements a bunch of stuff for you? If you want to use this library, why not use some sort of software to manage it? Or is the designer-developer not allowed to use Google to find cool libraries to reduce the amount of typing distracting code into a lifeless VScode window they have to do?

> "...expecting them to write all of the code they need from scratch?"

Yes! Coding is not about downloading a library and hoping it prevents you needing to code.

> "writing a whole interactive animation library"

You mean all 20 lines of code needed for an animated widget? Sure... let's download a 500 line animation library and use 5% of its functionality.

Package ideology reminds me of Wordpress plugins. "Just use a plugin" works great until you're drowning in plugins and your server CPU is spiking beyond reason because the plugins don't all play nice together.

As I said, the designer who codes may be welcomed by their engineer colleagues, who provide flexible means for them to contribute and push changes. Perhaps to a certain branch or otherwise streamline the process via Github Desktop or some less intense process, or even just sFTP to a place that can be previewed for later integration once everyone is happy the code is sound.

> You mean all 20 lines of code needed for an animated widget? Sure... let's download a 500 line animation library and use 5% of its functionality.

Oh good, I was worried you actually understood what it's like to be new and not very good at programming, as we all were, when we first started out.

That you're dragging in an unrelated rant about WordPress plugins tells me all I need to understand about where you're coming from.

You didn't like my Wordpress plugin comparison!? I'll write it better. Package clutter, maintenance, integrity, updates, all those things are spinning plates. Similar to Wordpress' needy and naggy plugin ecosystem found there.

New coders/designers should spin less plates at once. Raw CSS animation, then JS loops, timers and manipulations. Add a one line easing function you find somewhere such as this excellent page: spicyyoghurt.com/tools/easing-functions, and this helps fulfil the "who codes" goal more than "who installs."

You're right there are libraries that will be used and useful. But don't be surprised if designer-types are not too fond of some backend-centric workflows and tools popular among programmers, Which is okay. Diversity of tools and approaches is a good thing. Aiming for minimal code sent to client is a good thing. Hope that leaves on a better note.

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.

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.

This guy frucks!

Russ Hanneman