Time to design a website.
Have you checked you bucket list yet?
I took inspiration from this article on Vandala Design to cast my own bucket list, with free and open source resources to build a web site from scratch.
Let’s start from the CSS layout, there are plenty of site offering open source templates and layouts, here are some I recommend you:
- Open Source Web Design
- Free CSS
- Open Source Templates
- Open Web Design
- Gordon Mac
- Open Designs
- CSS Fill
- Free CSS Templates
- Layouts for free
Then we need some inspiration too!!
Don’t underestimate inspiration: it’s a great way to get a global idea of what the site will be.
Tip: take a deep breath, you’ll get tons of flashes to elaborate, so don’t focus on the very first layout you see, you may change your mind later.
- Zen Garden
- CSS Beauty
- CSS Heaven
- CSS Elite
- CSS Vault
- CSS Website
- CSS Heroes
- CSS Perk
- CSS Reboot
- Web Creme
- Unmatched Style
- CSS Bag
- CSS Fury
Not handy with CSS?
Try some CSS automatic generators, you won’t regret, especially if your layout needs a simple CSS.
For WordPress theme generator you can try this WP Theme Generator or download a demo of Artisteer (check my review here); please note that Artisteer Demo Version won’t let you display your Joomla/WP/Drupal without watermarks unless you buy it. If you plan to use it full time have a buy, it’s a time saver!
If not practiced with command line or hand tagging, we need a HTML composer, so have a look at those free choices.
Tip: already using Dreanweaver or similar? Check the addons and functionalities to maximize your jobs.
Oh, we need some color schemes too!
Let us be amazed by some stunning palettes and create some new for personal use.
Tip: sign up for free to COLOUR Lovers and Kuler and share your palettes and patterns, also save a copy of them in several formats (.zip, .ai, .html) and post them into your website to share with others.
- I like your colors
- Color Palette Generator
- Color Palette
- Color Schemer
- Instant Color Schemes
- Web Color Chart
- Color Wizard
And some glossy 2.0 images, buttons, round corners and miscellanea to boost up.
Tip: don’t abuse, too much 2.0 will kill you!
- Web 2.0 Badges
- Badges Collection
- Fresh Badges
- Clean Badge
- Stripes Generator
- Random Stripes Generators
- Stripe Mania
- Brilliant Button Maker
- Button Generator
- GRSites Button Maker
- Dynamic Drive Button Maker
- Ajax Round Corners Generator
- Corner Shop
- Rounded Corners
- CSS Rounded Corners
- Ajax Loading Gif Generator
- PNG Fix
- Web 2.0 Write
- Pixel Ruler
- EM Calculator
- Feng Gui
- Text Generator
- Ipsum Lorem Generator
A good website is build with a good font, try to find the brightest and coolest in here.
Tip: if chosing a particular font (maybe one created by you), put the file in the root folder or put a link where people can download, install and enjoy your site.
- 1001 Free Fonts
- Urban Fonts
- Font Stock
- Free Fonts
- Simply The Best Fonts
- Search Free Fonts
- Nautical Fonts
- Dingbat Depot
Some special effects for your pictures?
It is necessary to have a special behaviour to differentize from dozen other websites.
Tip: Lightbox is also available as a plugin for WordPress by Giuseppe Argento.
A contact form is essential, I second that.
Tip: try to see what form is better for your website, sometimes the easiest one is the best one.
Icon resources, to be a step ahead.
Tip: brilliant and fresh icons are beautiful to see, pay attention not to miscelate too many different styles or your layout will result in a confusing circus.
- Icon Finder
- Yellow Icon
- Icon Factory
- Feed Icons
- Pixel Resort
- Dry Icons
Icons.. icons.. favicons generator, right?
Tip: animated ones are lovely with bright colors on white backgrounds.
Some interesting Ajax scripts to add a drop of glamour to your pages.
Tip: if using WordPress check twice the scripts aren’t conflicting with some plugins (ie: comments).
Check if there are deadlinks, a dead link is the worse thing a web site can have.
Tip: if linking to external applications with images make sure to insert the “title” and “alt” attribute in the linkages, so people using slow browsers can easily collect the target link.
It is a gret thing to test your sites into multiple browsers to check compatibility.
Tip: .png images need an extra care for IE browsers.
Validating your documents makes sure your code is properly; don’t forget to validate CSS and feeds, adds a more accurate look to your sites.
Tip: atom 0.3 is a deprecated format.
- W3 URI Validator
- W3 CSS Validator
- W3 Feed Validator
- Feed Validator
- Feed Validator (gem installation)
You’re almost done, just need to find out a good hoster: there are so much around that would be a shame to mention only a few, so.. let me Google that for you =)
Once all is done and the website is up, sit down and relax with some good music from Sir Alek!