TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

Ask HN: Best UI design courses for hackers?

332 点作者 atomicnature超过 1 年前
Hello HN,<p>What have been some of the best UI design courses, in your experience?<p>I&#x27;m aware of avant garde works such as Bret Victor&#x27;s &quot;Magic Ink&quot; and love it.<p>At the same time, I&#x27;d also love to learn more about more &quot;down to earth&quot; tutorials&#x2F;examples&#x2F;exercises&#x2F;courses to build practical UI skills. Something above &quot;react tutorials&quot;, but something below Victor&#x27;s &quot;Magic Ink&quot;<p>Big plus point if there is a coherent set of principles&#x2F;system propounded, to make it easy to apply in our specific context.

29 条评论

druskacik超过 1 年前
Refactoring UI is a book you can read in a couple of hours, but it helped me immensely to design my projects. It does not go to a great depth, but it&#x27;s very useful for simple and quick hacking.<p><a href="https:&#x2F;&#x2F;www.refactoringui.com&#x2F;" rel="nofollow noreferrer">https:&#x2F;&#x2F;www.refactoringui.com&#x2F;</a>
评论 #38592464 未加载
评论 #38595575 未加载
评论 #38593471 未加载
评论 #38592629 未加载
评论 #38596551 未加载
评论 #38592989 未加载
评论 #38593315 未加载
评论 #38595975 未加载
评论 #38593619 未加载
评论 #38595047 未加载
评论 #38592912 未加载
评论 #38592399 未加载
评论 #38594089 未加载
zer0tonin超过 1 年前
What helped me go from being completely unable to design a simple form to doing okay looking UI (not great yet) was simply to learn to draw. The best UX designers I&#x27;ve had the occasion to work with came from art school backgrounds, so I think there&#x27;s definitely something to it.<p>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.<p>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&#x27;s really going to make the difference is how you organize them across the page, and the colors you pick.<p>Edit: since I haven&#x27;t really mentioned any courses: proko.com has great drawing courses. For books, check out Andrew Loomis&#x27; Fun with a pencil and Betty Edwards&#x27;s Drawing on the Right Side of the Brain.
hypertexthero超过 1 年前
The following will give you a good understanding of UI design.<p>Number 3, Designing Interfaces, has a coherent set of principles.<p>1. [Don’t Make Me Think](<a href="https:&#x2F;&#x2F;sensible.com&#x2F;dont-make-me-think&#x2F;" rel="nofollow noreferrer">https:&#x2F;&#x2F;sensible.com&#x2F;dont-make-me-think&#x2F;</a>)<p>2. [The Design of Everyday Things](<a href="https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;The_Design_of_Everyday_Things" rel="nofollow noreferrer">https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;The_Design_of_Everyday_Things</a>)<p>3. [Designing Interfaces, 3rd Edition](<a href="https:&#x2F;&#x2F;www.oreilly.com&#x2F;library&#x2F;view&#x2F;designing-interfaces-3rd&#x2F;9781492051954&#x2F;" rel="nofollow noreferrer">https:&#x2F;&#x2F;www.oreilly.com&#x2F;library&#x2F;view&#x2F;designing-interfaces-3r...</a>)<p>4. [Nielsen Norman Group Interaction Design: 3-Day Course](<a href="https:&#x2F;&#x2F;www.nngroup.com&#x2F;courses&#x2F;interaction-design-3-day-course&#x2F;" rel="nofollow noreferrer">https:&#x2F;&#x2F;www.nngroup.com&#x2F;courses&#x2F;interaction-design-3-day-cou...</a>)<p>5. [Apple Human Interface Guidelines](<a href="https:&#x2F;&#x2F;developer.apple.com&#x2F;design&#x2F;human-interface-guidelines" rel="nofollow noreferrer">https:&#x2F;&#x2F;developer.apple.com&#x2F;design&#x2F;human-interface-guideline...</a>)<p>6. [A Dao of Web Design](<a href="https:&#x2F;&#x2F;alistapart.com&#x2F;article&#x2F;dao&#x2F;" rel="nofollow noreferrer">https:&#x2F;&#x2F;alistapart.com&#x2F;article&#x2F;dao&#x2F;</a>)<p>7. [Usability Testing](<a href="https:&#x2F;&#x2F;www.nngroup.com&#x2F;courses&#x2F;usability-testing&#x2F;" rel="nofollow noreferrer">https:&#x2F;&#x2F;www.nngroup.com&#x2F;courses&#x2F;usability-testing&#x2F;</a>)<p>It’s important to practice, not just read. The term is “dogfooding”.<p><a href="https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Learn&#x2F;Getting_started_with_the_web" rel="nofollow noreferrer">https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Learn&#x2F;Getting_start...</a><p>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:<p><a href="https:&#x2F;&#x2F;www.deceptive.design&#x2F;" rel="nofollow noreferrer">https:&#x2F;&#x2F;www.deceptive.design&#x2F;</a><p><a href="https:&#x2F;&#x2F;www.humanetech.com&#x2F;key-issues" rel="nofollow noreferrer">https:&#x2F;&#x2F;www.humanetech.com&#x2F;key-issues</a>
评论 #38592383 未加载
评论 #38594693 未加载
评论 #38592206 未加载
评论 #38592194 未加载
fzeindl超过 1 年前
Apples Human interface guidelines helped me a lot in improving the windows gui application, apps and websites I was developing in my career. After reading them I was definitely able to create much simpler UIs. (Example: use verbs in message-boxes. Not: Delete? Ok&#x2F;Cancel, But instead: Delete XYZ. Delete&#x2F;Keep.) <a href="https:&#x2F;&#x2F;developer.apple.com&#x2F;design&#x2F;human-interface-guidelines" rel="nofollow noreferrer">https:&#x2F;&#x2F;developer.apple.com&#x2F;design&#x2F;human-interface-guideline...</a>
ironskull超过 1 年前
It&#x27;s definitely not cheap, but I would be surprised if Erik Kennedy&#x27;s <a href="https:&#x2F;&#x2F;www.learnui.design" rel="nofollow noreferrer">https:&#x2F;&#x2F;www.learnui.design</a> isn&#x27;t the best course out there. In fact, he has three courses:<p>1. UI design<p>2. UX design<p>3. Landing Page design<p>I own all 3 and they are among the best purchases I&#x27;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.<p>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.<p>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: <a href="https:&#x2F;&#x2F;www.learnui.design&#x2F;blog&#x2F;" rel="nofollow noreferrer">https:&#x2F;&#x2F;www.learnui.design&#x2F;blog&#x2F;</a>.
评论 #38592693 未加载
评论 #38593864 未加载
评论 #38593306 未加载
评论 #38592661 未加载
评论 #38594272 未加载
评论 #38595647 未加载
coldbrewed超过 1 年前
I found Design for Hackers[1] to be an incredibly informative book; it provides a great deal of insight into UI patterns, color schemes and selections, and overall UI design. It&#x27;s definitely more oriented towards graphical UIs but provides enough general insight into design considerations that you could generalize it for TUIs and CLIs if needed.<p>[1]: <a href="https:&#x2F;&#x2F;designforhackers.com&#x2F;" rel="nofollow noreferrer">https:&#x2F;&#x2F;designforhackers.com&#x2F;</a>
brainbag超过 1 年前
I am a longtime developer but I&#x27;m passionate about design and UX. I&#x27;m always on the lookout for materials that I can give my team and other developers to help them get better at design. It&#x27;s not a course, but &quot;The Non-Designer&#x27;s Design Book&quot; (ISBN 978-0133966152, Robin Williams) is the best material for design fundamentals I&#x27;ve found. It&#x27;s very approachable for anyone and it&#x27;s broadly applicable across all kinds of design. Everyone I have convinced to read it has loved it, and I&#x27;ve seen an improvement in output and understanding. I highly recommend this if you have an interest in design.<p>Refactoring UI is also valuable and can be impactful, though it&#x27;s heavily web focused and is more like a Web Component Design Cookbook rather than foundational knowledge.
j3d超过 1 年前
Not sure if this fits your goal of a UI design course, but I found Josh Comeau&#x27;s CSS for JS Devs course to be a great way to learn the fundamentals of CSS in a way that resonated with my developer mindset.<p><a href="https:&#x2F;&#x2F;css-for-js.dev&#x2F;" rel="nofollow noreferrer">https:&#x2F;&#x2F;css-for-js.dev&#x2F;</a>
评论 #38592184 未加载
civilitty超过 1 年前
<i>&gt; At the same time, I&#x27;d also love to learn more about more &quot;down to earth&quot; tutorials&#x2F;examples&#x2F;exercises&#x2F;courses to build practical UI skills. Something above &quot;react tutorials&quot;, but something below Victor&#x27;s &quot;Magic Ink&quot;</i><p>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.<p>[1] <a href="https:&#x2F;&#x2F;every-layout.dev&#x2F;" rel="nofollow noreferrer">https:&#x2F;&#x2F;every-layout.dev&#x2F;</a>
评论 #38594611 未加载
评论 #38595104 未加载
gjsman-1000超过 1 年前
I wouldn’t say it’s a course as much as a book, but I found <i>Refactoring UI</i> to be pretty helpful. It’s done by the folks that brought us Tailwind.<p><a href="https:&#x2F;&#x2F;www.refactoringui.com&#x2F;" rel="nofollow noreferrer">https:&#x2F;&#x2F;www.refactoringui.com&#x2F;</a>
评论 #38591933 未加载
评论 #38592190 未加载
no_wizard超过 1 年前
In addition to the many great recommendations already posted in replies I recommend reading and watching videos about how Steve Jobs approached product design, and watch some infamous Apple keynotes.<p>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.<p>One great website with great tidbits around the creation of the original Macintosh is Folklore[0]<p>[0]: <a href="https:&#x2F;&#x2F;www.folklore.org&#x2F;index.py" rel="nofollow noreferrer">https:&#x2F;&#x2F;www.folklore.org&#x2F;index.py</a>
karaterobot超过 1 年前
As a designer, I think the two best exercises you could do would be:<p>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.<p>But that&#x27;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&#x27;s a very short path to the design. It&#x27;s trivial to say &quot;this designer was bad at their job&quot; if you see a bad product, but it&#x27;s more instructive to understand all the inputs into that bad decision, rather than just judge the output.<p>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 &quot;how to do design good&quot; any more than you&#x27;d trust a corresponding recipe for &quot;how to do programming good&quot;.<p>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&#x27;t give a shit, no course is going to make you a good designer, and if you do give a shit, you won&#x27;t need a course. Along the way, sure, you have to pick up some basic skills, but that&#x27;s trivial, and ought to be second nature for a hacker.
评论 #38597510 未加载
评论 #38595461 未加载
hackermailman超过 1 年前
Daniel Jackson&#x27;s book <a href="https:&#x2F;&#x2F;subconscious.substack.com&#x2F;p&#x2F;concept-design-in-three-easy-steps" rel="nofollow noreferrer">https:&#x2F;&#x2F;subconscious.substack.com&#x2F;p&#x2F;concept-design-in-three-...</a><p>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.
patcon超过 1 年前
I recall the HackDesign website&#x2F;course being great a few years ago! Not sure about now, but used to be free...!<p><a href="https:&#x2F;&#x2F;hackdesign.org&#x2F;" rel="nofollow noreferrer">https:&#x2F;&#x2F;hackdesign.org&#x2F;</a>
WillAdams超过 1 年前
An early text on this was:<p><a href="https:&#x2F;&#x2F;www.goodreads.com&#x2F;book&#x2F;show&#x2F;344729.Designing_Visual_Interfaces" rel="nofollow noreferrer">https:&#x2F;&#x2F;www.goodreads.com&#x2F;book&#x2F;show&#x2F;344729.Designing_Visual_...</a><p>(if it&#x27;s at all possible, get a first edition which has good quality reproductions of the screen grabs)<p>A list of the chapters gives a good idea of the content:<p>- Introduction<p>- Elegance and Simplicity<p>- Scale, Contrast, and Proportion<p>- Organization and Visual Structure<p>- Module and Program --- &quot;The module is a scale of proportions that makes the bad difficult and the good easy&quot; Albert Einstein (to Le Corbusier, 1964)<p>- Image and Representation<p>- So What About Style?
prossercj超过 1 年前
It&#x27;s not a full course, but this set of principles influenced my approach to design:<p><a href="https:&#x2F;&#x2F;anthonyhobday.com&#x2F;sideprojects&#x2F;saferules&#x2F;" rel="nofollow noreferrer">https:&#x2F;&#x2F;anthonyhobday.com&#x2F;sideprojects&#x2F;saferules&#x2F;</a><p>EDIT: To be clear, not the author. Just found this on HN at some point
评论 #38618523 未加载
photon_collider超过 1 年前
I found the book <i>Practical UI</i> (<a href="https:&#x2F;&#x2F;www.practical-ui.com" rel="nofollow noreferrer">https:&#x2F;&#x2F;www.practical-ui.com</a>) useful for learning practical design tips. I still reference it from time to time in my work.
keiferski超过 1 年前
It&#x27;s not a course, but I recommend the book &quot;Universal Principles of Design.&quot; It&#x27;s a set of principles covering various aspects of design, both for UI&#x2F;graphics and 3D physical objects.
ndiddy超过 1 年前
Not a course, but the best resource I&#x27;ve found for UI design is the Windows 2000 interface guidelines book: <a href="https:&#x2F;&#x2F;www.amazon.com&#x2F;Microsoft-Windows-Experience-Professional-Editions&#x2F;dp&#x2F;0735605661" rel="nofollow noreferrer">https:&#x2F;&#x2F;www.amazon.com&#x2F;Microsoft-Windows-Experience-Professi...</a> . It lays out everything (big and small) that made older Windows versions nice to use in an easy to digest format.
catalypso超过 1 年前
Adding two resources to the mix:<p>1. <a href="https:&#x2F;&#x2F;growth.design" rel="nofollow noreferrer">https:&#x2F;&#x2F;growth.design</a>: case studies + cognitive biases &amp; principles that affect your UX<p>2. <a href="https:&#x2F;&#x2F;lawsofux.com&#x2F;" rel="nofollow noreferrer">https:&#x2F;&#x2F;lawsofux.com&#x2F;</a>: a collection of best practices that designers can consider when building user interfaces.
panic超过 1 年前
There’s no coherent set of principles or system for UI design. It’s all about what will work or not work for real people. Paying attention to your own feelings about what works or not is the first step—listening to your users and understanding their feelings will take you the rest of the way.
abhinavsharma超过 1 年前
I&#x27;d like to add <a href="https:&#x2F;&#x2F;growth.design&#x2F;psychology" rel="nofollow noreferrer">https:&#x2F;&#x2F;growth.design&#x2F;psychology</a> to an already great list that&#x27;s building here.
esafak超过 1 年前
Can anyone recommend any online communities to have designs critiqued?
ilrwbwrkhv超过 1 年前
None. The thing is for UX you have something like don&#x27;t make me think but UI is a matter of taste so everyone has their own rules which might not appeal to you. You can check out the windows 95 design docs as that might give you some ideas and then I would suggest using an uncommon UI component library and let that do the heavy lifting till you can hire a designer.
ChicagoDave超过 1 年前
I’d add an additional request. Are there any materials specifically about touch interfaces?
评论 #38664584 未加载
robertlagrant超过 1 年前
I think the best practical approach for designing UIs is to download (and buy) Balsamic[0] and use that to design UIs. Cut through the nonsense of colours and pixels in the first instance and just lay things out logically and simply.<p>[0] <a href="https:&#x2F;&#x2F;balsamiq.com" rel="nofollow noreferrer">https:&#x2F;&#x2F;balsamiq.com</a>
评论 #38595381 未加载
waprin超过 1 年前
I am a long-time developer who&#x27;s always dreamed of building an indie software business but design skills hold me back.<p>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 &quot;mediocre&quot; instead of &quot;terrible&quot;.<p>Refactoring UI and Erik Kennedys blog &#x2F; class are mentioned and are great resources and I own both.<p>I did Dribbble&#x27;s Figma UI design class which was $600. It&#x27;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&#x27;s is self-paced and while it&#x27;s extremely high quality, I haven&#x27;t even worked through most of it for this reason.<p>Of course, the single most important thing you can do is build lots of UIs. If you&#x27;re like me, your UIs will suck, but if you do it more regularly, you will also notice more UI&#x2F;UX techniques on other websites. I save all those in a Notion database organized by category and refer to them.<p>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&#x27;s not mutually exclusive. So you can design an app, and it will probably look bad. Then hire an experienced UI&#x2F;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&#x27;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.<p>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&#x27;t love design but it&#x27;s how you get the best results.<p>If you just have a one-off project and don&#x27;t truly care about improving at design, the simplest option is to hire a contractor. UI&#x2F;UX is not something you learn in a weekend and then you&#x27;re good to go, it&#x27;s more like learning a language or an instrument in that you&#x27;re either going to invest a lot of time to learn it well or you&#x27;re going to suck. It&#x27;s pretty affordable to hire-out because it&#x27;s mostly up-front work.<p>Hiring contractors and spending for classes is the expensive route but spending money can expedite the process. But, there&#x27;s lots of free resources if you&#x27;re broke. The single most important thing is design a lot, and pay attention to other people&#x27;s designs and what they&#x27;re doing.
评论 #38597526 未加载
b2bsaas00超过 1 年前
Refactoring UI
adriangrigore超过 1 年前
Best rule I believe is just iterate until satisfied.