My current designing skills are non-existent: I live in the terminal and plain text emails make me happiest. I would like to broaden my skill set and learn web design/UX design.<p>There are plenty of resources to learn code: FreeCodeCamp, exercism, and tons of others.<p>What's something similar for learning to design web applications, websites, and UX/UI?
There's lots of courses out there similar to FreeCodeCamp, etc. but I think you'll find, like I did, that design is a different beast. It's not something that is codified into rules that are easy to reason about. It's fluid, it's a <i>feeling</i> more than a rule to follow. And what's more? It changes all the time. What was considered "trendy design" in 2005 is now old and antiquated (although, the same could be said of the JS ecosystem, so maybe it's not all that different after all)<p>That said, there are some "rules of thumb" that can be learned and applied to your existing projects.<p>Some of my favorite resources for learning design as an engineer:<p><a href="https://refactoringui.com/" rel="nofollow">https://refactoringui.com/</a> - The book is slated for release soon but I've followed the authors on Twitter for a while now and Steve in particular has some great advice for "designing" as an engineer [1].<p><a href="https://dribbble.com/" rel="nofollow">https://dribbble.com/</a> - One thing I've found as an engineer is that most people <i>recognize</i> good design when they see it even if they can't create it. I've spent a lot of time picking out good designs from good designers and replicating them on my own. As I do so I try to reason about <i>why</i> they made that design choice versus something else. Over time I find myself thinking things like, "OK, so you gave the card a larger border radius because you wanted it to feel softer." It's just something you pick up with practice and deliberate effort.<p>[1] <a href="https://twitter.com/i/moments/880688233641848832" rel="nofollow">https://twitter.com/i/moments/880688233641848832</a>
Like learning to code, visual design, web design, user interface design, and user experience design are broad topics. No one book or resource can teach you all there is, but one resource can help you make a lot of progress.<p>People on HN have recommended Design for Hackers <a href="https://designforhackers.com/" rel="nofollow">https://designforhackers.com/</a><p>Learn about the design process <a href="https://www.slideshare.net/Klonowsa/design-process-overview-4517950" rel="nofollow">https://www.slideshare.net/Klonowsa/design-process-overview-...</a><p>Some resources on prototyping <a href="https://www.productmanual.co/categories/prototyping" rel="nofollow">https://www.productmanual.co/categories/prototyping</a><p>Some resources on interaction design <a href="https://www.productmanual.co/categories/interaction-design" rel="nofollow">https://www.productmanual.co/categories/interaction-design</a><p>This book is popular for people wanting to learn a little more about design. It's on my list of things to read. <a href="https://en.wikipedia.org/wiki/The_Design_of_Everyday_Things" rel="nofollow">https://en.wikipedia.org/wiki/The_Design_of_Everyday_Things</a><p>An application of design that is useful for projects and companies is the Google Ventures sprint is useful <a href="http://www.gv.com/sprint/" rel="nofollow">http://www.gv.com/sprint/</a>
learning some fundamentals always help.
I've done this course and found it great for my base layer on UI/UX design: <a href="https://www.udemy.com/design-rules/" rel="nofollow">https://www.udemy.com/design-rules/</a><p>some good resources overall:<p>DESIGN INSPO RESOURCES:<p>- <a href="https://www.calltoidea.com" rel="nofollow">https://www.calltoidea.com</a><p>- <a href="https://www.dribbble.com" rel="nofollow">https://www.dribbble.com</a><p>- <a href="https://www.uimovement.com" rel="nofollow">https://www.uimovement.com</a><p>- <a href="https://www.goodui.org" rel="nofollow">https://www.goodui.org</a><p>- <a href="https://www.awwwards.com" rel="nofollow">https://www.awwwards.com</a><p>TOOLS:<p>Colorzilla - to get the colors of the website you like<p><a href="https://www.coolors.co" rel="nofollow">https://www.coolors.co</a> - check which colors go well together<p><a href="https://www.thenounproject.com" rel="nofollow">https://www.thenounproject.com</a> - for icons, black and white<p><a href="https://www.iconstore.co" rel="nofollow">https://www.iconstore.co</a> - free icons set<p>fontfaceninja chrome addon - to find the font on the website you like<p><a href="https://www.uigradietns.com" rel="nofollow">https://www.uigradietns.com</a> - generates the gradients
You already got some comments that cover UI. I'd give you a different perspective on the UX.<p>One thing is UI - "drawing" apps and web sites, a completely different area is the UX. You should have been dealing with UX while doing software development - writing frameworks, creating classes, etc, or during day to day life - dealing with invalid door push/pull handles, hard to use phone apps, etc.<p>Just start paying more attentions to details and areas that are not as efficient as they can be.
In case you would be interested to explore UX/UI best practices specifically for web applications, I have one resource.<p>Last weeks I've been researching patterns successful players in SaaS industry use to improve their user experience. And ship profitable products. I've listed these patterns and released as a collection here: <a href="http://minimumviabledesigns.com" rel="nofollow">http://minimumviabledesigns.com</a><p>Might be helpful to you as an inspiration.
Going over Apple's work on this is probably worthwhile:<p><a href="https://developer.apple.com/design/human-interface-guidelines/macos/overview/themes/" rel="nofollow">https://developer.apple.com/design/human-interface-guideline...</a>
If you're willing to put in the effort for some serious study, then try these 2 books. They worked very well for me.<p>a. About Face 3 by Alan Cooper<p>b. Contextual Design by Karen Holtzblatt<p>These two will set you up.