May 12th, 2009
color palette . css framework . design . inspiration . layout . scratch . startup . typography . web design
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:
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:
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 :
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 :
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.
Creating your startup from scratch
Part 1 – Choosing a domain name
Part 2 – Language, Framework & CMS
Part 3 – Design, resources & Inspiration
Part 4 – Database selection
Part 5 – Hosting or Dedicated Server?
Part 6 – Control Version System
Part 7 – CSS Structure
Part 8 – JS Structure and Framework
Part 9 – URLs &SEO
Part 10 – Testing tools
Part 11 – Promoting your Startup