Ask HN: What are some good resources for a programmer to learn UI/UX design? | Hacker News Reader

Ask HN: What are some good resources for a programmer to learn UI/UX design?

101 pointspramodbiligiri34 comments

I am a backend developer and would like to learn about UI design for modern web applications. I'm thinking of aspects like color schemes, font sizes, where to place the elements, spacing between elements, interaction and feedback etc.

Are there well known books, courses or video series that teach web application UI design in a systematic way?

View on HN

Nielsen Norman Group[0] and their YouTube[1] are a goldmine

"Learn UI Design"[2] provide some really high quality methodical videos[3] and content

[0] https://www.nngroup.com/

[1] https://www.youtube.com/channel/UC2oCugzU6W8-h95W7eBTUEg

[2] https://learnui.design/

[3] https://www.youtube.com/channel/UCakPr8lc7Zcowd8Cp2Uy_Eg

I second NN Group. It is by far the best resource for UX/UI, unfortunately, no one follows it and virtually all UX/UI today is filled with issues left and right.

+1 to Nielsen Norman. Whenever I'm doing any design work, I always look for their recommendations first. They have the best UX guidance that I've been able to find. Most other resources I've found focus more on styling (fonts, spacing, colors, etc.)

I really like "the design of everyday things" by Donald Norman. It's more focused on design in general, than what you're asking for, but I think the fundamentals of design is a prerequisite to become a good UX/UI designers

It teaches several ways to prototype design, how to evaluate whether your design is efficient, and how to develop a design oriented mindset

It not only helped me make better designs, but also made me a better coder, because I started thinking about my code as a product to be used by others

I wholeheartedly recommend this book too!

It does make you see the world differently though, especially doors (for a while).

I legitimately hated the book for bringing badly designed doors to my attention. Ignorance truly is bliss :)

I was going to make the same suggestion. This book is one of those that seem like the insights presented are mostly trivial and obvious, but then you notice that it has completely reshaped your perception of a class of problems.

Plus, it's popular enough that there is a good chance you can find it at a library. (In fact, the first time I read it, I got an older edition from a library. I since bought a newer edition to re-read.)

I'll fourth or fifth this book. This book is way more important than the color scheme or how many pixels something should be. This is more of a high level approach

Check out The Non-Designers Design Book by Robin Williams.

It focuses on four fundamental concepts of graphic design that apply to everything visual, including UIs. Its four concepts form a language for thinking about the aspects of visual design like color schemes, font sizes, spacing, etc.

It has lots of examples and mini design exercises. And you can read it in just a few hours.

Refactoring UI is the book that comes to mind, it was made by two developers.

The Refactoring UI guys have a lot of decent material, though they do tend to concentrate on a certain aesthetic that won’t necessarily produce the most effective UI in all cases. OP is specifically interested in modern web applications, so it seems like a good fit.

I will second refactoring UI. It is how I learned design.

I can also highly recommend the UI library written by one of the authors, Tailwind UI. I got my first job writing a dashboard for a nonprofit about a year ago and I was sick of fiddling with CSS. $150 later I was flying through writing usable interfaces, plus they loved how it looked.

Second this - we use Tailwind UI components and it’s money well spent. Presupposes that you want to use Tailwind CSS, of course, but if that’s you, the paid UI components are a no brainer. They recently released React / Vue versions as well.

I'm hoping we'll get elixir liveview versions. They're used a lot in that community.

I learned it OTJ at HP. There was a "UID" or User Interface Design group there we worked with. They were the group that invented green/purple keyboard/mouse mapping and similar mapping with colored traces mapping to colored controls and colored cables for oscilloscopes back in the 1990s.

There are references that were involved in that but none individually nor as ensemble is a "systematic" source. So they wouldn't really fit your requirement. These range from Card & Moran to vendor design guidelines to general industrial design concepts.

You will learn the most by "doing" and solving real problems. Honestly half the issue is looking at customer use-cases and testing with customers which is the ultimate source. Doing it in a vacuum or from arbitrary recipes generally doesn't work. Customer. Customer. Customer.

My current company has a number of beta customers who are willing to try things due to long-term friendship combined with a modest discount on the first copies they buy. They are our guinea pigs and our inspiration for both problems and opportunities both for UI/UX but also intimately tied to product features.

This site looks useful: https://uxtools.co/challenges/ . There are articles as well as challenges. I'm not sure it is systematic, but it looks like it covers a number of useful things to know.

https://jgthms.com/web-design-in-4-minutes/

That's nice but it's also only 5 minutes of content.

https://www.ics.uci.edu/~kobsa/courses/ICS104/course-notes/M...

We need to go back

Dont make me think is fantastic for removing the mystery around usability design. The ideas here are timeless.

https://sensible.com/dont-make-me-think/

I also liked "Don't Make Me Think". The version I read was a bit older in terms of UI elements, but the principles are, as you said, timeless.

The breakdowns of what users are thinking are very helpful.

Another great thing to do in the same vein is to actually watch users interact with your software. I have done that multiple times and it is just so helpful to see what people are thinking and to build empathy.

Don't Make Me Think

(and no doubt other stuff by the same guy)

https://en.m.wikipedia.org/wiki/Don%27t_Make_Me_Think

Design is learned by designing.

The systematic starting point is black and white, courier, and HTML.

They get you about 90% of this very webpage.

With a lot of iteration of course. Iteration is design's only methodology. Unsuccessful is it's predominate conclusion. Partially successful is as good as it gets. Running out of time is how a design is finished.

Surely read all you can about color theory, typography, and composition. All you can about web app organization. But accept that none of that is designing. None of it strictly necessary. None of it sufficient.

There's no such thing as a design in your head. Good luck.

Best way for me has been to just look at websites with good designs and take mental notes. It doesn’t take long to develop an intuition or spot common patterns.

I second this. I try to replicate the UI/UX of the applications that I like (as a user of such apps). Obviously, it doesn't mean copying mindlessly, but using similar patterns/flows where it makes sense in my applications. Even though it's not a resource like a book, in a way, I'm learning from good real-world examples.

"Information Dashboard Design" by Stephen Few was the book that got me rolling. A good mixture of what and why.

On top of books and site suggested, look at Interaction Design Foundation[1] courses, specifically those around talking to/interviewing/getting feedback from users.

[1] https://www.interaction-design.org/

Some excellent MIT resources:

[1] User Interface Design & Implementation (start by having a look at the readings; includes exercises and projects; have a look at the dozens of detailed examples of the latter to see the process that is taught here [9]).

[2] Software Studio (this one sets UI/UX design, at the end, with excellent videos [3,4], in the context of app design, not in isolation, as an extension to conceptual design [5,6], without which it is claimed that you can't get it right, and for which you need abstract data design [7,8]; very good assignments and project)

[1] http://web.mit.edu/6.813/www/sp18/

[2] https://stellar.mit.edu/S/course/6/fa18/6.170/materials.html

[3] https://drive.google.com/file/d/1qblmdoZIJQ4rYGgCPLNusEn2yWi...

[4] https://drive.google.com/file/d/1Cvco6r8a6oV3Sy89RKdIfrZCrGi...

[5] https://drive.google.com/file/d/1lzAbrqk9LNLhGMLbsTuVgAm6p9_...

[6] https://drive.google.com/file/d/1AZ85ui0k2QpCKgfJZXUPSk-jdSi...

[7] https://drive.google.com/file/d/1axvYX7kSWAmxDU451hyCcG-wt88...

[8] https://drive.google.com/file/d/1ET9UkOCE-l0c-FR_2w0TFudCAn8...

[9] https://docs.google.com/document/u/0/d/1KIIOS3W9vF4RT0PdX6cH...

https://shiftnudge.com/ is very good, but unfortunately doesn’t open for enrollment for a few more months

Maybe https://hackdesign.org/

Nielsen Norman Group has alot of great short form content. Their newsletter sends a couple out each Monday.

Edward Tufte was an inspiration for me.

MacOS style guide.

Reply on news.ycombinator.com