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

53 Comments

Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.

Got something to add? You can leave a comment below.

  1. Lars

    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…

  2. James

    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.

  3. David Kadavy

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

  4. Stewart Curry

    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.

  5. emma

    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.

  6. Sascha

    I’m kind of a hybrid guy myself and I just recently got into using responsive Frameworks as a tool for rapid prototyping and also production sites.

    When it came to choosing a Framework it was a bit of a tie between Bootstrap an Zurb’s Foundation 3. In the end I went with Foundation as I really like its SASS support.

    But I think at the end both Frameworks would get you to the same level of simplification.

  7. John Reilly

    Hi Anna,

    Really helpful article – thanks for sharing.

    I recently heard someone describe Bootstrap as “normalising CSS in the same way jQuery normalises the DOM” and it’s been on my list of things to investigate ever since (if only to find out if that’s an accurate description).

    Spurred on by your article I intend to pull my finger out and take a look!

  8. Kyle Shrives

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

  9. Scott

    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.

  10. Andrea

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

  11. Danilo Petrozzi

    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.

  12. Hidde

    “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!

  13. James Bliss

    From one developer to another, I just want to say that this is a godsend!

    For years, I’ve puttered around with throwing CSS at it until something tolerable came out. I’ve been reading the bootstrap docs, and it suddenly feels like the sky’s the limit on what I can do. Drop downs scared me before, but now I can use them just as richly as their desktop counterparts.

  14. John Macpherson

    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.

  15. Adam

    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.

  16. Adrian Westlake

    I am sure a lot of developers scared of HTML/CSS will appreciate and learn from this article. However, I do think advising people to just take products off the shelf ‘without worrying about responsive design’ or how things are really done is a little lazy.

    If you want to use bootstrap, really understand how it works, what its limitations are, how you can apply it. Maybe you just want to take some elements of it, not all.

    I am a big proponent of not reinventing the wheel, but taking this copy and paste mechanism for doing things you don’t understand very well doesn’t make for a great quality product over time. It just ends up as a mash-up of different developers code. This can often cause pain further down the line when you get coding conflicts or something does only 80% of what you really needed.

    All of us have time constraints in projects and we do and will continue to make short-cuts where needed, but try to improve on what someone has done or understand it enough to really customise it to your needs.

  17. Michael Robinson

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

  18. Alfred R Baudisch

    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.

  19. Alfred R Baudisch

    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.

  20. Daniel Abrego

    Thanks for this article. This is exactly what I needed. I am going to put it on my reading list to work through slowly when I have more time.

    I am a programmer with limited artistic ability. I would love to read a couple of design books, but right now my reading list is already stacked. I am looking up bootstrap in Pluralsight and Safari books as we speak.

  21. Elise H

    Super helpful, thank you! I know my clients, but couldn’t implement it reasonably quickly, now I can. Useability MUCH better, thank you.

    p.s. I am a volunteer

  22. Francesco Belladonna

    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.

  23. Terje

    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.

  24. Chief Foodie

    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

  25. Jaison Saji

    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.

  26. Ju/

    Up to Point 6, the website looks great. Vanilla, but visible by Real Human eyes.

    But from there on, you fall into myspace-y-2001-like webdesign.
    Plus, asking a pure dev to chose a background image and a color scheme is plain graphical suicide !
    I would say the same about font choice on point 3, but in fact, going the Google Fonts way is kinda fireproof.

  27. Julie Henriksen

    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.

  28. Kate

    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.

  29. Madalin Tudose

    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!

  30. Pete R.

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

  31. Timothy David Sharpe

    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!

  32. Chris Mousdale

    I would not expect an article like this on here. Design is not just about CSS3 effects and fonts – in other words it’s not just visual candy. I thought this was common knowledge now? Obviously not.

    I would spend the time mentioned in this article to ask questions about why your site is not working and then form a brief to work with a designer. To address the key issues with your site. Not just throw random things at your site. What is that actually achieving? Your just wasting time and delaying an inevitable redesign.

    I’m a designer and have used Bootstrap – only when I think the web site / app would require it. I wouldn’t just use it for the sake of using it as it adds thousands of lines of CSS and JS. Plus it actually takes a lot of work to make it look NOT like a generic bootstrap build. For simple designs I have actually found it quicker to just write my own code than get bootstrap up and running, and then try and restyle it.

    So please, spend time asking what your site needs, and why you think it’s not working, rather than just putting stuff on it for the sake of making it look better to your eyes.

    Remember that in most cases you are not your user. What may look good to you may not look good to other people. Especially if your a self confessed programmer and not a designer.

  33. Adam Watson

    Excellent content, Anna! I did not know about Cover Bootstrap or Simple Styles. The latter will be excellent for a venture I’m operating on (I may even use Lotion Dust), and the former – maybe I can create a Bootstrap concept soon.

    But your post is realy informable for a person who wnat to leasrn something new in web designe.

    thnks.

  34. Daniel Higginbotham

    These are some great tips. Anything that helps developers get back to coding is a win in my opinion :)

    In addition to Mr. Kadavy’s book, you might also want to check out my online guide: http://www.visualmess.com . It’s about a ten minute read, and while it’s not aimed specifically at programmers I myself am a programmer and tried to explain things in a programmer-friendly way.

  35. John Locke

    I’d read this article before, just read it again after a few months. I still feel the same. Bootstrap is fine for prototyping a site, but it’s not a cure-all that can just be slapped on a site to fix it.

    It shouldn’t be taken as more or less than that. Unless having a site that looks and behaves exactly the same as twenty bajilion other sites out there is completely acceptable to you.

    It’s like a designer that only knows Photoshop saying, “Just use jQuery, and now you’re a programmer”.

  36. Matt Keas

    Howdy from Texas :)

    I recently remade my site on a git-powered blogging engine that uses markdown (and customized some of the code). Always handy :)

    I’ve made use of the Skeleton CSS framework, made some simple changes to typography styles and basic code-blocks, added in some colors for pop, animated in LARGE background images above the fold, added in some sexy styles for headers, lists, and block comments.

    Would you recommend anything else for my site?

  37. Paul Christian

    Agreed with some of the previous posters saying bootstrap will lead to sites looking the same. It’s great for beginners, (although I wouldn’t use it because I want to figure things out myself), but… please let’s not use it as a mass product :)

  38. Prasad

    good to see someone getting behind bootstrap!! i think for developing a theme from scratch, its one of the easiest frameworks out there. the tips on pimping bootstrap are spot on .. i had’nt thought of those!!

  39. andrewbarnett

    I shared this article with a colleague who is our accessibility lead. The moment I mentioned Bootstrap he cut me short, saying that the UI parts at least are not accessible. If that is indeed so, it’s an instant deal breaker.

  40. David Lewis

    “…the effect a professional designer could achieve”. So design is just an “effect”? As a supposed member of the “black clad elite” I find that to be an interesting point of view :) Cake decorating is all well and good but call it what it is, don’t call it Design.

  41. Gracie Lake

    I appreciate your talk about style. My sweetie doesn’t have any AT ALL (he wouldn’t mind my saying) and he would rather program and fiddle. I am kind of a font snob, so I wasn’t fond of the font chosen in the final design of your example, but I’m all for the nice clean button and the crisp image border. I will pass along your ideas to him.

  42. digisarathi

    u really made my xmas!!

    i’m an individual startup trying to figure out how non-profits can have elegant websites – like u said, thats where the potential volunteer or donor’s journey of knowing the non-profit begins. n first impression is the only impression.

    thanks so much for sharing your learnings! just the jumpstart i was looking for!

  43. Adam D

    1. Use Boostrap

    NO. Bootstrap is horrible – it’s just designed for noobs who don’t care about their site looking the same as thousands of others. While I understand that you don’t need to use the stock styles, keep in mind that these sites are mostly made by noobs who just copy and paste code – they’re not going to bother making some custom CSS.

  44. digisarathi

    u really made my xmas!!

    i’m an individual startup trying to figure out how non-profits can have elegant websites – like u said, thats where the potential volunteer or donor’s journey of knowing the non-profit begins. n first impression is the only impression.

    thanks so much for sharing your learnings! just the jumpstart i was looking for!

  45. Jason Fowler

    Using conditional statements to target different browsers (IE in particular) is WRONG. It is one of the things holding back the web development industry. Stop pandering to different browser versions. The site doesn’t need to look identical in every browser. http://t.co/1LNuhWm7

  46. Andrey Shipilov

    Stopped reading after section 1. No decent designer should be EVER introduced Bootstrap. If you think the other way, please email me your best 20 websites and if 2 of them are any good, I will excuse myself.

Impress us

Be friendly / use Textile