4 ms·

As a developer, my problem with css has always been this: I want to build a website for some project I'm working on, then I realize I have no idea how to desi

As a developer, my problem with css has always been this: I want to build a website for some project I'm working on, then I realize I have no idea how to design it, so I start looking for nice looking templates online and get to a rabbit hole of templates that has nothing to do with css. Them I basically realize that css is not my (first) problem. I have no idea how to design a website that looks good.

gamerDude 5y ago
I have this problem too. And unfortunately as I go through the templates. I don't really like any of them. And I generally quit and just use basic bootstrap. And even the templates I have used end up being so incredible messy and full of things like bootstrap overrides that effect the rest of the site in unexpected and unwanted ways that I try to stay away from them as much as possible now. I just really want isolated designed components that I can put around the site. But I haven't found an option I like their either. :(
tomcooks 5y ago
I suggest taking an used A4 piece of paper and fold it in thirds on both the horizontal and vertical side. Holding the paper vertically, you'll notice you now have 3 main sections (header, intro, rest of the page) and 3 columns you can arrange your content into. Take another A4 piece of paper, fold it in 3 and then in half this time, you'll have 3 main sections and 2 columns in each section. Now cut each of the 3 blocks from each paper, you will end up with 6 sections (3 with 3 columns and 3 with 2 columns) Try and write some of your content down on these 6 Lego blocks you created, sketch images (or just draw a rectangle with an X inside, that means "image placeholder" in graphic design layouts). This exercise will help you understand how design is just content split in manageable parts. You'll soon notice most sites are not monoliths, but the very same blocks you jotted down on paper. This will make your template-scavengig effective, you'll notice you like certain types of blocks (say 3 columns with a background image) and dislike others (say hero banners with buttons). Steal the ones you like (crop screenshots and save them), then see if you can see what you like in each of those you saved. Try and recreate them as abstractly as you can either on paper or by using the rectangle tool in any graphic editor (don't get lost making it perfect, you'll get there faster by doing it by code instead than using graphic design tools). Toy with design, it's all a fad anyway and what matters is what I've outlined here: blocks, columns, steal what you like.
sireat 5y ago
You are not alone. I have a decent amount of experience starting with plain HTML in 1995 and table based layouts in late 199xs. Modern CSS grid named areas are awesome! However, whenever I teach at bootcamps and at a university 90% of my students produce better homework than my own pages. It is a combination of lack of design chops and lack of time to perfect. I can talk about transitions, color theory and everything but I have no eye for it. So I when I need something quick and dirty I fall back to Bootstrap at least it will not be absolutely horrible.
JoeyJoJoJr 5y ago
Most bad designs I’ve seen can be dramatically improved with some very basic design concepts that I think most developers can learn, at least towards getting the design looking relatively ‘clean’. If you can’t apply a theme or make use of a designer, keep all your colors gray, and just focus on the shades. Darker shades to bring emphasis. Secondly, make sure there is consistent padding, margins, and alignments. This is more tricky because it requires you to see the empty spaces and think of them as their own elements. Always be looking for areas of inconsistency and misalignment. This finicky because just two pixels offset here and there can have a big impact, but it is very much worth making thing look more consistent. Lastly, look for opportunities to reduce the total number of visual elements in busy areas (within reason). Good examples of superfluous elements example might be outlines around icons, underlines, borders, two “empty space rectangles” that can become a single rectangle. I’ve found 70% of my design methods are just applying these three concepts over and over again, and formulating somewhat logical principles to apply them. My designs aren’t as good as what a designer would produce, but are much higher quality than I didn’t apply any thought to design at all.
zebraflask 5y ago
That rings true. I was looking for a static site template just earlier today (along the lines of Hugo, Jekyll, etc.) and was quickly reminded that a lot of templates available online, and there are thousands both free and paid ... do not look that great or work that well. Even ones you like at first blush will likely need a ton of customization to fit your use case. Rabbit hole, indeed! For picking a usable one, I think other comments in the thread have it right: look for basic things like consistency of the spacing, non-obnoxious colors and fonts, etc. Does it just seem "clean" and usable at first glance, or does it give you an instinctive mental itch that something about it seems clunky or poorly done? Or too contrived or too opinionated for your use case? And whether or not the design breaks on mobile. Even if you don't really care about mobile for your use case, if a pre-built design gets it right, that's a good indicator that some care and thought went into it.

gamerDude 5y ago

I have this problem too. And unfortunately as I go through the templates. I don't really like any of them. And I generally quit and just use basic bootstrap. And even the templates I have used end up being so incredible messy and full of things like bootstrap overrides that effect the rest of the site in unexpected and unwanted ways that I try to stay away from them as much as possible now. I just really want isolated designed components that I can put around the site. But I haven't found an option I like their either. :(

tomcooks 5y ago

I suggest taking an used A4 piece of paper and fold it in thirds on both the horizontal and vertical side. Holding the paper vertically, you'll notice you now have 3 main sections (header, intro, rest of the page) and 3 columns you can arrange your content into. Take another A4 piece of paper, fold it in 3 and then in half this time, you'll have 3 main sections and 2 columns in each section. Now cut each of the 3 blocks from each paper, you will end up with 6 sections (3 with 3 columns and 3 with 2 columns) Try and write some of your content down on these 6 Lego blocks you created, sketch images (or just draw a rectangle with an X inside, that means "image placeholder" in graphic design layouts). This exercise will help you understand how design is just content split in manageable parts. You'll soon notice most sites are not monoliths, but the very same blocks you jotted down on paper. This will make your template-scavengig effective, you'll notice you like certain types of blocks (say 3 columns with a background image) and dislike others (say hero banners with buttons). Steal the ones you like (crop screenshots and save them), then see if you can see what you like in each of those you saved. Try and recreate them as abstractly as you can either on paper or by using the rectangle tool in any graphic editor (don't get lost making it perfect, you'll get there faster by doing it by code instead than using graphic design tools). Toy with design, it's all a fad anyway and what matters is what I've outlined here: blocks, columns, steal what you like.

sireat 5y ago

You are not alone. I have a decent amount of experience starting with plain HTML in 1995 and table based layouts in late 199xs. Modern CSS grid named areas are awesome! However, whenever I teach at bootcamps and at a university 90% of my students produce better homework than my own pages. It is a combination of lack of design chops and lack of time to perfect. I can talk about transitions, color theory and everything but I have no eye for it. So I when I need something quick and dirty I fall back to Bootstrap at least it will not be absolutely horrible.

JoeyJoJoJr 5y ago

Most bad designs I’ve seen can be dramatically improved with some very basic design concepts that I think most developers can learn, at least towards getting the design looking relatively ‘clean’. If you can’t apply a theme or make use of a designer, keep all your colors gray, and just focus on the shades. Darker shades to bring emphasis. Secondly, make sure there is consistent padding, margins, and alignments. This is more tricky because it requires you to see the empty spaces and think of them as their own elements. Always be looking for areas of inconsistency and misalignment. This finicky because just two pixels offset here and there can have a big impact, but it is very much worth making thing look more consistent. Lastly, look for opportunities to reduce the total number of visual elements in busy areas (within reason). Good examples of superfluous elements example might be outlines around icons, underlines, borders, two “empty space rectangles” that can become a single rectangle. I’ve found 70% of my design methods are just applying these three concepts over and over again, and formulating somewhat logical principles to apply them. My designs aren’t as good as what a designer would produce, but are much higher quality than I didn’t apply any thought to design at all.

zebraflask 5y ago

That rings true. I was looking for a static site template just earlier today (along the lines of Hugo, Jekyll, etc.) and was quickly reminded that a lot of templates available online, and there are thousands both free and paid ... do not look that great or work that well. Even ones you like at first blush will likely need a ton of customization to fit your use case. Rabbit hole, indeed! For picking a usable one, I think other comments in the thread have it right: look for basic things like consistency of the spacing, non-obnoxious colors and fonts, etc. Does it just seem "clean" and usable at first glance, or does it give you an instinctive mental itch that something about it seems clunky or poorly done? Or too contrived or too opinionated for your use case? And whether or not the design breaks on mobile. Even if you don't really care about mobile for your use case, if a pre-built design gets it right, that's a good indicator that some care and thought went into it.