5 ms·

Ask HN: Recommended crash courses in web UI design (30 minutes or less)

48 points by nomilk 4y ago

I self taught back end, and can now make full apps with ruby on rails. Unsurprisingly, my finished applications never look quite right. I use bootstrap which helps a lot. I think the problem is mostly with the layout of elements on the page. I try not to overdo things with unnecessary elements, and am at a point where each individual piece of the webpage (e.g. a button, a logo, a navbar, a form) looks fine on its own, but doesn't look professional as a whole (for reasons I'm not yet perceptive enough to detect - I can tell it's clunky but I can't articulate why). I know 30 minutes is ambitious, but I'm working on an MVP and don't have a lot of time right now (in the future, absolutely). Any recommendations for crash courses, videos, articles, or tutorials greatly appreciated! Particularly interested to hear from anyone who wasn't a design 'natural', and had to self teach as I am.

ei8htyfi5e 4y ago
Read about designing on a grid. For the fastest cheat, look at UI kits or dribbble for inspiration. Search for the purpose of your page and then just copy the design. For 30 minutes that’s the best you can do.
- nomilk 4y ago
  > look at UI kits or dribbble for inspiration. Search for the purpose of your page and then just copy the design. This is great. Any recommendation for a TL;DR on designing on a grid?
solardev 4y ago
No offense, but this is like asking "how do I become a graphic artist and consumer behavior expert in 30 min or less". For now, just use someone else's designs. Use a component library like MUI (based off Google's Material UI) https://mui.com/ https://mui.com/ or one of the many ready-built templates (https://mui.com/store/#populars https://mui.com/store/#populars). These are higher-level than Bootstrap (as in, you're dropping in prebuilt UIs and not designing from the ground up like you would with Bootstrap). It will look way better than anything you try to learn about in 30 min. There are similar themes and such for Wordpress, Shopify, etc. I don't know what sort of app you're building, but the UIs can change a lot depending on use case. Your app will look generic, but that's better for your users than an backend engineer trying to hack something together with no experience. Once you're ready to learn, expect to spend a at least a few days to get a good enough understanding. I'd start with UX first if I were you, like this course series (maybe an hour or so?) https://www.linkedin.com/learning/user-experience-ux-for-non-designers?upsellOrderOrigin=default_guest_learning https://www.linkedin.com/learning/user-experience-ux-for-non... If you decide this is something you want to keep investing in, there's a much more detailed 9-hour course: https://www.linkedin.com/learning/paths/become-a-user-experience-designer?upsellOrderOrigin=default_guest_learning https://www.linkedin.com/learning/paths/become-a-user-experi... And then a 27-hour course for web design: https://www.linkedin.com/learning/paths/become-a-web-designer?upsellOrderOrigin=default_guest_learning https://www.linkedin.com/learning/paths/become-a-web-designe... And/or a similar 25-hour one for frontend dev, including design elements: https://www.linkedin.com/learning/paths/become-a-front-end-web-developer?upsellOrderOrigin=default_guest_learning https://www.linkedin.com/learning/paths/become-a-front-end-w... LinkedIn Learning (formerly Lynda) is very good, IMO, and well worth the money. I learned most of what I know there, moving from full stack to now a dedicated frontend person, learning a lot of design and UX along the way. I think it is realistic to be able to self-teach and become somewhat competent with frontend design in a few weeks, or several days of intense study if you really must. But you'll also have to make time to practice, publish, get feedback, iterate, etc. It is not realistic to do that in 30 min any more than you can teach someone to be a DB admin in 30 minutes. These are specialized careers for a reason. If you desperately need something done for a MVP, again, just buy someone else's design (or hire someone and learn from them). Then keep reusing design patterns that work for you and your users, and gradually improve them as you learn. Good luck and and have fun :) Edit: Also, if you want more specific guidance, tell us more details about what kind of app you're building, show us any UIs you already have, or the kind of information you want to show, what you're asking users to do, any sort of feedback or research you have on your target audiences, etc.
- nomilk 4y ago
  None taken, and thank you; I've bookmarked the courses and will do them in the near future when ample time's available to me :) Here's an example of a UI that makes me uneasy: https://i.imgur.com/MSay6jF.png https://i.imgur.com/MSay6jF.png Self-critiquing: - I loved the colours in isolation: the h1 (blue gradient) and h2 (purple gradient) look great with not too much else going on, but I feel with the reddish logo and blue button it gets a bit much. - Why did I have to colour the plan options? (my amateur brain still says: if you can try to make it look pretty, you should, which ends up overly ornate). - I think the radio buttons not aligning with the plans bothers me the most (that's easily detectable and fixed though, even by me). - I feel as though if I were a user of the app, I wouldn't think it was very professional. I can't figure out why though. About the app: It lets home occupants do smoke alarm checks remotely, rather than having to book someone to come and check them. I am undecided whether the app should have a "tech" look and feel, or a "tradesperson" look and feel. Perhaps I should consider that more deeply before trying to design it. I should also mention, I've taken some very short UX courses, and feel okay about UX, and I can implement most basic design patterns in a technical sense (e.g. spacing, colouring, responsiveness, sizing) - my main struggle is making it look professional.
  - solardev 4y ago
    I think a common beginner tendency is to overuse color and other decorations (icons, fonts, etc.). Good design is often more about taking away fluff so you're left with the essentials, rather than adding unnecessary complexity. One area where UI/UX deviates from art is that ultimately you are not aiming for self-expression as a developer or company. Not yet, anyway... someday maybe your marketing & branding department can help with that, but at this early stage, less is more. So don't think of this as your personal art project, but rather your elevator pitch, your brief opportunity to help users decide if this is right for them, before they get bored/frustrated and leave. The following is my opinion only. Please feel free to disagree with any of it: - Don't overuse gradients or colors. Get rid of the gradients, and reduce your palette to 2-3 colors (max) and decide on a use case for each one, including a clear hierarchy of importance. Use them sparingly, and be able to say "this text/button/whatever should be color X, not my default color, because ______". "Because it's pretty" is not a good reason. A better one would be "I need to be able to differentiate between these three options, and I can't do it more effectively using spacing, flow, whitespace, etc., so my only remaining option is color." If in doubt, make all your primary actions the same red as your CheckEasy color, and choose a less visually prominent color as a secondary action color if you must, or just use black for that. > "[the app] lets home occupants do smoke alarm checks remotely, rather than having to book someone to come and check them." I am not really sure what this means. Isn't testing a smoke alarm mostly a matter of pushing the TEST button? Or is this some sort of smart smoke detector, like the Nest ones? Who is your target audience, and what are their needs? - But put yourself in your users' shoes and imagine what it's like to see this product page. "Oh wow, those are very expensive plans for a smoke detector service. Is that per month? Annually? What are the differences between the plans? Can I cancel easily?". They don't care about your colors, they want to know whether this service is right for them. A common way to do this is with pricing cards, like: https://thefront.maccarianagency.com/pricing https://thefront.maccarianagency.com/pricing - That page has a clear visual flow and uses a common pattern that users are likely familiar with: read the first header & paragraph for a brief description of what the product is and why they should consider it, then each plan has its main features highlighted. There is only one primary color (the blue) and the primary CTA ("Learn more") is distinguished by its prominence, because it is a filled button with a lot of that primary color. There is only one easy and large click needed to accomplish the user's desire ("I want this plan"), rather than having to try to precisely click a small radio button, then clicking a small link to read plan details, and then finally being able to check out. - In general, don't worry so much about the artistic/graphic design portion of this yet, but DO think hard about UX (that first hour or so course I linked to). Put yourself in your users' shoes, identify several types of mock users that you might try to attract (personas), and imagine what they come to your site for (do they already know about it? do they currently use a competing service? is there a particular frustration they're trying to solve?) and help them accomplish that by organizing your information for THEIR needs, not yours. Nobody will care about your color scheme if they can't find what they're looking for. In other words, instead of "tech vs tradesperson look and feel", understand who exactly is going to be using your site, and how to make it easier for them. Are there other websites or tools or apps they already use that you can copy to make yours seem more familiar? Can they feel at home even if they've never heard of your brand, just because it reminds them of something they already know? - You get to have fun with all the pretty art stuff later on, once you have the basic UX fleshed out more. Some designers will wireframe their UIs and general app flows purely in unstyled black and white to begin with, before adding any typography or color at all, because organization and whitespace (including the use of clear grids, like another poster mentioned) are much more powerful tools at directing user attention without causing needless distractions like too many colors would. - When in doubt, steal from someone else. I can't emphasize this enough. At this early stage, don't try to make your own design pattern or layout (or even color palette) if you don't have to. Steal from other companies and use their layouts. The pricing page is a great example of this. Look for commonalities between pricing pages you find clear and easy to use, and ask yourself if it's the gradients you really appreciate about theirs. Once you have more experience, you can CHOOSE to deviate from a common practice, but you should do so only with good reason... i.e., know the rules before you break the rules, not just because you think experimentation is cool. Again, this isn't your art project, this is your marketing brochure. And you're not a design company, so don't try to impress your audience with that. They likely won't care and it would just get in the way if done poorly.
pcbro141 4y ago
https://www.refactoringui.com/ https://www.refactoringui.com/ Commonly highly recommended UI book. From skimming the preview it looks good and practical. You have the taste of knowing when things don't look right, the book shows you why it doesn't look right and how to improve it with examples.
- solardev 4y ago
  This seems like a great book! Thanks for sharing.
- rozenmd 4y ago
  Came here to recommend this one too, great book.
- nojs 4y ago
  Second this, it’s one of the best overall summaries of the subtleties that make a UI work.
- nomilk 4y ago
  Going through the sample chapters and within 30 seconds finding myself chuckling at the beginner mistakes the book is pointing out not to make, for example presenting labels and values where values on their own would be sufficient [1]. And further down on the same page 'Combining labels and values' (I would almost always make the mistake of not combining them) - seeing the wrong and right ways side by side makes it obvious, even to me. EDIT purchased the pdf, will try to skim today. [1] https://www.refactoringui.com/previews/labels-are-a-last-resort https://www.refactoringui.com/previews/labels-are-a-last-res...
  - nomilk 4y ago
    3 hours in (about 1/4 the way through), and it's definitely a worthwhile purchase. Here's https://i.imgur.com/E9wiiWo.png https://i.imgur.com/E9wiiWo.png another classic mistake I would naturally make. Seeing the wrong way and right way side by side makes it so obvious for a dummy like me.
sexy_seedbox 4y ago
7 Practical Tips for Cheating at Design (from Tailwind CSS author): https://medium.com/refactoring-ui/7-practical-tips-for-cheating-at-design-40c736799886 https://medium.com/refactoring-ui/7-practical-tips-for-cheat...
twoquestions 4y ago
Not a complete picture, but please make sure you have enough contrast. Even this very site is a bit guilty, but Apple's stuff is especially bad about having gray text on a slightly darker background, making it hard as hell to read. Please put enough contrast! https://www.contrastrebellion.com/ https://www.contrastrebellion.com/ Also look at more modern government websites, from both the US and UK. They aren't pretty in the conventional sense, but they work! https://www.gov.uk/guidance/government-design-principles https://www.gov.uk/guidance/government-design-principles https://designsystem.digital.gov/ https://designsystem.digital.gov/ Good examples: https://www.healthcare.gov/ https://www.healthcare.gov/ https://bmv.ohio.gov/ https://bmv.ohio.gov/
- JHonaker 4y ago
  I didn't think I'd ever see anyone list the BMV as a good example of anything. I just recently learned that we can now renew our driver's license online though, so maybe it is getting better.
postalrat 4y ago
Where did you find a 30 minute course for doing backend stuff? For a friend.

48 points by nomilk 4y ago

ei8htyfi5e 4y ago

Read about designing on a grid. For the fastest cheat, look at UI kits or dribbble for inspiration. Search for the purpose of your page and then just copy the design. For 30 minutes that’s the best you can do.

nomilk 4y ago
> look at UI kits or dribbble for inspiration. Search for the purpose of your page and then just copy the design. This is great. Any recommendation for a TL;DR on designing on a grid?

solardev 4y ago

No offense, but this is like asking "how do I become a graphic artist and consumer behavior expert in 30 min or less". For now, just use someone else's designs. Use a component library like MUI (based off Google's Material UI) https://mui.com/ https://mui.com/ or one of the many ready-built templates (https://mui.com/store/#populars https://mui.com/store/#populars). These are higher-level than Bootstrap (as in, you're dropping in prebuilt UIs and not designing from the ground up like you would with Bootstrap). It will look way better than anything you try to learn about in 30 min. There are similar themes and such for Wordpress, Shopify, etc. I don't know what sort of app you're building, but the UIs can change a lot depending on use case. Your app will look generic, but that's better for your users than an backend engineer trying to hack something together with no experience. Once you're ready to learn, expect to spend a at least a few days to get a good enough understanding. I'd start with UX first if I were you, like this course series (maybe an hour or so?) https://www.linkedin.com/learning/user-experience-ux-for-non-designers?upsellOrderOrigin=default_guest_learning https://www.linkedin.com/learning/user-experience-ux-for-non... If you decide this is something you want to keep investing in, there's a much more detailed 9-hour course: https://www.linkedin.com/learning/paths/become-a-user-experience-designer?upsellOrderOrigin=default_guest_learning https://www.linkedin.com/learning/paths/become-a-user-experi... And then a 27-hour course for web design: https://www.linkedin.com/learning/paths/become-a-web-designer?upsellOrderOrigin=default_guest_learning https://www.linkedin.com/learning/paths/become-a-web-designe... And/or a similar 25-hour one for frontend dev, including design elements: https://www.linkedin.com/learning/paths/become-a-front-end-web-developer?upsellOrderOrigin=default_guest_learning https://www.linkedin.com/learning/paths/become-a-front-end-w... LinkedIn Learning (formerly Lynda) is very good, IMO, and well worth the money. I learned most of what I know there, moving from full stack to now a dedicated frontend person, learning a lot of design and UX along the way. I think it is realistic to be able to self-teach and become somewhat competent with frontend design in a few weeks, or several days of intense study if you really must. But you'll also have to make time to practice, publish, get feedback, iterate, etc. It is not realistic to do that in 30 min any more than you can teach someone to be a DB admin in 30 minutes. These are specialized careers for a reason. If you desperately need something done for a MVP, again, just buy someone else's design (or hire someone and learn from them). Then keep reusing design patterns that work for you and your users, and gradually improve them as you learn. Good luck and and have fun :) Edit: Also, if you want more specific guidance, tell us more details about what kind of app you're building, show us any UIs you already have, or the kind of information you want to show, what you're asking users to do, any sort of feedback or research you have on your target audiences, etc.

