Bootstrapping Design
bootstrappingdesign.com
bootstrappingdesign.com
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.
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.
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.
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.
Do your own plumbing while you have a 2-day work drought: you've learned some plumbing.
If you have topics or ideas you'd like to see covered, please leave a comment or shoot me an email. hello@BootstrappingDesign.com
I'll also be sharing excerpts with the mailing list and on my blog.
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 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!
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.
http://colorschemedesigner.com/
Poking around Color Scheme Designer should also answer your question "is there a formula?" -- the answer is yes, there is (bad taste notwithstanding).
See also http://en.wikipedia.org/wiki/Color_theory and this old comment of mine: http://news.ycombinator.com/item?id=2130084
EDIT: this page, linked from the Wikipedia article, is also quite informative: http://www.worqx.com/color/
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.
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!
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?
http://www.amazon.com/Non-Designers-Design-Book-Robin-Willia...
If you would like some design feedback, shoot me an email. That offer stands for anyone else too, time allowing!
You're right though about practice. That topic is on my outline.
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.
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.
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.
So paint me as skeptical.
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?
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.
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.
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!
By the way, personally I think some parts of the page feel a bit cramped. Overall, I don't 'get' it intuitively.
I like the concept, but I wouldn't be taking design advice that starts with that.
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.
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.)
I'll look into a fallback font for that input box. Sorry it's hard to read.
I would also advise you not to fiddle with the ClearType tuner, in my experience it will not help you with this problem.
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:
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.
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 stuff is so much more credible when it's self-exemplifying.