HACKER Q&A
📣 nomilk

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


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.


  👤 pcbro141 Accepted Answer ✓
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.


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

👤 ei8htyfi5e
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.

👤 twoquestions
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/

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://designsystem.digital.gov/

Good examples:

https://www.healthcare.gov/

https://bmv.ohio.gov/


👤 solardev
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/ or one of the many ready-built templates (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...

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-experi...

And then a 27-hour course for web design: 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-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.


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