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

home » CSS, design, graphics, website

12 June 2009 650 views View Comments

» vCard | lsd@twitter | the Japan serie | lsd@tumblr | lsd@flavors.me

Hello you! If you are new to ./lsd, you might want to subscribe to the RSS feed for updates on this topic.

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.
Enjoy!

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.

NVU (which I contributed the Italian translation)
Kompozer
CSSED
Bluefish
Aptana

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!

You also may find interesting

E ancora:

blog comments powered by Disqus

./lsd on twitter

random quote

“I would not kill the Jews, I would toss a penny between them and watch them fight to the death.”

Achmed the Dead Terrorist

./lsd is built with

Server Information
Ubuntu: is a free, Debian derived Linux-based operating system, available with both community and professional support.

Apache: has been the most popular web server on the Internet since April 1996.

Frameworks
PHP: is a widely-used general-purpose scripting language that is especially suited for Web development.

Document Information
XHTML Strict: liquidskydesign.org claims XHTML strict status (verified). XHTML Strict is the same as HTML 4.01 Strict but follows XML guidelines.

XHTML Friends Network: is a simple way to represent human relationships using hyperlinks.

Cascading Style Sheets (CSS): is a stylesheet language used to describe the presentation of a document written in a markup language.