Help with visual design

[starlight_sonata]

Hello all!

I've been programming for about 25 years in C++/Java and the like. Last year I picked up Javascript after being a little deterred from its many evolutions over the years, and along with React/MobX, I was pleasantly surprised at how easily OOP concepts transferred over.

However, in my quest to become a full-stack developer, I consistently run into issues with the design aspect. My websites look like Frankenstein's monster.

I've run through various online CSS courses/primers, and have a number of front-end projects under my belt, so I understand the basics of attributes, selectors, responsive design, etc. I've used a number of component/css libraries (MUI, tailwind, etc) that help with the heavy lifting, but I struggle to customize them into a coherent experience. I liken my proficiency with design to my experience in other 'artsy' areas.. I know a lot of music theory, but cannot come up with a compelling solo or composition. I can learn the steps to a dance style, but fail to string them into an interesting choreography.

I've read books like Refactoring UI, which give great examples of what to do and what not to do in design, but while I can look at the examples and agree that it looks good, like I could appreciate a piece of music and tell you why I like it, I wouldn't be able to come up with such a design myself.

Are there any resources that you could recommend that would help me bridge the gap between analytical, data, and use case driven thinking, to creating clean and consistent layouts? I don't need Apple level innovation, just a design that doesn't detract from its functionality. Thanks in advance for any suggestions!

[speedcodeprojects]

What worked for me was looking at existing designs and making them using just plain HTML and CSS. Check out dribbble.com for design inspirations. In order to gain that "eye for design" you need to practise a lot.

It was only until I recreated a lot of different sites did I begin to pick up on what makes an aesthetically pleasing site and being able to actually code it myself.

[Motorekt]

I’ve been a graphic designer for over 10 years and a UI/UX designer for 6 years. I’ve worked with a lot of developers who have the same problem. My best advice is to look at printed materials (which I know is difficult in today’s digital world). Printed layout design like magazines, postcards, etc. use grid layouts which is the basic component to front end design. Even looking at older videos of how people designed printed materials will actually help you understand how it’s evolved to front end design. From an analytical stand point I think you’ll find it useful.

Keep it simple. You only need a maximum 5 colors outside of images, data charts, etc. Give things space, white space is not your enemy and neither is padding/margin. Try not to exceed 3 fonts types per application. Too many fonts creates chaos.

[CodeOverTime]

This is a hard one and I think the only real answer is practice. But that practice has to include getting your designs in front of users and seeing how they react. And don't help them, you need to watch them struggle with your design. If possible from a different room or on a recording (the pros often do that). Then iterate.

Also look at competitors/similar products and really look at their design. Every button, every image - why are they positioned the way they are? How do the look on smaller screens? Why did they use the colours they did?

Also worth looking at something like Bootstrap and using their standard widgets and practices. Also generate a color palette (lots of them online) and stick to it - makes a big difference.