13 ms·

Ask HN: What's the best book on modern UI/UX?

542 points by InGodsName 8y ago

For designing websites like Stripe, Airbnb, Slack etc...? What tools do they use? What books they read or have written? Which school teaches modern UI/UX?

tejcirkulate 8y ago
1. Contextual design, holzblat How to understand and structure a user's life and environment and what to look for when they are struggling with a problem or using your product. 2. Lean Customer Development, Cindy Alvarez Practical and immediately useful guide to interviewing and talking to users. Read after the Contextual Inquiry book above. If that book teaches what to understand about a user's workflow and environment, this one teaches how to elicit those answers from customers when talking to them. 3. About Face 3, alan cooper If the previous two are about (a) what to look for when understanding a customer and (b) how to get the info you need to build solutions for those customers, then this book is about translating those learnings into user journeys and experiences.
- jcomis 8y ago
  These are my goto recs, with About Face being first. The first few chapters are incredibly practical.
jasonhong 8y ago
(For background, I'm a faculty at Carnegie Mellon University in the Human-Computer Interaction Institute) For best books, it depends on if you want to understand users or do implementation. But generally, I'd highly recommend Don Norman's The Design of Everyday Things to improve how you look at the world, and Steve Krug's Don't Make Me Think for simple and practical design tips. For tools, the best is paper prototyping, where you have your team just draw it out on paper and simulate the UI. It's simple, fast, and cheap, and from a cognitive perspective, you can explore more of the design space (think breadth-first search instead of depth-first), and you don't get overly attached to your designs. In my course on UX design, we also use Balsamiq and InVision, though other tools seem fine (e.g. Marvel, Figma, etc). One of our alums created this great chart comparing different prototyping tools: https://www.cooper.com/prototyping-tools https://www.cooper.com/prototyping-tools For schools, some to check out would be Georgia Tech, University of Washington's Master's of HCI, Indiana University, University of Michigan iSchool, and (of course) Carnegie Mellon's Master's of HCI. And lastly, here's a slide deck I put together and used at my startup several years ago. It was intended as a short 1-hour crash course. https://www.slideshare.net/jas0nh0ng/01-1hourcrashcourseuxhci https://www.slideshare.net/jas0nh0ng/01-1hourcrashcourseuxhc...
- amelius 8y ago
  Are any of those prototyping tools open source and free?
  - troymc 8y ago
    "the best is paper prototyping"
    - checkyoursudo 8y ago
      This was true when I was doing it in grad school in 2000ish as well. I would not be surprised if it was true long before that and will remain so long after today.
    - arvinsim 8y ago
      I used to think that prototyping on a paper is expensive since paper is non-reusable. Then I proceeded to prototype on an expensive tablet. Funny looking back at it now.
  - alistairSH 8y ago
    Design of Everyday Things & Don't Make Me Think are both likely to be in your employer's library, or on a co-worker's shelf. Not quite free, but I bet you can find a hard-copy to borrow.
    - DDR0 8y ago
      Or in your local public library, which is quite free. :)
  - dmcy22 8y ago
    Adobe XD is a free tool for prototyping, though not Open Source.
    - barbecue_sauce 8y ago
      Is it useful without the rest of their creative suite? I only ask because Premiere, After Effects, and Photoshop are most effective when used together and obviously designed for that kind of synergy.
uxcolumbo 8y ago
I think what you're asking is more about UI Design. You should have a look at these: https://designcode.io/sketch-learn https://designcode.io/sketch-learn (if you're on Windows have a look at their Figma courses) https://hackdesign.org/ https://hackdesign.org/ To learn more about UX, this is a good start https://rosenfeldmedia.com/books/the-user-experience-team-of-one/ https://rosenfeldmedia.com/books/the-user-experience-team-of...
pragmacoders 8y ago
I just started out in UI, too! It's based on watercolor painting but I have to say that Making Color Sing by Jeanne Dobie has dramatically improved the UI of my applications through better use of color!
astockwell 8y ago
A Book Apart [1] has an entire collection of short books on UI/UX topics written by industry pros. [1] https://abookapart.com https://abookapart.com
- dieg0 8y ago
  Up this, I'd start from here
tsunamifury 8y ago
Many of the key designers moving interaction design forward are not publishing books, rather their corporate style guides are a better representation of their philosophy and method. Design has always been short on useful publications because it is a rapidly developing field that publishers often fear it has no shelf life. If you want to learn interaction design it's best done with a bit of dedicated cooperation and experimentation. Use one of the big tech companies style guides to mock up a prototype and test it on your friends. Use blank HTML with images you can make easily in sketch. Then iterate. That is most of interaction design. Most everything else people teach is either too localized or just not proven at scale.
- jbottoms 8y ago
  I second this. The leading edge in HCI is in VR. Imaging the new degrees of freedom from popping menus around in 3-space leads to challenges. What happens to that menu then when your avatar does a cartwheel across the battlefield. Or, how do you deal with an impenetrable, protective capsule around you character when he/she draws their sword. Is it one-way? How do you even show the capsule? How does the character get their bitcoin through the capsule to gift a poor match girl? There are no VR/HCI books, but that would make an interesting topic.
  - deleted 8y ago
    [deleted]
