Anyone resources for the opposite, how to become a "coder who designs"?
Edit: I don't mean generic "learn design" resources for people who don't know design but specifically resources meant for programmers to pick up design. Like the book "Math for Programmers" but for design. Although thanks for all the links, surely there is something good there too.
Personally I'm already at a comfortable level when it comes to both coding and designing, so I'm not looking for anything in particular. But to gather a list of resources that I can share with mentees who mentioned they're interested in getting better at the design-side of things.
Those are all great, and other links are as well, so thank you everyone.
Someone else mentioned paying attention to the design elements all around - this exercise of copying designs by hand is an excellent way to start to notice those little details.
Start by opening up your design eye and paying attention to the how and why of everything you see. The design of everyday things is a good book to start opening your design eye.
The material design spec is a good resource for learning some basic design rubric.
Learn the tools that are used to design. Adobe XD is my personal choice. Build tooling inside of XD to work faster, like your own custom sticker sheet. Maybe even get practice at it by designing a design spec by hand. Material design, tailwinds, and bootstrap are all options to start from.
Leave Tailwind well alone unless you enjoy individually styling every anchort tag inline over and over again. Tailwind is an abomination that has spread like cancer throughout the front-end dev space.
One helpful resource is https://www.refactoringui.com/ and related materials/blogs - but evaluate it against your inspirations to understand when the “rules” should be broken, or aren’t even rules that apply to the aesthetic you’re going for! Particularly if that aesthetic is advised by, say, luxury fashion. But it helps to understand the space of what is possible!
It is crucial to realize that designing an app that is meant to be used by professionals is different from designing an app meant to be used by everyone.
Apps that are meant to be used by everyone need to try and lowest-common-denominator the design. It means reduced information density, less distractions, and always guiding them by the hand to do what they want to do.
Apps for professionals are meant to be used frequently, build familiarity, and provide powerful tools for those people. In those cases some friction in the design can be tolerated if the result is a powerful tool, and information density can be high because it speeds up their workflow.
As someone who uses fullscreen magnification, all the excessive negative space that is trendy in a lot of contemporary UX design (e.g., in Microsoft Teams) is difficult to deal with. The more space there is between everything, the harder it is to tell 'where I am' when I'm zoomed in. Higher information density is easier to navigate spatially when your visual window of context is smaller, whether that's because you're using full screen magnification or because you're physically moving closer to your monitor and concentrating.
Similarly, the more screen space is wasted on negative space in windows whose main function is to present something to me (PDF viewer, shared screen or PowerPoint window during a video call), the more I have to rely on external magnification software instead of in-app zooming or scaling, which makes everything blurry (pixelated) and ugly.
For me, a lot of it was just developing a "gut feel" for UI/UX, which enables me to play with different designs and achieve something decent through iterative tweaking (just keep poking it until it feels right).
In my experience, this mostly entails internalizing sets of rules surrounding usage of whitespace, alignment, control grouping, functionality disclosure, and legibility among other things. For me this was older versions of the OS X Human Interface Guidelines[0] (newer versions are ok but not as high quality, with fewer details and compromises in clarity in favor of aesthetics).
I think Figma's tutorials are a great way to start. There's something valuable about learning design as you learn how to use a design tool at the same time.
Lol, coding was the most difficult thing for me to learn. I didn’t learn design but did take a 1 month class (40 hours per week with a teacher + 20 hours of self-study). It was by far an easier month than my first programming course.
Edit: I don't mean generic "learn design" resources for people who don't know design but specifically resources meant for programmers to pick up design. Like the book "Math for Programmers" but for design. Although thanks for all the links, surely there is something good there too.