HostBaby Wizard Designer Kit

Please read this whole thing. We kept it as short as possible. Everything here is important to understand.

What it is - the basics

HostBaby is a company that does web hosting for musicians.

Most musicians have similar needs for their websites: music, calendar, news, bio, photos, guestbook, mailing list, store, etc.

Though many want custom-made sites, or want to do their own design, many musicians don't want to learn HTML, can't afford a designer, and just want a basic good-looking easy-to-use musician's website. This new system is for them.

The new HostBaby Wizard is a content management system where musicians can create an entire website from scratch, by answering basic questions about their upcoming concert dates and bio, upload some audio and photos, then at the end : choose a style/design template for their entire site.

The style, layout, and designs are entirely CSS. The HTML is purely semantic, does not say how the page should look, and does not change. Only the single "style.css" file changes the entire design of the site.

The HTML markup and first five designs were created by Dave Shea of CSS Zen Garden fame. If you don't know that site yet, you should spend some time there before attempting a HostBaby design.

Design a great new style: $500

HostBaby will pay $500 for each complete style (with variations) submitted and approved by us.

"style" definition:
a CSS file and related graphics that makes the example HTML in this kit look like a beautifully-designed website, with attention to details.
"variation" definition:
the same basic style, but with a change in layout, details, colors, or font.
"layout" definition:
the shape and placement of the site's ingredients. examples: fixed-width versus full-screen, horizontal navigation versus vertical.

For us to pay for a style, it MUST come with at least three variations - and the more the better. No need to make variations until we approve your original basic style. But once the style is approved, we'll need some variations to consider it complete.

We'll also need the Photoshop masters and any fonts you used to make the graphic lettering, so that in the future when we add new sections to the site, we won't need to track you down and bother you. It's also important that by us paying for a finished design, we are essentially buying the copyright, so that we can be free to use and change this design as part of our system for all future time, without needing to go back to you for permission. But you will always be credited inside our system, including links to your website and contact info, for people who perhaps want to hire you to do other designs.

Anybody is welcome to submit. Just download this kit, unzip it, and play around. Email us any rough ideas or sketches so that we can give you feedback before you get too far into doing it. We have at least $10,000 put aside to accept at least 20 designs. If you follow the guidelines, below, there's a good chance we'll accept it.

If accepted, we can pay you any way you'd like. PayPal preferred.

Timeline: no limit. Sooner is better, but it's more important that you make an amazing design without rushing, paying attention to the small details that make a site look really designed, instead of just templated.

How to Use This Kit

  1. Download and unzip
  2. Open "home.html" in your browser
  3. Take one CSS file, (example: arizona.css or roughpaper.css) and name it "style.css", then reload your browser.
  4. Play around. Look at the code. Look at the site.
  5. Rename it back to its original name, and pick a different file to be style.css. Repeat.
  6. Look at the HTML files. This is exactly how a finished site's HTML looks, so you can design to it exactly.
  7. Start a new style.css file and create a new directory for your images.
  8. Read the guidelines, below!
  9. Have fun. Be creative. Email us a screenshot at any point, for feedback.
  10. Use any placeholder images you want, in place of the user-submitted images. Even when submitting your design, send us your placeholder artist-images. We'll remove them before publishing, but it will help us see what you had in mind - including the exact pixel-size you want.

What the user defines. What you define.

You decide where you want user-submitted images to go in your design/layout, and exactly what size they should be. In the examples in this kit, anything that is artist-specific is a user-submitted image. All pictures of people, for example, are user-submitted. I don't mean the photo gallery - I actually mean the images built into the very design of the site.

But the user can upload any images at all into the spaces you define. So do not require a user-image to be Photoshopped in order to work with your design. Remember our target audience is people who don't have Photoshop.

Of course you may make a design that would look BEST if they had a faded-blue wispy image that goes transparent into your background color -- but just make sure that if they upoaded an ugly scanned headshot that at least it wouldn't completely break your design. (In other words: design for beauty, but prepare for ugliness when it comes to user-images.)

Users can change the basic-navigation hyperlinked words to be anything they want. That's why we can't use graphics for navigation. Sorry!

Keep the navigation area size-flexible, too. The way our system works, if a musician has no upcoming calendar dates, there won't even be a "calendar" link in the navigation! So there might be people with only three links in navigation - just the basics. The examples given here use all possible navigation pages, but in the future I'm sure we'll add more! So leave room for more or less.

Guidelines for Design

  • Pick one of your favorite musicians of all time. Pretend you're designing a site for them. Full of personality, passion, and quirks.
  • In other words : Don't try to please everyone. Design with one target person in mind.
  • Do not feel you have to do something like the examples here in the kit! In fact use them as inspration for what NOT to do, since they've been done already.
  • Get inspired by the designs at CSS Zen Garden.
  • It's OK to make a design that's genre-focused, like a total hip hop, punk, or jazz design.
  • Your CSS MUST work in all major browsers! (Not Netscape 4 or IE 4, though.) Use BrowserCam.com. Remember that Mac might have a 50% market share among musicians - especially old OS 8/9 Macs!
  • Avoid looking too computer-y. Avoid the plain CSS rectangles. Use curves, rough edges, and things that break out of (or into) the box.
  • Hint: each <body> tag has a class with the name of that page. If you wanted, you could make every page in the site look different - with different images, for example. Not saying you should - just wanted to let you know that's there.

Contact + Misc

Please send your email to Stacy at wizard@hostbaby.com

The "STORE" section is the least-finished and will change, so don't worry about it too much. If the rest of your design looks good, the store should look fine.

If you're not in our Web Designer Database, sign up! People that want to hire a designer go there.