Ask HN: Making things look not-terrible – especially in HTML/CSS
Every time I try to make something that looks worthwhile, it looks like total garbage. I don't understand what to do when it comes to building UI components that make sense visually, are halfway-decent for UX (especially first time) and are visually pleasing.
Any resources for help? Anything you guys use? An easily scroll-able and search-able site that has CSS/HTML tricks that look neat?
Reading resources also welcome - I doubt any book would get me out of the slump of working for 5 hours on an image gallery that should take 30 minutes.
17 comments
[ 3.2 ms ] story [ 44.6 ms ] threadTo answer your question, I like to add a lot of placeholder text and images to all the columns and divs I plan on incorporating into the layout. When you are designing from scratch it's easy to say your color scheme or border choice looks bad, because it all looks too empty or scarce.
Start with the content first and use design to make it the content as accessible and efficient(UI) as possible, that's the most important thing IMO.
My approach was reading some good CSS books (Handcrafted CSS is a good one, Stylin' with CSS is another) and articles, also find sites with the look you like.
With an understanding how good CSS works, you can better use a browser's CSS inspector to identify the key elements that make the layouts work in your favorite sites, create test pages and build your own stylesheet.
Alternatively shop for with a pre-made CSS library (there's tons of em out there), I'd look for lightweight ones where figuring out how it works is more of a possibility.
sounded like it started from an organic place - some idiot programmer asking his design-y friend for advice. and it spiraled from there.
refactoringui is by the author of tailwind CSS framework. Later launched https://tailwindui.com/#components It costs money, I use the screenshots for inspiration only.
[0]: https://youtu.be/5gdYHlYAKDY
https://www.dreamtruegroup.com/container-lifting-trailer/
https://www.dreamtruegroup.com/lowbed-trailer/
https://www.taniarascia.com/design-for-developers/ (Tania Rascia's take is my favorite, for its clarity and scope, even though I disagree with a few of the suggestions)
https://paul.copplest.one/blog/design.html (Paul Copplestone's is a little less up my alley, but some folks prefer it)
Do you have any particular UI component libraries you like? I'd like something a bit more... flashy.
Nice to see so many interesting suggestions here!
* { box-sizing: border-box; }