Hacker Newsnew | past | comments | ask | show | jobs | submitlogin
How to Make Your Site Look Half-Decent in Half an Hour (24ways.org)
514 points by tagawa on Dec 16, 2012 | hide | past | favorite | 140 comments


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!


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.


"I was going to offer a tip or two, but who would want them?"

You can make a blog post and submit on HN?


Thanks, but I already feel sheepish for preaching. Besides, HN is my strategy for never having a blog.


Agree, the one which is simple is simply ignored because if its simplicity.


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.


Where did you hear about bootstrap?

This is the first time I have seen it, and it looks amazing.


Here.


I would encourage people to check out 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.


I'l love to hear any suggestions for a framework between Skeleton and Bootstrap, by the way.



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.


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/


And the 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/ but I suspect i may never get around to using it.


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.


Also check out bootswatch.com


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



That page doesn't have more than three consecutive paragraphs. It seems to be designed for children with low IQs and severe ADHD.


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.


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


The author does link to a full book along those lines: http://designforhackers.com/


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?


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.


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


Please don't be so harsh on the author.

She's not saying "this is going to be a professional design for your next project", the title itself contains "half-decent".

She's providing insightful tips for developers to make their pet projects look..like they're not designed by engineers (we do tend to make a mess of things).

And the advice she gives is perfectly fine for exactly that. There are fonts that look good together, subtly textured backgrounds do look better than simple, flat colored one's and using basic color theory upgrades a websites look (teal vs. orange, cough). Together, they make something that looks half-decent.

Just like the author claimed.


So no-one should share advice or tips they have learnt to help them get by in a field that isn't their primary profession?

I like that they are sharing what they have learnt about a field that isn't theirs and doing so in a way that will appeal to other programmers.

I often find design tips from programmers much more relatable and usable for my skill set than I do design tips from designers.


