Ask HN: Making things look not-terrible – especially in HTML/CSS | Hacker News Reader

Ask HN: Making things look not-terrible – especially in HTML/CSS

14 pointsexplaingarlic15 comments

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.

View on HN

https://www.refactoringui.com/book and https://hellowebbooks.com/learn-design/ are good introductions for non-designers. Color selection, a bit of font theory, spacing, best use of icons.

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.

Agreed on Refactoring UI, would add that there are some free videos on YouTube[0] by the author that are brilliant too to trial in advance of getting the book. The videos alone improved my UI design quite a bit, from completely terrible to fairly terrible, but still better.

[0]: https://youtu.be/5gdYHlYAKDY

For simple overviews targeted at folks who are developers include:

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)

Use a UI component library like MUI or Bootstrap. There are a lot of them, and you can customize them to your needs.

I'm not a fan of Bootstrap components. I really only like bootstrap for consistency and the ease of use - it saves me writing a lot of CSS, which breaks often. None of the Bootstrap components do anything for me, at all.

Do you have any particular UI component libraries you like? I'd like something a bit more... flashy.

I work with Material UI professionally quite a bit, but it's not flashy. No matter which you choose, I'd use it as a starting point and add your own flair.

I disagree - this makes it easy to get dependent on these, and their associated download-size bloat.

I think the best thing you can do is to keep it simple. Always ask yourself are you making it flashy for yourself, either because you're procrastinating or because you personally like the particular flash. And then ask yourself, does my audience care? Plenty of examples of "poorly" designed websites that dominated their market share. The users don't generally care.

To 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.

Problem is there are many ways to do something in CSS and a lot of CSS is kinda ugly.

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.

I know how you feel. I was just trying to make a demo a bit nicer looking for work: "Uhh...maybe if I add rounded corners...?"

Nice to see so many interesting suggestions here!

99% of time, i can get away "borrowing" from some pattern: http://ui-patterns.com/

To be honest, this is exactly what I was looking for :) Thanks!

I am in same boat since a long time. I think you should consider hiring someone on fiverr. They do the design for you and then you go and implement it in html/css.

i know there have been 'design courses for (idiot) programmers' that i heard about thru indiehackers or similar. i believe it's maybe prob decent, and almost certainly costs money. maybe a google search would find it?

sounded like it started from an organic place - some idiot programmer asking his design-y friend for advice. and it spiraled from there.

use flex box. and make sure to put this line everytime you use css

* { box-sizing: border-box; }

Reply on news.ycombinator.com