12 ms·

How to Make Your Site Look Half-Decent in Half an Hour

514 points by tagawa 14y ago

ishbits 14y ago
I thought the article was fine. I learned a few things. I'm a developer that sometimes needs to tack a web interface on during the prototype phase. And I use Bootstrap. And I want it to look like Bootstrap. Should the time come for a designer, I'd hope the no frills approach would somewhat convey the desired usability of the app. This article gave me a few tips - if only a no nonsense guide to using web fonts!
WMcNC1 14y ago
Was looking alright until that background image came along, awful. Not very fond of the font either - not necessary to be loading other fonts in, especially that one.
emehrkay 14y ago
USE BOOTSTRAP
- baseh 14y ago
  But use google web Fonts to make it less bootstrappy
cmwelsh 14y ago
I liked the first one the best. Just because something is there, does not mean you have to use it.
richforrester 14y ago
Not a fan.
- richforrester 14y ago
  Wow. Got a lot of minus points for stating that I'm not a fan. Guess I should've elaborated. Perhaps I should've spoken about how I think half an hour is cutting it a bit tight. Perhaps I should've mentioned that the background-image idea isn't too smart, as it leaves too much room for erring with non-fitting imagery. That's part of what designers do: they know what fits together - you shouldn't expect programmers to be able to do that. And if you're really set on educating programmers, maybe talk about the background-image's colors, composition or contrast. Or maybe suggest a totally blurred image or something gimmicky that will make it an "instant hit". Perhaps I should've mentioned that making bootstrap not look like bootstrap in half an hour, inevitably means that you're going to end up with a lesser product. Bootstrap has been designed from the bottom up. You either use that and it's default features, or end up with a hybrid that looks like you "tried to make a half-decent site in half an hour". But thanks for the rage points there. I wonder if I could make up some points by posting "I'm a fan" elsewhere.
  - jspthrowaway2 14y ago
    The reason you got downvoted is because these thoughts should have been the ones you shared. Hacker News punishes tiny comments that add nothing to the discussion. So, you're not a fan. Tell us why. Now you know.
    - richforrester 14y ago
      Fair enough. (I mean: I'm pretty new to the community, so thanks for the heads up. Live 'n learn, right?)
DenisM 14y ago
Most important takeaway from this for me is that you can get designer themes for Bootstrap, similar to how you can get themes for Wordpress: https://wrapbootstrap.com/ https://wrapbootstrap.com/
- johns 14y ago
  Also check out bootswatch.com
- kops 14y ago
  And the http://colorschemedesigner.com/ http://colorschemedesigner.com/. Two links that may come handy one day isn't a bad return on an investment of 10 minutes of my time. I also bookmarked http://charliepark.org/bootstrap_buttons/ http://charliepark.org/bootstrap_buttons/ but I suspect i may never get around to using it.
  - tomjen3 14y ago
    I wouldn't brandish that link around too much -- I am sure it is great for designers but we are most likely to end up making a bigger mess of the entire thing.
tommoor 14y ago
I clicked through thinking this would be about balance, spacing, typography, information heirachy and colour. An understanding of these basics will give you a much better starting point than css3, background textures and webfonts. There's a damn good article on this somewhere if anybody knows the place...
- jschuur 14y ago
  The author does link to a full book along those lines: http://designforhackers.com/ http://designforhackers.com/
- andrewfelix 14y ago
  http://startupsthisishowdesignworks.com/ http://startupsthisishowdesignworks.com/
  - subsection1h 14y ago
    That page doesn't have more than three consecutive paragraphs. It seems to be designed for children with low IQs and severe ADHD.
    - andrewfelix 14y ago
      It was designed to be easily digestible. Judging by your shallow critique, I would surmise you(ironically) had a low attention span and didn't even read it.
- duaneb 14y ago
  > I clicked through thinking this would be about balance, spacing, typography, information heirachy and colour. Such a post would take years to read. People spend years learning the subjects. I much prefer a practical post such as this, which delivers on what it claims. The site she ended up with was much better than half-decent. Anyway, I have a huge difficulty imagining any blog post about, let's say, typography that does more good than harm in terms of what it teaches people about design. Worrying about anything more than sans vs serif will probably just waste their time.
54mf 14y ago
"I am a programmer. I am not a designer." Then perhaps you shouldn't be giving design advice. "I am a designer. I am not a programmer. Here's how to build a half-decent web application in half an hour. First, download PHP..." All due respect but the author knows just enough "design" to be dangerous, so to speak. Bootstrap is well-designed (dull, but well-designed), and the author's redesign is more of an "un-designing". Arbitrarily adding fonts, colors, and background images take a perfectly usable layout and make it look like something straight out of 2002. (Do people still use "pimp" as a verb non-ironically?) [Edit] A note of clarification: I mean no disrespect to anyone doing web design, whether their job title starts with a capital-D or not. I just wouldn't recommend that most of them dole out advice about it.
- anotherbadlogin 14y ago
  "Do people still use "pimp" as a verb non-ironically?" Do people still use "ironic" when they should be using "sarcastic"?