Perhaps I'm being nostalgic, but 24 Ways is sacred to me. It's a yearly list featuring the best-of-the-best sharing insight in to their specific areas of expertise. Christian Heilmann on localStorage (http://24ways.org/2010/html5-local-storage/), for example. This article feels way below the bar; at least, the bar I have set for the site in my own head.


That's my site. I'm glad you're a fan - thank you.

I suspect, in this case, that you're simply not this article's intended audience. If you've already got a good feel for design, then the suggestions could feel simplistic.

We publish an article every day during advent. It would be easy to turn out 24 articles that everyone nods their heads to, but it would be really dull and a disservice to our readers. In order to have a really vibrant schedule of interesting things, not every article will appeal to every reader - and that's totally okay.

Today was for developers struggling to know how to make their projects look a bit better. Yesterday was some reasonably hardcore CSS selector stuff. Friday was about designing questionnaires. It's all about variety.

We're happy if any individual doesn't like an article, as long as we're never being dull.


Just so you know, I read the article, liked it and have it saved to follow up on later today. I'm a programmer not a designer.

Thanks for getting it out there.


Just wanted to say thanks to you and your contributers over the years. I always thought 24 articles in 24 days was a very ambitious idea but somehow you guys always deliver the magic.

I'm not the target audience for this article either so it really is hard to judge, but I got something out of it and I can see that a number of people found it helpful and timely.

Don't change!


I'm not sure how this article falls below the bar. It's packed with design resources that programmers can use to make clean, not-ugly sites in very little time.


It seems clear that there are some mediocre designers out there who feel threatened by this.


As a mediocre designer, I'm threatened by great designers, not awful ones. Nice shot, though.


The author is a developer, not a designer. And I don't see the point of trying to persuade people to not listen to her because she's among the awful designers although they already say they find her writing useful.


> Arbitrarily adding fonts, colors, and background images take a perfectly usable layout and make it look like something straight out of 2002.

For sure. I've seen a lot of these "improve bootstrap" articles that advocate adding fonts, colors, etc. But, at the end of the day, the webpage is still obviously twitter bootstrap with a few tweaks (almost always for the worse. I'm not a designer, but "oversized header + buttons for links + 2 or 3 columns below the header" (and often with something functionally equivalent to a menu bar at the top) is so clearly bootstrap that I don't understand making any effort to hide it.


> But, at the end of the day, the webpage is still obviously twitter bootstrap with a few tweaks

Certainly, but is your site targeting developers? If not, the average person has no idea what bootstrap is. They will like the site if it has a decent layout and does something useful, fun or solves a problem.

I think you should always strive to make something unique but trying to hide the fact that you built something with bootstrap from people who don't even know what that is seems like a waste of time.


It's only clearly Bootstrap to people who have heard of Bootstrap. 99.999% of your visitors will never have heard of Bootstrap, will never have heard the word 'framework.'


That's not true. I'm not a designer or a developer, but I recognized sites that in retrospect clearly used bootstrap well before I heard about it. The hero bar, buttons for links, and (usually) three explanatory columns are pretty distinctive design elements even to people who don't use the tool.


I don't think the effort is so much to hide it as it is to make the site more your own.


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.


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.


I think you're missing the point.

Expressing your 'creativity' is absolutely something you should do in public, because that's the only way you can learn. As a programmer Bootstrap is the easiest way to get an idea, not a product off the ground. So experimenting is awesome. Deviating from that shows that you want to differentiate your work and are actually putting a little thought into the UI. You're also setting up a framework for yourself for next time so you can iterate and make it better.

This experimenting it really what teaches you. Not just design (since you probably aren't doing it right) but how to use technologies like HTML and CSS beyond what is prepackaged for you. And this is key, since a lot of people don't know how to correctly use these, but they can add a few classes and grid layout.


>Then perhaps you shouldn't be giving design advice.

I think design is something that is relatively easy to learn (for a hacker) if it just has to be "good enough" to pass muster with the latest design and UX standards. Certainly something a hacker can learn.


Design is not easy to learn, for anyone, and the article did little to teach design. It offered sources for finding fonts, and finding textures, with little advice about what makes a good or poor font choice, or when and why textures work.


Yeah I mean this is really not good design, at all. And I'm so strongly against the idea of using bootstrap as a "hey slap this on my site and now i don't need to worry about design anymore!" type tool -- the fact that this person is trying to promote this exact idea makes me ill. Please HN community, we should value good design. It's really important. Really, important.


Twitter bootstrap makes prototypes usable. It does not replace good design on a product, and no one claims that.

If you are developer, please use it on your next prototype instead of throwing together some html and css.


Last I checked, the title of this article was How to Make Your Site Look Half-Decent in Half an Hour, not A Complete Guide to Good Design. The subtext of that, which she talks about in the text, is that even for a developer with no design sense it doesn't take much effort to make Bootstrap not look like Bootstrap.

She ended up with something that didn't look like Bootstrap at the end, with minimal effort and allowing the developer to focus on coding. That was the entire point. And you know what? I wouldn't have picked that particular font, but the end result did not look that bad.

There are a lot of developers working on MVPs here that have absolutely no design sense nor the budget to hire a designer that might find this useful. Just because you don't doesn't mean it's useless, and I find your comment needless. Read the article before commenting, please. It's important. Really, really important.


"She ended up with something that didn't look like Bootstrap at the end..."

That's not a good thing.

If you're a designer building an MVP prototype, use Bootstrap as-is or with a pre-made theme. If you're building a real product, hire a designer.


Latest response ever, but wow what an awful reply. As tempted as I am to go over this and pick apart every way that this is a bad and inaccurate reply, it's not worth it. So here is a summary my overall feelings, to clarify my original comment:

How to make a "half decent" design is not something that I would ever promote in any way, and the fact that anyone promoted this is what's sad. And "half decent" is a very generous description of the work done here.


> Then perhaps you shouldn't be giving design advice.

Giving advice outside your field of expertise is fine. She just happened to give some bad advice.


That's why I said perhaps. :)


> All due respect but

Our culture's greatest and most universally consistent flashing warning sign regarding the words after it.


Yeah, it's similar to starting a sentence with "I don't mean to sound racist, but..." Because at that point you know for a fact that they will say something racist.


The author is a programmer and writer, and I absolutely respect that. All due respect for her accomplishments, but I don't think she should be writing about design.


Actually, no. I meant it. The author is a programmer and writer who has received attention for her work in both areas, and I absolutely respect that. I simply disagree with her offering design advice.


The good old I-didn't-find-it-useful-so-no-one-will perspective. Clearly you didn't bother to understand the purpose or the intended audience for the article. The title spells it out. There's tons of articles that discuss design elements, but very few that give practical advice on how to quickly hack together a presentable site.


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.


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.


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.


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.


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


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 http://antjanus.com/blog/web-design-tips/user-interface-usab...


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


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.


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


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


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.


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/


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.


It's fine.


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.


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?


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.


USE BOOTSTRAP


But use google web Fonts to make it less bootstrappy


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!


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.


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


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


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.


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.


exactly!!


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


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.


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.


Ad hominem. The actual advice isn't half bad for a personal site.


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.


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


What about copyrights?


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


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.


Came here to say this.

Didn't get past the line: "I am not a designer... and I don’t mind Comic Sans."


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


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


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.


I've seen another 'designer' with this exact same layout. Heh.

Drew Mclellan was his name.


"I've seen this exact same layout on this exact same site."

Dude.


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.


"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, or making them cry, or how she shouldn't be giving design advice."

Do you not see the irony?

We are visual creatures, we judge a book by its cover (and the only time we don't do that is if we know the author or it's recommended to us) That site reminded me of Geocities (though not as bad), I'm already put off from reading it. That was my first impression. But with so many comments, I forced myself to read through it.

With a bad taste in the reader's mouth, they start off immediately with a negative impression, which could explain why a lot of negative comments.

My issue is that the author thinks half an hour is sufficient enough to make a their site look 'half-decent' or make it non-boot strap like. As a non-designer, it's not that easy. Her points are valid though, just a lil optimistic with the time.

Another easy way to make it non boot strap like is get rid of the gradient on the buttons. Go flat with a border, ala Google Style.


That's a fair point, even if it's unfair to the author (the site publishing her could use some work, granted). If one does bail on the article, though, I wish that wouldn't lead to a comment of some kind.


As the publisher of said site, an honest, genuine question to you both (or any who share their opinion) - what is it about the site design that turns you off so much? What 'work' does it need, in your view?

(Edit: typo)


Since you asked:

I'd suggest removing all the 'complicated' layering effect and transparencies. Even hovers over the year links are creating transparencies on the article text. Just leave the article text area 100% opaque, lighten the background to improve contrast. I want to read easily and not off a weave basket.

There is a tad too much variation/combo of the colors used. You have red and grey (which is good) but you have a gazillion shades of it (not good) and you have them alternating roles, ie: red text, red box, grey text, grey box, dark grey text, dark grey box - tighten your color usage. Since your colors usage are everywhere, there's no accent color. (Like I can't tell which color is used to declare text links since all text colors can be text links)

The red is a very strong color - and since author box is in red, it's competing with the article for attention (the article should be the main focus. But it doesn't mean you should make the article box red.)

