TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Ask HN: Recommendations for learning and improving UX/UI skills?

147 pointsby pgamblingalmost 13 years ago
I'm a developer and writing code comes naturally to me. However, I feel that user interface design is a weak area for me and I want to improve. All my UI development is web based, HTML, CSS, and JS. Can you recommend any books or other resources that helped you improve you UI skills?

31 comments

ncalmost 13 years ago
I'm a developer too, for the last year I've been working on my UI &#38; UX skills - and I've somehow managed to get paid to built out product features for the web (UI, UX + code) professionally.<p>Here's what I figured out (YMMV):<p>---<p>For UI design<p>Books aren't that helpful, you have learn by doing.<p>Instead, for theory Treehouse offers a primer on HTML, CSS &#38; UI design which provided a great foundation, they have courses on things like colour theory. Really really helpful.<p>Practice. I designed &#38; launched a bunch of complete web apps, each one with a landing page + full functionality. Each attempt had a visible improvement in UI &#38; UX over the last. I got tons of great feedback and encouragement (you're gonna need it) from forrst. So I'd highly encourage posting there and asking for feedback (tell people you're learning).<p>Learn Photoshop.<p>Check out Sacha Greif's ebook on UI design <a href="http://sachagreif.com/ebook/" rel="nofollow">http://sachagreif.com/ebook/</a> it comes with a PSD and has a great intro into UI stuff.<p>Check out Lighting &#38; Realism In Interface Design by Mike Rundle (developer + designer) here <a href="http://designthencode.com" rel="nofollow">http://designthencode.com</a><p>Get a bunch of freebies from dribbble and deconstruct and remix them to your taste.<p>-----<p>For UX<p>Watch this <a href="https://peepcode.com/products/ryan-singer-ux" rel="nofollow">https://peepcode.com/products/ryan-singer-ux</a> then watch it again. Ryan Singer is an absolute UX god - he understands how to navigate the problem space very very well.<p>To really improve UX measure how people use what you make (mixpanel, click tracking) &#38; conduct user studies - watch people use an interface to really understand what works UX wise.
评论 #4319210 未加载
评论 #4320681 未加载
PaulHoulealmost 13 years ago
As you can in other fields, you can learn a lot by studying what the leaders do, understanding it, and imitating it.<p>You've got to get away from people who say "We can't do it the way Google or Amazon does it because they're big and they can afford it." You've got to think instead "Google and Amazon are big because they did things right."<p>You've still got to think about (small) scale though.<p>Back around 2000 I was interested in user management and authentication and back then the main challenge across the industry was conversion rate, and it was very good to imitate what Yahoo did.<p>A few years later, Yahoo's signup and login process had become quite complicated because they had a notoriously foolish user base that was vulnerable to fraud and phishing. If you imitated them you'd quadruple your development costs, kill your conversion rate, and get your email box flooded from people who forgot their passwords.<p>(Funny, Yahoo started to go downhill around they time they did this!)<p>So look at the leaders and think about what they do critically. Don't listen to voices that say "we can't afford it" -- you can't afford to have employees that are lazy like that or for that matter, to be working for a project manager who won't do what it takes for your projects to succeed.
harrybralmost 13 years ago
I'm going to go out on a limb here and say that books, articles and conferences are totally insufficient to become a good (UI/UX/User centred/etc) designer.<p>Here's an analogy with physical fitness. If you want to reach "competition level" fitness you don't just watch youtube videos and read books. You have to practice. And if you practice alone, you'll never hit competition level. You need formal TRAINING. You need an experienced professional giving you advice, critiquing your performance and stretching your abilities. You need them to help you track your own performance, to become acutely aware of your weaknesses and focus on them relentlessly.<p>A lot of organisations don't get this. A few books, a conference and a spot of mentoring doesn't turn a team of front end developers into UX designers.
评论 #4317649 未加载
评论 #4318901 未加载
bgnm2000almost 13 years ago
As a professional UX guy, here are my two cents:<p>Do it : repeat.<p>If the best chance for practice you have, is on personal projects - so be it.<p>Find sites for inspiration. Design is ALWAYS changing. Things you're just getting sick of now (chunky buttons, ribbons, page tears etc.) other designers first saw a long time ago - those thing slowly saturate the design community before they're everywhere.<p>Browse Dribbble.com every day.<p>When you have to design a site, use sites likes patterntap.com, and uiparade.com to see great examples of slick UIs.<p>Most importantly, "eat your own dogfood." Use the products you've made, non-stop. Just keep testing and testing. If things feel weird, or unnatural, iterate, and eat more dogfood.<p>Design should never be something someone gets "right" the first time - its an iterative process of learning user behavior based on what does or does not perform well.
joelhooksalmost 13 years ago
I think it is important to distinguish UX from UI design. UI Design is a facet of UX, but actual user experience design delves deeper and is multi-faceted.<p>This diagram[1] shows the facets of UX exceptionally well. In the same vein, this article[2] defines UX accurately.<p>[1] <a href="http://uxdesign.com/assets/Elements-of-User-Experience.pdf" rel="nofollow">http://uxdesign.com/assets/Elements-of-User-Experience.pdf</a><p>[2] <a href="http://uxdesign.com/ux-defined" rel="nofollow">http://uxdesign.com/ux-defined</a>
tagawaalmost 13 years ago
Surely the first place to start is Jakob Nielsen's <a href="http://www.useit.com" rel="nofollow">http://www.useit.com</a><p>Ignore the ugliness and you'll find practical advice in the reports and Alertbox articles although his opinions are sometimes controversial and shouldn't necessarily be followed to the letter. Nevertheless they'll undoubtedly increase your awareness of the variety of user types out there and encourage you to think from their perspective, which is ultimately what good UI design is all about.
评论 #4318460 未加载
FreshCodealmost 13 years ago
Read Don't Make Me Think by Steve Krug. <a href="http://www.amazon.com/Think-Common-Sense-Approach-Usability/dp/0789723107" rel="nofollow">http://www.amazon.com/Think-Common-Sense-Approach-Usability/...</a><p>Read everything on Jakob Nielsen's blog about Usability: <a href="http://useit.com/" rel="nofollow">http://useit.com/</a>
评论 #4318252 未加载
spionalmost 13 years ago
Its not that interface design is a weak area for developers. The thing is, we tend to spend very little time thinking about user interface (we like to jump directly to books instead which will do the thinking for us).<p>I've found you can achieve quite a massive improvement by simply spending a decent amount of time thinking about / working on / testing your UI.<p>Draw sketches, think about usage patterns, explain how things would work on paper, ask random people to try out your designs after you're finished implementing them, get feedback, identify actual usage patterns and optimize for them. Repeat.<p>If possible, become a user of the product. It helps a lot.<p>The second most important thing is to copy other people's good interface designs. Or less harshly put, use existing patterns, especially those widely accepted by users. Check out popular websites and applications, see how they solve your current UI subproblem, copy their solution, perhaps improve upon it. Read about UI patterns and when to use them.<p>note: We're trained to think that copying is bad, originality is good. In UI, the reverse is true - by copying you save time on user training as users are already familiar with the design. There is nothing shameful about copying other people's good UI design (and I don't mean the visual aspect of it)<p>Of course, this is not really a substitute for proper training - but quite often its a really good first step which we seem to miss .
kadabra9almost 13 years ago
There are a ton of good blogs, articles and collections out there, this quora post covers some good ones:<p><a href="http://www.quora.com/What-are-the-most-influential-UX-design-blogs" rel="nofollow">http://www.quora.com/What-are-the-most-influential-UX-design...</a><p>Also, create a bookmarks folder (or even just a regular folder on your Desktop) just for collecting UX/UI designs that jump out or appeal to you. Either bookmark them, or take a screenshot, and use good, descriptive tags (e.g "Search Results", "Dashboard", etc). Then block out a small amount of time each week(I usually spend like a half hour or so over Sunday morning coffee) to review them; ask yourself why you like the designs/patterns, what appeals to you, why its effective, how could it be more effective etc. You'll start to recognize patterns and develop a sharper eye for effective UX/UI design throughout the web.<p>Finally, accept and embrace the idea that good UX/UI design is very much an iterative process, it's OK (and actually pretty common) to not get it perfect the first time around.
zethusalmost 13 years ago
Here's my UX bookmarks dump for reads/blogs to get started:<p><a href="http://52weeksofux.com/tagged/week_1" rel="nofollow">http://52weeksofux.com/tagged/week_1</a> <a href="http://www.uxbooth.com/blog/" rel="nofollow">http://www.uxbooth.com/blog/</a> <a href="http://uxdesign.smashingmagazine.com/" rel="nofollow">http://uxdesign.smashingmagazine.com/</a> <a href="http://www.alistapart.com/articles/" rel="nofollow">http://www.alistapart.com/articles/</a><p>As far as UI goes, spend a lot of time on design sites such as dribbble and try to identify patterns and discover the purpose of them on your own. UI design becomes more engrained when you discover trends (and their purposes) rather than simply reading about them imo.
mtrnalmost 13 years ago
Take a look at <a href="http://ux.stackexchange.com/" rel="nofollow">http://ux.stackexchange.com/</a> - a place to ask/answer/discuss UX questions.
评论 #4318177 未加载
ternalmost 13 years ago
An alternative approach:<p>– Start by reading "Magic Ink" by Bret Victor: <a href="http://worrydream.com/#!/MagicInk" rel="nofollow">http://worrydream.com/#!/MagicInk</a><p>– Now you understand that UI design is actually graphic design, so start with graphic design fundamentals. They are: Drawing, Layout, Typography, Color, History.<p>– Drawing: understand how images are created on a canvas. Includes concepts of how to use line, shade, and color to create forms, volumes, depth, etc. Art historians talk about "color and line" in painting. Understand the distinction. Pick up a used copy of Janson's History of Art. Peruse some other books about drawing. Go to the museum. Whatever you come across. Have fun with it.<p>– Layout: I haven't found a great resource for this. You can have a look at Grid Systems by Josef Müller-Brockman, which set the tone for layout in the 20th century. Making and Breaking the Grid is a modern spin on grid-based layout. Read about book design since that's the oldest and most developed layout system. You can start with Wikipedia: <a href="http://en.wikipedia.org/wiki/Book_design" rel="nofollow">http://en.wikipedia.org/wiki/Book_design</a>. Generally pay attention to how websites are arranged. Is there a top-bar or a side-bar? How many sections of content are there? What is their relative proportion? How does the layout relate to the borders of the browser window? Take some time to investigate 'responsive design'. Understand what it means to design from the content out rather than from the edges in. Understand the fact that book design has a rich set of systems of proportion while web designers completely ignore this for the most part. Look up 'golden ratio typography'.<p>– Typography: there are a number of well-regarded classics on typography. The Elements of Typographic Style is great. But you should start with this: <a href="http://webtypography.net/" rel="nofollow">http://webtypography.net/</a>. Then check out the Wikipedia entry and Google around for blog posts about typography. Once you understand the basics, then attempt an in-depth text. The most important thing to understand is that typography can be used to create structure. People who do not understand this use lines, planes, and volumes to create structure around content. A good place to learn about this is in Edward Tufte's The Visual Display of Quantitative Information (as well as its sequels). He vigorously recommends removing as much "non-data ink" as possible. Beyond structure, there is the issue of choosing typefaces. Let me just get this one out of the way: serif faces are not significantly easier to read than sans-serif faces. Beyond that, understand that typefaces are created by designers for different uses. Use typefaces according to what they're designed for. Understand how typefaces are used to create a stylistic feel, to evoke associations, nostalgia, emotion. Understand that some typefaces are expressive and some are not. The web so far has favored non-expressive typefaces. Now that we have @font-face and Google Fonts, people are going crazy using different type-faces will-nilly. Web design will evolve. Watch the documentary "Helvetica".<p>– Color: there are many resources on color, but the study of color is an endeavor that can last a lifetime. There are a few things to understand about color: what it is (light frequency / a sensation), how it is modelled (Newton vs. Goethe, HSL/RGB, color spaces, Pantone), how it is created, how colors are combined, the fundamental nature of each hue, and psychological meaning of color combinations. Start with the Wikipedia entry. For more scientific information, check out the IESNA handbook. Understand the difference between Newton's and Goethe's studies of color and how current theories descend from those. After them came Maxwell, Helmholtz, and others. Munsell's text is responsible for much of the exploration of color in early modernist painting (impressionism, etc.): <a href="http://www.gutenberg.org/files/26054/26054-h/26054-h.htm" rel="nofollow">http://www.gutenberg.org/files/26054/26054-h/26054-h.htm</a>. Study color combining by way of texts from the early 20th century by Albers, Itten, etc. But, as others have mentioned, the only way to truly understand color is to use it. Try different combinations, see what they do. Ask questions like: why are most websites blue? Why aren't websites ever yellow? Beyond cultural associations, each color has a fundamentally different nature and use. It's not just a spectrum. Why is red so special? Notice that blue and yellow are, in Goethe's theory, the fundamental colors from which all colors are created. Does this have something to do with their neutrality? The sun is yellow, the sky is blue, the ocean is blue... what does it all mean? Why are the road signs green?<p>– History: web design didn't just come out of nowhere, though most web designers are uneducated and the tools have been very primitive up until the last few years, so it kind of seems that way. Find a copy of Meggs' History of Design. Understand what it is, where it comes from, how book design is the father of graphic design. Then, something crucial to understand: that web design is constrained by the concepts of the past, which were developed in a world with different constraints. Do you know how graphics were created before computers?<p>Unfortunately there is no good book that gives an overview of all of this material. You need to piece it together. Here's a screenshot of my library of design books: <a href="http://img823.imageshack.us/img823/7795/screenshot20120731at120.png" rel="nofollow">http://img823.imageshack.us/img823/7795/screenshot20120731at...</a>. Plus you should have a library of design inspiration. I have mine spread out between LittleSnapper and ZooTool right now. Evernote is another good way if you can stand all the visual noise in their interface. Other people use Pinterest, etc.<p>What you should take away from this is that UI design is actually part of graphic design, which is a relatively old discipline (though still young compared to, say, architecture).<p>On the other hand it can be said that UI/UX rather encompasses graphic design since UX brings in the notion of user-centered design from HCI, which has its own history in psychology and the US military industrial complex. Two great historical reads here are MIL STD 1472F: <a href="http://www.hf.faa.gov/docs/508/docs/milstd14.pdf" rel="nofollow">http://www.hf.faa.gov/docs/508/docs/milstd14.pdf</a> and The Ecological Approach to Visual Perception by J.J. Gibson (from whence the concept of "affordance" comes). The classic synthesis of these ideas can be found in The Design of Everyday Things by Donald Norman. Bill Buxton is another person to follow in this space. A modern synthesis of UX is About Face 3: The Essentials of Interaction Design.<p>EDIT: fixed links
评论 #4318582 未加载
评论 #4318734 未加载
deafbybeheadingalmost 13 years ago
To me, a turning point in my feelings on UX was reading Alan Cooper's "The Inmates are Running the Asylum" [1]. It's a little anti-engineer (he argues that engineers cannot do this right and you always need dedicated UX people), but he explains core interaction design principles very well.<p>E.g., he draws a distinction between mere UI design and interaction design: UI design is just layering another abstraction (the interface in question) on the underlying software architecture, whereas interaction design starts with what the user wants to accomplish, and adapts the underlying pieces to enable that.<p>Note that this is not a UI book, or even really all that much of a UX book, but it does make a great argument for the importance of user interaction.<p>[1]: <a href="http://dl.acm.org/citation.cfm?id=553473" rel="nofollow">http://dl.acm.org/citation.cfm?id=553473</a>
chr15almost 13 years ago
I started a weekly newsletter that provides design-related articles and tips: <a href="http://seriffed.com" rel="nofollow">http://seriffed.com</a><p>Like you, I wanted to improve my design skills, so I coded this up over several weekends.
评论 #4317308 未加载
jacobroufaalmost 13 years ago
I've been finding that just simply mocking up the sites/apps I'm building or even just pieces of their functionality has helped me refine what I feel is implementation of good user experience. The marker comes down to "Would I use that?", and more often than not, as fast as I can get a page up it's no match for a mockup that comes to fruition even quicker. Check out Balsamiq (<a href="http://www.balsamiq.com/" rel="nofollow">http://www.balsamiq.com/</a>) for the app that I choose to use. I also lurk ux.stackexchange.com, as mtrn suggested it's a great resource.
maerekalmost 13 years ago
I've been fortunate enough to attend talks given by both Luke Wroblewski (LUKEW, <a href="http://www.lukew.com/" rel="nofollow">http://www.lukew.com/</a>) and Joshua Clarke (Global Moxie, <a href="http://globalmoxie.com" rel="nofollow">http://globalmoxie.com</a>). Both have written excellent books on design principles and UX/UI implementation (Luke on web form design, Joshua on app interfaces and design).<p>If you're interested in web standards and design, <a href="http://www.alistapart.com/" rel="nofollow">http://www.alistapart.com/</a> is also a great site to follow.
ejpastorinoalmost 13 years ago
Try to understand design, and analyze sites and designs you like.<p>I highly recommend reading David Kadavy's "Design For Hackers": <a href="http://designforhackers.com/" rel="nofollow">http://designforhackers.com/</a>
评论 #4327401 未加载
madoubletalmost 13 years ago
A lot of resources mentioned here are great and a really good starting point. If you decide that you want to get serious about UI/UX, I would highly recommend looking into a graduate or certification program. I have heard good things about Human Factors (humanfactors.com) and a number of universities offer HCI certificates. I am currently working toward one at Missouri S&#38;T.
dochtmanalmost 13 years ago
A Coursera course on Human-Computer Interaction?<p><a href="https://www.coursera.org/course/hci" rel="nofollow">https://www.coursera.org/course/hci</a>
评论 #4374709 未加载
iamailujalmost 13 years ago
Coursera.org is a good resource. I really enjoyed the Human Computer Interaction Course: <a href="https://www.coursera.org/course/hci" rel="nofollow">https://www.coursera.org/course/hci</a><p>There were lectures and assignments built around design heuristics, different aspects of prototyping and you have to design your own application as part of the course grade.
rwhitmanalmost 13 years ago
My favorite book on UX has been "Designing the Obvious" by Robert Hoekman, Jr. <a href="http://www.amazon.com/Designing-Obvious-Approach-Application-Edition/dp/0321749855/" rel="nofollow">http://www.amazon.com/Designing-Obvious-Approach-Application...</a><p>Might be a little dated but it was really influential a few years back
didgeoridooalmost 13 years ago
Getting involved in your local UX community can be a good way to find mentors and experts who can help you grow. Be a sponge, and try to understand how these people look at the world.<p>Looks like you're in Houston, so: <a href="http://www.uxhappyhour.com/hou" rel="nofollow">http://www.uxhappyhour.com/hou</a>
pathemanalmost 13 years ago
Check out <a href="http://dribbble.com/" rel="nofollow">http://dribbble.com/</a> for inspiration on graphic design.<p>Widely adopted UI Patterns for solving UX Problems: <a href="http://ui-patterns.com/patterns" rel="nofollow">http://ui-patterns.com/patterns</a><p>search on slideshare for UX / Usability presentations for Devs
lgilchristalmost 13 years ago
More design pattern inspiration: <a href="http://littlebigdetails.com/" rel="nofollow">http://littlebigdetails.com/</a> <a href="http://mobile-patterns.com/" rel="nofollow">http://mobile-patterns.com/</a><p>Also, Smashing Mag has occasional great articles on design patterns and ux.
jeremytalmost 13 years ago
Here's some stuff to get you started. Wrote this a little while ago:<p><a href="http://www.jeremytunnell.com/posts/books-on-user-experience-and-user-interface-design" rel="nofollow">http://www.jeremytunnell.com/posts/books-on-user-experience-...</a>
mvaalmost 13 years ago
<i>shameless self promotion</i> - On our company blog you can find lots of articles which can improve your UX/UI skills:<p><a href="http://blog.usabilla.com/category/design/" rel="nofollow">http://blog.usabilla.com/category/design/</a>
AlphaDexalmost 13 years ago
Give this site a try: <a href="http://www.siteownernews.com/website-usability/" rel="nofollow">http://www.siteownernews.com/website-usability/</a>
pgamblingalmost 13 years ago
Wow HN readers, you're awesome! I didn't expect such a wealth of information when I posted this an hour ago. Keep it coming!
petervandijckalmost 13 years ago
Best of all: observe users use products. (ie. do usability testing.)
BaconJuicealmost 13 years ago
I use sites like patterntap for transpiration.
uxabhishekalmost 13 years ago
Focussing on being a better UI designer is not the way to start.<p>Be a better problem solver first (more so a UX Designer). You should not just start working on being a better UI designer without knowing what context your work will exist in. Specialize in UI later.<p>A quick overview on how to be a better UX designer - Figure out and write down in minimum words the goals and reasons for undertaking the exercise<p>- Figure out the main types of users you are designing for (don't try to design for everyone). Find out what relevant mental model they already have.<p>- Break down the problem via concept maps (involve others to brainstorm).<p>- Sketch several solution hypothesis using flow diagrams (boxes containing major concepts connected to each other) (involve others to brainstorm).<p>- Compare these flow diagrams and identify the best hypothesis to develop and test first. (Failure is okay)<p>- Now do UI design for each aspect of the selected flow diagram (as you will know how each page/area in the flow diagram works with the entire picture, you'll know what to show the user when.)<p>- Do not try to complicate your test by adding features/distractions that are not extremely crucial.<p>- Put in some love and care. Ideas that spawned from your brain have the possibility of giving so many others so much joy.<p>(Hint* For a lot of products it is about making MOST users get engaged for the LONGEST period. For many others it is about solving a user problem in the Simplest+Quickest+Most-Painless+Most-Joyful way possible.)<p>A bit more on how to be a better UI designer<p>- Go back to the basics and learn how humans sense, how the brain perceives, and what makes us get ideas, form opinions and take action. This is a big part of what UX and UI design is about (this is useful to understand and remember too - <a href="http://en.wikipedia.org/wiki/Gestalt_psychology#Properties" rel="nofollow">http://en.wikipedia.org/wiki/Gestalt_psychology#Properties</a>)<p>- It is also about having a two way conversation between an interface and a human. Follow protocols of a decent and efficient conversation. Empathize. Introduce if you haven't met before. Maintain a flow. Be focussed on the goal. Don't distract and value their time. Be terse. Don't disrespect.<p>- Know that content is always more important than the user interface. Strive for harmony between what you have to say with how you are saying it with the best UI for that purpose). Use the help of a copy editor or a technical writer. Ensure they don't write more than is needed.<p>- Learn about the medium and context you are designing for (e.g. how users use computers, web etc)<p>- Learn about the existing UI patterns that you can leverage<p>- Browse a lot. Note down what you like, store it as a pattern in your head. Note what irritates you and think about how it could be done better for more users.<p>- Practice. A Lot.<p>- Get hold of a good designer and sit next to them. See them work. See how they make their life faster and easier while designing. Optimize your workspace continuously. Look out for new tools that can help your workflow.<p>- Generating consensus around the flow and UI solution is your job. Get the stakeholders to see the way you think.<p>-Don't use Colors initially, they derail conversations quickly as humans are prone to judging colors instinctively. Use grayscale and rough way of doing stuff first. Finalize (visual design) after that.<p>- Ensure that the colors did not change the flow of user's attention on a page.<p>-Figure out if the flow of user's attention on a page is the way you intend<p>- Grab five people, give then some basic context and do RITE (<a href="http://en.wikipedia.org/wiki/RITE_Method" rel="nofollow">http://en.wikipedia.org/wiki/RITE_Method</a> ). Don't listen to all feedback. Designers usually give feedback based on heuristics. Try to get more designers to give you feedback.<p>- Use web based tools as often as you can. It is easy to share your work and get feedback quickly. There are tools for getting feedback online. But have a meeting at least once initially to explain the context and thinking behind your design decisions.