akerro 8y ago
This book is recommended quite often here https://www.goodreads.com/book/show/11457105-design-for-hackers https://www.goodreads.com/book/show/11457105-design-for-hack...
gypsyBelly 8y ago
Take a look at https://refactoringui.com/ https://refactoringui.com/ Very tactical guidelines to follow geared towards devs.
- idoubtit 8y ago
  I've just visited this site, and I was lost after 5 seconds. To my eyes, the design of the front page is awful. Firstly, I read the title and the sub-header sentence. I understood that the site had generic guide on concepts designing web. Okay, I'm interested. Then I scrolled down to the 3 categories. The first one collects some tips. None of them is related to the grand project announced in the title, they seem much more restricted. Looking inside the categories, I don't even understand their organization. What is specific about "Articles"? The first content inside "Articles" is named "7 practical tips…", so shouldn't it be under the "Design tips" category? So I went back to the top of the page, thinking I had missed the more generic links. Hmm, of course, those blue words in the header sentence must be links… No they are not. Now I don't even want to read the content.
  - ru999gol 8y ago
    That seems really unfair, I think they do have some really valuable advice especially for programmers. https://twitter.com/i/moments/994601867987619840 https://twitter.com/i/moments/994601867987619840 Their book also just came out and looks great, albeit grossly overpriced.
tiago_simoes 8y ago
Don’t Make Me Think http://sensible.com/dmmt.html http://sensible.com/dmmt.html
tracker1 8y ago
It's far less abstract, but I really appreciate the Material Design documentation[1] that Google published. And while there may be some dissenting opinions, it's generally a good idea and read. Personally, I'm mostly using the `material-ui`[2] package for React use, but you'll find other material based libraries for any number of frameworks and platforms. In general, I've been sticking to the overall guidelines with a few tweaks, and the responses in general for the application I'm currently working on have been incredibly positive. [1] https://material.io/design/ https://material.io/design/ [2] https://material-ui.com/ https://material-ui.com/
1023bytes 8y ago
This seems like guerilla marketing for refactoringui.com
- tsunamifury 8y ago
  Agreed
- dr-elmo 8y ago
  my first thought when i saw the title lol
  - jamiepenney 8y ago
    Same here. Clicked to check if it was posted by a new user account and it is. Colour me suspicious.
  - rchaud 8y ago
    me too. The question is phrased in such a specific way ("Modern UI/UX") that predictable answers like Design of Everyday Things wouldn't fit. I'm saying this as someone who loved Steve Schoger's amazing Twitter moments with those UI micro-tips; I'm on the site's mailing list, so I was aware that the book had just been released.
  - news_hacker 8y ago
    Same, ha. OP said what we were all thinking. That being said, I'm a big fan of the author's work, so no harm no foul and I'll look the other way.
- enumjorge 8y ago
  It does seem a little strange given that their book came out yesterday. Of course coincidences can always occur, but the OP’s profile is a bit odd. It’s a 9 day old account that has posted Ask HN questions every day, often multiple times a day.
  - system2 8y ago
    Funny thing, even if their service is good, I will be suspicious and won't use them.
tonycoco 8y ago
The Visual Display of Quantitative Information: Edward R. Tufte Ways to Connect: On Interface and Product Design, Ryan Singer Something on color theory Design language books (Bauhaus, etc) The entire Google design team has quite a few open resources: https://material.io/design/ https://material.io/design/ and https://design.google https://design.google
- mt3ck 8y ago
  definitely second Tufte, lots of good info on consolidation and creating coherent charts and maps from large datasets
- xtracto 8y ago
  I read Tufte during my PhD and it was a lifesaver. It is good in many levels: Not only for the lessons in doing good graphics, but also on the history of charts. (I was surprised by the history of the first scatterplot)
ab_io 8y ago
Reading "The Design of Everyday Things" will give you a sense of the basics -- After that try learning a popular frontend-web framework (like Bootstrap / Foundation) which follows lot of the industry-standard UI practices out-of-the-box. Also checkout things like WAI-ARIA / WCAG, which outline accessibility standards on the web.
deleted 8y ago
[deleted]
kokokokoko 8y ago
In reality design for the web and phone applications ends up being largely about typography. So a good foundations book on typography like "Designing with Type" or any other of the usual suspects is a good start. That said, some applications have very little text so this is not always true anymore in UI/UX. "Don't Make Me Think" is a good read, but the direct info is not really as important as the point it is trying to make. Aggressively reducing friction and decisions for the user at all points. If reading that book helps get that point across then it's worth the read. On how to do that... If you are new to design, just pickup a used intro textbook on design. Something like "Design Basics" by Lauer and Pentak. Or really any intro book on design. They all cover the same basic concepts you'll need for UI/UX design. Fundamental stuff like visual hierarchy and composition. Honestly, just go find a used one for $8 and read through it. Most of them are pretty quick reads. After that, although no one really goes out and tells you this, it involves a lot of following the trends and looking at past work and pulling in ideas and pieces together to create a new design. Another comment in this thread talks about how they don't write books and this is pretty accurate. A designer rarely just sits at a blank screen and starts from nothing. They usually have a list, whether formally or informally, of examples and ideas to start with. Then through iteration, critique and testing they mold something into a complete design/interface. But one typically needs some background learning in the basic fundamentals of design and typography to piece everything together. Remember, part of good UX is doing what the user expects. Which often means using conventions and design elements the user has already seen. So pick up a book on typography and basic design and then find some design blogs that seem well written. For example Airbnb has a fairly nice one https://airbnb.design/ https://airbnb.design/. Best of luck!
keithnz 8y ago
Badass: Making Users Awesomeby Kathy Sierra https://www.goodreads.com/book/show/24737268-badass https://www.goodreads.com/book/show/24737268-badass is a good book, though its primary focus is more to do with how to work out what kind of UI to build not the specific details of the UI itself ( which is quite fickle ).
- kiechu 8y ago
  The format of this book is just terrible. I couldn't get past first few pages.