nomilk 4y ago
None taken, and thank you; I've bookmarked the courses and will do them in the near future when ample time's available to me :) Here's an example of a UI that makes me uneasy: https://i.imgur.com/MSay6jF.png https://i.imgur.com/MSay6jF.png Self-critiquing: - I loved the colours in isolation: the h1 (blue gradient) and h2 (purple gradient) look great with not too much else going on, but I feel with the reddish logo and blue button it gets a bit much. - Why did I have to colour the plan options? (my amateur brain still says: if you can try to make it look pretty, you should, which ends up overly ornate). - I think the radio buttons not aligning with the plans bothers me the most (that's easily detectable and fixed though, even by me). - I feel as though if I were a user of the app, I wouldn't think it was very professional. I can't figure out why though. About the app: It lets home occupants do smoke alarm checks remotely, rather than having to book someone to come and check them. I am undecided whether the app should have a "tech" look and feel, or a "tradesperson" look and feel. Perhaps I should consider that more deeply before trying to design it. I should also mention, I've taken some very short UX courses, and feel okay about UX, and I can implement most basic design patterns in a technical sense (e.g. spacing, colouring, responsiveness, sizing) - my main struggle is making it look professional.
- solardev 4y ago
  I think a common beginner tendency is to overuse color and other decorations (icons, fonts, etc.). Good design is often more about taking away fluff so you're left with the essentials, rather than adding unnecessary complexity. One area where UI/UX deviates from art is that ultimately you are not aiming for self-expression as a developer or company. Not yet, anyway... someday maybe your marketing & branding department can help with that, but at this early stage, less is more. So don't think of this as your personal art project, but rather your elevator pitch, your brief opportunity to help users decide if this is right for them, before they get bored/frustrated and leave. The following is my opinion only. Please feel free to disagree with any of it: - Don't overuse gradients or colors. Get rid of the gradients, and reduce your palette to 2-3 colors (max) and decide on a use case for each one, including a clear hierarchy of importance. Use them sparingly, and be able to say "this text/button/whatever should be color X, not my default color, because ______". "Because it's pretty" is not a good reason. A better one would be "I need to be able to differentiate between these three options, and I can't do it more effectively using spacing, flow, whitespace, etc., so my only remaining option is color." If in doubt, make all your primary actions the same red as your CheckEasy color, and choose a less visually prominent color as a secondary action color if you must, or just use black for that. > "[the app] lets home occupants do smoke alarm checks remotely, rather than having to book someone to come and check them." I am not really sure what this means. Isn't testing a smoke alarm mostly a matter of pushing the TEST button? Or is this some sort of smart smoke detector, like the Nest ones? Who is your target audience, and what are their needs? - But put yourself in your users' shoes and imagine what it's like to see this product page. "Oh wow, those are very expensive plans for a smoke detector service. Is that per month? Annually? What are the differences between the plans? Can I cancel easily?". They don't care about your colors, they want to know whether this service is right for them. A common way to do this is with pricing cards, like: https://thefront.maccarianagency.com/pricing https://thefront.maccarianagency.com/pricing - That page has a clear visual flow and uses a common pattern that users are likely familiar with: read the first header & paragraph for a brief description of what the product is and why they should consider it, then each plan has its main features highlighted. There is only one primary color (the blue) and the primary CTA ("Learn more") is distinguished by its prominence, because it is a filled button with a lot of that primary color. There is only one easy and large click needed to accomplish the user's desire ("I want this plan"), rather than having to try to precisely click a small radio button, then clicking a small link to read plan details, and then finally being able to check out. - In general, don't worry so much about the artistic/graphic design portion of this yet, but DO think hard about UX (that first hour or so course I linked to). Put yourself in your users' shoes, identify several types of mock users that you might try to attract (personas), and imagine what they come to your site for (do they already know about it? do they currently use a competing service? is there a particular frustration they're trying to solve?) and help them accomplish that by organizing your information for THEIR needs, not yours. Nobody will care about your color scheme if they can't find what they're looking for. In other words, instead of "tech vs tradesperson look and feel", understand who exactly is going to be using your site, and how to make it easier for them. Are there other websites or tools or apps they already use that you can copy to make yours seem more familiar? Can they feel at home even if they've never heard of your brand, just because it reminds them of something they already know? - You get to have fun with all the pretty art stuff later on, once you have the basic UX fleshed out more. Some designers will wireframe their UIs and general app flows purely in unstyled black and white to begin with, before adding any typography or color at all, because organization and whitespace (including the use of clear grids, like another poster mentioned) are much more powerful tools at directing user attention without causing needless distractions like too many colors would. - When in doubt, steal from someone else. I can't emphasize this enough. At this early stage, don't try to make your own design pattern or layout (or even color palette) if you don't have to. Steal from other companies and use their layouts. The pricing page is a great example of this. Look for commonalities between pricing pages you find clear and easy to use, and ask yourself if it's the gradients you really appreciate about theirs. Once you have more experience, you can CHOOSE to deviate from a common practice, but you should do so only with good reason... i.e., know the rules before you break the rules, not just because you think experimentation is cool. Again, this isn't your art project, this is your marketing brochure. And you're not a design company, so don't try to impress your audience with that. They likely won't care and it would just get in the way if done poorly.

pcbro141 4y ago

https://www.refactoringui.com/ https://www.refactoringui.com/ Commonly highly recommended UI book. From skimming the preview it looks good and practical. You have the taste of knowing when things don't look right, the book shows you why it doesn't look right and how to improve it with examples.

solardev 4y ago
This seems like a great book! Thanks for sharing.
rozenmd 4y ago
Came here to recommend this one too, great book.
nojs 4y ago
Second this, it’s one of the best overall summaries of the subtleties that make a UI work.
nomilk 4y ago
Going through the sample chapters and within 30 seconds finding myself chuckling at the beginner mistakes the book is pointing out not to make, for example presenting labels and values where values on their own would be sufficient [1]. And further down on the same page 'Combining labels and values' (I would almost always make the mistake of not combining them) - seeing the wrong and right ways side by side makes it obvious, even to me. EDIT purchased the pdf, will try to skim today. [1] https://www.refactoringui.com/previews/labels-are-a-last-resort https://www.refactoringui.com/previews/labels-are-a-last-res...
- nomilk 4y ago
  3 hours in (about 1/4 the way through), and it's definitely a worthwhile purchase. Here's https://i.imgur.com/E9wiiWo.png https://i.imgur.com/E9wiiWo.png another classic mistake I would naturally make. Seeing the wrong way and right way side by side makes it so obvious for a dummy like me.

sexy_seedbox 4y ago

7 Practical Tips for Cheating at Design (from Tailwind CSS author): https://medium.com/refactoring-ui/7-practical-tips-for-cheating-at-design-40c736799886 https://medium.com/refactoring-ui/7-practical-tips-for-cheat...

twoquestions 4y ago

Not a complete picture, but please make sure you have enough contrast. Even this very site is a bit guilty, but Apple's stuff is especially bad about having gray text on a slightly darker background, making it hard as hell to read. Please put enough contrast! https://www.contrastrebellion.com/ https://www.contrastrebellion.com/ Also look at more modern government websites, from both the US and UK. They aren't pretty in the conventional sense, but they work! https://www.gov.uk/guidance/government-design-principles https://www.gov.uk/guidance/government-design-principles https://designsystem.digital.gov/ https://designsystem.digital.gov/ Good examples: https://www.healthcare.gov/ https://www.healthcare.gov/ https://bmv.ohio.gov/ https://bmv.ohio.gov/

JHonaker 4y ago
I didn't think I'd ever see anyone list the BMV as a good example of anything. I just recently learned that we can now renew our driver's license online though, so maybe it is getting better.

postalrat 4y ago

Where did you find a 30 minute course for doing backend stuff? For a friend.