How to be a webdesigner: the bucket list of free resources

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:

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.

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.

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!

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.

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.

Icons.. icons.. favicons generator, right?
Tip: animated ones are lovely with bright colors on white backgrounds.

Free stock images: Stock Xchange or check deviantART for some valuable free stocks.

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.

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!

full-stack graphic designer | italian community manager | social media manager | blogger, autrice e saggista | appassionata di Giappone, poker e pianoforte | mai senza occhiali da sole | attaccabrighe per natura