davidgh 8y ago
The Design of Everyday Things Is a masterpiece. The age of the book proves it. It is as relevant today as it was when written 30 years ago. The only downside to the book is it will ruin every elevator, door handle and stereo amplifier you ever use. My wife tires of me explaining how a door that requires a “pull” sign is a major UX fail. After reading the book it helped me understand the different models the creator and user have and has allowed me to recognize when I’m making design decisions that make a lot of sense to the creator and no sense to the user.
vrkr 8y ago
Tons of good information here, talks about exactly what you are asking: https://www.designbetter.co/ https://www.designbetter.co/
mathewsanders 8y ago
Every couple years I’ll go read Magic Inc by Bret Viktor (not a book, just online: http://worrydream.com/MagicInk/ http://worrydream.com/MagicInk/) and I always find it refreshing reminder to think about how we can design technology to help us rather than just create a CRUD interface. ‘Sketching User Experiences’ by Bill Buxton https://www.goodreads.com/book/show/980280.Sketching_User_Experiences https://www.goodreads.com/book/show/980280.Sketching_User_Ex... and ‘Mental Models’ by Indi Young: https://rosenfeldmedia.com/books/mental-models/ https://rosenfeldmedia.com/books/mental-models/ we’re both very influential to me as a young designer thinking about process and I believe they are still both relevant.
iamunr 8y ago
https://refactoringui.com/ https://refactoringui.com/ Just came out yesterday, doesn't necessarily teach 'from scratch' UI, but a great aide.
- barbecue_sauce 8y ago
  I'm reticent to pay $150 dollars for a PDF without a print copy.
  - rchaud 8y ago
    Yup, I was excited about the book, and then I saw it was PDF only. One of my favorite books as a "hobbyist" web dev (my real job is in reporting and analytics) is Jon Duckett's HTML/CSS and JavaScript/Jquery books. Gorgeously designed ink-and-paper books that give you a truly visual understanding of the box model, floats, functions, loops etc. The combination of visual design and easy-to-understand examples make the book a constant reference for me.
- jwdunne 8y ago
  I saw this advertised on product hunt. Apparently it's a good thing that you can read it in 1.5hrs. Maybe but not with a $79 price tag for a PDF.
  - moeamaya 8y ago
    It's more of a reference book so you continue earning back that investment over time. You can get a lot of his tips for free here in this curated Twitter Moment: https://twitter.com/i/moments/880688233641848832 https://twitter.com/i/moments/880688233641848832
    - jwdunne 8y ago
      I'd happily pay $79 for original content _in print_ that delves into why each of those tips works the way they do (you can connect each of those tips to fundamental principles of design, for example). But for a compilation of tweets in a PDF? There are renowned books that go for less than that. I got 3 hard back volumes of Knuth's The Art of Computer Programming for around £70. Is this book of that caliber?
whitepoplar 8y ago
I think the best actionable UI advice is: https://refactoringui.com/ https://refactoringui.com/ If you like the design tips, they just released their full-length book a few days ago!
- currysausage 8y ago
  Ironically from the same author: https://news.ycombinator.com/item?id=18614071 https://news.ycombinator.com/item?id=18614071
  - whitepoplar 8y ago
    I don't understand why I'm being downvoted. I follow one of the authors on Twitter (Steve Schoger) and I think his design tips are fantastic. I haven't purchased the book (yet) as I think it's a bit spendy, but I have so much admiration for Steve and Adam, so I'm sharing here.
    - whoisjuan 8y ago
      You're being downvoted because of the unfortunate timing of this post and the potential commercial bias of your answer. People come to HN to discuss things that hold real intellectual value and not to get subtle ads. Suggesting an e-book that was released yesterday looks like blatant advertising even if that's not your intention. I really find hard to believe that someone can legitimately recommend and stand behind a book that was released yesterday, just because the author teased his/her Twitter followers with some of the book's potential content. Also, how can you objectively say that this book "Is the best UI actionable advice" when you already accepted that you haven't even read it yet? Sorry, but the question is "What's the best book on modern UI/UX?". Suggesting something that was released in the last 48 hours feels very disingenuous.
      - whitepoplar 8y ago
        I didn't say the book is the best actionable UI advice, I said http://refactoringui.com http://refactoringui.com is, whose content is free. All I said about the book is that it's available if you seem to like all the other content. I made no comment about how good the book is, as I haven't bought it, but I think it's fair to assume it's an extension of the rest of their work.
acconrad 8y ago
I think these guys just put out a book which I'm intrigued to read: https://refactoringui.com/book/ https://refactoringui.com/book/ If you're looking for something more bite-sized, I offer a mini course on getting the bare bones established for modern UIs: https://anonconsulting.com/ui-crash-course/ https://anonconsulting.com/ui-crash-course/ (pardon the SSL cert issue I need to resolve)
- towndrunk 8y ago
  $80 bucks... uh no.
trav4225 8y ago
Hopefully a book that describes how terrible it is... ;-)
felipeerias 8y ago
My three favourites are: → "Sketching User Experiences", Bill Buxton → "The Elements of Typographic Style", Robert Bringhurst → "Understanding Comics", Scott McCloud There are lots of books on concrete design methodologies and particular aspects of the field, but they tend to become dated rather quickly. If they are tied to specific technologies, they become dated even faster. Having said that, a clear and concise introduction to the modern design process is: → "Designing for Interaction", Dan Saffer
aasasd 8y ago
I'd like to advertise a method instead of a treatise: IMO the principle of proximity is the most important design tool. The practical application of the principle is that space outside an element should be unambiguously larger than inner parts of the element, for the element to look like an integrated entity. This simply describes how human visual perception works. This works on all scales, from typography to graphical design to layout, even architecture. For letter spacing, kerning, line spacing, margins—apply the rule. Space between letters is obviously smaller than letters, space between words is comparable to a letter, line spacing is smaller than a line so a paragraph doesn't fall apart, margins are larger than a letter (at the least). Margins outside an element's borders are larger than padding inside. Need to pinpoint visual balance of some stuff? Consult the rule. Some things are related? Make them closer to each other than to other stuff. Bottom margin of a heading should be smaller than the top one, dammit. Margins of a list item should be larger than line spacing in it. Learn to see and apply this principle, and you'll have no problem envisioning good design in monochrome. As a side effect, you'll forever wonder why some desktop UI designers insist on separating things with noisy bars instead of empty space, seeing as the latter is hardwired in our brains. The next hella useful thing to learn is how to graphically separate layers of information, to allow people to see some related stuff and ignore everything else, instead of seeing all things at once and noticing nothing. This is where monochrome and monotonous designs break. (Also map designers love this.)
- colinjoy 8y ago
  For visual design, an understanding of the Gestalt principles (or „Gestalt Laws“ to stick with the German origin) is a must. The law of proximity is the first and most powerful, but the others are also useful to be aware of: https://en.wikipedia.org/wiki/Gestalt_psychology#Prägnanz https://en.wikipedia.org/wiki/Gestalt_psychology#Prägnanz
