One of them is Smashing Magazine. Another site has popped-up on my always visit list, and which I subscribed to is Mashable. Excerpted (and edited) below is from an article in Mashable – Web Design Toolbox: 130+ New Tools to Make You a Better and Faster Designer.

Edited because I went through all of the 130+ sites listed (yes it was tiring) and in this article, have kept only the ones that matters or should matter to breed of web designers who on a daily basis strive to achieve the balance of creative design and front end engineering.

2 strong criterias behind what gets removed and what don’t from the original list is that first, the sites must be free and no registration required. And second, that it must be an engine that is useful to the creative designer as the end user. Most importantly in the end, even if these sites don’t make you a better designer, they most definitely will make you a faster web builder.

[Addendum] Besides removing items that don’t matter from the list, I have now added in more collections from my delicious bookmarks.

CSS and Code Design Tools

YAML Builder
Easy to use YAML (Yet Another Multicolumn Layout) XHTML/CSS site layout builder.

960 Grid System
Streamline web design production workflow by using commonly used dimensions in grid layout format.

Sky CSS Tool
JavaScript CSS authoring app.

The Box Office
CSS formatting tool for wrapping text around images.

CSSTXT
Online CSS text style generator.

CSS Speech Bubbles
CSS based speech bubbles from Will Mayo.

izzyMenu.com
Free CSS menu builder.

templatr
Online tool for creating website templates.

dotemplate
Template site that allows you to customize templates before downloading them.

Typechart
Browse different typefaces and styles and grab the CSS of the ones you want.

CSS Superdouche
Strip unneeded content and redundant calls from your CSS, reducing its size and complexity.

Code Beautifier
Format and optimize your CSS code.

CSSFly
In-browser editing of (X)HTML and CSS.

CSS Drive CSS Compressor
Decrease your CSS file size and loading speed with this tool.

Clean CSS
Another CSS optimization tool for reducing your CSS file size.

CSS Redundancy Checker
Eliminate unused CSS selectors automatically as well as check for redundancy in your CSS files.

CSSround
Another tool to create rounded corners on your website.

TabCreatr
Create CSS tabbed navigation for your site.

List-u-Like CSS Generator
A tool to create list-based navigation bars.

Form Designs

StyleIgnite
Design snippets (CSS, HTML, and more) for contact forms, layouts, and more that you can use on your sites.

DevSnippets
Gallery of code snippets and examples shared by designers.

pForm
HTML form builder.

Form Style Generator
Create your own CSS-styled Web forms.

Graphics, Patterns, Buttons, Icons and FavIcons Generators

BgPatterns
Background pattern creation tool with live preview.

The Effect Generator
Create animated slideshows, buttons, and more with this tool.

ColorJack
A color scheme gallery that also explores color theory.

Cornershop
Get the CSS and images to put rounded corners on your website.

Artypapers Buttons
Customize buttons and collect them on your website.

Favicon Generator
Another free favicon generator.

favicon maker v1
A free, basic favicon creator that lets you create a favicon from scratch or an existing image.

favicon.cc
Another free favicon creator.

Stripe Designer
Create background stripes for your website.

Loader Generator
A tool to create loading spinners.

IconsPedia
Free, huge collection of icons.

Colours and Style Palette

ColourLovers
A colour resource that monitors and influences color trends.

The Color Wizard
Submit a color and this tool will bring back matching colors.

[ws] Color Scheme Generator 2
An easy to use color scheme creator.

Color Hunter
A color palette creation tool that lets you pull color palettes from images.

4096 Color Wheel
A color scheme generator that shows you Web-safe, Web-smart and unsafe colors.

colordb
Another color palette generator, though this one is much more in depth than most.

colorcombos.com
A huge library of color combinations.

ColorToy 2.0
A Flash-based color palette generator.

Accessibility Color Wheel
Check the readability of your background and text color combinations. This tool will tell you if there is enough contrast between the two.

Cymbolism
A color tool that includes information on what emotions and words are associated with different colors.

Instant Eyedropper
Grab the color code of any color on the Web with a single mouse click.

Design Galleries and Creative Inspiration

CSS Import
Gallery of beautiful, full CSS websites.

CSS Mania
Another gallery of almost 12,000 CSS website designs.

FullSingle
A gallery of really awesome single-page websites.

