Ask HN: Best self-starter resources to learn web design?
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!
47 comments
Refactoring UI's videos and book are great:
https://www.youtube.com/c/SteveSchoger/videos
https://www.refactoringui.com/book
https://www.youtube.com/c/SteveSchoger/videos
https://www.refactoringui.com/book
Second this! Refactoring UI has very practical and effective advice for creating web UI's.
Apart from this, I recommend "Learning Web Design" (5th Edition) by Jennifer Robbins. It has a broad sweep and still gives you all the practical tips.
Learning React (2nd Edition) is a good one if you're going to use React.
P.S: I did a similar Ask thread earlier this year where some of these were mentioned - https://news.ycombinator.com/item?id=26932020
Apart from this, I recommend "Learning Web Design" (5th Edition) by Jennifer Robbins. It has a broad sweep and still gives you all the practical tips.
Learning React (2nd Edition) is a good one if you're going to use React.
P.S: I did a similar Ask thread earlier this year where some of these were mentioned - https://news.ycombinator.com/item?id=26932020
Second Robbins’ “Learning Web Design.”
Also, if you’re really a true beginner, also try “HTML and CSS: Visual QuickStart Guide” by Joe Cassabona.
VQS is great because as you’re trying to learn an aspect of code, it includes a text explanation, what the code looks like and what you should expect to see on screen.
Good luck! Have fun! :)
Edit: “Hello Web Design” by Tracy Osborne is good for learning graphic design principles as they relate to the web. If you can get a copy of “The Non-Designers Web Book” by Robin Williams, that one’s excellent, too. It’s old, but the principles still apply.
Also, if you’re really a true beginner, also try “HTML and CSS: Visual QuickStart Guide” by Joe Cassabona.
VQS is great because as you’re trying to learn an aspect of code, it includes a text explanation, what the code looks like and what you should expect to see on screen.
Good luck! Have fun! :)
Edit: “Hello Web Design” by Tracy Osborne is good for learning graphic design principles as they relate to the web. If you can get a copy of “The Non-Designers Web Book” by Robin Williams, that one’s excellent, too. It’s old, but the principles still apply.
I cannot recommend Refactoring UI enough. It’s designed for engineers and is a pragmatic mix of first principles and easy tricks.
I think it’s great if you want to be able to bridge the gap between design projects. It’s not going to turn your product into a killer design but it’ll help you make a nice and usable dashboard or add buttons to a surface in your app.
I think it’s great if you want to be able to bridge the gap between design projects. It’s not going to turn your product into a killer design but it’ll help you make a nice and usable dashboard or add buttons to a surface in your app.
The linked video is a great example of 'show, don't tell'.
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.
[0] https://storybook.js.org
[1] https://storybook.js.org/tutorials
[0] https://storybook.js.org
[1] https://storybook.js.org/tutorials
There's also "Don't make me think"
https://en.m.wikipedia.org/wiki/Don't_Make_Me_Think
For blogs Smashing Magazine is consistently solid.
https://en.m.wikipedia.org/wiki/Don't_Make_Me_Think
For blogs Smashing Magazine is consistently solid.
I second this one. Don't make me think deeply influenced me!
Smashing Magazine is also definitely an awesome resource. CSS Tricks is also an excellent one
Smashing Magazine is also definitely an awesome resource. CSS Tricks is also an excellent one
Storybook is AWESOME to build reusable components and more importantly to showcase all of their possible variants. It makes it a breeze to ensure that UI elements are consistent and to build an overview of a design system.
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.
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.
https://www.freecodecamp.org/learn/responsive-web-design/
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.
https://www.freecodecamp.org/learn/responsive-web-design/
I’ve found http://ui-patterns.com/patterns 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: https://every-layout.dev Explains the whys and the hows.
- Inclusive Components: https://inclusive-components.design (one of the co-authors of Every Layout). Explains the whys and the hows of building proper components
Additionaly:
- BBC Gel: https://bbc.github.io/gel/ (one of the co-authors of Every Layout) also explains a lot of the whys in design of specific components
- Gov.uk is also great: https://design-system.service.gov.uk/get-started/
- Inclusive Components: https://inclusive-components.design (one of the co-authors of Every Layout). Explains the whys and the hows of building proper components
Additionaly:
- BBC Gel: https://bbc.github.io/gel/ (one of the co-authors of Every Layout) also explains a lot of the whys in design of specific components
- Gov.uk is also great: https://design-system.service.gov.uk/get-started/
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...
https://www.youtube.com/kepowob
https://www.youtube.com/kepowob
I do web design for a while now and I watch his channel because it is just cool how he explain things.
Train like you fight, they say in the military.
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.
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.
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.
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.
We used to say: train hard, fight easy.
Good one. Or what about: Slow is smooth and smooth is fast.
this book: the non-designer's design book by robin williams.
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 :)
everything you see and like about good design have to do with these 4 terms. the web is no different.
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 :)
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:
https://designcode.io/ui-design
Gives some good insights into Figma and Colors and designing
Gives some good insights into Figma and Colors and designing
It’s hard to argue with that person’s design skills. That website is beautiful, functional and performant
Hack Design is a design course as well as a curated list of resources and tools: https://hackdesign.org/
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.
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
https://www.udemy.com/course/the-web-developer-bootcamp/
And I am sure you find some more geared towards UI/UX.
I particularly enjoyed www.every-layout.dev
Assuming You want to do this as a job, start where the majority of potential customers are.
https://codex.wordpress.org/Theme_Development
There are tons of tutorials out there, intuition correlates with experience in most cases.
https://codex.wordpress.org/Theme_Development
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.
>Just follow beginner video tutorials,
Bad advice, I'm a beginner myself and it's bad. Because people make a lot of mistakes, watching video isn't going to cut it.
Bad advice, I'm a beginner myself and it's bad. Because people make a lot of mistakes, watching video isn't going to cut it.
No mention of this? https://motherfuckingwebsite.com/
> 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.
> 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.
> 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.
> 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.
This is so, so unhelpful.
I think it can be phrased more nicely (without satire), but the general message seems to be useful to novice web designers: to avoid overcomplicating things, to pay attention to accessibility, avoid breaking it too badly. Especially since many books/websites/guides will describe fashionable techniques without paying attention to that.
I'd also suggest reading Principles of Design [0] and other Design Issues [1] by TimBL, WCAG [2].
[0] https://www.w3.org/DesignIssues/Principles.html
[1] https://www.w3.org/DesignIssues/Overview.html
[2] https://www.w3.org/TR/WCAG20/
I'd also suggest reading Principles of Design [0] and other Design Issues [1] by TimBL, WCAG [2].
[0] https://www.w3.org/DesignIssues/Principles.html
[1] https://www.w3.org/DesignIssues/Overview.html
[2] https://www.w3.org/TR/WCAG20/
What’s wrong with it? I like KISS.
Is this better?
www.evenbettermotherfucking.website
Is this better?
www.evenbettermotherfucking.website
For the sake of the trilogy: https://thebestmotherfucking.website/
This helped me: https://www.theodinproject.com
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.
w3schools is famously a dumpster fire, and frankly I think codecadamy is overrated. I'm not a designer, I can't give a good constructive answer to the question, but I know the answer is never w3schools.
I've seen posts on HN that described some questionable choices and some issues with w3schools, can't say they were wrong..
but I have learned, and re-learned many things with w3schools and used it many times to solve a quick 'how do I do X' with css or whatever.. mainly because they were in top search results for a while - but every thing I used them for worked - and they have interactive examples you can fiddle with, without having to work with a server or whatever, so I think it's fair to say there may be some issues of concern - but dumpster fire I think is an exaggeration - frankly the UI of the site is easier for me and I assume many others, even if MDN is more accurate or more thorough, it's not so easy on the eyes imho.
Also - codeadamy I found great - great because you can actually write some code while learning - now if you are the kind of person who wants to watch a 3 hour video to learn, then it's not for you.. but I've done long videos, short videos, long books, picture books, interactive, and all sorts.. frankly for me, codeacademy was great for is interactivity,and actual doing stuff while learning.
some of udemy and coursera courses I've enjoyed ask you to write code while learning with the videos - and if you do that- great - but it's not a lot of fun with small laptop screen.. as to where codeacademy and similar are setup for show and write at same time with a better use of screen imho.
Someone needs a click to zoom in one code for video and make it more codeacademy like - at least for my favorite learning style... but I'm okay with books too - so I guess it's each to their own.
but I have learned, and re-learned many things with w3schools and used it many times to solve a quick 'how do I do X' with css or whatever.. mainly because they were in top search results for a while - but every thing I used them for worked - and they have interactive examples you can fiddle with, without having to work with a server or whatever, so I think it's fair to say there may be some issues of concern - but dumpster fire I think is an exaggeration - frankly the UI of the site is easier for me and I assume many others, even if MDN is more accurate or more thorough, it's not so easy on the eyes imho.
Also - codeadamy I found great - great because you can actually write some code while learning - now if you are the kind of person who wants to watch a 3 hour video to learn, then it's not for you.. but I've done long videos, short videos, long books, picture books, interactive, and all sorts.. frankly for me, codeacademy was great for is interactivity,and actual doing stuff while learning.
some of udemy and coursera courses I've enjoyed ask you to write code while learning with the videos - and if you do that- great - but it's not a lot of fun with small laptop screen.. as to where codeacademy and similar are setup for show and write at same time with a better use of screen imho.
Someone needs a click to zoom in one code for video and make it more codeacademy like - at least for my favorite learning style... but I'm okay with books too - so I guess it's each to their own.
I think I've read their JS array methods reference page about 100 times in the past before it became ingrained.
https://www.w3schools.com/jsref/jsref_obj_array.asp
https://www.w3schools.com/jsref/jsref_obj_array.asp
> w3schools is famously a dumpster fire,
Common sentiment in, oh 2013 or so.
Even w3fools.com has conceded that the big problems have long been fixed and it's okay now: "Today, W3Schools has largely resolved these issues and addressed the majority of the undersigned developers' concerns. For many beginners, W3Schools has structured tutorials and playgrounds that offer a decent learning experience."
Common sentiment in, oh 2013 or so.
Even w3fools.com has conceded that the big problems have long been fixed and it's okay now: "Today, W3Schools has largely resolved these issues and addressed the majority of the undersigned developers' concerns. For many beginners, W3Schools has structured tutorials and playgrounds that offer a decent learning experience."
by the way, i was looking at HNs html and everything seems to be made out of tables. tables absolutely everywhere. can anyone tell me why that is?
I think it’s the old school way. I took a “Basic Web Design” class in high school so I could master the art of MySpace page customization and we were taught to use html tables for most layout/positioning that’s now down with CSS. Tables are so much easier to work with than flexbox and the result is pretty consistent across browsers and window sizes without having to fuss as much. Maybe I’m just cranky and old but flexbox is the worst.
Flexbox is pretty good when you use it for what it's designed for IMO. Maybe you'd find grid more useful for those use cases you dislike using flexbox.
Anything by Adam Wathan is a great way to start.