Click here to return to our portfolio

Dejan Cancarevic from StylizedWeb.com reviews the basics of Search Engine Optimization (SEO). Simple things that you may not always think about, but that can dramatically improve your ranking and positioning in major crawlers.

Learn SEO Basics

» Learn SEO Basics at StylizedWeb.com

Prefiltering is a good thing. Having expert people crawling the web and indexing its best resources so you just have to browse through the summaries is a key benefit, no doubt about it. The guys at Fonts 500 have done a terrific job: they surfed an insane number of free fonts repositories, sorted the best available fonts on the overall number of downloads, and then compiled all the results in a slick, crisp interface, making all those packages available at your fingertips. Isn't that great ?

Fonts 500

» Fonts 500: The 500 best free fonts on the web

Web development is a strange animal: it grows faster than anything else, obliging designers and developers to keep themselves constantly up-to-date, much more than in other field. Stay a couple of months without reading about new tools and tehcniques, and you're history. At The Art Company, we keep an eye on the recent developments and collect new ideas and methods for our readers. We've choosen for you 20 CSS techniques, tips and tricks that you may find handy.

Generic techniques

» Rounded corners with images and without images
» Super Simple CSS barcharts
» CSS flowchart-style diagrams
» CSS-based navigation: menus and tabs
» CSS Menu maker
» CSS design: going to print with CSS
» Positioning a footer with CSS
» CSS Panic: a guide for the unglued

Image and popups

» Hoverbox image gallery
» Pure CSS popups
» CSS Map Pop: CSS image maps without javascript

Forms with style

» A CSS Stylesheet Collection for Web Forms
» Prettier accessible forms
» Styling even more form controls
» Tableless forms
» Rediscovering the <button> element
» CSS star rating redux

Layout and galleries

» Iron Myers' CSS Layouts
» IntensivStation's Templates
» CSS Zen Garden