- josh_blum 14y ago
  I don't think that the author is saying to "un-design" at all. She's saying to use a basic framework as a starting point and learn how to make it your own. Adding the fonts/colors/images that you feel add to the site are your own creativity and a way to break away from the typical Bootstrap site that is commonly used today. Obviously it isn't advice a designer would take, I feel its meant more from one programmer to another and gives a way to make your demo less stereotypical.
  - 54mf 14y ago
    I'm going to sound like a dick for saying this, but I'm okay with it: most people's "creativity" shouldn't be expressed in a public way. Breaking away from Bootstrap and making it "less stereotypical" is probably a bad idea unless you know what you're doing. It's like putting a bejeweled, glittery case on an iPhone; yeah, it's "your creativity", but please don't.
    - 14y ago
monsur 14y ago
Nice article, but what's going on with the screenshots on that page? They are greater than 1MB, 02-fonts.png is +5MB and still loading.
anotherbadlogin 14y ago
I like how the "textures" link is broken.
rbn 14y ago
Not a fan of the design of the site it self. Waaayyy too many layers.
muratmutlu 14y ago
I think it looked better at stage 2 before all the work was done to it. That font doesn't really look good
- aseidl 14y ago
  Going beyond the not so great font, is it really a good idea to mix serif fonts with sans serif on the same page, specifically having (sub)headings one and main content the other? I've noticed this in a few places lately, but it doesn't seem very clean to me.
  - wahnfrieden 14y ago
    It's fine.
  - andrewingram 14y ago
    It's often encouraged. Font foundries (and other sources) will occasionally publish lists of type pairs that work well together, and more often than not, one will be serif and the other sans serif.
  - muratmutlu 14y ago
    Actually it's encouraged, but it still means you have to take time in selecting the combo. Georgia and Helvetica play nice together Here's some combos http://bonfx.com/19-top-fonts-in-19-top-combinations/ http://bonfx.com/19-top-fonts-in-19-top-combinations/
  - sergiotapia 14y ago
    It's a best practice for design. You want your readers to notice the differences between content and headers at a glance. And having different font families for each is the best way to do that.
    - aseidl 14y ago
      Makes sense, you want to make it as clear as possible to see that they're different. My thinking was that if you're already differentiating by size and weight, why introduce another variation that will take an extra fraction of a second to process?
zaidf 14y ago
Why not just use themeforest if your business' core competence isn't design? Buy a theme from a designer who spent hours taking care of nitty gritty details that would take you days and weeks. Your blah niche customers would most likely not notice or care if randomly land on another site with a similar template.
- jspthrowaway2 14y ago
  That was discussed in the middle of the article, and an alternative site was suggested. I'm kind of disappointed that the majority of the comments here seem to be from the title and first few paragraphs alone.
  - zaidf 14y ago
    Sure, but the post kind of just glosses over this instead of seriously evaluating whether uniqueness of design is very important to the business. And if it isn't, why is home rolling your own design as a non-designer a better business decision than themeforest etc.?
dropdownmenu 14y ago
I never knew that I should use bootstrap and then extend it with custom CSS to make my site look better. I would have never thought to do that! /sarcasm
amix 14y ago
I would recommend reading "Don't Make Me Think" by Steve Krug. It will teach you the most important aspects of a usable design - - which are much more important than just doing a pretty design.
- vanwilder77 14y ago
  exactly!!
recroad 14y ago
I'm crying. Why is this the #1 story? And how can a person with such a hideous looking site give design advice?
- jspthrowaway2 14y ago
  Thank you for your content-free comment. Allow me to point out some problems with it: 1) This is the #1 story because people other than you find it interesting. 2) The "hideously-designed" site is merely publishing the author's essay, and is not owned or controlled by the author at all. 3) If you are crying at a Hacker News article which you entirely missed the point of, as did half the other commenters, then you need a walk.
deleted 14y ago
[deleted]
choxi 14y ago
I would encourage people to check out http://getskeleton.com http://getskeleton.com instead of Bootstrap. Bootstrap has a very rich design already, so it's not a great scaffold to build on top of because there's very little room for you to add flavor and customization to it without making it look like a frankenstein design. Skeleton is really minimal, it basically just does typography, some basic form styling, and a grid system. It's a much better base to work off of and add to than Bootstrap.
- choxi 14y ago
  I'l love to hear any suggestions for a framework between Skeleton and Bootstrap, by the way.
  - justinph 14y ago
    Try Foundation. http://foundation.zurb.com http://foundation.zurb.com
    - OriginalSyn 14y ago
      I love foundation it really does straddle the difference between bootstrap and skeleton, light and flexible while being fairly full featured. Plus the grid system is the tits.
