> 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

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

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

Amazing advice. I'm going to do all of this.

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