Move Date under Year (navigation) or move the year next to date - don't make the readers' eyes/brain work, trying to correlate the 2.

Don't show links that aren't clickable and will never have content. ie: Year 1999 etc. Just start from 2005.

Overall the page is super busy with its big range of color shades, layering with transparencies and confusing visual hierarchy/navigation.


Thanks for replying. It sounds like your preferred aesthetic is completely at odds with what we're trying to achieve. No harm in that.


I don't think it's that bad, probably because I quite like the aesthetic, but it really could do with being just a little bit less busy.


Just as another opinion, I love the design of the site. I saw 24ways a couple of years ago, was truly amazed at the "different" design. I still think the same design is truly unique and captivating.


Just to get some other opinions out there.. It would be nice if it responded more for large screens instead of only handling the small ones, but I love the look of the site.


Thanks. The responsiveness was retrofitted by me (not a designer) in 2011. Narrowing a design is easier than widening it.


For me it is all the watermarking effects, with background and foreground elements becoming merged. This creates a cluttered effect needlessly, because without these I think the site would be a lot more pleasant to look at with no other changes.


The big red site title at the top is obscured by the "HOME", "ARCHIVES", etc. boxes below it to the point that it's actually difficult to read. The color choices in that section make everything hard to read. It's not important (I come for the content, not the site title) but it demands attention by taking up half the page and containing horribly clashing colors.