We Love WP
A showcase of WordPress powered websites (not just blogs).

One Page Love
Another showcase of great one-page websites.

Screenalicio.us
A Web design gallery with more than 10,000 screenshots.

The Best Designs
A huge showcase of Web designs and designers.

Pattern Tap
Design gallery of different website elements (headers, 404 pages, and the like).

eduStyle
A Web design gallery specifically featuring academic websites.

Designflavr
Design galleries for all sorts of artwork, including Flash and CSS websites.

View
Showcase of website that can be sorted by color or other criteria.

InspirationKing
A searchable gallery of websites for inspiration.

DesignerSource
A website design gallery that is browsable by topic or color.

BestWebGallery
Tagged website design showcase.

StyleVault
Another Web design gallery that lets you rate designs.

APPLE

NOKIA

GOOGLE

IBM

CANON

MICROSOFT

XEROX

FIREFOX

PALM

NORTEL

MOTOROLA

LG

If anything, these are our benchmarks that any web form design must meet.

Extracted and condensed are the survey results below.  Actual links (with nice graphical charts) to both parts of the survey follows right after.

Here it goes. Web Form Design Pattern Best Practices Part 1…

- “Sign Up” is most popular link title to form (40%)
- The header is the most popular place to put the link (59%)
- Placed at top right hand corner (76%)
- Simplified design when compared to page layouts (61%)
- Benefits of registration are presented next to form (41%)
- One-page forms (91%)
- Using bold to highlight title of input fields (62%)
- Right aligned labels closer to input fields (41%)
- Only 3 to 5 mandatory fields (50%)
- 6 to 8 mandatory fields (30%)
- Zero optional fields, only collected after sign-up is complete (62%)
- Less than 5 optional fields (98%)
- Vertically arranged forms (86%)
- Do not have asterisks* to indicate mandatory fields (78%)
- Progress indicator (9%)
- Simple web form with as little fields as possible (86%)
- Grouped and divided by white space (69%)
- Divided by borders (22%)

Web Form Design Pattern Best Practices Part 2…

- No hover, active, focus effects in use (84%)
- Static help support placed obviously next to input field (57%)
- No hints (33%)
- Error messages at the top – no fields highlighted (30%)
- Error messages highlighted at form fields – no top message (29%)
- Both top error message and error fields highlighted (25%)
- Real-time AJAX validation warning or error (22%)
- Colour Green used to indicate success, and Red to show failure (97%)
- Not necessary to ‘confirm email address’ by second input field (82%)
- Necessary to confirm password (72%)
- Captcha not in use (59%)
- Cancel button not used (92%)
- Left-aligned submit button (56%)
- After successful sign-up, load non-mandatory fields or tell friends (45%)
- After successful sign-up, recommend places to go or link to click (33%)
- After successful sign-up, basic thank you page with no extra links (4%)
- After successful sign-up, redirect to homepage (2%)
- Using tab indexes (99%)
- ‘System Talk’ tone and manner – Login, Password, Location (38%)
- ‘Business Talk’ tone and manner – Your name, Confirm Password (38%)
- ‘Conversational talk’ tone and manner – Tell us who you are, etc (22%)

Too much text! IToo much to read. Don’t understand. I know.

So here’s the link to both parts – Part 1, Part 2.

Very often we hear the word “REVAMP” or “REDESIGN” something (especially web sites) in our office. But what does these words actually stand for? How far do we need to go? What do we need to consider when we want to ‘change’? Total change? Remain some old elements and change some? Just move around some elements/sections in the page? Change some colours?

I found this article about ‘changes’. It seems a bit dry but sure is a good read.

Just click HERE!

Here are links to icons sets that help you shorten design and development timelines. Starting with…

Stock web icons
Fineicons – Nice general sets of icons. Not much design to it but most definitely worth a visit and a download. For icons that serves it’s purpose, fineicons is it.

eCommerce icons
Free Credit Card Logos & Images – About 70+ credit card logos to choose from. Say yes to no more ugly bitmapped logos.

VirtuaLNK Credit Card Icons – Set of 3D icons. Makes it a little nicer. But will make more people buy from your site? Who cares. It’s nice.

Credit Cards Pixel Iconset by Seusbox Studio – Buttons. In PSD for custom appearances if need arise.

