Hacker Remix

Ask HN: How to learn UI/UX as a data/BE engineer?

47 points by thenaturalist 2 days ago | 27 comments

Hi HN,

coming from a data/ BE background I feel extremely familiar with reasoning about systems and performance from the cloud-infra to the pipeline stack level. Or I'm super familiar with data visualization.

I feel like falling off a cliff when trying to extrapolate that knowledge to the more customer-facing world.

Despite having some tool ideas in the past, I realized I shy away from going towards the front end because I really lack any conecptual frame of how to think about and subsequently implement UI or UX.

I don't mean that in a nitty-gritty-designer focussed way but more like first-principle understanding:

What makes a good color scheme?

What makes a great wording and why?

What's a good form of presenting information?

I feel like I can recognize good UI/UX when I see it (as is often the case with HN company LPs), but I'd totally fail at distilling check boxes that such good examples tick.

Any pointers to how I can learn about these worlds and develop an understanding of what principles UI/UX should follow?

vant 1 day ago

I recommend focusing first on UX as it applies to areas that are closest to your expertise. Not a good idea to go head first into art history, color theory, typography or concepts that are so far removed from what you're doing that would feel alien.

Try starting a conversation with a FE engineer friend or even better with a UX engineer / design technologist if you know one. They speak both languages :)

If you prefer reading, NNgroup is great for basics. Start with their 10 usability heuristics: https://www.nngroup.com/articles/ten-usability-heuristics/

These 3 books should give you some great starting points:

About Face - The Essentials of Interaction Design: https://www.wiley.com/en-gb/About+Face%3A+The+Essentials+of+...

Design of Everyday Things: https://en.wikipedia.org/wiki/The_Design_of_Everyday_Things

Creative Selection: https://www.goodreads.com/book/show/37638098-creative-select...

Neff 1 day ago

As others have mentioned, there are differences between UX and UI.

On the UX side, the main goals are to

1. Understand the needs of the user

2. Understand psychological principles of perception and cognition.

3. Present the information in a way to enable the user to accomplish their task with the least cognitive load possible (typically.. there are edge cases where you want to introduce more friction but we will ignore those for now)

Start by getting a good understanding of the core Gestalt principles - https://careerfoundry.com/en/blog/ui-design/what-are-gestalt... - which influence how people perceive things. These principles are a core building block for UX and need to become an instinctive tool you use for arranging information and interfaces to achieve specific goals.

From there I'd suggest reading the following

- Don't Make Me Think by Steve Krug

- The Design of Everyday Things by Don Norman

- Everything by Edward Tufte, which as a data person you might have already read

Getting a foundation of understanding how people process their world will be crucial to growing a UX competency. The color and wording part will come after that foundation is built.

ninjha01 2 days ago

I really like this short book: https://www.refactoringui.com/

solardev 1 day ago

Came here just to look for and upvote this book :)

It's a great, short primer for anyone who needs to do a bit of light UI design as part of their job, but doesn't necessarily want to become a UX/UI specialist.

It's one of the best resources I've come across as a FE dev.

wg0 1 day ago

It is a short and good read.

d--b 1 day ago

The authors created Tailwind after writing it.

elawler24 2 days ago

The best way to get started is to use a trusted design system on the frontend, and follow their components, layouts, and color scheme exactly. Once you know the rules and have something basic implemented, you can break the rules from there. I think most developers go wrong when they try to re-invent the wheel before inherently understanding the rules (by copying experts). Tailwind, Google Material Design, and Apple UI interface are good starting points that are well documented.

8organicbits 1 day ago

I think this is key, pick a good design system and it will cut down on how much you need to learn and tinker with.

Personally I like plain HTML and Django templates, styled using Bulma components. I don't think about color, other than the high level "warning, danger, info" level. I don't think about spacing other than the "m-2 m-3" granularity. I don't mess with react, node, etc.

This approach helped me launch backend oriented websites, without needing to be a FE expert.