capex 14y ago
Everything was sort of okay until the Corben font was introduced onto the page. A complete crime against design, in the way its been used.
ashray 14y ago
I thought this was going to be an article that would tell me how to fix my existing sites. You know like, make the font larger, increase line height, that kind of thing.. I know that for new sites I should start out with bootstrap...
jspthrowaway2 14y ago
This thread is bringing the worst of Hacker News out of the woodwork. The author is not claiming to be a design expert, nor is she publishing a "how to design" guide. She's demonstrating a skill which I think a lot of developers could use: taking Bootstrap, which is a good start for a front end these days, and making it not look like Bootstrap. She even says this in TFA. It's for developers without a designer to make their site look half-decent in half an hour. That's the TITLE. Since we all like MVPs and demo days here, I would think this is applicable to a lot of people on Hacker News. You want to stand apart from the other ten demoing startups that used Bootstrap as well, don't you? Put a little effort in, which is all she is advocating. Based on the quality of the majority of the comments here it seems like most people opened it, saw the ugly design of the site which is only publishing her work (she didn't design it), made it a few paragraphs in, then ran back to comment about how articles like this are killing our profession, making them ill, making them cry, or how she shouldn't be giving design advice. Dreadful. Truly dreadful. You're better people than this.
- pseut 14y ago
  1. It's Saturday night. 2. It still looks like bootstrap. Telling people, "use bootstrap, but quickly change the fonts and colors and maybe add some images" isn't helpful. I wouldn't mind an article outlining how to use LESS to make bootstrap not look like bootstrap (which would involve, at a minimum, not using a 12-column grid, because I associate that with bootstrap more than anything else). And that seems like something developers should be interested in. 3. There are an ungodly number of blog posts that say, "use bootstrap, but change the fonts etc so that it doesn't look like bootstrap." The specific details: "use textures" for example, made the example site look worse, so it's hard to see what this article added.
  - tomjen3 14y ago
    A comment like that is not helpful; bootstrap is not a bad design and would be a lot better than what you would see on most geek designed sites. In other words, get of your high horse.
    - 14y ago
moe 14y ago
That has to be the worst webdesign I've seen in months, and I'm talking about 24ways.org. We're supposed to take design advice from a site that looks like a car accident? No thanks.
- duaneb 14y ago
  Ad hominem. The actual advice isn't half bad for a personal site.
tbirdz 14y ago
I wouldn't want to take this advice, from someone with such a poorly designed site.
timmm 14y ago
I've seen another 'designer' with this exact same layout. Heh. Drew Mclellan was his name.
- drewmclellan 14y ago
  "I've seen this exact same layout on this exact same site." Dude.
gruseom 14y ago
I've come to dread looking in on these threads. It feels like walking into a swarm of wasps. Boy is the content/nastiness ratio low in this one. It makes me sad and, as someone who has spent a lot of time here, ashamed. To the people making and upvoting these putdowns: you don't come across as caring about design; you appear to care about feeling superior. That is not smart. It is a mean person's idea of what it is to be smart. As HN has acquired a reputation for being a smart place, it has become a mean place. Do you guys know what "mean", in the sense of "nasty", means? It means common. Look up the root. The more you reinforce your wish to feel smart in this way, the more common you in fact become. It's hard to see this, because self-image is always telling us the opposite, and that feels good — really good. It's the opiate of the jerk. In my experience, if one really wants to get smarter, one must work on inhibiting this. I was going to offer a tip or two, but who would want them? Incidentally, these self-appointed protectors of Design against the masses appear to me to be significantly more mediocre in this way than some of the other subgroups here. Perhaps it's sample bias. Or perhaps it's because there's so little objectivity to any of it that one gets a purer strain of identity politics — "Leave Design to the Designers" and all that. On another note, thanks to the OP for the helpful and playful article!
- pkuhad 14y ago
  Agree, the one which is simple is simply ignored because if its simplicity.
- pknerd 14y ago
  "I was going to offer a tip or two, but who would want them?" You can make a blog post and submit on HN?
  - gruseom 14y ago
    Thanks, but I already feel sheepish for preaching. Besides, HN is my strategy for never having a blog.
- rpm4321 14y ago
  I couldn't agree with you more. I'm a programmer with a fair amount of experience managing graphic designers, and I have a pretty good eye for design - if I do say so myself ;) After not having personally touched any frontend code for a number of years, I recently found myself in the position of having to personally bootstrap an important side project - backend, frontend, design, and mobile - all on a miniscule budget. The process she outlines so closely mirrored my own that I'm still not entirely convinced she didn't have a hidden camera in my office. This post would have easily saved me weeks of fumbling around, false starts, procrastinating, and looking around for the appropriate resources and frameworks. In my opinion my end product looks much more polished, but she was clearly just putting together a simple demo to support the text, and her design quality is easily sufficient to test out a minimum viable product. Of course, once you get some traction and have a budget to hire a designer, you should because design is sacrosanct blah, blah, blah, etc, etc. But if you're a programmer on your own with no budget, just trying to get your idea out into the world and not embarrass yourself, this could be invaluable.
