I'm all for getting developers some design skills and I'm sure the book will help. That said mastering anything takes time. Could you give a designer a Rails for Dummies book and claim "Save thousands by not hiring a developer"?
Update:
I'm a full time developer now but I graduated with a design degree. It took me two years of full time development to become a competent developer. Mostly because when I started out I didn't know what I didn't know.
From time to time I pick up design gigs, but I'm a mediocre designer now, mainly because my skills have atrophied. I obviously have a leg up on my dev colleagues, but that's not saying much! However if I had a startup I would definitely hire a pro designer. They're not really that expensive, think of it this way; you're a developer your time is worth, what $100-150/hr? Spend your time developing and pay a designer $50/hr.
On paper, it doesn't make any sense. Why should an expensive developer spend time learning cheap tasks? Surely we can hire someone to do it.
But the math doesn't work like that on a team.
The paper value I've seen in my company is a huge reduction in communication overhead. We aren't constantly pinging each other for revisions of this or changes to that. The design expert will set the original design. Design-savvy developers pay more attention to detail, implement designs more thoroughly, and can make small changes perfectly. It doesn't sound like a lot, but these details are exactly what make a great product.
If a designer had a great idea for a simple app, then yes a Rails for Dummies book would suffice I'd say. So why not the other way round?
Also, it's not always the case that a developer has spare money to pay a designer with (the ideal situation). I don't have cash but I do have some spare time in the evenings to work on my businesses.
this is false economy. saving money is not the objective in testing an idea. The objective is to launch the best product you can in the smallest amount of time. mvp. time trumps money - always.
It's like this. I want to fit a new bathroom in my house. I could do it, but it would take me a week, it won't cost me any money. If I hire a plumber, he'll do it in 2 days and charge $500.
Damn, $500? Well my freelance day rate is $250, so I'll just freelance for a couple of days. Net result is I just saved myself 5 days.
I'd say it's sometimes a little risky thinking this way. 1. wage-days are not a good way of measuring things. You don't take into account recurring expenses, taxes and costs of doing business. 2. Spending your own time on something is rarely a loss.
Do your own plumbing while you have a 2-day work drought: you've learned some plumbing.
As a developer I often struggle with the following things:
Picking a color scheme. What colors work well together? Why do they work well together? How do I find good color schemes? Is there a formula or something?
White space. How much should I have? I normally just operate in increments of 5px until I think something looks good. "Looks good" ends up being smaller than other sites when I actually compare though.
Font choices and colors. I always just use arial for body text and I'm fine with that. My headers always look very bland though. What fonts compliment what? Should my headers be darker or lighter than my body text?
Gradients and box shadows. I know they can look nice and I know some people do it well, but whenever I add this kind of stuff to my graphics I think it looks corny.
Those are some things I find frustrating when designing.
I'd like to second this. Especially the "why". I do recognize a good design when I see it, and there's an overwhelming wealth of tutorials on the web. But, for me, the link is missing - _why_ does this look good?
Why is Helvetica better than Comic Sans? There must be a reason other than "obviously, it looks better". Don't hesitate to show me the math, and the formulas. I got a machine with me. It can calculate pretty good.
You can use a color wheel to come up with color schemes, and I'd try using ems instead of pxs to handle whitespace. Whitespace is negative space, used for contrast to draw attention to positive space, which could be your copy, let's say. Use a grid to make sure you keep everything aligned and to help you figure out where to put stuff in.
I really like Futura or Baskerville for headers, and I think you should pick a bright, contrasting color against the body copy.
Gradients and Box shadows do look really cheesy with just CSS. The trick is that you should always add a little noise, somewhere between 1 or 2 percent, to your gradients or shadows so you can make them look more textured instead of just flat colors. There's a filter called "Film Grain" which I think is much better than "noise", but it's usually an external plugin. You're gonna have to hit photoshop for that, because I don't know if there is a noise/grain css effect.
Have you tried using Adobe Kuler? kuler.adobe.com/
They have a great collection of color pallets that you could use. Start off with a common base and go from there and then test away and get feedback.
I'm in the same boat - a colorblind engineer. I always browse kuler, and google stuff like "web design awards" to find examples. Also, if you can pick up a copy of Illustrator it has a cool color picker feature that allows you to look at different color options based on color theory (complimentary, analogous, etc.)
For choosing colors, I'd suggest starting with a palette from elsewhere. Just like Kuler as louhong mentioned. Starting with proven colors will be better than choosing from scratch. And that applies to everyone, not just you.
I think in your case, feedback and validation from peers will be essential. However you'll have a leg up on the rest of us. Designing for accessibility is a challenge you already understand better than I do.
As for writing copy, there are definitely people more qualified to advise you than me!
For copy, I'm getting a lot out of "Building Great Sentences: Exploring the Writer's Craft"http://goo.gl/9eH5q, which breaks down the craft quite well.
Something that would be hugely useful to me (a code monkey who knows good design when he sees it but is incapable of producing anything that looks nice himself) is a chapter that covers a few essential skills in Photoshop or Fireworks.
Basic nuts and bolts stuff like:
- how to use a few simple effects and filters to blend images in to backgrounds or do a cutout or colorize an image to match the sites colour palette
- useful tips or tricks for designing the chrome of the site (e.g. how to make a menu bar with rounded edges and a gradient effect, how to make nice looking buttons, how to make a textured background, how to blend edges etc.
- how to use transparency and/or layers effectively
Why would this be useful?
Like lots of coders (I assume!), my approach to design is to surf around the web for hours and bookmark sites that I think look good or have ideas I can use. I then spend ages kack-handedly trying to bash bits of screen shots together and introduce new elements (buttons, stock photography etc.) until I have ended up with a design that looks vaguely appealing. If I had a quick cheat-sheet for Photoshop or Fireworks that aided this process it would be a god send!
Great suggestion. Learning design software, at least basics, can be productive.
Some designers will disagree on this point—many are moving away from Photoshop altogether. However it's more difficult to try color variations for a gradient by typing in hex colors, for example. Including up some basic techniques would make sense. (Every professional designer has a few go-to tricks.)
I'm thinking about providing some free design files with the book. Just basic elements, like buttons, styles, etc than can be adaptable. (And easy to translate into CSS.) Would that be helpful for you?
Some basic skeleton elements would definitely be useful - even better if the chapter showing how to use basic tools within photoshop made use of these bundled elements e.g. it showed how to take the button and then apply different effects e.g. change its colour or give it a gradient
One aspect of design that's been on our mind has been naming our product. Any general guidelines about naming websites would also be appreciated. (I've read GoDaddy's suggestions, but useful as they are, they're so sparse.)
This looks like it could be an interesting book, and I'll most likely buy it when it comes out. In the meantime, another great book is "The Non-Designer's Design Book":
Looking forward to the book. We're in the situation at the moment where we have a back-end founder working on our product and me (with no web design background) working on the front-end because I've always had interest in it. Being bootstrapped means that we've had to scour blogs, HN etc and other peoples' designs and consume large amounts of UI/UX books to try do at least the initial release ourselves..
I'm really looking forward to this book. It seems like the perfect thing for a developer like me. Usually I just buy a template from ThemeForest and extensively modify it but I'd really like to start from a blank page one day.
Like programming good design takes practice. Just because you read a book is not going to make you a great designer. The question is are you willing to stop developing and put aside the time to design well or pay someone to do it for you.
False dichotomy. People are capable of doing more than one thing. I'm a designer who writes code. Developers can learn design basics, and doing so will serve them well!
You're right though about practice. That topic is on my outline.
well, i think the point is more "any time you're designing (or learning to design) is time you're not coding" (which, let's be honest, the times that you can actually be doing both at the same time are few and far between) for some folks that's not an acceptable tradeoff, for others it is.
IMHO if you've just started out on a startup - its better to be a designer because you can do customer devleopment without touching a line of code but by having a design which shows the customer exactly what to expect.
After you get a bunch of people begging you to build, then you build.
That's fair. I think it's about prioritizing. At some point, coding new features becomes less important than improving aspects of the design. So the tradeoff will vary with each situation.
You're obviously right. But I don't want to be a great designer. As I said, I've got by with modifying ThemeForest templates but that's always someone else's design. I'd like to work on my own design fron scratch but, at a minimum, I'd like to have more design knowledge when selecting and modifying those templates.
Great idea for an eBook. As a developer without a design background, it would be really handy to know the basics so I could bootstrap things without having to bring in a real designer early on in a project.
Funny thing is that I'm currently "pair-designing" with a designer. He told me he is actually really happy that there are books like that and frameworks like twitter bootstrap out there: it allows him to start working from higher grounds (logo, branding) and avoids dealing with the very basics.
Yeah. There's also just a huge amount of boilerplate HTML an CSS you need when you start a project, it would be great to be able to leap frog some or all of that.
A lot of people who buy this book are going to be developers who think that they can learn good taste in design from a book. It doesnt work that way.
Its all about practice, feedback from someone knowledgeable and iteration. Open up photoshop and try to create a design. You will bumble around like a fool for the first day - even if all your trying to draw is a smiley face.
But as you do this and as you scour the internet for tutorials and start practicing, it gets easier.
Get feedback from someone in the biz (it takes 10 minutes to look at a design and give feedback). Heed the advice and do more designs.
And all said and done the information to do this is already out there on the internet.
All in all, for me, it was just another case of overcoming my learned helplessness.
I'm a designer learning to code, and I'm all for devs learning design principles—I just wish that all these design guides for programmers wouldn't offer themselves as a replacement for an actual designer, or downplay the value of a designer.
I love the idea, but I don't think the page does a good job of selling itself on design merits. Your eyes immediately go to the tertiary copy ("The new eBook for bootstrappers..." etc) because that's where the highest contrast is highest.
The ostensible header ("Become the designer...") is almost invisible (I didn't see it for the first 30 seconds). My eyes keep wanting to drift back down to where the contrast is higher.
The hardest thing to develop as a designer is good taste. This book may provide some quick tips to make a typical developer made design less bad, and maybe that's the goal, but good taste takes time.
As developers what would you think of a designer picking up a book that says "Bootstrapping Development"? Would you think that your designer buddy could read through this book in a weekend and not need a developer for his start up?
You make a fair point, but don't we often see threads that designers should learn to code, if only to be better designers? How is the inverse not true?
I'd never say someone new to design could get results equal to those from a professional designer from day 1. Of course not.
Many bootstrappers don't have the option of working with a designer, but they can still do well enough on their own. At least while their businesses grow and until they can hire someone.
You're right about being able to improve your development skills by learning some design. I was a designer first, and I feel like I channel my inner designer a lot coding every day.
I do think this book will be a great tool, and many people will find value in it. I played out in my head biz guy gives developer your book, and saying "We don't need a designer I got you this!" Which you have corrected me on.
Your last statement is spot on, I was a bit off in my original comment.
Great idea and I am looking forward to the eBook. I have always used and created designs based on what I have liked / what has inspired me and it would be awesome to have a high level structure to go by, that comes from a professional designer. It would be helpful to have a "Checklist" of the most important aspects to ensure which would help validate / update past designs.
Working from what you like and what inspires you is really the best place to start.
I'm planning to include a checklist in the book that's more detailed than the simple preview/cheatsheet on the site right now. Thanks for the suggestion and interest!
Cool idea! Some inputs: I don't want to spoil your party, but on Windows 7 this site is barely readable because of the used web font. This is happening in Chrome and IE9. In Firefox it looks a bit better.
By the way, personally I think some parts of the page feel a bit cramped. Overall, I don't 'get' it intuitively.
It's unfair to judge this book before reading it, but the web page promoting it reads like an infomercial. Specifically, "You are a designer." and "Save thousands by not hiring a designer." make me feel like there is going to be a chapter about making font size smaller and jacking up leading.
What am I getting by reading this? Is it design basics that let me get started with modifying something? Is it the fundamentals? Is it a rundown of common contemporary design elements that can be combined to make a reasonable looking page?
Professional designers aren't selling overpriced witchcraft.
My experience is primarily back-end development, so I'm a complete UI design dummy. I have a stupid question that I always mean to look into "when I have time" - - given topic, perhaps someone on this thread can answer.
Why does the font in the input box on the bootstrappingdesign lander look so screwy and hard to read, relative to the rest of the page? (I'm running Chrome on a vanilla Windows 7 box.)
As mentioned it is a problem Windows has rendering fonts. More accurately, it is a problem all non-IE Windows browsers have rendering fonts. Open the site in IE9 and you'll be able to enjoy it as intended.
I would also advise you not to fiddle with the ClearType tuner, in my experience it will not help you with this problem.
So what is the solution here? I'm sure its not that I should be running IE9 :-)
I'm experiencing the same problem rendering the site on Chrome in Windows 7. I tried running through the ClearType tuning thing - with no success.
However, it appears that Chrome on Windows is the problem here, as it also renders fine in Windows Firefox. Chrome and Firefox in Ubuntu works fine as well.
Here is a Windows 7 comparison of Chrome vs Firefox rendering:
This is getting interesting. For me on Windows 7 Firefox (both 7.0.1 and the current Beta version), Chrome, Safari and Opera all have this issue while IE9 does not. Which version of Firefox are you running?
Edit: Additionally, if I use the so-called "F12 Developer Tools" in IE9 to switch the browser mode to IE8 the font will have the same problem.
Edit 2: I found this article http://www.owlfolio.org/htmletc/legibility-of-embedded-web-f... - I also found a few references to being able to activate hinting for the fonts used in the embedding process. Not sure what the options are from TypeKit (the service used on this site) and I can't check on my own TypeKit account as their website is currently down for maintenance.
The version in the screenshot is 7.0.1. Now I am realizing that Chrome is rendering lots of sites without anti-aliasing, not just bootstrappingdesign.com. Just something about that site made me notice it.
I only see the issue in Chrome and IE < 9. (Fresh install of Windows 7 via boot camp. No ClearType tweaks.)
Typekit does provide samples of how the fonts render in various browser/OS combinations: https://typekit.com/fonts/calluna
(Click "Browser Samples" tab.)
It's definitely a limitation of @font-face and something I should have accounted for in the design. Apologies for poor legibility.
This is an issue with how Windows renders fonts. I believe Windows 7 has a ClearType tuner that could help you. (@font-face via Typekit can exacerbate this too compared with locally installed fonts.)
I'll look into a fallback font for that input box. Sorry it's hard to read.
Update:
I'm a full time developer now but I graduated with a design degree. It took me two years of full time development to become a competent developer. Mostly because when I started out I didn't know what I didn't know.
From time to time I pick up design gigs, but I'm a mediocre designer now, mainly because my skills have atrophied. I obviously have a leg up on my dev colleagues, but that's not saying much! However if I had a startup I would definitely hire a pro designer. They're not really that expensive, think of it this way; you're a developer your time is worth, what $100-150/hr? Spend your time developing and pay a designer $50/hr.