Resources to Hack Design

06 Jan 2012   design and startups
Car
You don't want your powerful site to have design hacked together like this, right?
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 Basics

To 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 Tutorials

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

CSS3

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

HTML Layout (via CSS)

This is the first thing you need to get right probably, yet building a site layout from scratch can take some time. I'm a HUGE fan of Twitter's Bootstrap. It's clean, intuitive, and comes with some nice Javascript plugins. Blueprint has been popular for years too. Compass is another. If you want to get really ambitious, you can try to design your site around the 'responsive web design' theory, which basically states your site will respond to its environment (mobile vs. laptop vs. tablet display) and adjust its design to look appropriate on each device. A few frameworks to consider for this (none of which I've actually used yet, but hope to soon) are 320 and up, The Goldilocks Approach, Foundation, or Skeleton.

Custom Background Patterns/Images/Textures

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

Color Layout

If 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 Fonts

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

Free Icons and Images

You'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. Icons were another need of mine, and I was surprised to find many excellent options here.

Video Production and Hosting

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

Site Launch

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

Other Resources I Haven't Used

And If You're Just Too Lazy To Create Your Own Design

Then 'mimic' someone else's. Ok, don't copy it completely, but draw inspiration from various sites. Use your browser, ideally the Chrome Developer Tools or Firebug with FireFox, and pinpoint elements you find appealing. Look at their HTML and CSS and see how they implemented and positioned the element. 'Port' your newfound knowledge over to your site.

Conclusion

And finally, this excellent slideshare on Design for developers will help your cup runneth over on design knowledge and resources. Of course, a hacked design is no substitute for a professional, talented, full-fledged designer. But, if you don't have the resources for professional design, this should hopefully help you hack together a site design that's fairly attractive to new users.