kstenerud 14y ago
As a programmer and a non-designer, I don't understand how this will help me. Why are each of the successive design tweaks better than the previous ones? I've seen pages with flat designs and with gradient designs, with images and icons and without, and with various fonts, and they all look fine to me. How are you supposed to tell the difference between good and bad design? And to take it further, if an average person like me can't even tell the difference, what's the point of it?
- ZeroGravitas 14y ago
  I didnt read it as design advice but rather a guide to resources. I personally was aware of all the resources mentioned, but think its a great summary of whats out there. So it's not saying 'use this font' or even, 'use a different font', just 'if you want to change the font, get one from here and read this article about choosing between them. The article seems to have mainly recieved two contradictory responses from HN. a) I already use Bootstrap, this article is useless, and b) this article is bad because it recommends bootstrap, which you should never use, instead devote the next decade of your life to learning design and build something unique and award winning instead.
Stratego 14y ago
This article is not nearly as bad as it makes itself look at first. Speaking of appearances. Saying you're giving lousy advice isn't an excuse for giving lousy advice. > "I want to make my sites look attractive." Sure, but you should worry about making them usable and solving a design problem first: how do I best convey the usefulness of this product to its potential users? > "Design seemed to consist of complicated rules that weren’t written down anywhere, plus an unlearnable sense of taste, possessed only by a black-clad elite." Design is about solving problems elegantly, I'm tired of fellow programmers rehashing the idea that (interaction) design is like modern art, it couldn't be further from it. But "seemed" makes it sound like that was just the past, how about today? > "I decided to do my best to hack what it took to make my own projects look vaguely attractive." Let's make thing "vaguely attractive", that's the ticket. > "And too often now, I see excellent programming projects that don’t reach the audience they deserve, simply because their design doesn’t match their execution." Couldn't agree more, except their design is their execution. If you mean to expose your work to the public and fellow professionals, it's your job to make it compelling. > "I really think that Bootstrap is one of the most significant technical achievements of the last few years: it democratizes the whole process of web design." Because web design was such a dictatorship until now. Yes, I'm nitpicking, but if you make no effort to learn HTML & CSS, I highly doubt you will by using bootstrap. Why would you? It looks "half decent" enough as it is. I hope I'm wrong. The rest of the article, as others notes, is not nearly as wrongheaded as its introduction makes it sound. Still, I wish developers would stop trying to "hack" design and actually have the guts to learn it, as designers do with programming.
- danenania 14y ago
  "Still, I wish developers would stop trying to "hack" design and actually have the guts to learn it, as designers do with programming." I've refactored a whole lot of designer code in my day. Let me assure you that this is a two way street.
AYBABTME 14y ago
6 months ago I had no damn idea what was bootstrap. Neither did my neighbour. Now I know what it is, and with this short, pragmatic article, I have a few pointers on how I could make something 'decent' to my neighbour although I have 0 skills in graphic design. And my neighbour still has no damn clue what is Bootstrap, so whatever if it still 'looks like Bootstrap'. The audience doesn't care. Nice submission, if you ask me.
- nzealand 14y ago
  Where did you hear about bootstrap? This is the first time I have seen it, and it looks amazing.
  - AYBABTME 14y ago
    Here.
styts 14y ago
Thanks for the summary. Although, as a programmer, I've known most of the things mentioned, it would have still saved me some extra time (better spent writing code than designing).
thenomad 14y ago
Worth it for the links alone, many of which I'd not seen before. I AM a semi-competent coder/designer, and I got a decent amount of new information out of this article. I don't agree with all of it, but I didn't expect to. Great info, well-presented, easy to understand, make me think. Five stars, would read again.
sergiotapia 14y ago
I don't know if I should be happy or terrified that I know and use these tips on a daily basis. I'm just starting out as a UI front-end guy after years of solid backend work.
FiloSottile 14y ago
This reminds me of this other similar submission and thread: Customize Twitter Bootstrap To Not Look Bootstrap-y https://news.ycombinator.com/item?id=4427864 https://news.ycombinator.com/item?id=4427864 http://antjanus.com/blog/web-design-tips/user-interface-usability/customize-twitter-bootstrap-into-themes/ http://antjanus.com/blog/web-design-tips/user-interface-usab...
vicks711 14y ago
This is a wonderful article. I am planning to launch a MVP and was struggling with a design of the website. Though I have dabbled with CSS and know the basics I am basically design challenged. This article helps a lot. thanks
bilalq 14y ago
While I certainly wouldn't recommend this kind of article to most people, I wish professors from Computer Science departments would try to add just a little styling. It's painful to go through most of their sites.
LiquidEyes 14y ago
she would have been better off leaving the comic sans quip out of the article. That ruined any shred of credibility the author had in my eyes.
- 13rules 14y ago
  Came here to say this. Didn't get past the line: "I am not a designer... and I don’t mind Comic Sans."
TommyDANGerous 14y ago
I personally liked the design of 24ways.org. I liked the article she wrote, even though I don't use bootstrap and design all my sites before I even code them, the tools she provided are some I've never heard of and will definitely look to utilize in the near future. Great post.
neya 14y ago
Personally, it's a beautiful article in my opinion.
pimentel 14y ago
I've never bought a template, but couldn't I simply get the source of a template's example, when it's available?
- wowoc 14y ago
  What about copyrights?

