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.

EDIT purchased the pdf, will try to skim today.

[1] https://www.refactoringui.com/previews/labels-are-a-last-res...

Here's 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.

This is great.

Any recommendation for a TL;DR on designing on a grid?

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/

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.

Here's an example of a UI that makes me uneasy: 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.

Sorry, I didn't catch this part at first (or maybe we simuledited/posted). A lot of the implementation of good UIs comes down to tweaking a ton of small details, but you shouldn't start with that. The main challenge of UX isn't measured in pixels or hex values, but in clarity of organization and ease of navigation.

Being a good speller doesn't necessarily make you a good writer, and a good story won't be ruined by a few typos here or there. Similarly, getting every pixel of whitespace perfect isn't going to help your users if they can't easily find relevant information and act on it, but if you have a clear organization, your users will forgive (or not even notice) a wrong color or font size somewhere, or a misaligned column if it's not too bad.

It's helpful to start with the big-picture stuff (personas, journeys, information architecture) before making individual app pages.

Once you figure out what information each page needs to contain, THEN you can figure out how to lay them out. Steal from better designers whenever possible. Seriously, that is sooooo much of whats a good webpage good -- stolen best practices, copied ad infinitum from other designers and reused with minor modifications. Just like a car, a vastly different steering wheel & dashboard typically isn't a good thing. Just give your users what they need in the way they expect to get it, and don't deviate unless you have a good reason.

If you like, you can use a free design tool like Figma to lay things out visually before coding them. It may or may not make for faster experimentation, depending on whether you work better visually or in markup. Here's a Bootstrap library for Figma: https://www.figma.com/community/file/876022745968684318

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

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

> Isn't testing a smoke alarm mostly a matter of pushing the TEST button? ... Who is your target audience, and what are their needs?

Testing is as simple as you describe; the software helps record details for each test and in the event of any dispute is a source of truth - a kind of 'keep your ducks in a row' kind of software. The audience are property tenants, property managers, and landlords.