The JS Framework scene today is heavily dominated by three major players: Mootools, Prototype and JQuery (I'm not discussing Rails here). So when a rookie enters the game, it certainly deserves a closer look !

The Spry framework for Ajax from Adobe Labs

Rookie, really? From the name of its proud father, I wouldn't call it a "rookie". The Spry framework for Ajax from Adobe Labs is a JavaScript library that provides easy-to-use, yet powerful Ajax functionality that allows designers to build pages that provide a richer experience for their users. It is designed to take the complexity out of Ajax and allow designers to easily create Web 2.0 pages.

The Spry framework is a way to incorporate XML, JSON or HTML data into pages using HTML, CSS, and a minimal amount of JavaScript. It's HTML-centric, and easy to implement for users with basic knowledge of HTML, CSS and JavaScript. Spry was designed such that the markup is simple and the JavaScript is minimal. By building the front-end of your web application with Spry you enable a more efficient designer-developer workflow by keeping UI separated from back-end application logic.

» Spry framework homepage
» Spry framework demos and samples

Every developer in the world knows that a picture is worth a thousand word, that's why they use icons to represent common actions, notification of important concepts, and also to illustrate their applications -- online or not. So we all agree that icons are essential. However we also agree that having beautiful icons is a definitive advantage since it can be used to attract the user's attention where we need it.

We carefully hand-picked some high-quality icon libraries for you, so you can use them in your daily work. As usual, make sure you read the license agreements, since not all the packages are free for professional use.

» Tango Icon Library

Tango Icon Library

» InterfaceLift icons for Windows and MacOSX

InterfaceLift icons for Windows and MacOSX

» Social Bookmarks icons

Social Bookmarks icons

» Famfamfam Icons

Famfamfam icons

» Zeus Box Studio's feed icons

Zeus Box Studio's feed icons

» Pixelgirl's icons

Pixelgirl's icons

» Sphere Graphics icons

Sphere Graphics icons

» GoSquared vector icons

GoSquared vector icons

» Pixelpress icon set (for mac, in .dmg format)

Pixelpress icon set

» Everaldo's YellowIcon library

Everaldo's YellowIcon library

We'll stop here for now, but we'll continue to update this post with new repositories as we find them. However we have a little tip for you: there are thousands of icon repositories on the web, many of which hold quality icons for MacOSX. Despite the fact that OSX uses its own custom format for storing icon definitions, there is a quick and easy way to convert that format to PNG. Of course, you'll need OSX... but that shouldn't be a major issue!

Every website includes a certain part of interaction with the visitor, most often through forms people have to fill in in order to get more info, ask for a quote, get in touch, leave a comment, etc. Designing a form is certainly not what web designers like best. In fact, if you're like me, you should rather hate this step. Whatever I try, my hand-coded forms always looked ugly and amateurish. Until one day, I found this lovely little tool that designs perfect forms: Appnitro's pForm.

pForm lets you create great-looking HTML forms in seconds, through a comprehensive 3-step process : first, you choose a color template.

Creating a form with pForm - step 1: choose a color template

Then, you place your various elements on your form (you choose between generic elements like textfields, textareas, or you use predefined ones like name, date, country), edit them and reorder them as you wish through drag-and-drop.

Creating a form with pForm - step 2: put elements on your form

Finally, you download a .zip archive that contains all the pieces of your form (CSS, HTML, images and javascript). Below is a form I created in exactly 30 seconds!

Creating a form with pForm - step 3: download the form elements and put it on your website

One thing pForm doesn't include in your form is the validation part. This is something you'll have to take care of on your own -- and I think it's a good thing, since we all have our preferences for validating user inputs (personnaly, I like to rely on some prototype-based libs). However, if you need the full package, Appnitro has a full-featured version, called MachForm, that includes validation, relies on PHP, integrates nicely with a MySQL database, and costs as low as $39 for a single site license.

» Appnitro's pForm
» Appnitro's MachForm

One of the most valuable resource for design professionals is typography. However, as a major disadvantage, not only are packages extremely expensive, but also fonts collections are most of the time badly organized, with poor navigation and cluttered previews.

Well, that was the past.

dafont.com welcome page

Let us introduce you to dafont.com, an extensive collection of fonts conveniently organized in clear categories, with a powerful search engine, a clean user interface and strong preview capabilities. Dafont offers today more than 7,000 fonts, most of which are completely free, and downloadable with a single click in Truetype or Opentype formats.

dafont.com provides strong customization and search capabilities

Of course, not all fonts available from the website are really free -- even if most of them are. Some are limited to personal use only, some are shareware and some are demo versions. Furthermore, each font features licencing and author's info, so you can't be mistaken. But anyway, dafont.com is definitely one of the greatest font resources available to design professionals.

» dafont.com

We all love vector art, but we might not all master the essentials of vector drawing. In order to unleash the creative beast in us, n-Design Studios, a well-known player in the web industry, has released several free, step-by-step Adobe Illustrator tutorials. Make sure you take a look at these, you'll be amazed how easy certain things can be after all...

n-Design Studios Illustrator Tutorials

» n-Design Studios Illustrator Tutorials

Now that the company is on track and that we have more work we could ever hope, it's time we give back to the community. So, we've decided to start this little blog.

What will you find in there?

Mainly links to free resources, free fonts, free vector and bitmap graphics, free audio clips, free software... Lots of things, but mostly free. From time to time, we may also review more developer-focused material, such as javascript framework extentions, coding techniques, CSS/JS tips, etc...

How often will this be updated?

Ok, we know the question... To be honest, we can't guarantee a 100% daily update. However, we'll do our best to make sure this blog flows and that new and fresh content regularly flies in.

OK, that's all for now, folks. I leave you with the first articles.

© 2008 The Art Company – All rights reserved.
"The Art Company" brand and logo are the property of The Art Company.
All other brands and names are the property of their respective owners.
XHTML - CSS