514 points by tagawa 14y ago

I thought the article was fine. I learned a few things. I'm a developer that sometimes needs to tack a web interface on during the prototype phase. And I use Bootstrap. And I want it to look like Bootstrap. Should the time come for a designer, I'd hope the no frills approach would somewhat convey the desired usability of the app. This article gave me a few tips - if only a no nonsense guide to using web fonts!

WMcNC1 14y ago

Was looking alright until that background image came along, awful. Not very fond of the font either - not necessary to be loading other fonts in, especially that one.

emehrkay 14y ago

USE BOOTSTRAP

baseh 14y ago
But use google web Fonts to make it less bootstrappy

cmwelsh 14y ago

I liked the first one the best. Just because something is there, does not mean you have to use it.

richforrester 14y ago

Not a fan.

richforrester 14y ago
Wow. Got a lot of minus points for stating that I'm not a fan. Guess I should've elaborated. Perhaps I should've spoken about how I think half an hour is cutting it a bit tight. Perhaps I should've mentioned that the background-image idea isn't too smart, as it leaves too much room for erring with non-fitting imagery. That's part of what designers do: they know what fits together - you shouldn't expect programmers to be able to do that. And if you're really set on educating programmers, maybe talk about the background-image's colors, composition or contrast. Or maybe suggest a totally blurred image or something gimmicky that will make it an "instant hit". Perhaps I should've mentioned that making bootstrap not look like bootstrap in half an hour, inevitably means that you're going to end up with a lesser product. Bootstrap has been designed from the bottom up. You either use that and it's default features, or end up with a hybrid that looks like you "tried to make a half-decent site in half an hour". But thanks for the rage points there. I wonder if I could make up some points by posting "I'm a fan" elsewhere.
- jspthrowaway2 14y ago
  The reason you got downvoted is because these thoughts should have been the ones you shared. Hacker News punishes tiny comments that add nothing to the discussion. So, you're not a fan. Tell us why. Now you know.
  - richforrester 14y ago
    Fair enough. (I mean: I'm pretty new to the community, so thanks for the heads up. Live 'n learn, right?)

DenisM 14y ago

Most important takeaway from this for me is that you can get designer themes for Bootstrap, similar to how you can get themes for Wordpress: https://wrapbootstrap.com/ https://wrapbootstrap.com/

johns 14y ago
Also check out bootswatch.com
kops 14y ago
And the http://colorschemedesigner.com/ http://colorschemedesigner.com/. Two links that may come handy one day isn't a bad return on an investment of 10 minutes of my time. I also bookmarked http://charliepark.org/bootstrap_buttons/ http://charliepark.org/bootstrap_buttons/ but I suspect i may never get around to using it.
- tomjen3 14y ago
  I wouldn't brandish that link around too much -- I am sure it is great for designers but we are most likely to end up making a bigger mess of the entire thing.

tommoor 14y ago

I clicked through thinking this would be about balance, spacing, typography, information heirachy and colour. An understanding of these basics will give you a much better starting point than css3, background textures and webfonts. There's a damn good article on this somewhere if anybody knows the place...

jschuur 14y ago
The author does link to a full book along those lines: http://designforhackers.com/ http://designforhackers.com/
andrewfelix 14y ago
http://startupsthisishowdesignworks.com/ http://startupsthisishowdesignworks.com/
- subsection1h 14y ago
  That page doesn't have more than three consecutive paragraphs. It seems to be designed for children with low IQs and severe ADHD.
  - andrewfelix 14y ago
    It was designed to be easily digestible. Judging by your shallow critique, I would surmise you(ironically) had a low attention span and didn't even read it.
duaneb 14y ago
> I clicked through thinking this would be about balance, spacing, typography, information heirachy and colour. Such a post would take years to read. People spend years learning the subjects. I much prefer a practical post such as this, which delivers on what it claims. The site she ended up with was much better than half-decent. Anyway, I have a huge difficulty imagining any blog post about, let's say, typography that does more good than harm in terms of what it teaches people about design. Worrying about anything more than sans vs serif will probably just waste their time.

54mf 14y ago

"I am a programmer. I am not a designer." Then perhaps you shouldn't be giving design advice. "I am a designer. I am not a programmer. Here's how to build a half-decent web application in half an hour. First, download PHP..." All due respect but the author knows just enough "design" to be dangerous, so to speak. Bootstrap is well-designed (dull, but well-designed), and the author's redesign is more of an "un-designing". Arbitrarily adding fonts, colors, and background images take a perfectly usable layout and make it look like something straight out of 2002. (Do people still use "pimp" as a verb non-ironically?) [Edit] A note of clarification: I mean no disrespect to anyone doing web design, whether their job title starts with a capital-D or not. I just wouldn't recommend that most of them dole out advice about it.