Free eCommerce icons from Web Design Belfast – eCommerce related page icons and buttons.

Web design and development icons
Light Icons Set by Kryztof Kolartorski – Light, clean and stylish

Rss icons campaign by Design Freak – Fancy RSS icons anyone? Yummy.

Smashing RSS/Feed Icons – Available for both MAc and Windows from sizes 16×16px to 512×512px. That’s big.

Mini web icon sets
Vaga by Ed Merrit – Set of 60 icons ready to be inserted into your web work.

Monofactor Icon Set by Onur Oztaskiran – In Illustrator format which makes them scalable. Free to edit and tweak.

Web Development Icons – Ajaxible icons for web development. Free and reusable for any project.

Circular Icons by Ben Billbanks – 100+ web and ajax ready.

Flags of the world
I’m not a Patriot – Much nicer than those flat ones I’ve been seeing a lot of.

Mobile device and phones
Mobile Device Icons – Need mobile device icons or imagery? Here you go. 60 of them. Blackberry phones here.

So there you go. The first round of free, reusable icon sets for web design and development work. Enjoy!

Widgets, widgets, widgets. The Web 2.0 invasion have officially invaded our shores. If like us, you’ve been getting demands for widgets this and widgets that, then we recommend the ClearSpring service that widgetises everything you could ever want. (Free for now, but most definitely for a fee later. Sorry).

This is from ABC.com’s Dancing With the Stars Site.

If i got right reading the documentation, ClearSpring is providing a hosted service where corporations and web media owners can build widgets using the tools provided.

Once done, owners will be given a javascript code to insert into individual pages. Through these Jscripts, users get to do what is needed wit the widgets. Embed, cut, paste, share, stuff typically one would expect with widgets.

This is good because it takes the task widgitising away from technology and into content owners. But this does come at a price though. How much? Don’t know. But as much as it would take to host and serve the widget through their hosting service I’d say. Probably on a pay-as-you- use basis. So the more famous your widget gets, the more you pay.

For more, visit Clearspring.

I was really surprised to discover an article about this wheel. Here is a bit of overview of this magnificent structure.

About The Wheel

The Falkirk Wheel is the spectacular centrepiece of the £84.5 million ‘Millennium Link’, the UK’s largest canal restoration project, developed by British Waterways to reconnect the Union Canal with the Forth & Clyde Canal, re-establishing east to west coast access for boats.

Apart from being an engineering and design wonder, The Falkirk Wheel is a great day out. From the stunning Visitor Centre and basin, set at the heart of a natural amphitheatre of landscaped grounds, you can view the revolution of The Wheel or go for a stroll to see it from all angles.

The Design

The original concept of a wheel to act as a boat lift actually dates back to 19th Century Europe, but it was first seriously considered by British Waterways as a solution for Falkirk in 1994. Dundee Architects, Nicoll Russell Studios presented a Ferris Wheel type design that was used to secure Millennium Commission Funding for the Project. The development of the project was then secured by a consortium led by Morrison-Bachy-Solentache, and that included Scottish architects RMJM. The combined team then reappraised the original designs of the Wheel. The objective uppermost in all their minds was to create a functional boat lift that could raise and lower boats swiftly whilst celebrating the reconnection of the two historic canals with a structure worthy of a new millennium.

How Does It Work?

The Falkirk Wheel lies at the end of a reinforced concrete aqueduct that connects, via the Roughcastle tunnel and a double staircase lock, to the Union Canal. Boats entering the Wheel’s upper gondola are lowered, along with the water that they float in, to the basin below. At the same time, an equal weight rises up, lifted in the other gondola. This works on the Archimedes principle of displacement. That is, the mass of the boat sailing into the gondola will displace an exactly proportional volume of water so that the final combination of ‘boat plus water’ balances the original total mass.

Each gondola runs on small wheels that fit into a single curved rail fixed on the inner edge of the opening on each arm. In theory, this should be sufficient to ensure that they always remain horizontal, but any friction or sudden movement could cause the gondola to stick or tilt. To ensure that this could never happen and that the water and boats always remain perfectly level throughout the whole cycle, a series of linked cogs acts as a back up.

Nice place to take photographs, right? What I can say about this is great design with good use of money from the Government to preserve the canal and promote tourism to the country.

For more information about this wheel, please go to The Falkirk Wheel