One little optimization tip:

Including multiple fonts from Google Fonts, can be done in one single query, which will mean one less http request.

So instead of:

<link href=“http://fonts.googleapis.com/css?family=Corben:bold” rel=“stylesheet” type=“text/css”> <link href=“http://fonts.googleapis.com/css?family=Nobile” rel=“stylesheet” type=“text/css”>

You can do:

<link href=“http://fonts.googleapis.com/css?family=Corben:bold|Nobile” rel=“stylesheet” type=“text/css”>

Just my 2 cents…

Whilst I appreciate that many (most?) developers struggle with design, they would be much better off learning a few design fundamentals, which they can then build on for the rest of their careers. Frameworks come and go, and so do fashions and trends. Design fundamentals don’t change.

I don’t buy the idea that design is unlearnable or somehow innate to the right-brained elite.

The same applies vice-versa: I’ve met plenty of designers who deliberately distance themselves from doing any development work because to them it’s black magic. This is self-limiting laziness caused by pigeon-holing yourself into mythical left/right brain categories.

Get out of your comfort zone and learn what you don’t know properly. Your future self will thank you and World Domination is yours for the taking.

What’s up with all the crying in the comments?

I’m really scared by the comments here. As a long time programmer I always thought that programmers were critical.

But commenters here are extremely radical and didn’t get the point of the article: it is really meant as a bootstrap for someone quickly wanting to jump into a design of website without spending thousands of dollars or hundreds of hours.

(I wrote the book you mention in #9 – thanks!)

Great article, Anna! I didn’t know about Wrap Bootstrap or Subtle Patterns. The latter will be good for a project I’m working on (I may even use Cream Dust), and the former – maybe I can make a Bootstrap theme soon.

Google Fonts, Typekit, and other services are awesome. In my conversations with budding designers, I’ve found it can be really intimidating to choose from the sea of choices on these sites, though. Even I have only come across a few typefaces there that I’m really crazy about.

I just wanted to let your readers know that if they’re experiencing “font anxiety,” I have a PDF available at my book’s site (URL next to my name) called “All of the fonts you’ll ever need,” which I’ll immediately email to them if they enter their address (they’ll then be subscribed for more emails about design, but they are welcome to immediately unsubscribe if they like).

This PDF doesn’t have the more “exciting” fonts that you find in Google Web Fonts or Typekit, but it does offer some simple recommendations, and describes some classifications for those fonts that are useful for knowing what fonts to pair them with, and what mediums they work best on (some fonts aren’t so good for screen).

Thanks again for the mention, and I hope your readers get some use out of my book should they choose to check it out. If anyone has any questions, I’m pretty active on twitter: @kadavy.

This is the best article I’ve read recently. Thanks a lot for posting. I am a php programmer with very bad designing skills :p. This article was really helpful. Bootstrap is just awesome.

I know how you feel! It is depressing to be stuck in “can’t make a pretty website” mode.

Even though I have a C in Java I can not call myself a programmer, and neither a designer. Because of this I am stuck with the standard Wordpress theme.

I don’t even dare to switch up the WP theme now, because of all the small edits I have done in the script as well as the plugins.

By the way if you guys want to look “elite” just because you comment “OMG Bootstrap is for noobs”. No, you don’t look professional nor elite, you actually look very unprofessional. At least comment something constructive, like “don’t use Bootstrap because of this and that”.

This reminds of the Ruby on Rails X PHP childish wars.

As it stands this is a great collection of tools and tips for decorating a page, but as a first step you should be asking yourself “who am I designing for” and “what do I want people to do” – this is what (as a starting point) should influence your choices in typography, colour, layout and content.

Reduce lock-in to one particular CSS framework by extending Bootstrap CSS with your own semantic style classes.

Some posts that cover techniques to do this …

Please stop embedding Bootstrap classes in your HTML!

A Tale of Two Bootstraps: Lessons Learned in Maintainable CSS

Nice article to get folks rolling quickly :)

As a designer who’s worked with coders for a long time, one of the big differences between the disciplines is what we see: I’m looking for design issues; they’re looking for code issues. So I think half the battle is learning to put your code-head to one side, & learn to look for other things.

A great way of helping you look through someone else’s eyes is user testing. Get some non-coding mates to look at your site:
* Ask them to narrate their thought processes.
* Their 1st utterances will tell you what their primary usability issues are.
* Look at the faces they pull too.
* Pay close attention to all the points they raise.

Testers will say confusing things that need dissecting: try not to dismiss feedback as irrelevant just cos “I just don’t like it” is hard to decipher. With a bit of prodding, they will start to tell you what’s making them feel uncomfortable.

A great reference on basic design principles is “The Non-Designer’s Design Book” by Robyn Williams. It’s now in its 3rd edition & is useful for design novices & experts alike. Apply its advice from the outset, & again after each round of testing, & you’ll be on to a winner.

A couple of tips that I want to share from reading this post;

1) It’s as much about what “not” to add when designing. Adding more and more into your site might not be always right.

2) Get feedback. If you know a designer just ask them for some quick tips about the general look. Getting feedback is a dream in the design world and no design should live without it. If you don’t know someone who designs then you can seek feedback on communities like Dribble and Forrst. Do not be scared, its about the work not you.

I can’t stress point 1 enough here. Don’t just add CSS3, textures and whatever just because it brings something visual to your work. Ask yourself if it’s needed first and then apply it. I hope that helps :)