- l9k 8y ago
  Also related: Fitts's Law https://en.wikipedia.org/wiki/Fitts%27s_law https://en.wikipedia.org/wiki/Fitts%27s_law
dccoolgai 8y ago
Adaptive Web Design is the most important book in the field that not many people have read. If there was one book I could force everyone to read that would make the whole field better, it would be that one.
me_love_animes 8y ago
We just copy the facebook app, works well for us no books required
nateweiss 8y ago
I like "Designing Interfaces: Patterns for Effective Interaction Design" by Jenifer Tidwell. Less of an instruction book, more of a catalogue of how you might (or might not) present some given type of information. Good for browsing through when you're feeling you haven't hit the right organizational approach/metaphor for the task at hand. https://www.amazon.com/gp/product/1449379702 https://www.amazon.com/gp/product/1449379702
rcchyssser 8y ago
Ask hackernews. The posters here know everything about ui...
sifoobar 8y ago
I found The Humane Interface by Jef Raskin illuminating back in the days, if my memory serves most of the content is just as relevant today. Edward Tuftes books also contain plenty of wisdom and examples of good design.
hendry 8y ago
Most UX resources seem like a circle jerk imo. UX simply is the amount of interactions & how fine grained they are (when touch points are small = bad & multiply) to accomplish some goal. I know it's as bad as sloc but it's what I go by.
ArtWomb 8y ago
Sagmeister & Walsh's Beauty https://eyeondesign.aiga.org/in-defense-of-beautiful-design/ https://eyeondesign.aiga.org/in-defense-of-beautiful-design/
sbr464 8y ago
Dieter Rams — As Little Design As Possible [0] Also, if you like Dieter Rams, the film “Rams” by Gary Hustwit [1] is digitally available on Dec 14th. [0] https://www.phaidon.com/store/design/as-little-design-as-possible-9780714849188/ https://www.phaidon.com/store/design/as-little-design-as-pos... [1] https://www.hustwit.com/rams/ https://www.hustwit.com/rams/
blululu 8y ago
HCI is a big field with a lot of different specialties. Since the original query was about modern websites, I would point out that these are essentially operating according to the classic windows (WIMP) paradigm. (The mobile versions are different). In my reading, one of the best expositions of how to design a desktop application can be found in Apple's 1993 Human Interface Guidelines: http://interface.free.fr/Archives/Apple_HIGuidelines.pdf http://interface.free.fr/Archives/Apple_HIGuidelines.pdf
sweetdreamerit 8y ago
I recently created an awesome ux project at github. There, you can find a list of the classic books in UX, interaction design, information architecture and usability [0]. If you wish to add any resource, feel free to comment this issue [1] or to create a new one. UXTools.com just relased the results of the 2018 Design Tools Survey [2]. In november, Jeff Sauro published "the methods ux professionals use" post [3]. There, you can find an exaustive coverage of the most important methods and deliverables in the field. [0] https://github.com/bussolon/awesome-ux/blob/master/books.md https://github.com/bussolon/awesome-ux/blob/master/books.md [1] https://github.com/bussolon/awesome-ux/issues/3 https://github.com/bussolon/awesome-ux/issues/3 [2] http://uxtools.co/survey-2018 http://uxtools.co/survey-2018 [3] https://measuringu.com/ux-methods-2018/ https://measuringu.com/ux-methods-2018/
jrcplus 8y ago
For schools, take a look at https://www.hyperisland.com/ https://www.hyperisland.com/ (various locations) and http://thenewdigitalschool.com/ http://thenewdigitalschool.com/ (Portugal)
trapsta 8y ago
I recently read Designing for Emotion by Aarron Walter - Had some great practical advice and examples from Basecamp, Trello , Mailchimp e.t.c Great balance of theory and practical tidbits
n0mi1k 8y ago
I had the goal of learning UX basics in as little time as possible. I took a 2 hour General Assembly course and found it incredibly useful - it sounds crazy but I feel like I learned 50% of what I needed to know about UX in just those 2 hours. I asked some UX peeps what books they recommended and I purchased 2 and never read a single page (they were The Lean Startup by Eric Ries and Sprint by Google Ventures). For web app UX, I found this 30 minute video extremely useful (great to see how a non-design person might make something, then how that same non-design person can change the primitive app they made into something very nice!). Design for Non-Designers: https://www.youtube.com/watch?v=21byk2WWz3k https://www.youtube.com/watch?v=21byk2WWz3k
- carnivor 8y ago
  What was the course you're referencing in GA? Was it free?
  - n0mi1k 8y ago
    I just checked, and when I did it it was free, although I think that's because GA were on a marketing blitz (I think their 2 hour courses are typically ~$80 - money extremely well spent in this case). This is the link to the course; it was called 'Intro to UX Design' https://generalassemb.ly/education/intro-to-ux-design-247ed3ff-cbb9-48f7-93c2-9a7353e5ae75/chicago https://generalassemb.ly/education/intro-to-ux-design-247ed3...
sampl 8y ago
Very late, but Designing for the Digital Age - Kim Goodwin https://www.amazon.com/Designing-Digital-Age-Human-Centered-Products/dp/0470229101 https://www.amazon.com/Designing-Digital-Age-Human-Centered-...

