Ask HN: Best UI design courses for hackers?
Hello HN,
What have been some of the best UI design courses, in your experience?
I'm aware of avant garde works such as Bret Victor's "Magic Ink" and love it.
At the same time, I'd also love to learn more about more "down to earth" tutorials/examples/exercises/courses to build practical UI skills. Something above "react tutorials", but something below Victor's "Magic Ink"
Big plus point if there is a coherent set of principles/system propounded, to make it easy to apply in our specific context.
116 comments
[ 2.6 ms ] story [ 44.9 ms ] threadhttps://www.refactoringui.com/
https://css-for-js.dev/
Number 3, Designing Interfaces, has a coherent set of principles.
1. [Don’t Make Me Think](https://sensible.com/dont-make-me-think/)
2. [The Design of Everyday Things](https://en.wikipedia.org/wiki/The_Design_of_Everyday_Things)
3. [Designing Interfaces, 3rd Edition](https://www.oreilly.com/library/view/designing-interfaces-3r...)
4. [Nielsen Norman Group Interaction Design: 3-Day Course](https://www.nngroup.com/courses/interaction-design-3-day-cou...)
5. [Apple Human Interface Guidelines](https://developer.apple.com/design/human-interface-guideline...)
6. [A Dao of Web Design](https://alistapart.com/article/dao/)
7. [Usability Testing](https://www.nngroup.com/courses/usability-testing/)
It’s important to practice, not just read. The term is “dogfooding”.
https://developer.mozilla.org/en-US/docs/Learn/Getting_start...
Finally, probably first of all, it’s worth thinking about whether your user interface is harmful to the people using it, and changing if so:
https://www.deceptive.design/
https://www.humanetech.com/key-issues
(3) is new to me. Will give it a read for sure.
I couldn’t get through Godel, Escher Bach, but can recommend I Am A Strange Loop by the same author! https://en.wikipedia.org/wiki/I_Am_a_Strange_Loop
More seriously, I have read the design of everyday things about 10 years ago and it was one of the most boring books I have ever had to go through. I only remember doorknobs and something about affordances. Read refactoringUI as well, some vague shiny UI tips of which can't remember any but 'have decent spacing'. I still can't design even a simple form. I am starting to suspect that if one wants to be good at web design one needs to start doing lots of web design until one gets better. Reading books may come later to place that practical knowledge in some coherent mental framework.
I found that the concepts he covers in that book can even be applied for good software API design.
Also, he did spoil doors for me. Pretty much every building I go into now annoys me because of the stupid door handles they pick.
And then if you're interested you can dig deeper into colors, layouts, types...
A lot of it is common sense, but only in hindsight.
This is true, but it's true for anything. Reading a programming book won't teach you to program unless it presents problems you can build on actively throughout the reading. You need applied reps, otherwise you'll at most get some vague inspiration or enjoy/hate it.
This is why I don't read practical books anymore unless I'm prepared to practice what I'm supposed to be learning about during the course of my reading. This is also true for videos.
I found it to be one of the most useful books in my development as an application programmer.
It teaches you how to see UI
I really enjoyed the book and think it's great entry to a design mindset. This is a mindset for how to make products that work well and people like or would actually use. Is that what we expect of a designer or a product manager? Important, but just a bit downstream of that is how it works and where the buttons/interactions are and whether people think its attractive. Most designers (we can confine this to tech [1]) consider themselves product designers rather than UI (or even UX) and often have that title and the bullet points in the job description to reflect it. That is, they want and are hired to understand users and design _products_. And then later, design _interfaces_—but only later because ofc the interfaces should derive from those things.
You can argue, for various reasons [2], a majority of today's tech designers would not be good at making product decisions (which includes the processes of understanding users or designing products); to which I would mildly agree, but find more pertinent to then immediately question why recruit and hire someone with that offer. You could hire directly a UI or visual designer.
In practice, because of power dynamics, most designers design UIs and some UX. There is indeed time spent on the product work that the designers feel they should be doing as part of a "real" process, but doesn't ever land in the product. That work is done genuinely, but frequently amounts to design theater—both internally to their own teams/companies (which "storytells" the work) and externally when they present their portfolio to others [3]. Most product (design) decisions are not made by designers because they're either not present for or can't win any of the upstream arguments. So even at the UI level, where there is more control, the design is based on "received" constraints.
Anyways, I think your comment is a real good provocation for what do we mean by designer or what should a designer be.
[1] I think this applies to plenty of folks called a designer pre-tech, say, industrial designers or architects.
[2] There are many, but one is simply that designers who are capable at this, find that design is not the place to impact them. They should perhaps become a PM (which is full of its own pitfalls) or found their own company. Or more commonly become a disinterested designer. I'm not sure either role, PM or design, is able to really do this well in the way most tech companies are organized, but the PM is in many cases the designer's real informal manager. And the informality is the problem. They have more power, but not any hard responsibility for/to the designer. And so you get a junior and/or apathetic pool of designers.
[3] Most portfolios, if you're not familiar, present designs as designed (what was made in the design tool) not as implemented (screenshots or the actual live app) for a reason. And further, most
That said, more practical and recent resources include https://www.interaction-design.org/master-classes and https://designcode.io/ for different topics. I’m sure there are others, but these are just off the top of my head.
Never heard of this one. Added to to-read list!
1. UI design
2. UX design
3. Landing Page design
I own all 3 and they are among the best purchases I've ever made, even at the cost. Erik is a former programmer who has taken the engineers mindset and systematically analyzed and broken down the various parts of UI design. It is very practical, which was something that was lacking in most resources I found when I was in your position.
If anyone is interested, I would recommend starting with the UI course, which probably runs around $1000. Unfortunately It is only available at certain intervals, probably every 6-8 weeks.
If the cost is intimidating, you can get a lot out of his blog, which will also give you a taste of how he thinks about design: https://www.learnui.design/blog/.
There's a fair amount of overlap between all of them, so if you want to Pareto minmax it, I would recommend starting with Refactoring UI, which should help provide practical solutions to many situations and get rid of the most egregious horrors you might commit.
Of course, UI design goes much deeper than anything those courses can teach, but they're a great start.
Only commenting about it as that site is a course about designing interfaces: to me the font on that site borderline is ridiculous, with the flat lines on the t/f/g, narrow L, an ampersand that looks like an 'e' with a long tail. Makes it hard to read
Legibility sometimes needs to be traded off for impact or other variable that matters more depending on the purpose.
He could have used Inter, like every other landing page on the internet these days, but then it wouldn't stand out.
These are the kinds of things that have more to do with graphic design and that incorporate other considerations than typical UI stuff.
There are big weird gaps everywhere, some of them have mouseovers which change my mouse cursor into something intended to be amusing but have no link.
The "This will/won't work if..." items seem to be links but clicking them just jumps me back to the top of the page.
The weird animation under "Pro", no idea what that's supposed to be telling me.
Company logos at the top. Used with permission, I wonder? They have mouseovers but don't seem to be links.
"5-star rating"? Really? Who from? I need more information for that to be remotely useful, should be a link. Let's say my HN post has a 5-star rating too * * * * *.
As a "beautiful and functional interface" I'm afraid the web page scores a 0/2, for me.
I lost the will to wade through to find out how much the courses are - how much are they roughly?
The approach is definitely unconventional - I would guess the main reason is that selling a high ticket item like this benefits from a longer sales cycle. The other reason he might do this is he has a Slack group where students can post their homework assignments and get feedback. So having a cohort start at the same time might be desirable. As a consumer I would agree with the comments that I would prefer to have them always available for purchase. If you do buy one of them, he makes all of the other courses available at any time.
As I mentioned in my post, the price is probably around $1000 for the UI course; the other courses are typically a few hundred dollars cheaper (they aren't quite as long). The course prices do tend to increase over time, and I think Erik is very averse to offering discounts.
https://www.refactoringui.com/
One way to think about it is in terms of how much you value your time. If you value your time at $25/hr and this book saves you more than 4 hours of time learning UI design, it is worth it.
Another way to think about it is in terms of ROI. As someone in the tech industry I think that having these skills is likely to pay off way more than $99. Not in a legible way -- it's not like anyone will ever say to you "I see you have these UI design skills, here's a $5,000 raise." But I believe that the skills will ultimately shine through and improve your ability to get jobs and make more money.
Also, in practice, if you're in the tech industry, there's probably a good chance that you can get your employer to pay for it.
I think the idea may well be that there are two groups of people in the world. Those who pay for books and those who never pay for books, especially if they can find a free download somewhere.
Students, young tech workers from low wage countries, people who just want to have a look or are horders rather than readers won't pay regardless of price.
So the only question remaining is what effect price has on those who do buy tech books. Will they buy a cheaper book instead?
I don't know the answer to that, but I can say that for me there is a psychological £49.99 threshold that makes me start thinking and looking at other options rather than making an impulse purchase.
This threshold is completely irrational. If you double my salary today, the threshold won't change. It only changes gradually over time.
I claim that I belong to a third group: I do spend a lot of money on books, but have to be somewhat careful with my spending. I can also claim that the knowledge that I get from the mentioned book will in all likelihood not increase my salary, so I am interested in this book solely because I am very interested in this topic. But since I am interested in a lot of topics (and tend to avoid illegal downloading of e-books if possible), I have to concentrate the huge book spendings on those books that are insanely good.
That is certainly true, however many young programmers could benefit from books like this one when they are in the early learning phase, to avoid developing bad habits that can only become harder to forget with age and (bad) experience, especially if they land the first job after creating or contributing to a dozen projects.
>Borders are a great way to distinguish two elements from one another, but using too many of them can make your design feel busy and cluttered.
>Instead, try adding a box shadow, using contrasting background colors, or simply adding more space between elements.
Emphasis mine. The above may be reasonable advice if you're building a low information density app for nonproductive content consumption... Or a touchscreen only app where all interactive elements must be at least a finger tall and wide... But it drives me absolutely batty when extra white space appears in software that I want to use to process/analyze a lot of information and actually get stuff done. And numerous examples on the website just make things... Farther apart and/or bigger.
I still rue the day Spotify fattened up its row height for all lists in the app. It's less readable than it was if I can't read as many song names as before without scrolling.
I don't want to rag on the book overall without reading it, especially given how many in this thread seem to love it and the table of contents does hint at good ideas within, but that seems like a terrible set of examples to lead with. 'More white space' is not universally good design advice. Give me design in the school of TMUX and Bloomberg Terminal any day over extra white space for the sake of 'readability.' As much information as it is possible to present clearly on a given screen.
The entrepreneur, who was watching me interact with the site, asked me what I was doing, and was confused at why I'd go to desktop mode. That, in his mind, was too information dense. But I wanted to see all the information at once without scrolling around, my eyes can scroll fine.
I guess it goes to show it should be a consideration, given its variance.
Remember, good design is not only what the cool kids do or what FAANG might believe it is. Good design is timeless. Good design is a conversation with the product. Sometimes whitespace is good, sometimes it is not. You saying whitespace is a bad idea is as misinformed as a naive designer saying whitespace is king.
That said, I recommend Refactoring UI, but I recommend more anything on Dieter Rams or the book "The Design of Everyday Things" by Donald A. Norman.
So yes its subjective and people probably like it.
In the cases I've seen where whitespace is added, it's purely an aesthetic choice and not a UI design choice.
The rules in the book (and on the website) should not be seen as set-in-stone, they are more principles we can follow depending on the situation. I think the use fewer borders principle is very useful in many scenarios.
Saying that, I agree that today's designs tend to too much whitespace (there was a blog here recently ranting that all product landing pages are basically a navigation bar with a shallow text over a picture background).
You can check this blog if you want to see more principles from the book: https://medium.com/refactoring-ui/7-practical-tips-for-cheat...
For example, I don't know if I agree with the removal of borders. Old reddit looks better for many folks because of the information density even if its an "uglier reddit".
Another example for a good UI but would not meet the "recommendations" of this book is https://www.mcmaster.com/
With that said, I have read about 'flexbox' or sort tech that React has but I have procrastinated forever to revamp the UI using flexbox. I didn't quiet understand flexbox or react layout general and will need to take another jab at it.
On the other hand, will this book benefit me? Sort of mental model to have when mocking up UI for website? I understand the whole idea of wireframe and sketches, but I want think beyond that. For example, I am always impressed by https://www.hims.com/ UI/UX.
Second, how long should it generally take to read through the book? In my mind, it will take months or so to go through it...
- how to design a good UI
- how to implement a given UI design (in your case with react)
In general, I would start with visualizing and sketching the desired end result. Then choose a UI framework, that can make that happen. (and I don't know of a magic bullet UI framework, that just works automatically for different screenresolutions)
I would suggest with keeping it as simple as possible. Less is usually more.
> how to design a good UI
And my issue is exactly your second point - how to implement a given UI design. I came across multiple React UI Framework but haven't been able to fully understand the 'big picture' per say on using them.
Refactoring UI is also valuable and can be impactful, though it's heavily web focused and is more like a Web Component Design Cookbook rather than foundational knowledge.
I use it all the time after reading it for example they redesigned git into gitless using these methods to audit and find redundant or confusing features.
I have no recommendations for UI in general but for practical UI skills I really like Every Layout [1] which covers common page layouts and how to make them responsive beyond just media queries.
[1] https://every-layout.dev/
What I find particularly compelling about that resource is its structure. It's not just a list of recipes (despite what the landing page suggests). They build it all up from a foundation of general principles which provide guidance in visual design far beyond the enumerated examples [0]. Then by showing their work developing each example, they show how to apply the system of design thinking. It's really quite elegant!
https://hackdesign.org/
I'm trying to design a purely tablet touch UX and their offering does not have any that kind of help.
If anyone knows of purely touch oriented design references, I'd love to know about them.
[1]: https://designforhackers.com/
I recognize this and get plenty of feedback around it. So this year I set out to improve to at least try to get to "mediocre" instead of "terrible".
Refactoring UI and Erik Kennedys blog / class are mentioned and are great resources and I own both.
I did Dribbble's Figma UI design class which was $600. It's biggest strength is that its a cohort based class, and cohort classes tend to have much higher finishing rates than self-paced classes. Their instructor will review your Figma designs but only if you finish in time so if you want to get your $600 worth you better open up Figma, so I recommend it for that reason. Kennedy's is self-paced and while it's extremely high quality, I haven't even worked through most of it for this reason.
Of course, the single most important thing you can do is build lots of UIs. If you're like me, your UIs will suck, but if you do it more regularly, you will also notice more UI/UX techniques on other websites. I save all those in a Notion database organized by category and refer to them.
One thing I almost never see mentioned but it was a really good piece of advice. I told someone that I was between hiring contractor designers for my project, and trying to improve at design and do it myself. One person told me, it's not mutually exclusive. So you can design an app, and it will probably look bad. Then hire an experienced UI/UX designer off Upwork to do a better job. And pay attention to the decisions they made and the decsions you made and compare the difference. Figma is a great tool these days because it's much more collaborative than just getting a big stack of PNGs or SVGs at the end, you can discuss design choices in Figma comments as the designer works.
Another thing worth noting - professional designers will make several versions and iterations of everything, each screen and each component on that screen. And then pick the best one. The Dribbble instructor said, the best design is almost never the first one. This is time consuming and tedious if you don't love design but it's how you get the best results.
If you just have a one-off project and don't truly care about improving at design, the simplest option is to hire a contractor. UI/UX is not something you learn in a weekend and then you're good to go, it's more like learning a language or an instrument in that you're either going to invest a lot of time to learn it well or you're going to suck. It's pretty affordable to hire-out because it's mostly up-front work.
Hiring contractors and spending for classes is the expensive route but spending money can expedite the process. But, there's lots of free resources if you're broke. The single most important thing is design a lot, and pay attention to other people's designs and what they're doing.
A part of this is developing a sense of “taste”, which I strongly believe is possible to do but you have to have a certain mindset to do it. This helped me immensely once I realized it.
One great website with great tidbits around the creation of the original Macintosh is Folklore[0]
[0]: https://www.folklore.org/index.py
After grinding drawing for a while, it becomes very easy to simply see what works (and what you like) in other software UI-wise, and re-use that on your own projects.
One recommendation I have is not to try to over-focus on the design of single components (ie. buttons or form inputs). It is fine to reuse a lib for that. What's really going to make the difference is how you organize them across the page, and the colors you pick.
Edit: since I haven't really mentioned any courses: proko.com has great drawing courses. For books, check out Andrew Loomis' Fun with a pencil and Betty Edwards's Drawing on the Right Side of the Brain.
https://www.goodreads.com/book/show/344729.Designing_Visual_...
(if it's at all possible, get a first edition which has good quality reproductions of the screen grabs)
A list of the chapters gives a good idea of the content:
- Introduction
- Elegance and Simplicity
- Scale, Contrast, and Proportion
- Organization and Visual Structure
- Module and Program --- "The module is a scale of proportions that makes the bad difficult and the good easy" Albert Einstein (to Le Corbusier, 1964)
- Image and Representation
- So What About Style?
1. Look at designs that work or do not work, and ask what makes them work or not work. You may have a gut reaction: examine that reaction in cold blood.
But that's basic stuff. After you do that, you should ask what the designer had to trade off in order to arrive at that solution. Design is how you solve a problem given a set of goals, requirements, and constraints. If you understand the problem at that level, it's a very short path to the design. It's trivial to say "this designer was bad at their job" if you see a bad product, but it's more instructive to understand all the inputs into that bad decision, rather than just judge the output.
2. Give a shit. This is what makes someone good at their job—any job. Sweat the details. Do not trust a checklist of steps for "how to do design good" any more than you'd trust a corresponding recipe for "how to do programming good".
The reason I went from front end development to design is that I found I cared more about getting it right than the original designer who handed me the mockups did, and realized I should be sitting upstream of where I was. If you don't give a shit, no course is going to make you a good designer, and if you do give a shit, you won't need a course. Along the way, sure, you have to pick up some basic skills, but that's trivial, and ought to be second nature for a hacker.
This is probably the best advice I heard in a while.
On a slightly different note this is easier said than done specially if you have suspected adhd and live in the UK where you have to wait years before getting proper treatment.
One can always break the principles once advanced enough
[0] https://balsamiq.com