Resources to Hack Design06 Jan 2012 design and startups
So you've built a powerful, useful site that the masses would love to use. Great! But, like many bootstrapped startups, are you a bit lacking in design talent? Photoshop cost several hundred bucks alone, and crowdsourcing options like 99 Designs or Crowdspring can be even more expensive. For the bootstrapped startup, that's significant money that could be used elsewhere. When I first started SkipScotch and was actually planning on pushing it as a full-fledged web application, I seriously considered going down the 99 Designs route, as I was far from knowledgable on web design. And while SkipScotch is currently no beautiful piece of web application art, I think it suffices as design sufficient enough for initial launch (and I know 10x more about design now than I did when I designed it). I did it paying $0 for design. Here's the free resources I found that can help polish your site and not send users/investors running away on initial glance.
First, You Should Probably Understand Design BasicsTo be honest, I didn't and went on sheer intuition. However, looking back, I wish I would have coughed up the $25/month for Treehouse here, at least for one month. They have a great beginner's guide to web design. Their Aesthetic Foundations collection is excellent, especially the Color Theory section.
Unstructured TutorialsIf you want to go the free, unstructured route, there's still plenty of options (although it's much easier to learn from a Treehouse video over a lengthy blog post). A few resources are:
- Smashing Magazine - one of my favorites. Will frequently provide inspiring posts/tutorials that you can easily utilize in your project (the Polaroids found throughout SkipScotch came from one of their posts)
- Web Designer Wall - just stumbled across it the other day so can't say how helpful it is. Looks polished though.
- WeGraphics - Again, haven't used, but it looks like they have some nice, free textures/images/etc, and others you can use for a monthly fee.
- Net.Tuts+ Design - I've used a few. Quite helpful.
- Cats who Code - Again, I've used a few that were pretty helpful. Looks like they're part of the Smashing Network, so that's a plus.
CSS3While a more ambitious endeavor, I can't recommend learning CSS3 enough. I'm still learning all the powers it beholds, as there are many, but many effects that can be achieved with CSS3 remove the previous need for Photoshop. Custom fonts, text shadows, image reflections, and fancy transitions and animations are just some of the powers of CSS3. Of course, you can get by without it, and there are some compatibility issues with certain browsers (cough cough IE), but if you want to take the time to learn it, I again have to recommend Treehouse's very lengthy list of CSS3 videos. The sites mentioned above also have a nice selection of CSS3 tutorials, but you'll have to piece them together yourself unlike the organized structure presented by Treehouse.
Custom Background Patterns/Images/TexturesSolid color backgrounds can be a bit too plain these days, especially for a site's landing or homepage. Use these resources to generate a pattern and image you can use to create a vivid, attractive background.
- Subtle Patterns - My absolute favorite of all the choices here. A really elegant selection of free, background textures, like denim, brick, wood, rice paper, and so many others. New patterns are added on a weekly basis I believe.
- Patternizer - A nice, flexible tool to generate a purely CSS striped background. Add as many stripes as you like, change color, width, etc, and generate the necessary CSS code.
- Carsonified - has a few free textures to use. A nice selection, but Subtle Patterns is better, IMO.
- Finally, take a look at CSS3 gradients for a nice touch on backgrounds.
Color LayoutIf you take Treehouse's Color Theory lessons, you'll quickly understand that color selection/combination is extremely important to your site, as it can portray stability vs. instability, professional vs. whimsical, etc. There are many theories behind which colors to use, but Kuler is an amazing resource for color layout and combination. You can easily find a color combination for your site there, regardless of your audience. ColourLovers is another, pointed out by kwellman on Hacker News.
Logos/Custom FontsA logo alone can cost several hundred bucks from 99Designs. And while you'll eventually want a logo that accurately portrays your company and what it does, there's plenty of options for the initial bootstrapper.
- Google Web Fonts - Google has a nice collection of freely available web fonts, but I prefer...
- Font Squirrel - Oh, I do love you Font Squirrel. I think the best collection of free, commercial-use fonts can be found here (hell, it says so right on their site)
- Fontorie - A decent logo generator using Google web fonts and some CSS text effects. A logo can be found here, but I often prefer an enlarged font from Font Squirrel.
- Web Font Gallery - An evidently no longer updated gallery of web fonts combined with the powers of CSS3.
Free Icons and ImagesYou're not suppose to use images you find on the internet on your own site unless given permission by the owner. I ran into the issue where I wanted a nice image of Boston to serve as the background for my homepage, yet didn't have the resources to take the pic myself. So, I found these sites which allow users to upload their own photos for free, public use.
- Wikimedia Commons - where I found the photo of Boston on SkipScotch's homepage
- Flickr Creative Commons - from Flickr (obviously), a set of images with various attribution requirements.
- Carsonified - haven't used them, but was tipped off of their existence by Treehouse.
- 91 Free Vector Web Icons - from the always amazing Smashing Magazine.
- Some Random Dude Icons - excellent, free icons complements of P.J. Onori. I don't know who that is, but I've used his icons, and they are excellent.
- The Icon Deposit - I recently discovered this, but I'll definitely be back for what looks like a nice selection of icons.
- Icon Finder - again, thanks to kwellman on Hacker News for pointing this one out.
- Find Icons - kwellman for the win!
Video Production and HostingThis is another area that startups often throw hundreds to thousands of dollars at in order to have a professional looking video. And it's probably not a bad idea to do so, if you have the money. But if you don't, yet you still want to have an explanatory video on your site, here's the cheapest way possible:
- Download the 30-day trial version of Camtasia Studio. It's pretty simple to use. I have no experience in video production or editing, yet churned out SkipScotch's About video in about two days.
- Publish the video to Screencast. It's the only video hosting site I know of that allows an initial free hosting plan of commercial videos. Vimeo is great and all, but you're not suppose to use it for commercial videos without paying.
- Total Cost = $0, as long as you get your video done in < 30 days and your traffic doesn't exceed Screencast's free limits.
Site LaunchNow that your site is looking nice and pretty, you'll likely want to spend some time testing it. In the mean time, build up some hype with a launch page.
- LaunchRock - I used it, and loved it!
- LaunchEffect - A Wordpress theme for launch. Seems they do indeed perform some, if not all, of the functionality LaunchRock provides.
Other Resources I Haven't Used
- Designmoo - in its own words, "a community for discovering and sharing free PSDs, vectors, textures, patterns, fonts, and more."
- Premium Pixels - again, to quote, "a bunch of free design resources & tutorials".
- Design Kindle - Looks like a nice selection of textures, icons, and various other goodies can be found here.