4 ms·

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

14 points by explaingarlic 5y ago

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.

slipwalker 5y ago
99% of time, i can get away "borrowing" from some pattern: http://ui-patterns.com/ http://ui-patterns.com/
- explaingarlic 5y ago
  To be honest, this is exactly what I was looking for :) Thanks!
woollymallard 5y ago
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!
KhyberNomad 5y ago
use flex box. and make sure to put this line everytime you use css * { box-sizing: border-box; }
cybarDOTlive 5y ago
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.
LarryMade2 5y ago
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.
readonthegoapp 5y ago
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.
mtmail 5y ago
https://www.refactoringui.com/book https://www.refactoringui.com/book and https://hellowebbooks.com/learn-design/ 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 https://tailwindui.com/#components It costs money, I use the screenshots for inspiration only.
- UglyToad 5y ago
  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 https://youtu.be/5gdYHlYAKDY
throwaway158497 5y ago
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.
michaelyuan2012 5y ago
Container Lifting Trailer for logistics, it's only for you check when you free. https://www.dreamtruegroup.com/container-lifting-trailer/ https://www.dreamtruegroup.com/container-lifting-trailer/
michaelyuan2012 5y ago
also Lowbed Trailer for heavy machines transport welcome to inquiry, Tel, whatsapp：+86-15099927791 DTG Group Trailer https://www.dreamtruegroup.com/lowbed-trailer/ https://www.dreamtruegroup.com/lowbed-trailer/
LukeBMM 5y ago
For simple overviews targeted at folks who are developers include: https://www.taniarascia.com/design-for-developers/ 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 https://paul.copplest.one/blog/design.html (Paul Copplestone's is a little less up my alley, but some folks prefer it)
schwartzworld 5y ago
Use a UI component library like MUI or Bootstrap. There are a lot of them, and you can customize them to your needs.
- the__alchemist 5y ago
  I disagree - this makes it easy to get dependent on these, and their associated download-size bloat.
- explaingarlic 5y ago
  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.
  - schwartzworld 5y ago
    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.

14 points by explaingarlic 5y ago

slipwalker 5y ago

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

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

woollymallard 5y ago

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!

KhyberNomad 5y ago

use flex box. and make sure to put this line everytime you use css * { box-sizing: border-box; }

cybarDOTlive 5y ago

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.

LarryMade2 5y ago

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.

readonthegoapp 5y ago

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.

mtmail 5y ago

https://www.refactoringui.com/book https://www.refactoringui.com/book and https://hellowebbooks.com/learn-design/ 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 https://tailwindui.com/#components It costs money, I use the screenshots for inspiration only.

UglyToad 5y ago
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 https://youtu.be/5gdYHlYAKDY

throwaway158497 5y ago

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.

michaelyuan2012 5y ago

Container Lifting Trailer for logistics, it's only for you check when you free. https://www.dreamtruegroup.com/container-lifting-trailer/ https://www.dreamtruegroup.com/container-lifting-trailer/

michaelyuan2012 5y ago

also Lowbed Trailer for heavy machines transport welcome to inquiry, Tel, whatsapp：+86-15099927791 DTG Group Trailer https://www.dreamtruegroup.com/lowbed-trailer/ https://www.dreamtruegroup.com/lowbed-trailer/

LukeBMM 5y ago

For simple overviews targeted at folks who are developers include: https://www.taniarascia.com/design-for-developers/ 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 https://paul.copplest.one/blog/design.html (Paul Copplestone's is a little less up my alley, but some folks prefer it)

schwartzworld 5y ago

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

the__alchemist 5y ago
I disagree - this makes it easy to get dependent on these, and their associated download-size bloat.
explaingarlic 5y ago
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.
- schwartzworld 5y ago
  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.