I highly recommend refactoringUI if you're a dev looking for practical advices on how to make better UI.
Also, from experience, back-end folks often think of UI as fancy color scheme, but imho what they most often get wrong is proportion and spacing, so this is probably where I'd start to improve. For instance, read on visual hierarchy and white space.
We are in fact the same and this is a broad overview how I do this. I plan to go more in depth in future articles by either 1) customizing bootstrap properly or 2) how to use tailwind
I love Tailwind, it's a valuable tool, I use it every day in my job, but, it requires quite a bit of preliminary understanding of CSS rules to use effectively. The author mentions this, but I feel it's worth repeating. Bootstrap is a lot more robust to prettify a "programmer UI", especially in the area of forms and inputs.
One of my favorite things about Tailwind is the documentation. You’re right that you need to understand CSS, but if you know what you need in vanilla CSS you can find it in an instant in the Tailwind docs. Then it gradually becomes second-nature.
I feel, these days making a web app look reasonably good is the easy part. Plenty of templates, color schemes, etc paid or free to pick from.
The hard part is actually getting a good user experience. Which is just in part learning about and applying research done in this area, and on the other fighting off all the trash people want to shove into the app for engagement and growth.
Never heard of Heroicons before (looks like they're made by the same company that makes the other products listed on the website.)
But I've used FontAwesome before which I believe (or hope) is still the industry standard for free icons: https://fontawesome.com/ . Not sure if Heroicons or something else has displaced it in popularity rankings.
The other products -- Unsplash for photos, Undraw for illustrations -- were pretty cool references though and I'll be bookmarking them. Does anyone know if there are other resources for photos & illustrations that are popular among web developers?
12 comments
[ 3.0 ms ] story [ 35.0 ms ] threadAlso, from experience, back-end folks often think of UI as fancy color scheme, but imho what they most often get wrong is proportion and spacing, so this is probably where I'd start to improve. For instance, read on visual hierarchy and white space.
There’s barely any research in this post.
The hard part is actually getting a good user experience. Which is just in part learning about and applying research done in this area, and on the other fighting off all the trash people want to shove into the app for engagement and growth.
Making it look good & not bloated still remains a challenge.
But I've used FontAwesome before which I believe (or hope) is still the industry standard for free icons: https://fontawesome.com/ . Not sure if Heroicons or something else has displaced it in popularity rankings.
The other products -- Unsplash for photos, Undraw for illustrations -- were pretty cool references though and I'll be bookmarking them. Does anyone know if there are other resources for photos & illustrations that are popular among web developers?