anotherbadlogin 14y ago
"Do people still use "pimp" as a verb non-ironically?" Do people still use "ironic" when they should be using "sarcastic"?
josh_blum 14y ago
I don't think that the author is saying to "un-design" at all. She's saying to use a basic framework as a starting point and learn how to make it your own. Adding the fonts/colors/images that you feel add to the site are your own creativity and a way to break away from the typical Bootstrap site that is commonly used today. Obviously it isn't advice a designer would take, I feel its meant more from one programmer to another and gives a way to make your demo less stereotypical.
- 54mf 14y ago
  I'm going to sound like a dick for saying this, but I'm okay with it: most people's "creativity" shouldn't be expressed in a public way. Breaking away from Bootstrap and making it "less stereotypical" is probably a bad idea unless you know what you're doing. It's like putting a bejeweled, glittery case on an iPhone; yeah, it's "your creativity", but please don't.
  - 14y ago

monsur 14y ago

Nice article, but what's going on with the screenshots on that page? They are greater than 1MB, 02-fonts.png is +5MB and still loading.

anotherbadlogin 14y ago

I like how the "textures" link is broken.

rbn 14y ago

Not a fan of the design of the site it self. Waaayyy too many layers.

muratmutlu 14y ago

I think it looked better at stage 2 before all the work was done to it. That font doesn't really look good

aseidl 14y ago
Going beyond the not so great font, is it really a good idea to mix serif fonts with sans serif on the same page, specifically having (sub)headings one and main content the other? I've noticed this in a few places lately, but it doesn't seem very clean to me.
- wahnfrieden 14y ago
  It's fine.
- andrewingram 14y ago
  It's often encouraged. Font foundries (and other sources) will occasionally publish lists of type pairs that work well together, and more often than not, one will be serif and the other sans serif.
- muratmutlu 14y ago
  Actually it's encouraged, but it still means you have to take time in selecting the combo. Georgia and Helvetica play nice together Here's some combos http://bonfx.com/19-top-fonts-in-19-top-combinations/ http://bonfx.com/19-top-fonts-in-19-top-combinations/
- sergiotapia 14y ago
  It's a best practice for design. You want your readers to notice the differences between content and headers at a glance. And having different font families for each is the best way to do that.
  - aseidl 14y ago
    Makes sense, you want to make it as clear as possible to see that they're different. My thinking was that if you're already differentiating by size and weight, why introduce another variation that will take an extra fraction of a second to process?

zaidf 14y ago

Why not just use themeforest if your business' core competence isn't design? Buy a theme from a designer who spent hours taking care of nitty gritty details that would take you days and weeks. Your blah niche customers would most likely not notice or care if randomly land on another site with a similar template.

jspthrowaway2 14y ago
That was discussed in the middle of the article, and an alternative site was suggested. I'm kind of disappointed that the majority of the comments here seem to be from the title and first few paragraphs alone.
- zaidf 14y ago
  Sure, but the post kind of just glosses over this instead of seriously evaluating whether uniqueness of design is very important to the business. And if it isn't, why is home rolling your own design as a non-designer a better business decision than themeforest etc.?

dropdownmenu 14y ago

I never knew that I should use bootstrap and then extend it with custom CSS to make my site look better. I would have never thought to do that! /sarcasm

amix 14y ago

I would recommend reading "Don't Make Me Think" by Steve Krug. It will teach you the most important aspects of a usable design - - which are much more important than just doing a pretty design.

vanwilder77 14y ago
exactly!!

recroad 14y ago

I'm crying. Why is this the #1 story? And how can a person with such a hideous looking site give design advice?

jspthrowaway2 14y ago
Thank you for your content-free comment. Allow me to point out some problems with it: 1) This is the #1 story because people other than you find it interesting. 2) The "hideously-designed" site is merely publishing the author's essay, and is not owned or controlled by the author at all. 3) If you are crying at a Hacker News article which you entirely missed the point of, as did half the other commenters, then you need a walk.

deleted 14y ago

[deleted]

choxi 14y ago

I would encourage people to check out http://getskeleton.com http://getskeleton.com instead of Bootstrap. Bootstrap has a very rich design already, so it's not a great scaffold to build on top of because there's very little room for you to add flavor and customization to it without making it look like a frankenstein design. Skeleton is really minimal, it basically just does typography, some basic form styling, and a grid system. It's a much better base to work off of and add to than Bootstrap.

choxi 14y ago
I'l love to hear any suggestions for a framework between Skeleton and Bootstrap, by the way.
- justinph 14y ago
  Try Foundation. http://foundation.zurb.com http://foundation.zurb.com
  - OriginalSyn 14y ago
    I love foundation it really does straddle the difference between bootstrap and skeleton, light and flexible while being fairly full featured. Plus the grid system is the tits.

capex 14y ago

Everything was sort of okay until the Corben font was introduced onto the page. A complete crime against design, in the way its been used.

ashray 14y ago

I thought this was going to be an article that would tell me how to fix my existing sites. You know like, make the font larger, increase line height, that kind of thing.. I know that for new sites I should start out with bootstrap...

jspthrowaway2 14y ago

