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.
Visual design or interaction design?
Try these:
https://www.interaction-design.org/courses/ui-design-pattern...
https://www.manning.com/books/usability-matters
https://pragprog.com/titles/lmuse2/designed-for-use-second-e...
https://designcode.io/ui-design-for-developers
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.
I absolutely LOVE Tailwind and wish I'd discovered it earlier.
2. Go to https://dribbble.com/ and look for inspiration
3. Read https://css-tricks.com/ and try to reproduce some of these things
4. Get into computer graphics in general. Mess around with https://www.shadertoy.com/results?query=&sort=popular&filter...
5. Go on a wikipedia dive from https://en.wikipedia.org/wiki/Human_factors_and_ergonomics and https://en.wikipedia.org/wiki/The_Design_of_Everyday_Things
6. Go to ai.com and ask things like "how to learn figma as a coder" and drill down to specifics
This depends on who you are designing it for.
The B2B user base I worked with for example hated material design back then.
Information density is important.
So give users a choice to change this.
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.
> This depends on who you are designing it for.
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.
I'm yet to meet a non-designer who actually likes material design.
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).
[0]: https://web.archive.org/web/20110604173215/http://developer....
To be a coder who designs you have to learn about design which is no small feat.
But to learn to code .... well all that is ... is just learning syntax and telling the machine to carry out instructions. At minimum.
Coding can't be that hard if people like me can do it.
Everyone is good at learning different things
How quickly do you become the thing when doing it?
How would you know? We have these scenarios:
1. a coder first who learned how to design second
2. a designer first who learned how to code second
These paths are mutually exclusive, you can't experience both. How then can you judge one as being easier than the other?
Non Designer's Design Book - for higher level guidelines on design
Refactoring UI - for tactical suggestions on UIs
Some other books: Bootstrapping Design and Design for Hackers