19 votes

UI/UX Design for web dev

Does anyone have any good resources, books or otherwise, in regards do good design for web dev? I'm a self taught full stack dev who just can't really make things look "pretty". They are functional, but..that's about it. I know CSS, but maybe I just don't have an eye for it?

Any suggestions would be great, thanks.

16 comments

  1. [3]
    stu2b50
    Link
    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.

    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.

    14 votes
    1. ButteredToast
      Link Parent
      Also potentially of interest is the pre-Yosemite version of the Apple HIG which goes into greater detail on some things and may be a better fit for those looking to build a great desktop...

      Also potentially of interest is the pre-Yosemite version of the Apple HIG which goes into greater detail on some things and may be a better fit for those looking to build a great desktop experience specifically, as it pre-dates the mobile-fication of desktop OSes.

      14 votes
    2. Sage
      Link Parent
      I've never heard of the HIG, and I like what I see. Thanks for the resource!

      I've never heard of the HIG, and I like what I see. Thanks for the resource!

      1 vote
  2. RheingoldRiver
    Link
    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...

    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

    8 votes
  3. [3]
    googs
    (edited )
    Link
    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...

    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!

    6 votes
    1. [2]
      Sage
      Link Parent
      This a great post, thank you! I've been kicking around the idea of getting the Refactoring UI book, mostly the price tag has stopped me. Did you find it very useful? I seem to be stuck at the...

      This a great post, thank you!

      I've been kicking around the idea of getting the Refactoring UI book, mostly the price tag has stopped me. Did you find it very useful? I seem to be stuck at the level of...able to write CSS no problem, but, it just looks flat and boring, I guess?

      You know the feeling when you come across a beautiful website, and you just kind of appreciate how nice it is? The font, the spacing, the color palette choice. A good site can stop me and make me dig through the dev console to see what's going on. I'd like to get there eventually. Do you think Refactoring UI is a book that can start me on that journey?

      1 vote
      1. googs
        Link Parent
        I think the book has some useful tips (to give you an idea, here are some section headers: Layout and Spacing, Designing Text, Working with Color, Creating Depth, Hierarchy is Everything) , but I...

        I think the book has some useful tips (to give you an idea, here are some section headers: Layout and Spacing, Designing Text, Working with Color, Creating Depth, Hierarchy is Everything) , but I have a feeling it doesn't have the silver bullets you're looking for. It's definitely more of a starting place/crash course, which is why I think its a shame that its so expensive. It's around 200 pages, but those pages are taken up by lots of pictures and large text, its definitely not very dense.

        1 vote
  4. [5]
    aetherious
    Link
    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'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.

    5 votes
    1. [2]
      BroiledBraniac
      Link Parent
      I'm gonna check this out. Been in the same boat as OP for the better part of a decade, and although having designers and using frameworks helps, it doesn't really address the missing "design eye"...

      I'm gonna check this out. Been in the same boat as OP for the better part of a decade, and although having designers and using frameworks helps, it doesn't really address the missing "design eye" skillset that's needed in addition to knowing how to make a design work technically.

      1 vote
      1. aetherious
        Link Parent
        I'm someone who likes looking at designs on Pinterest for fun, so I'm not the target audience, but I've found it helpful to learn some fundamentals to figure out why I like the designs that I do...

        I'm someone who likes looking at designs on Pinterest for fun, so I'm not the target audience, but I've found it helpful to learn some fundamentals to figure out why I like the designs that I do like. I do believe that having an eye for design is something that can be learned, but if it doesn't come naturally might require guidance from experts.

    2. [2]
      Sage
      Link Parent
      I'm going to give this a look. I've never heard of this website, look interesting! Thank you!

      I'm going to give this a look. I've never heard of this website, look interesting! Thank you!

      1 vote
  5. [3]
    geniusraunchyassman
    Link
    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...

    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.

    3 votes
    1. [3]
      Comment deleted by author
      Link Parent
      1. teaearlgraycold
        Link Parent
        Tailwind is more like CSS 4.0. Not a framework, just a new way to do styling.

        Tailwind is more like CSS 4.0. Not a framework, just a new way to do styling.

        1 vote
      2. Sage
        Link Parent
        Yeah, currently I use Tailwind sometimes on personal or small projects. Its alright, but my designs still aren't the greatest. Functional, but not aesthetically pleasing.

        Yeah, currently I use Tailwind sometimes on personal or small projects. Its alright, but my designs still aren't the greatest. Functional, but not aesthetically pleasing.

  6. HeroesJourneyMadness
    (edited )
    Link
    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...

    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.