This thread is bringing the worst of Hacker News out of the woodwork. The author is not claiming to be a design expert, nor is she publishing a "how to design" guide. She's demonstrating a skill which I think a lot of developers could use: taking Bootstrap, which is a good start for a front end these days, and making it not look like Bootstrap. She even says this in TFA. It's for developers without a designer to make their site look half-decent in half an hour. That's the TITLE. Since we all like MVPs and demo days here, I would think this is applicable to a lot of people on Hacker News. You want to stand apart from the other ten demoing startups that used Bootstrap as well, don't you? Put a little effort in, which is all she is advocating. Based on the quality of the majority of the comments here it seems like most people opened it, saw the ugly design of the site which is only publishing her work (she didn't design it), made it a few paragraphs in, then ran back to comment about how articles like this are killing our profession, making them ill, making them cry, or how she shouldn't be giving design advice. Dreadful. Truly dreadful. You're better people than this.

pseut 14y ago
1. It's Saturday night. 2. It still looks like bootstrap. Telling people, "use bootstrap, but quickly change the fonts and colors and maybe add some images" isn't helpful. I wouldn't mind an article outlining how to use LESS to make bootstrap not look like bootstrap (which would involve, at a minimum, not using a 12-column grid, because I associate that with bootstrap more than anything else). And that seems like something developers should be interested in. 3. There are an ungodly number of blog posts that say, "use bootstrap, but change the fonts etc so that it doesn't look like bootstrap." The specific details: "use textures" for example, made the example site look worse, so it's hard to see what this article added.
- tomjen3 14y ago
  A comment like that is not helpful; bootstrap is not a bad design and would be a lot better than what you would see on most geek designed sites. In other words, get of your high horse.
  - 14y ago

moe 14y ago

That has to be the worst webdesign I've seen in months, and I'm talking about 24ways.org. We're supposed to take design advice from a site that looks like a car accident? No thanks.

duaneb 14y ago
Ad hominem. The actual advice isn't half bad for a personal site.

tbirdz 14y ago

I wouldn't want to take this advice, from someone with such a poorly designed site.

timmm 14y ago

I've seen another 'designer' with this exact same layout. Heh. Drew Mclellan was his name.

drewmclellan 14y ago
"I've seen this exact same layout on this exact same site." Dude.

gruseom 14y ago

I've come to dread looking in on these threads. It feels like walking into a swarm of wasps. Boy is the content/nastiness ratio low in this one. It makes me sad and, as someone who has spent a lot of time here, ashamed. To the people making and upvoting these putdowns: you don't come across as caring about design; you appear to care about feeling superior. That is not smart. It is a mean person's idea of what it is to be smart. As HN has acquired a reputation for being a smart place, it has become a mean place. Do you guys know what "mean", in the sense of "nasty", means? It means common. Look up the root. The more you reinforce your wish to feel smart in this way, the more common you in fact become. It's hard to see this, because self-image is always telling us the opposite, and that feels good — really good. It's the opiate of the jerk. In my experience, if one really wants to get smarter, one must work on inhibiting this. I was going to offer a tip or two, but who would want them? Incidentally, these self-appointed protectors of Design against the masses appear to me to be significantly more mediocre in this way than some of the other subgroups here. Perhaps it's sample bias. Or perhaps it's because there's so little objectivity to any of it that one gets a purer strain of identity politics — "Leave Design to the Designers" and all that. On another note, thanks to the OP for the helpful and playful article!

pkuhad 14y ago
Agree, the one which is simple is simply ignored because if its simplicity.
pknerd 14y ago
"I was going to offer a tip or two, but who would want them?" You can make a blog post and submit on HN?
- gruseom 14y ago
  Thanks, but I already feel sheepish for preaching. Besides, HN is my strategy for never having a blog.
rpm4321 14y ago
I couldn't agree with you more. I'm a programmer with a fair amount of experience managing graphic designers, and I have a pretty good eye for design - if I do say so myself ;) After not having personally touched any frontend code for a number of years, I recently found myself in the position of having to personally bootstrap an important side project - backend, frontend, design, and mobile - all on a miniscule budget. The process she outlines so closely mirrored my own that I'm still not entirely convinced she didn't have a hidden camera in my office. This post would have easily saved me weeks of fumbling around, false starts, procrastinating, and looking around for the appropriate resources and frameworks. In my opinion my end product looks much more polished, but she was clearly just putting together a simple demo to support the text, and her design quality is easily sufficient to test out a minimum viable product. Of course, once you get some traction and have a budget to hire a designer, you should because design is sacrosanct blah, blah, blah, etc, etc. But if you're a programmer on your own with no budget, just trying to get your idea out into the world and not embarrass yourself, this could be invaluable.

kstenerud 14y ago

As a programmer and a non-designer, I don't understand how this will help me. Why are each of the successive design tweaks better than the previous ones? I've seen pages with flat designs and with gradient designs, with images and icons and without, and with various fonts, and they all look fine to me. How are you supposed to tell the difference between good and bad design? And to take it further, if an average person like me can't even tell the difference, what's the point of it?

