UI/UX Design for web dev

Not strictly web related, but regardless of what you think of their products the Apple HIG is one of the best pieces of freely available literature on application UI/UX.

The secret is that designers copy each other's work just as much as programmers do. Google sites doing the same thing as yours, pick the layout of one, the colors of another, and the look & feel of the third, and congrats you have an original design that will probably look good

If you're interested in the UX side of things, I'd recommend Laws of UX. It uses some principals from psychology to explain why well-thought-out designs that adhere to certain rules feel easier to use/understand and how you can use some of those rules in your own designs. I grabbed a copy of the book from Amazon, but I think most of the information from the book is on that webpage.

For UI, you could check out Refactoring UI from the people that make Tailwind. I think it's a pretty solid resource, but it's kind of pricey and most of what's in it can be learned from free resources online. But it's a nice crash-course that covers a lot of the basics and could save you some research time.

Some other random, disorganized thoughts that come to mind from my own experience:

• Every design has to come from somewhere. Don't be afraid to be inspired by other designs you find online. Find websites that you like and think about how they accomplish what they do. Maybe you need to use a larger font size or add more padding to your own designs. Whatever it may be, inspecting good designs can help you figure out the pieces you might be missing (and this doesn't only have to come from web UI. You could look at video game UI, mobile apps, or even real-life physical interfaces).
• Like anything else, it takes practice to become a better UI designer. As you design more and more things, you'll find things that you like and that you think work well. Committing these things to your own mental palette takes time (but with routine practice, maybe not as long as you might think!).
• When designing, try out different fonts. Even just setting the global font of your site to something like Inter or Roboto over the default sans-serif can go a long way to making something look a little more professional instead of just thrown together (a lot of this is, of course, personal preference). And not everything needs to be the same font. You'll notice this in things like news articles, where they might use a bold, serif font for a headline, but a light sans-serif for the article body.
• A tip I learned from that Refactoring UI book: try to oversize things and then tweak them smaller until you have the look you want. For example, when it comes to padding an element, try to apply more padding than you think you need first and then reduce it until it looks right. Generally, you'll get a better result this way rather than working the other way around. Say you have a card element on your page and you think it needs 10px padding. Try 30px first and see how it looks. Then try 20px, then 15px, etc. A lot of times, a little bit of extra padding can make a design look much nicer. And this can apply to all elements on your webpage, whether its font size, content area width, margin between elements, etc. (and don't feel like you need to try every px size for everything! This is where a good design system like Tailwind can help by reducing your options to p-1, p-2, p-3, etc.)
• Almost every element on your page will likely need a little bit of padding/margin. Generally, you don't want things like text touching borders, borders of adjacent elements touching each other, etc. (but sometimes breaking these conventions can give a cool, retro look. It all depends on what you're going for!). Just look at the Tildes page this post is on. You'll be hard-pressed to find any elements that don't have some spacing around them, even if it's just a little bit.
• With UI design, avoiding duplicate code is just as important as any other part of an application. Use a Javascript framework (React, Vue, Svelte, etc.) to help build your pages into reuseable chunks/components. Or if you're not a fan of rendering things client-side, use a static site generator (Hugo, 11ty, Gatsby, etc.) to enable the same sort of code reuse. Not only does this help with making your code easier to maintain (and your UI easier to tweak), but it'll also make your UI more consistent and the human brain loves consistency. For example, if you have a lot of buttons on a webpage, they should all probably be using the same markup/styles unless there's a good reason to deviate.

There are probably a hundred other things I could write here, but just wanted to throw out some things I think about when working on UI designs for anyone that might find it helpful!

I'm not a developer and this isn't strictly UX design, but Design Academy has a free design fundamentals course and they target their teaching towards developers.

I can relate to being a dev with no real design brain.

Why not just go with a CSS framework? I use Fomantic CSS which is a fork of Semantic CSS. Kind of takes the hard work out of laying out UI with consistent styling.

I think Tailwind is the new framework of choice. Way back when, Twitter made a standardized CSS scaffolding called Bootstrap, and there were several others that were layered onto like React and other “frameworks”.

On occasion I’ll dig into the most popular/latest WordPress themes to discover other CSS templates and frameworks- there used to be a lot of different shoulders to stand on with CSS - especially to make things responsive / mobile friendly, but “swiping” from themes is a great way to figure out font pairings, kerning, padding, etc.

I also like looking at CSS Tricks for fancy tricks and tips.

There’s a design newsletter I get as well, but email’s not currently loading, so I’ll add that in a bit.

CoDrops is the newsletter- here’s a link to the latest issue.