PayPerTwit

Creating your startup from scratch.
Part 3 – Design, resources & Inspiration

Now we have our idea, the domain name and the programming language. The next step is creating a design. I’ll try to go through the different parts of a good design.

I’m assuming you are a brave entrepreneur trying to launch your startup, but remember that help is always needed, design is not science, is an art and probably you are not an artist. Ask for help. In this early stage of the project there’s no budget to hire a designer, I know, but I strongly recommend it anyway.

The message

First ask yourself about your site, what are you trying to tell? who are you willing to convince? How can you explain your idea in a single web page (your home) in less than 10 secs? Because that’s the time you have to convince your visitor to stay. Your home must tell all of this and be attractive at the same time.

Choose a color palette

How many colors do you need? Depending on the layout, the number of columns, the look you want the site to have and the feeling your home should transmit. Choose your site colors wisely (messages, columns, logo, background…). You better visit lots of websites for inspiration and also use this applications online:

• http://kuler.adobe.com/#create/fromacolor
• http://colorschemedesigner.com/
• http://www.colorblender.com/
• http://www.colorschemer.com/online.html
• http://www.ficml.org/jemimap/style/color/wheel.html

Remember that every color has its own significance : The psychology of color in web design

Typography

It’s always a good idea to choose the right typography. This can be “the touch” for your site, the small detail that makes everything else look better. For compatibility reasons, few typographies are available to be used in the web, anyway you can use some of these Javascript based solutions:

• cufón. Uses the browser to draw vector objects using VML
• Sifr. Requires both JavaScript and Flash to be enabled.
• facelift. Using PHP (and the GD library).

Layout

More decisions to make : fluid, fixed or elastic layout?

• A fixed width site is one where the main wrapper is set to a specific immovable width independent of the user agent’s display resolution.
• A fluid or liquid layout is created by not specifying a wrapper width at all or doing so using the percentage unit of measure.
• An elastic site’s main wrapper and other elements are measured using ems as the unit of measure.

I recommend reading this post about layouts to help you decide.

With the message in your mind you can choose a layout for your site ( header, columns… ). There are some tools to help you create a CSS layout for you:

• http://csscreator.com/tools/layout
• http://www.wannabegirl.org/firdamatic/
• http://layouts.ironmyers.com/

CSS Framework

Optionally if you are not a CSS guru you may prefer using an already developed CSS Framework

Pros : Rapid development, normalization of code, standard compliance and cross-browser compatibility.

Cons : Design dependent on the framework and unnecessary code.

Some popular CSS frameworks are :

• Blueprint
• Yet Another Multicolumn Layout (YAML)
• YUI Grids CSS Foundation
• 960 Grid System
• BlueTrip
• jQuery UI CSS Framework
• CSS Drop-Down Menu Framework
• Hartija – CSS Print Framework

You can find a complete list of CSS Frameworks here

Inspiration

Before starting with the design of the site, once the message you want to transmit is clear, I recommend spending some time exploring the web for inspiration. Some web sites will help you :

• Web Creme
• CSS HEaven
• CSS Clip
• CSS Remix
• Creaticca
• Design Shack

More web design galleries for inspiration

Final notes

Now it’s time to work out your networking skills. First ask for help to your friends & family, but after that try to involve some expert in design. Use twitter and facebook and try to get as much feedback as you can. Your site should be attractive to a lot of people, so it makes sense to let them participate in the making of.