Finding it a bit hard to separate the noise from the signal when it comes to learning web design/UI/UX. I'm looking to level up enough to be able to use design tools well + have an intuition for good vs bad design + be able to (hopefully) design well myself. Please assume I'm a complete noob. thanks in advance HN!
Refactoring UI's videos and book are great:<p><a href="https://www.youtube.com/c/SteveSchoger/videos" rel="nofollow">https://www.youtube.com/c/SteveSchoger/videos</a><p><a href="https://www.refactoringui.com/book" rel="nofollow">https://www.refactoringui.com/book</a>
It is not technically a "learning" resource, but Storybook[0] is useful resource for developing web UI. The tutorial[1] section is very helpful. This is a learning-by-doing type of resource.<p>[0] <a href="https://storybook.js.org" rel="nofollow">https://storybook.js.org</a><p>[1] <a href="https://storybook.js.org/tutorials" rel="nofollow">https://storybook.js.org/tutorials</a>
For design intuition I reccomend a book called the design of every day things by Don Norman. It's not about software but the principals apply broadly.<p>For the applied stuff I haven't used their courses but I've heard freecodecamp is good. I frequently reference other articles by them that have had good content.<p><a href="https://www.freecodecamp.org/learn/responsive-web-design/" rel="nofollow">https://www.freecodecamp.org/learn/responsive-web-design/</a>
I’ve found <a href="http://ui-patterns.com/patterns" rel="nofollow">http://ui-patterns.com/patterns</a> to be particularly useful. The patterns both show you how others solve common design problems, and give you the vocabulary to meaningfully talk and find additional information about them.
- Every Layout: <a href="https://every-layout.dev" rel="nofollow">https://every-layout.dev</a> Explains the whys and the hows.<p>- Inclusive Components: <a href="https://inclusive-components.design" rel="nofollow">https://inclusive-components.design</a> (one of the co-authors of Every Layout). Explains the whys and the hows of building proper components<p>Additionaly:<p>- BBC Gel: <a href="https://bbc.github.io/gel/" rel="nofollow">https://bbc.github.io/gel/</a> (one of the co-authors of Every Layout) also explains a lot of the whys in design of specific components<p>- Gov.uk is also great: <a href="https://design-system.service.gov.uk/get-started/" rel="nofollow">https://design-system.service.gov.uk/get-started/</a>
Take a look at Kevin Powells Youtube Channel. Besides the tools and techniques used there, he stuffs a lot of other useful information in nearly every video...<p><a href="https://www.youtube.com/kepowob" rel="nofollow">https://www.youtube.com/kepowob</a>
Train like you fight, they say in the military.<p>Why not come up with a small (personal) project and let reality be your guide? If the work at hand raises a specific question, you can try to answer it immediately by searching online. Everything you'll learn this way is grounded in reality.<p>What's the point of training in something that you aren't going to apply anytime soon? There's no end to collecting and reading information. It's unconstrained.
this book: the non-designer's design book by robin williams.<p>this is on my list of best books about particular topics. this one is about design in general. i still remember the acronym the author came up with after all these years. parc for: proximity, alignment, r..., contrast. okay i lied, i don't remember what r stands for anymore haha :)<p>everything you see and like about good design have to do with these 4 terms. the web is no different.
I am currently watching this:
<a href="https://designcode.io/ui-design" rel="nofollow">https://designcode.io/ui-design</a><p>Gives some good insights into Figma and Colors and designing
Hack Design is a design course as well as a curated list of resources and tools: <a href="https://hackdesign.org/" rel="nofollow">https://hackdesign.org/</a><p>It's not limited to web design (though resources relevant to web design make up a large part of the course) but addresses design fundamentals such as colour theory and typography, too.
I learned a lot from the comprehensive udemy courses, one example
<a href="https://www.udemy.com/course/the-web-developer-bootcamp/" rel="nofollow">https://www.udemy.com/course/the-web-developer-bootcamp/</a>
And I am sure you find some more geared towards UI/UX.
Assuming You want to do this as a job, start where the majority of potential customers are.<p><a href="https://codex.wordpress.org/Theme_Development" rel="nofollow">https://codex.wordpress.org/Theme_Development</a><p>There are tons of tutorials out there, intuition correlates with experience in most cases.
Focus on developing a solid workflow in a single design tool first. Just follow beginner video tutorials, especially playlists. As you develop a workflow, and make lots of mistakes, you will naturally pick up bits and pieces of UI/UX patterns and trends and learn the right questions to ask.
No mention of this? <a href="https://motherfuckingwebsite.com/" rel="nofollow">https://motherfuckingwebsite.com/</a><p>> You probably build websites and think your shit is special. You think your 13 megabyte parallax-ative home page is going to get you some fucking Awwward banner you can glue to the top corner of your site. You think your 40-pound jQuery file and 83 polyfills give IE7 a boner because it finally has box-shadow. Wrong, motherfucker.<p>> I'm not actually saying your shitty site should look like this. What I'm saying is that all the problems we have with websites are ones we create ourselves. Websites aren't broken by default, they are functional, high-performing, and accessible. You break them. You son-of-a-bitch.
Have you tried taking a look at Codecademy and w3schools? These resources would be a great starter learning resource, and at the same time, you can use them as your reference if you decide to start building projects.