Tips on UI/UX design for a code guy

I started off as a UI designer but now I’m full time dev. My advice is to work on your taste rather than skills.

Skills are important, but if you never used design tools before, it’s just unrealistic to pickup in short time.

As of skill, I highly recommend Tailwind. It is both a decent design system and a very handy CSS lib to build things FAST AND GOOD. Totally next level stuff.

Back to taste. Taste can be cultivated by simply viewing good works from others. You just need to know where to land your eyes.

Start from CRAP (Contrast, Repetition, Alignment, Proximity) rules. Seriously, spent time on it. This is the single most valuable mindset to learn for any non-designer.

Here’s how you can cultivate your taste. Once you learn the rules, just go view websites/apps that you intuitively admire. Analyze them by spotting how CRAP rules are applied in their design.

Yes, it’s that simple. But it allows you to bring your instinct for beauty into your conscious brain and consolidate as a mindset that’ll guide you to make decisions about what is good/bad design. This is what taste really is, it’s the mindset that guides you.

Still you need to learn by copying/stealing from others. Build stuff. If unsure, just build a personal website. It’s the perfect project to experiment. You need to get your hands dirty so that you can internalize what you’ve learned by viewing.

I see templates mentioned multiple time. I never had any good experience with templates. The problem is they often come with too many things, hard to customize, and I ended up wrestling with the tool alot. To me it’s easier to copy good ideas from templates, but still prefer building from ground up.

• Keep it simple.
• Use no more than 2 fonts and keep the weights and variations to a minimum.
• Consistency is key - for UI and interactions.
• Copy is incredibly important, say as much as you can in as few words as possible.
• Keep a limited colour palette (a primary and secondary that work together) and think carefully about usage.

There are lots of free design system templates on figma, use a boilerplate to get going. I have a good list of free ones here https://www.designerlynx.io/community-templates

Don't reinvent the wheel - use expected interaction patterns and don't get in the way of people investigating or using your product.

Happy to take a look at any designs you have if you want any feedback :)

Good luck!

What do you find most difficulty with. Before putting something out there, imagine yourself using that particular platform and how you would navigate it, helping you with the UX side of things. Try and prioritise user experience - especially if design isn't your strong point, something can look visually appealing but if the UX is poor people will tend to avoid it.

Lots have spoken to the UI issue. For UX, you really need to treat it in the way that you should be treating the rest of your product: You need to develop proposals and share that with your customers or prospective customers. Then, judiciously include that which you are hearing people need and be careful not to include things that distract from helping people achieve the work they are trying to achieve through your product.

If you developed a business oriented proof-of-concept, and did it well, then you understand the jobs-to-be-done and your UX will make completing that job splendidly easy. All of your effort should go into minimizing the effort required to complete that job.

UI components should be viewed as a means by which you improve on making the job easy. Fancy, attractive things that help get the job done - great! Fancy, attractive things that don't help get the job done are distractions and irritants.

I wrote a post that may be helpful to you in this regard: https://www.softwareprophets.com/insights/prototyping-a-saas-app/

You may also benefit from understanding the business proof of concept, if that's not something you've explored previously.

https://www.softwareprophets.com/insights/what-is-a-proof-of-concept/

I'd try to re-create designs on dribbble. Also put hard limit of 3 font sizes initially. Also, always be strict about your spacings. Think about spacing as folders where each higher level folder has twice as big spacing visually with the next one.

And the most important - train, even if it looks ugly. After 20 ugly once your skill will be way better

Great question. Tagging along - is there a resource one could use to have "tutoring" 1:1 by a designer/UX person who you can talk things out with and they can teach you how to design more efficiently? Like CodeMentor but for design?

As a coder, treat UI/UX as a code.

1. Reuse when possible: consistency in the UI makes a huge difference
2. Custom-build when needed: a few "nice touches" here and there to delight users
3. Document unless obvious: communicate liberally what each element does, and what will happen next
4. Use standard library: platform-provided buttons, forms, and other elements are already built with the proper UX and a11y out-of-the-box
5. Adopt best practices: limited color palettes, consistent spacing, typographic scale, contrast ratio

"Looking good" is subjective, but "working well" is pretty much a technical task. UI and UX is mostly about helping people achieve what they need to do with your product.

Man, i want to say. Just start building terribly. Iterate and improve. Build, analyze(show to people), receive feedback, do better. I think this is the cheatcode to anything. And also train your style. Look everywhere you can to find inspiration(good design)

As a developer myself, I can understand this totally! You could try out various CSS frameworks too such as Tailwind CSS, or component libraries, which provide pre-built components you can make use of.

Or you could create mockups using UI kits in Figma before coding or redesigning your app. By creating a quick mockup, I generally find the design aspect a bit easier haha

Frankly, in terms of UI there are plenty of templates out there that can get you started. So, from my own POV, do not worry much about the design of the idea, and put that extra thought into the experience.

Since if it looks good but is unintuitive then it won't create an overall good experience. But if the user experience is well designed, and intuitive then a decent design would do just fine.

So the short answer is, focus on decent design, great user experience.