542 points by InGodsName 8y ago

For designing websites like Stripe, Airbnb, Slack etc...? What tools do they use? What books they read or have written? Which school teaches modern UI/UX?

tejcirkulate 8y ago

1. Contextual design, holzblat How to understand and structure a user's life and environment and what to look for when they are struggling with a problem or using your product. 2. Lean Customer Development, Cindy Alvarez Practical and immediately useful guide to interviewing and talking to users. Read after the Contextual Inquiry book above. If that book teaches what to understand about a user's workflow and environment, this one teaches how to elicit those answers from customers when talking to them. 3. About Face 3, alan cooper If the previous two are about (a) what to look for when understanding a customer and (b) how to get the info you need to build solutions for those customers, then this book is about translating those learnings into user journeys and experiences.

jcomis 8y ago
These are my goto recs, with About Face being first. The first few chapters are incredibly practical.

jasonhong 8y ago

(For background, I'm a faculty at Carnegie Mellon University in the Human-Computer Interaction Institute) For best books, it depends on if you want to understand users or do implementation. But generally, I'd highly recommend Don Norman's The Design of Everyday Things to improve how you look at the world, and Steve Krug's Don't Make Me Think for simple and practical design tips. For tools, the best is paper prototyping, where you have your team just draw it out on paper and simulate the UI. It's simple, fast, and cheap, and from a cognitive perspective, you can explore more of the design space (think breadth-first search instead of depth-first), and you don't get overly attached to your designs. In my course on UX design, we also use Balsamiq and InVision, though other tools seem fine (e.g. Marvel, Figma, etc). One of our alums created this great chart comparing different prototyping tools: https://www.cooper.com/prototyping-tools https://www.cooper.com/prototyping-tools For schools, some to check out would be Georgia Tech, University of Washington's Master's of HCI, Indiana University, University of Michigan iSchool, and (of course) Carnegie Mellon's Master's of HCI. And lastly, here's a slide deck I put together and used at my startup several years ago. It was intended as a short 1-hour crash course. https://www.slideshare.net/jas0nh0ng/01-1hourcrashcourseuxhci https://www.slideshare.net/jas0nh0ng/01-1hourcrashcourseuxhc...

amelius 8y ago
Are any of those prototyping tools open source and free?
- troymc 8y ago
  "the best is paper prototyping"
  - checkyoursudo 8y ago
    This was true when I was doing it in grad school in 2000ish as well. I would not be surprised if it was true long before that and will remain so long after today.
  - arvinsim 8y ago
    I used to think that prototyping on a paper is expensive since paper is non-reusable. Then I proceeded to prototype on an expensive tablet. Funny looking back at it now.
- alistairSH 8y ago
  Design of Everyday Things & Don't Make Me Think are both likely to be in your employer's library, or on a co-worker's shelf. Not quite free, but I bet you can find a hard-copy to borrow.
  - DDR0 8y ago
    Or in your local public library, which is quite free. :)
- dmcy22 8y ago
  Adobe XD is a free tool for prototyping, though not Open Source.
  - barbecue_sauce 8y ago
    Is it useful without the rest of their creative suite? I only ask because Premiere, After Effects, and Photoshop are most effective when used together and obviously designed for that kind of synergy.

uxcolumbo 8y ago

I think what you're asking is more about UI Design. You should have a look at these: https://designcode.io/sketch-learn https://designcode.io/sketch-learn (if you're on Windows have a look at their Figma courses) https://hackdesign.org/ https://hackdesign.org/ To learn more about UX, this is a good start https://rosenfeldmedia.com/books/the-user-experience-team-of-one/ https://rosenfeldmedia.com/books/the-user-experience-team-of...

pragmacoders 8y ago

I just started out in UI, too! It's based on watercolor painting but I have to say that Making Color Sing by Jeanne Dobie has dramatically improved the UI of my applications through better use of color!

astockwell 8y ago

A Book Apart [1] has an entire collection of short books on UI/UX topics written by industry pros. [1] https://abookapart.com https://abookapart.com

dieg0 8y ago
Up this, I'd start from here

tsunamifury 8y ago

Many of the key designers moving interaction design forward are not publishing books, rather their corporate style guides are a better representation of their philosophy and method. Design has always been short on useful publications because it is a rapidly developing field that publishers often fear it has no shelf life. If you want to learn interaction design it's best done with a bit of dedicated cooperation and experimentation. Use one of the big tech companies style guides to mock up a prototype and test it on your friends. Use blank HTML with images you can make easily in sketch. Then iterate. That is most of interaction design. Most everything else people teach is either too localized or just not proven at scale.

jbottoms 8y ago
I second this. The leading edge in HCI is in VR. Imaging the new degrees of freedom from popping menus around in 3-space leads to challenges. What happens to that menu then when your avatar does a cartwheel across the battlefield. Or, how do you deal with an impenetrable, protective capsule around you character when he/she draws their sword. Is it one-way? How do you even show the capsule? How does the character get their bitcoin through the capsule to gift a poor match girl? There are no VR/HCI books, but that would make an interesting topic.
- deleted 8y ago
  [deleted]

akerro 8y ago

This book is recommended quite often here https://www.goodreads.com/book/show/11457105-design-for-hackers https://www.goodreads.com/book/show/11457105-design-for-hack...

gypsyBelly 8y ago

Take a look at https://refactoringui.com/ https://refactoringui.com/ Very tactical guidelines to follow geared towards devs.