ZeroGravitas 14y ago
I didnt read it as design advice but rather a guide to resources. I personally was aware of all the resources mentioned, but think its a great summary of whats out there. So it's not saying 'use this font' or even, 'use a different font', just 'if you want to change the font, get one from here and read this article about choosing between them. The article seems to have mainly recieved two contradictory responses from HN. a) I already use Bootstrap, this article is useless, and b) this article is bad because it recommends bootstrap, which you should never use, instead devote the next decade of your life to learning design and build something unique and award winning instead.

Stratego 14y ago

This article is not nearly as bad as it makes itself look at first. Speaking of appearances. Saying you're giving lousy advice isn't an excuse for giving lousy advice. > "I want to make my sites look attractive." Sure, but you should worry about making them usable and solving a design problem first: how do I best convey the usefulness of this product to its potential users? > "Design seemed to consist of complicated rules that weren’t written down anywhere, plus an unlearnable sense of taste, possessed only by a black-clad elite." Design is about solving problems elegantly, I'm tired of fellow programmers rehashing the idea that (interaction) design is like modern art, it couldn't be further from it. But "seemed" makes it sound like that was just the past, how about today? > "I decided to do my best to hack what it took to make my own projects look vaguely attractive." Let's make thing "vaguely attractive", that's the ticket. > "And too often now, I see excellent programming projects that don’t reach the audience they deserve, simply because their design doesn’t match their execution." Couldn't agree more, except their design is their execution. If you mean to expose your work to the public and fellow professionals, it's your job to make it compelling. > "I really think that Bootstrap is one of the most significant technical achievements of the last few years: it democratizes the whole process of web design." Because web design was such a dictatorship until now. Yes, I'm nitpicking, but if you make no effort to learn HTML & CSS, I highly doubt you will by using bootstrap. Why would you? It looks "half decent" enough as it is. I hope I'm wrong. The rest of the article, as others notes, is not nearly as wrongheaded as its introduction makes it sound. Still, I wish developers would stop trying to "hack" design and actually have the guts to learn it, as designers do with programming.

danenania 14y ago
"Still, I wish developers would stop trying to "hack" design and actually have the guts to learn it, as designers do with programming." I've refactored a whole lot of designer code in my day. Let me assure you that this is a two way street.

AYBABTME 14y ago

6 months ago I had no damn idea what was bootstrap. Neither did my neighbour. Now I know what it is, and with this short, pragmatic article, I have a few pointers on how I could make something 'decent' to my neighbour although I have 0 skills in graphic design. And my neighbour still has no damn clue what is Bootstrap, so whatever if it still 'looks like Bootstrap'. The audience doesn't care. Nice submission, if you ask me.

nzealand 14y ago
Where did you hear about bootstrap? This is the first time I have seen it, and it looks amazing.
- AYBABTME 14y ago
  Here.

styts 14y ago

Thanks for the summary. Although, as a programmer, I've known most of the things mentioned, it would have still saved me some extra time (better spent writing code than designing).

thenomad 14y ago

Worth it for the links alone, many of which I'd not seen before. I AM a semi-competent coder/designer, and I got a decent amount of new information out of this article. I don't agree with all of it, but I didn't expect to. Great info, well-presented, easy to understand, make me think. Five stars, would read again.

sergiotapia 14y ago

I don't know if I should be happy or terrified that I know and use these tips on a daily basis. I'm just starting out as a UI front-end guy after years of solid backend work.

FiloSottile 14y ago

This reminds me of this other similar submission and thread: Customize Twitter Bootstrap To Not Look Bootstrap-y https://news.ycombinator.com/item?id=4427864 https://news.ycombinator.com/item?id=4427864 http://antjanus.com/blog/web-design-tips/user-interface-usability/customize-twitter-bootstrap-into-themes/ http://antjanus.com/blog/web-design-tips/user-interface-usab...

vicks711 14y ago

This is a wonderful article. I am planning to launch a MVP and was struggling with a design of the website. Though I have dabbled with CSS and know the basics I am basically design challenged. This article helps a lot. thanks

bilalq 14y ago

While I certainly wouldn't recommend this kind of article to most people, I wish professors from Computer Science departments would try to add just a little styling. It's painful to go through most of their sites.

LiquidEyes 14y ago

she would have been better off leaving the comic sans quip out of the article. That ruined any shred of credibility the author had in my eyes.

13rules 14y ago
Came here to say this. Didn't get past the line: "I am not a designer... and I don’t mind Comic Sans."

TommyDANGerous 14y ago

I personally liked the design of 24ways.org. I liked the article she wrote, even though I don't use bootstrap and design all my sites before I even code them, the tools she provided are some I've never heard of and will definitely look to utilize in the near future. Great post.

neya 14y ago

Personally, it's a beautiful article in my opinion.

pimentel 14y ago

I've never bought a template, but couldn't I simply get the source of a template's example, when it's available?

wowoc 14y ago
What about copyrights?