It's just far too busy. There's a white button title on top of a semi-transparent gray button which is on top of a darker gray background which is on top of big red letters which are on top of some sort of weird faux-paper diagonal strips. It's like there was an explosion in the layer factory, and it increases the effort needed to actually read the text beyond what I'm willing to put in.


I also wouldn't do exactly the same thing regarding the transparencies (maybe kill the extension of the year/day highlights behind the primary white-ish content area, and just only have those highlights be visible in the framing area?), but my first reaction was actually "oh, cool, a site daring to have a bold design and go its own way instead of trying to look 'beautiful' like most of the bland sites posted here."

So don't tone it down too much. You can't please everyone, and there's a big design echo-chamber on here. And actually, on second thought, maybe I wouldn't change it at all. Be bold and distinctive. Own it. Design isn't about toning stuff down to the lowest common denominator.

And I love the ease of navigation provided by the top year bar and side day bar.


For what its worth (and I'm no designer): I really like the mobile version of your design. The text is easy readable, the sections clear and there is no annoying clutter.


That's the same design, we just allow the page to adjust to the available screen width.


He definitely means once all the weird column/row effects and text are gone. The site becomes simply, with your header, your content wrapper, and the content. It's a lot nicer at that point.

The longer I look at the desktop version, the more I like it, but my first reaction was not good. It's too much. (I'm a hacker, not a designer, btw)


When I said "ugly site" in my original comment, I meant from the perspective of a person leaving vitriol on the thread here. So, ugly to them, not to me. I realize now on second read that probably isn't clear, but I have to let it stand. Forgive the seemingly-direct attack.

I think your site is visually striking, but it's a wee bit busy for me. That's all.


Can you imagine an article about writing clearly and effectively whch ws wrtn all lik dis??!# It sez good shit, wy u care f its all txtspk?

No, you need to avoid demonstrating the opposite of what you're setting out to teach at the very first moment. Don't put an obvious SQL injection in the form that leads to your article on web security. Don't use a hyperactive loudmouth to promote your massage therapy business. And don't put an article about web design on a site that hurts the eyes.

Is it her fault? I guess not, although I imagine she knew what the site looked like even if she didn't actually design it. Does it mean that the content is worthless? Of course not. Is it a huge red flag that really should not be there? Oh yes.


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.


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.


Didn't mean to come across as anti-bootstrap. I use it! It's the "tweak it" part of these articles I don't like.


Then I would like to extend my appologies for the harshness of my comment.


No worries, the comment let me know that I needed to clarify what I wrote earlier, so I appreciated it.


Can you really identify the number of columns being used by looking at a layout? And is Bootstrap the only one to use 12-columns?

I've used Bootstrap as a starting point for several apps and have modified the grid setup before, but it wasn't because I thought it looked like Bootstrap.


I probably can't guess the number of columns in the grid just by looking at the webpage, but tons of landing pages break up their explanation/details into 2 or 3 columns below the header, and (I suspect) that's a direct result of Bootstrap's 12 column grid.

And that's all fine, because it gives these pages a standard structure so that they're easy to navigate and I wouldn't suggest that people change it just for its own sake. If there's a good reason to change it, definitely do it, but otherwise leave it alone.

I'm not anti-bootstrap and, to my untrained eye, it encourages pretty good design. My only point is that it takes a lot more than changing fonts and colors to make a website look not-bootstrappy, so one should only make the changes and tweaks that have a specific purpose. Changing the colors to match other websites within the same organization makes sense, but changing the colors because, to quote the article, "that button and that menu still both look awfully Bootstrappy" doesn't make sense, unless you are a designer.


> 1. It's Saturday night.

Granted.

> 2. It still looks like bootstrap.

To you and me.

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

Please write it.


Mostly, I just find it frustrating that you and the author are presuming that taking Bootstrap and, as self-proclaimed non-designers, "making it not look like Bootstrap" is a good thing. Good design isn't just a thing that happens when you put a cool font on a photo. I'd be less irked if the article was about finding and installing great Bootstrap themes.

Also: 24 Ways' design has, and has had, an excellent design for years and years. The colors are a bit interesting, but the typography and layout is wonderful.

Also also: you're building quite the straw man there. No one said the article was killing anything, illing anything, or making anyone cry.

I definitely wouldn't take the author's design advice, though.