idoubtit 8y ago
I've just visited this site, and I was lost after 5 seconds. To my eyes, the design of the front page is awful. Firstly, I read the title and the sub-header sentence. I understood that the site had generic guide on concepts designing web. Okay, I'm interested. Then I scrolled down to the 3 categories. The first one collects some tips. None of them is related to the grand project announced in the title, they seem much more restricted. Looking inside the categories, I don't even understand their organization. What is specific about "Articles"? The first content inside "Articles" is named "7 practical tips…", so shouldn't it be under the "Design tips" category? So I went back to the top of the page, thinking I had missed the more generic links. Hmm, of course, those blue words in the header sentence must be links… No they are not. Now I don't even want to read the content.
- ru999gol 8y ago
  That seems really unfair, I think they do have some really valuable advice especially for programmers. https://twitter.com/i/moments/994601867987619840 https://twitter.com/i/moments/994601867987619840 Their book also just came out and looks great, albeit grossly overpriced.

tiago_simoes 8y ago

Don’t Make Me Think http://sensible.com/dmmt.html http://sensible.com/dmmt.html

tracker1 8y ago

It's far less abstract, but I really appreciate the Material Design documentation[1] that Google published. And while there may be some dissenting opinions, it's generally a good idea and read. Personally, I'm mostly using the `material-ui`[2] package for React use, but you'll find other material based libraries for any number of frameworks and platforms. In general, I've been sticking to the overall guidelines with a few tweaks, and the responses in general for the application I'm currently working on have been incredibly positive. [1] https://material.io/design/ https://material.io/design/ [2] https://material-ui.com/ https://material-ui.com/

1023bytes 8y ago

This seems like guerilla marketing for refactoringui.com

tsunamifury 8y ago
Agreed
dr-elmo 8y ago
my first thought when i saw the title lol
- jamiepenney 8y ago
  Same here. Clicked to check if it was posted by a new user account and it is. Colour me suspicious.
- rchaud 8y ago
  me too. The question is phrased in such a specific way ("Modern UI/UX") that predictable answers like Design of Everyday Things wouldn't fit. I'm saying this as someone who loved Steve Schoger's amazing Twitter moments with those UI micro-tips; I'm on the site's mailing list, so I was aware that the book had just been released.
- news_hacker 8y ago
  Same, ha. OP said what we were all thinking. That being said, I'm a big fan of the author's work, so no harm no foul and I'll look the other way.
enumjorge 8y ago
It does seem a little strange given that their book came out yesterday. Of course coincidences can always occur, but the OP’s profile is a bit odd. It’s a 9 day old account that has posted Ask HN questions every day, often multiple times a day.
- system2 8y ago
  Funny thing, even if their service is good, I will be suspicious and won't use them.

tonycoco 8y ago

The Visual Display of Quantitative Information: Edward R. Tufte Ways to Connect: On Interface and Product Design, Ryan Singer Something on color theory Design language books (Bauhaus, etc) The entire Google design team has quite a few open resources: https://material.io/design/ https://material.io/design/ and https://design.google https://design.google

mt3ck 8y ago
definitely second Tufte, lots of good info on consolidation and creating coherent charts and maps from large datasets
xtracto 8y ago
I read Tufte during my PhD and it was a lifesaver. It is good in many levels: Not only for the lessons in doing good graphics, but also on the history of charts. (I was surprised by the history of the first scatterplot)

ab_io 8y ago

Reading "The Design of Everyday Things" will give you a sense of the basics -- After that try learning a popular frontend-web framework (like Bootstrap / Foundation) which follows lot of the industry-standard UI practices out-of-the-box. Also checkout things like WAI-ARIA / WCAG, which outline accessibility standards on the web.

deleted 8y ago

[deleted]

kokokokoko 8y ago

In reality design for the web and phone applications ends up being largely about typography. So a good foundations book on typography like "Designing with Type" or any other of the usual suspects is a good start. That said, some applications have very little text so this is not always true anymore in UI/UX. "Don't Make Me Think" is a good read, but the direct info is not really as important as the point it is trying to make. Aggressively reducing friction and decisions for the user at all points. If reading that book helps get that point across then it's worth the read. On how to do that... If you are new to design, just pickup a used intro textbook on design. Something like "Design Basics" by Lauer and Pentak. Or really any intro book on design. They all cover the same basic concepts you'll need for UI/UX design. Fundamental stuff like visual hierarchy and composition. Honestly, just go find a used one for $8 and read through it. Most of them are pretty quick reads. After that, although no one really goes out and tells you this, it involves a lot of following the trends and looking at past work and pulling in ideas and pieces together to create a new design. Another comment in this thread talks about how they don't write books and this is pretty accurate. A designer rarely just sits at a blank screen and starts from nothing. They usually have a list, whether formally or informally, of examples and ideas to start with. Then through iteration, critique and testing they mold something into a complete design/interface. But one typically needs some background learning in the basic fundamentals of design and typography to piece everything together. Remember, part of good UX is doing what the user expects. Which often means using conventions and design elements the user has already seen. So pick up a book on typography and basic design and then find some design blogs that seem well written. For example Airbnb has a fairly nice one https://airbnb.design/ https://airbnb.design/. Best of luck!

keithnz 8y ago

Badass: Making Users Awesomeby Kathy Sierra https://www.goodreads.com/book/show/24737268-badass https://www.goodreads.com/book/show/24737268-badass is a good book, though its primary focus is more to do with how to work out what kind of UI to build not the specific details of the UI itself ( which is quite fickle ).

kiechu 8y ago
The format of this book is just terrible. I couldn't get past first few pages.

davidgh 8y ago

The Design of Everyday Things Is a masterpiece. The age of the book proves it. It is as relevant today as it was when written 30 years ago. The only downside to the book is it will ruin every elevator, door handle and stereo amplifier you ever use. My wife tires of me explaining how a door that requires a “pull” sign is a major UX fail. After reading the book it helped me understand the different models the creator and user have and has allowed me to recognize when I’m making design decisions that make a lot of sense to the creator and no sense to the user.

vrkr 8y ago

Tons of good information here, talks about exactly what you are asking: https://www.designbetter.co/ https://www.designbetter.co/

mathewsanders 8y ago

Every couple years I’ll go read Magic Inc by Bret Viktor (not a book, just online: http://worrydream.com/MagicInk/ http://worrydream.com/MagicInk/) and I always find it refreshing reminder to think about how we can design technology to help us rather than just create a CRUD interface. ‘Sketching User Experiences’ by Bill Buxton https://www.goodreads.com/book/show/980280.Sketching_User_Experiences https://www.goodreads.com/book/show/980280.Sketching_User_Ex... and ‘Mental Models’ by Indi Young: https://rosenfeldmedia.com/books/mental-models/ https://rosenfeldmedia.com/books/mental-models/ we’re both very influential to me as a young designer thinking about process and I believe they are still both relevant.

iamunr 8y ago

https://refactoringui.com/ https://refactoringui.com/ Just came out yesterday, doesn't necessarily teach 'from scratch' UI, but a great aide.

barbecue_sauce 8y ago
I'm reticent to pay $150 dollars for a PDF without a print copy.
- rchaud 8y ago
  Yup, I was excited about the book, and then I saw it was PDF only. One of my favorite books as a "hobbyist" web dev (my real job is in reporting and analytics) is Jon Duckett's HTML/CSS and JavaScript/Jquery books. Gorgeously designed ink-and-paper books that give you a truly visual understanding of the box model, floats, functions, loops etc. The combination of visual design and easy-to-understand examples make the book a constant reference for me.
jwdunne 8y ago
I saw this advertised on product hunt. Apparently it's a good thing that you can read it in 1.5hrs. Maybe but not with a $79 price tag for a PDF.
- moeamaya 8y ago
  It's more of a reference book so you continue earning back that investment over time. You can get a lot of his tips for free here in this curated Twitter Moment: https://twitter.com/i/moments/880688233641848832 https://twitter.com/i/moments/880688233641848832
  - jwdunne 8y ago
    I'd happily pay $79 for original content _in print_ that delves into why each of those tips works the way they do (you can connect each of those tips to fundamental principles of design, for example). But for a compilation of tweets in a PDF? There are renowned books that go for less than that. I got 3 hard back volumes of Knuth's The Art of Computer Programming for around £70. Is this book of that caliber?

whitepoplar 8y ago

I think the best actionable UI advice is: https://refactoringui.com/ https://refactoringui.com/ If you like the design tips, they just released their full-length book a few days ago!

currysausage 8y ago
Ironically from the same author: https://news.ycombinator.com/item?id=18614071 https://news.ycombinator.com/item?id=18614071
- whitepoplar 8y ago
  I don't understand why I'm being downvoted. I follow one of the authors on Twitter (Steve Schoger) and I think his design tips are fantastic. I haven't purchased the book (yet) as I think it's a bit spendy, but I have so much admiration for Steve and Adam, so I'm sharing here.
  - whoisjuan 8y ago
    You're being downvoted because of the unfortunate timing of this post and the potential commercial bias of your answer. People come to HN to discuss things that hold real intellectual value and not to get subtle ads. Suggesting an e-book that was released yesterday looks like blatant advertising even if that's not your intention. I really find hard to believe that someone can legitimately recommend and stand behind a book that was released yesterday, just because the author teased his/her Twitter followers with some of the book's potential content. Also, how can you objectively say that this book "Is the best UI actionable advice" when you already accepted that you haven't even read it yet? Sorry, but the question is "What's the best book on modern UI/UX?". Suggesting something that was released in the last 48 hours feels very disingenuous.
    - whitepoplar 8y ago
      I didn't say the book is the best actionable UI advice, I said http://refactoringui.com http://refactoringui.com is, whose content is free. All I said about the book is that it's available if you seem to like all the other content. I made no comment about how good the book is, as I haven't bought it, but I think it's fair to assume it's an extension of the rest of their work.

acconrad 8y ago

I think these guys just put out a book which I'm intrigued to read: https://refactoringui.com/book/ https://refactoringui.com/book/ If you're looking for something more bite-sized, I offer a mini course on getting the bare bones established for modern UIs: https://anonconsulting.com/ui-crash-course/ https://anonconsulting.com/ui-crash-course/ (pardon the SSL cert issue I need to resolve)

towndrunk 8y ago
$80 bucks... uh no.

trav4225 8y ago

Hopefully a book that describes how terrible it is... ;-)

felipeerias 8y ago

My three favourites are: → "Sketching User Experiences", Bill Buxton → "The Elements of Typographic Style", Robert Bringhurst → "Understanding Comics", Scott McCloud There are lots of books on concrete design methodologies and particular aspects of the field, but they tend to become dated rather quickly. If they are tied to specific technologies, they become dated even faster. Having said that, a clear and concise introduction to the modern design process is: → "Designing for Interaction", Dan Saffer

aasasd 8y ago

I'd like to advertise a method instead of a treatise: IMO the principle of proximity is the most important design tool. The practical application of the principle is that space outside an element should be unambiguously larger than inner parts of the element, for the element to look like an integrated entity. This simply describes how human visual perception works. This works on all scales, from typography to graphical design to layout, even architecture. For letter spacing, kerning, line spacing, margins—apply the rule. Space between letters is obviously smaller than letters, space between words is comparable to a letter, line spacing is smaller than a line so a paragraph doesn't fall apart, margins are larger than a letter (at the least). Margins outside an element's borders are larger than padding inside. Need to pinpoint visual balance of some stuff? Consult the rule. Some things are related? Make them closer to each other than to other stuff. Bottom margin of a heading should be smaller than the top one, dammit. Margins of a list item should be larger than line spacing in it. Learn to see and apply this principle, and you'll have no problem envisioning good design in monochrome. As a side effect, you'll forever wonder why some desktop UI designers insist on separating things with noisy bars instead of empty space, seeing as the latter is hardwired in our brains. The next hella useful thing to learn is how to graphically separate layers of information, to allow people to see some related stuff and ignore everything else, instead of seeing all things at once and noticing nothing. This is where monochrome and monotonous designs break. (Also map designers love this.)

colinjoy 8y ago
For visual design, an understanding of the Gestalt principles (or „Gestalt Laws“ to stick with the German origin) is a must. The law of proximity is the first and most powerful, but the others are also useful to be aware of: https://en.wikipedia.org/wiki/Gestalt_psychology#Prägnanz https://en.wikipedia.org/wiki/Gestalt_psychology#Prägnanz
l9k 8y ago
Also related: Fitts's Law https://en.wikipedia.org/wiki/Fitts%27s_law https://en.wikipedia.org/wiki/Fitts%27s_law

dccoolgai 8y ago

Adaptive Web Design is the most important book in the field that not many people have read. If there was one book I could force everyone to read that would make the whole field better, it would be that one.

me_love_animes 8y ago

We just copy the facebook app, works well for us no books required

nateweiss 8y ago

I like "Designing Interfaces: Patterns for Effective Interaction Design" by Jenifer Tidwell. Less of an instruction book, more of a catalogue of how you might (or might not) present some given type of information. Good for browsing through when you're feeling you haven't hit the right organizational approach/metaphor for the task at hand. https://www.amazon.com/gp/product/1449379702 https://www.amazon.com/gp/product/1449379702

rcchyssser 8y ago

Ask hackernews. The posters here know everything about ui...

sifoobar 8y ago

I found The Humane Interface by Jef Raskin illuminating back in the days, if my memory serves most of the content is just as relevant today. Edward Tuftes books also contain plenty of wisdom and examples of good design.

hendry 8y ago

Most UX resources seem like a circle jerk imo. UX simply is the amount of interactions & how fine grained they are (when touch points are small = bad & multiply) to accomplish some goal. I know it's as bad as sloc but it's what I go by.

ArtWomb 8y ago

Sagmeister & Walsh's Beauty https://eyeondesign.aiga.org/in-defense-of-beautiful-design/ https://eyeondesign.aiga.org/in-defense-of-beautiful-design/

sbr464 8y ago

Dieter Rams — As Little Design As Possible [0] Also, if you like Dieter Rams, the film “Rams” by Gary Hustwit [1] is digitally available on Dec 14th. [0] https://www.phaidon.com/store/design/as-little-design-as-possible-9780714849188/ https://www.phaidon.com/store/design/as-little-design-as-pos... [1] https://www.hustwit.com/rams/ https://www.hustwit.com/rams/

blululu 8y ago

HCI is a big field with a lot of different specialties. Since the original query was about modern websites, I would point out that these are essentially operating according to the classic windows (WIMP) paradigm. (The mobile versions are different). In my reading, one of the best expositions of how to design a desktop application can be found in Apple's 1993 Human Interface Guidelines: http://interface.free.fr/Archives/Apple_HIGuidelines.pdf http://interface.free.fr/Archives/Apple_HIGuidelines.pdf

sweetdreamerit 8y ago

I recently created an awesome ux project at github. There, you can find a list of the classic books in UX, interaction design, information architecture and usability [0]. If you wish to add any resource, feel free to comment this issue [1] or to create a new one. UXTools.com just relased the results of the 2018 Design Tools Survey [2]. In november, Jeff Sauro published "the methods ux professionals use" post [3]. There, you can find an exaustive coverage of the most important methods and deliverables in the field. [0] https://github.com/bussolon/awesome-ux/blob/master/books.md https://github.com/bussolon/awesome-ux/blob/master/books.md [1] https://github.com/bussolon/awesome-ux/issues/3 https://github.com/bussolon/awesome-ux/issues/3 [2] http://uxtools.co/survey-2018 http://uxtools.co/survey-2018 [3] https://measuringu.com/ux-methods-2018/ https://measuringu.com/ux-methods-2018/

jrcplus 8y ago

For schools, take a look at https://www.hyperisland.com/ https://www.hyperisland.com/ (various locations) and http://thenewdigitalschool.com/ http://thenewdigitalschool.com/ (Portugal)

trapsta 8y ago

I recently read Designing for Emotion by Aarron Walter - Had some great practical advice and examples from Basecamp, Trello , Mailchimp e.t.c Great balance of theory and practical tidbits

n0mi1k 8y ago

I had the goal of learning UX basics in as little time as possible. I took a 2 hour General Assembly course and found it incredibly useful - it sounds crazy but I feel like I learned 50% of what I needed to know about UX in just those 2 hours. I asked some UX peeps what books they recommended and I purchased 2 and never read a single page (they were The Lean Startup by Eric Ries and Sprint by Google Ventures). For web app UX, I found this 30 minute video extremely useful (great to see how a non-design person might make something, then how that same non-design person can change the primitive app they made into something very nice!). Design for Non-Designers: https://www.youtube.com/watch?v=21byk2WWz3k https://www.youtube.com/watch?v=21byk2WWz3k

carnivor 8y ago
What was the course you're referencing in GA? Was it free?
- n0mi1k 8y ago
  I just checked, and when I did it it was free, although I think that's because GA were on a marketing blitz (I think their 2 hour courses are typically ~$80 - money extremely well spent in this case). This is the link to the course; it was called 'Intro to UX Design' https://generalassemb.ly/education/intro-to-ux-design-247ed3ff-cbb9-48f7-93c2-9a7353e5ae75/chicago https://generalassemb.ly/education/intro-to-ux-design-247ed3...

sampl 8y ago

Very late, but Designing for the Digital Age - Kim Goodwin https://www.amazon.com/Designing-Digital-Age-Human-Centered-Products/dp/0470229101 https://www.amazon.com/Designing-Digital-Age-Human-Centered-...