I am a backend developer and would like to learn about UI design for modern web applications. I'm thinking of aspects like color schemes, font sizes, where to place the elements, spacing between elements, interaction and feedback etc.<p>Are there well known books, courses or video series that teach web application UI design in a systematic way?
Nielsen Norman Group[0] and their YouTube[1] are a goldmine<p>"Learn UI Design"[2] provide some really high quality methodical videos[3] and content<p>[0] <a href="https://www.nngroup.com/" rel="nofollow">https://www.nngroup.com/</a><p>[1] <a href="https://www.youtube.com/channel/UC2oCugzU6W8-h95W7eBTUEg" rel="nofollow">https://www.youtube.com/channel/UC2oCugzU6W8-h95W7eBTUEg</a><p>[2] <a href="https://learnui.design/" rel="nofollow">https://learnui.design/</a><p>[3] <a href="https://www.youtube.com/channel/UCakPr8lc7Zcowd8Cp2Uy_Eg" rel="nofollow">https://www.youtube.com/channel/UCakPr8lc7Zcowd8Cp2Uy_Eg</a>
I really like "the design of everyday things" by Donald Norman. It's more focused on design in general, than what you're asking for, but I think the fundamentals of design is a prerequisite to become a good UX/UI designers<p>It teaches several ways to prototype design, how to evaluate whether your design is efficient, and how to develop a design oriented mindset<p>It not only helped me make better designs, but also made me a better coder, because I started thinking about my code as a product to be used by others
Check out The Non-Designers Design Book by Robin Williams.<p>It focuses on four fundamental concepts of graphic design that apply to everything visual, including UIs. Its four concepts form a language for thinking about the aspects of visual design like color schemes, font sizes, spacing, etc.<p>It has lots of examples and mini design exercises. And you can read it in just a few hours.
I learned it OTJ at HP. There was a "UID" or User Interface Design group there we worked with. They were the group that invented green/purple keyboard/mouse mapping and similar mapping with colored traces mapping to colored controls and colored cables for oscilloscopes back in the 1990s.<p>There are references that were involved in that but none individually nor as ensemble is a "systematic" source. So they wouldn't really fit your requirement. These range from Card & Moran to vendor design guidelines to general industrial design concepts.<p>You will learn the most by "doing" and solving real problems. Honestly half the issue is looking at customer use-cases and testing with customers which is the ultimate source. Doing it in a vacuum or from arbitrary recipes generally doesn't work. Customer. Customer. Customer.<p>My current company has a number of beta customers who are willing to try things due to long-term friendship combined with a modest discount on the first copies they buy. They are our guinea pigs and our inspiration for both problems and opportunities both for UI/UX but also intimately tied to product features.
This site looks useful: <a href="https://uxtools.co/challenges/" rel="nofollow">https://uxtools.co/challenges/</a> . There are articles as well as challenges. I'm not sure it is systematic, but it looks like it covers a number of useful things to know.
<a href="https://www.ics.uci.edu/~kobsa/courses/ICS104/course-notes/Microsoft_WindowsGuidelines.pdf" rel="nofollow">https://www.ics.uci.edu/~kobsa/courses/ICS104/course-notes/M...</a><p>We need to go back
Dont make me think is fantastic for removing the mystery around usability design. The ideas here are timeless.<p><a href="https://sensible.com/dont-make-me-think/" rel="nofollow">https://sensible.com/dont-make-me-think/</a>
<i>Don't Make Me Think</i><p>(and no doubt other stuff by the same guy)<p><a href="https://en.m.wikipedia.org/wiki/Don%27t_Make_Me_Think" rel="nofollow">https://en.m.wikipedia.org/wiki/Don%27t_Make_Me_Think</a>
Design is learned by designing.<p>The systematic starting point is black and white, courier, and HTML.<p>They get you about 90% of this very webpage.<p>With a lot of iteration of course. Iteration is design's only methodology. Unsuccessful is it's predominate conclusion. Partially successful is as good as it gets. Running out of time is how a design is finished.<p>Surely read all you can about color theory, typography, and composition. All you can about web app organization. But accept that none of that is designing. None of it strictly necessary. None of it sufficient.<p>There's no such thing as a design in your head. Good luck.
Best way for me has been to just look at websites with good designs and take mental notes. It doesn’t take long to develop an intuition or spot common patterns.
On top of books and site suggested, look at Interaction Design Foundation[1] courses, specifically those around talking to/interviewing/getting feedback from users.<p>[1] <a href="https://www.interaction-design.org/" rel="nofollow">https://www.interaction-design.org/</a>
Some excellent MIT resources:<p>[1] <i>User Interface Design & Implementation</i> (start by having a look at the readings; includes exercises and projects; have a look at the dozens of detailed examples of the latter to see the process that is taught here [9]).<p>[2] <i>Software Studio</i> (this one sets UI/UX design, at the end, with excellent videos [3,4], in the context of app design, not in isolation, as an extension to conceptual design [5,6], without which it is claimed that you can't get it right, and for which you need abstract data design [7,8]; very good assignments and project)<p>[1] <a href="http://web.mit.edu/6.813/www/sp18/" rel="nofollow">http://web.mit.edu/6.813/www/sp18/</a><p>[2] <a href="https://stellar.mit.edu/S/course/6/fa18/6.170/materials.html" rel="nofollow">https://stellar.mit.edu/S/course/6/fa18/6.170/materials.html</a><p>[3] <a href="https://drive.google.com/file/d/1qblmdoZIJQ4rYGgCPLNusEn2yWiq1cxy/view?usp=sharing" rel="nofollow">https://drive.google.com/file/d/1qblmdoZIJQ4rYGgCPLNusEn2yWi...</a><p>[4] <a href="https://drive.google.com/file/d/1Cvco6r8a6oV3Sy89RKdIfrZCrGim7CzH/view?usp=sharing" rel="nofollow">https://drive.google.com/file/d/1Cvco6r8a6oV3Sy89RKdIfrZCrGi...</a><p>[5] <a href="https://drive.google.com/file/d/1lzAbrqk9LNLhGMLbsTuVgAm6p9_Do_Ux/view?usp=sharing" rel="nofollow">https://drive.google.com/file/d/1lzAbrqk9LNLhGMLbsTuVgAm6p9_...</a><p>[6] <a href="https://drive.google.com/file/d/1AZ85ui0k2QpCKgfJZXUPSk-jdSi36MzP/view?usp=sharing" rel="nofollow">https://drive.google.com/file/d/1AZ85ui0k2QpCKgfJZXUPSk-jdSi...</a><p>[7] <a href="https://drive.google.com/file/d/1axvYX7kSWAmxDU451hyCcG-wt880uVoe/view?usp=sharing" rel="nofollow">https://drive.google.com/file/d/1axvYX7kSWAmxDU451hyCcG-wt88...</a><p>[8] <a href="https://drive.google.com/file/d/1ET9UkOCE-l0c-FR_2w0TFudCAn8DaqpV/view?usp=sharing" rel="nofollow">https://drive.google.com/file/d/1ET9UkOCE-l0c-FR_2w0TFudCAn8...</a><p>[9] <a href="https://docs.google.com/document/u/0/d/1KIIOS3W9vF4RT0PdX6cH18FqFWXsj-xG0wLrKOkTyR8/mobilebasic" rel="nofollow">https://docs.google.com/document/u/0/d/1KIIOS3W9vF4RT0PdX6cH...</a>
<a href="https://shiftnudge.com/" rel="nofollow">https://shiftnudge.com/</a> is very good, but unfortunately doesn’t open for enrollment for a few more months