Your CSS3 example doesn’t appear to be working, but your particular use of text-shadow isn’t really great design. Adding a grey shadow to black text just makes it look blurry.

My rule: only ever add a light shadow to dark text, or a dark shadow to light text. By extension this implies only use text shadow on a coloured background, not pure white or pure black.

Thank you for this very handy post!

I’d like to give my two cents about the contents container.

I like to reduce the number of images as little as possible.

Instead of (or in addition to) using the ‘cream_dust_transparent.png’ image, you may want to consider this:

bc. .container-narrow { background-image: url(/img/cream_dust_transparent.png); background-image: rgba(255,255,255,0.8);
}

The use of “background-image” for a color is intentional, in order to provide an image fallback for browser that don’t support rgba().

Actually I didnt expect a Bootstrap-based post like that :D Bootstrap is my favourite framework of all time. After I discovered Roots (and Wordpress Bootstrap by 320press) I began building my own themes. At the beginning it is hard to understand (i was used to super easy-to-use wordpress themes with lots of graphic customizations possible), but when you understand the power of Bootstrap and HTML5, you’ll always use them.

I have no problems at all with developers trying to make their sites attractive.

It’s not uncommon for agencies to use bootstrap and / or WordPress theme, change an image or colour and charge many thousands (even tens of thousands of pounds) as unique work. Hurtful and damaging!

Boostrap is great for prototyping or to put up a quick mates site but it forces a certain grid to be used and therefore stifling creativity from the very off, as the mindset of that grid / layout has been defined.

That said the tips take a terrible site into something respectable, and a developers site is good use, it’s just what else bootstrap is used for.

@Andrey quoting the first paragraph:

“Programmers like me are often intimidated by design – but a little effort can give a huge return on investment. Here are one coder’s tips for making any site quickly look more professional.”

Perhaps you’re right – maybe no decent designer should “be EVER introduced Bootstrap”, but the author clearly states she’s not a designer.

People have different skill-sets. As an example, I specialise in back-end & JS development. At my day job I work with a team of developers, project managers and extremely competent designers. The designers on this team do custom hand-coded design work, from start to finish. On experimental or personal projects, I work alone. In these latter cases, where I must perform every task, including those that I do not specialise in, I do use methods described here.

It may amaze you, but not everybody who works in the web space aspires to be an excellent designer.

Dar Anna- This was an excellent column for my POV. As a potential startup with no money to speak of but a desire to make something less cookie-cutter and more pleasing to the eye, your tips make great strides. I realize purists & professionals are horrified by the framework but it really does break down the essentials into more attainable parts for those who just need to get the job done. At least a 1st pass attempt. Once we’ve reached critical mass, we’ll be able to hire all you design superstars!

Keep these great pieces coming.

Best, Chief Foodie

“it [Bootstrap] democratizes the whole process of web design. ”

I think if throwing in some grids, consistency and fonts does democratise anything, it democratises reaching a certain degree of attractiveness on a page. Which is not much wrong with, but I’d like to make the distinction between ‘making some attractive’ and ‘design’ or even ‘beauty’ (as ‘design’ is something one would hire an expert for, as it needs to be done with intent, specific skills, knowledge of the context of the project and whatnot).

Interesting article though, good read!

What’s the deal with the license issue for color patterns suggested in this article? Can a color pattern really be copyrighted? That makes no sense whatsoever.

I just would like to thank you for your article. I’m a small coder from Italy and here modern web technologies aren’t used a lot, except from some startups.

I found your article really helpful, I have to start building my personal website during Christmas and I think I’ll buy design book because, lucky, I still have some time to spare.

Thanks for your precious suggestions.

Thanks for awesome steps, I prefer to start from ready made themes (free or paid) which has exact features or at least has all things to cover my requirements

Bootstrap is one of the best web innovations out there. For me it takes gui development time down to at least a third, time that I can use to be creative in other, more important parts of the project.

Just found this article, searching for bootstrap solutions for websites. Very interesting to read the discussion as well.

I have to say design is important, though not sure why some people in these comments would want to deter from Bootstrap. It’s a newer platform, but from what I have seen it seems to optimize quite seamlessly in terms of design functionality and the user friendly nature of it does seem to work well for people looking to optimize the site and lower their bounce rate. Which of course a good design can greatly reduce that and that is a factor when optimizing for searches. Anyway that’s just me 2 cents.

There are 3 types of people activating in web dev: programmers(who don`t know what design is, but they develop the world), designers(who have no idea about programming languages, but they design this world) and middle people who are not programmers, nor designers, but knows a bit from this and from that.

Bootstrap is indeed a time-saving tool and every web developer or designer should use it, at least to know how it works and stay updated with development trends. I like the fact that there are themes especially built for Bootstrap which actually helps us save time with our projects and have a nice interface for the users.

Bootstrap is on the right path and look forward to see what they`ll come up with in the future!

To tell you the truth, I like the end result of your second step, 2. Pimp Bootstrap, the most.

For me I would stop and 2 and skip to 8 to add unique color scheme and that’s it. :)

thanks for the design tips!! This was a great way to spend an hour updating a site of mine.

it took only a few minutes to apply them and it made such a huge difference! i had no idea that without photoshop I could use a background texture, and custom fonts. i wasn’t sure how to manage the tremendous number of styles in bootstrap themes. your article pushed me to do all of these and i’m extremely happy with the final result.

this is a plant site and the wood texture fits just perfectly! The site owner was amazed at the bootstrap rewrite. I can’t wait to hear the surprise in her response to this design make over.

thank you!