Ask HN: How can I improve UI dev skills? Looking for real-world examples

#1

Post by im_lince » Tue, Sep 17, 2024, 4:05 PM UTC

I’m currently working on improving my design skills, especially in the area of UI/UX. This week, my focus is on understanding how great products develop and manage their user interfaces.

I have a few questions that I’d love some insight on:

What key design principles do great products follow when building their UI? How do they handle large components in their interface while maintaining usability and consistency? Any best practices or resources you'd recommend for tackling complex UI/UX challenges?

Re: Ask HN: How can I improve UI dev skills? Looking for real-world examples

#2

Post by JLCarveth » Tue, Sep 17, 2024, 5:58 PM UTC

I've found https://www.refactoringui.com/ to be quite helpful, you can get the first two chapters for free.

Re: Ask HN: How can I improve UI dev skills? Looking for real-world examples

#3

Post by im_lince » Tue, Sep 17, 2024, 6:35 PM UTC

JLCarveth wrote: post #2

I've found https://www.refactoringui.com/ to be quite helpful, you can get the first two chapters for free.

Cool, thanks for suggesting this.

Re: Ask HN: How can I improve UI dev skills? Looking for real-world examples

#4

Post by solardev » Tue, Sep 17, 2024, 7:50 PM UTC

JLCarveth wrote: post #2

I've found https://www.refactoringui.com/ to be quite helpful, you can get the first two chapters for free.

Seconding this. It's one of the best resources I've seen and easily worth the money.

frontendmasters.com and LinkedIn Leaning also have good video courses.

Also see MUI.com as a nice way to structure a component framework.

Beyond that, work with a good designer, make Figmas before you code, test out the flows, iterate it, and then throw everything away and do it again 2 years later when fashions change (sigh).

A lot of what we see as good/modern design is just fashion cycles of designers stealing from each other. For a while everything looked like Yahoo, then everything looked like Google, then everything looked like Bootstrap, and now everything looks like Tailwind/Vercel. It's the designer equivalent of Stackoverflow.

Re: Ask HN: How can I improve UI dev skills? Looking for real-world examples

#5

Post by meiraleal » Wed, Sep 18, 2024, 12:37 AM UTC

Design systems. Study many of them. There are great ones coming focused on web components (the most interesting the ones based on Lit).

Here is an extensive list: https://github.com/alexpate/awesome-design-systems

Re: Ask HN: How can I improve UI dev skills? Looking for real-world examples

#6

Post by Leftium » Wed, Sep 18, 2024, 2:14 AM UTC

https://doing-design-right.com/

> ... how to solve complex interface tasks by redesigning a real-life app used by more than 2 million users.

> In this course, you will work on a real-world application, not a fake one. It already exists and is called Fedica. Its interface is outdated and has many issues.

Re: Ask HN: How can I improve UI dev skills? Looking for real-world examples

#7

Post by rozenmd » Wed, Sep 18, 2024, 5:46 AM UTC

Build things and get feedback as you go.

Re: Ask HN: How can I improve UI dev skills? Looking for real-world examples

#8

Post by Adrig » Wed, Sep 18, 2024, 8:32 AM UTC

Design principles:

— Don't reinvent the building blocks of UI. It's mostly a designer problem than a dev problem but I often see folks reinventing navigation, buttons, or forms when the standard pattern would work fine. There is a high UX cost to breaking existing patterns.

— Think in flows, not screens. Gather the context for the starting point, the objective of your feature and create the path between them. I like using the job to be done framework for this

— Speaking of frameworks and tools, simple is almost always the best. Don't buy into a complex process designers came up to legitimate their job. Find out what to build and how to build it. Use reference, user interviews, data analysis, existing patterns and you'll be more than fine

Large components:

— Look into design systems, it's a whole topic. My advice for 90% of software companies is to have a small but robust design system with the basics well documented (typography, spacing, colors, basics UI components). Then jam with it depending on your needs. Extensive design systems require a dedicated designer and dev to maintain. More often than not, they end up as pure chaos without them.

Resources:

I have a ton, I put them all in a Notion list, feel free to check https://impasto.notion.site/Adrien-s-list

Re: Ask HN: How can I improve UI dev skills? Looking for real-world examples

#9

Post by im_lince » Wed, Sep 18, 2024, 2:56 PM UTC

Adrig wrote: post #8

Design principles: — Don't reinvent the building blocks of UI. It's mostly a designer problem than a dev problem but I often see folks reinventing navigation, buttons, or forms when the standard pattern would work fine. There is a high UX cost to breaking existing patterns. — Think in flows, not screens. Gather the context for the starting point, the objective of your feature and create the path between them. I like…

Cool, i will check out the notion list. Plus, I have one more question: how can I structure the code properly? For example, if I have custom UI components, state management, page layout, types, etc., how do I organize this in a proper structure? for example, checkout folder structure of this project: https://github.com/firecamp-dev/firecamp/tree/main/packages

Re: Ask HN: How can I improve UI dev skills? Looking for real-world examples

#10

Post by Adrig » Wed, Sep 18, 2024, 3:04 PM UTC

im_lince wrote: post #9

Adrig wrote: post #8

Design principles: — Don't reinvent the building blocks of UI. It's mostly a designer problem than a dev problem but I often see folks reinventing navigation, buttons, or forms when the standard pattern would work fine. There is a high UX cost to breaking existing patterns. — Think in flows, not screens. Gather the context for the starting point, the objective of your feature and create the path between them. I like…

Cool, i will check out the notion list. Plus, I have one more question: how can I structure the code properly? For example, if I have custom UI components, state management, page layout, types, etc., how do I organize this in a proper structure? for example, checkout folder structure of this project: https://github.com/firecamp-dev/firecamp/tree/main/packages

This is where my expertise ends as a designer, sorry!

What I meant about small design system is also true on the code side, since a proper design system is this design / code mirroring.

This is where js frameworks help a lot since you can create components with properties and nest them, but that's about all I know about FE-eng