> Also also: you're building quite the straw man there. No one said the article was killing anything, illing anything, or making anyone cry.

jspthrowaway2 was paraphrasing other comments on this page. When this article was newer, all of the top comments where about how terrible the design is. Here are some direct quotes from other comments on this story:

> the fact that this person is trying to promote this exact idea makes me ill

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

> We're supposed to take design advice from a site that looks like a car accident? No thanks.


Your comment was the direct inspiration for mine and I hated everything about it. It wasn't good enough for you to share your opinion as a designer, you had to attack the author personally because she had the gall to design a bit even though she wasn't a bloody designer. Really attacking the messenger. Half of me suspected you and others reacted as you did because she's a woman, to be quite honest, even though I know that's probably untrue; that just tells you how much I loathed your comment.

Suffice to say, this thread is reflecting pretty badly on you as a person and you should reconsider your attitude.


Accusing me of sexism is completely out of line. I attacked the author professionally because I don't think she's right about design. Professionally, I lauded her programming and writing accomplishments in another comment, and I'm sure she's perfectly qualified to write about those topics. I'd gladly learn from them. Personally, I have no idea who the author is. I'm sure she's a wonderful person.

Regardless, I'm done here. I'd be happy to have a civil discussion on the matter, but it's clear you're not capable. Passive-aggressively calling me sexist while hiding behind a throwaway account is trolling, plain and simple, and tolerating you isn't worth my time.


> even though I know that's probably untrue

There was no passive aggressive accusation made; I simultaneously shared with you what came to mind when I read your comment, then gave you the benefit that you weren't being that low. Read for comprehension, please. I'm just sharing with you my thought process on your original comment, which was entirely out of line. I'm not making that up: my first thought was "this reaction is due to her gender, isn't it?" which tells you how far out of line it was. That's the only reason I'm sharing it. Slow down, guilty conscience; I'm not accusing you of sexism.

I cycle through throwaways so that I don't reflect awfully upon myself as a person when someone misunderstands me as intentionally and flagrantly as you have. See, now, I know never to consider you as a designer on any project I ever do, based on your elitism and how you've behaved in this thread. I have a $20 in my wallet that says I'm not the only one, I'm just being vocal about it. That should be important to you, since you're a freelancer. You don't get the same privilege with me, which is why I prefer anonymity.

> trolling

Har. I get accused of this a lot, and I'm starting to read it as "yeah? well? your mom!" in my head. If I were trolling you, you wouldn't know it and certainly wouldn't be able to accuse me of it. I think it's because people are surprised I have the audacity to tell them what's wrong with them, and it makes them uncomfortable; so, by default, I must be an evil troll.

The rest of Hacker News upvoted my comment -- basically a direct shot at you and the other mediocre designers that were made uncomfortable by this article, and the most upvoted on any account I've ever had (what does that tell you?) -- and even after reading it you ran back into this thread being an elitist jerk to everybody who was trying to have a productive conversation about the article. You, and elitist people like you in any walk of life, are cancerous, and I'm investing time telling you that so you can stop doing it. Stop doing it.


I think "dreadful" is really harsh. Every site should not look like default bootstrap. That would be incredibly boring.

But, that said, I think it would have been better without everything between the font change and the color scheme change removed. For example, the icon is an additional unnecessary visual element- either use text or an icon- if you have both it means that one or the other is insufficient on their own and that is a bad design smell -> simplify! Textures are ok, but a bad example- the only change I could tell was the missing horizontal rules/grey lines. The alpine background- meh, even for a ski lodge- this isn't a cheesy blog. The CSS change I could barely tell.


Agree that adding an icon on the button is useless, but as I work with developers, I see that it's the way some developers understand UI and UX - adding an icon equals designing! As for the textures, I suggest myself everybody using subtle patterns, but, again, the mistake here is adding an extra alpine background image: the thing I saw several times when developers tried to make efforts in UI, lol! But the good thing is that this topic really makes people react!


The CSS change is only visible in the screenshot that introduced the background image. In that screenshot, a white glow effect has been applied to the main header.


I think you're missing that this article was posted in jest.


[citation needed]


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


Not a fan.


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.


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.


Fair enough.

(I mean: I'm pretty new to the community, so thanks for the heads up. Live 'n learn, right?)


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




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: