Never miss a resource again

Best of the best web design tools and resources

Another year ends and a new year begins, there have been 12 months full of news in the web design world, from the New Twitter design to the constant grow of HTML5 and CSS3, there has been tons of events that have changed the web panorama during this year. We spent all the year digging across the web to find those little secrets that were waiting for being discovered.

We have reunited a huge collection of news and resources that saw the light during 2010, we did the work for you and now everything that you missed during this year that ends is here, ready for you to look into it. This roundup covers several aspects that will definitely help web designers and developers, including wireframing tools, widgets, color management apps, text editors and more; you will find along with the link a short review about each item of the list, let’s hope that this list will help you to remember all the good things that the last year of this decade has left for all of us.

New GUI sets

This great freebie was released by the people of Teehan+lax just a few days after Apple officially released its now high selling device iPad. The GUI is free for download and also permitted for commercial use. Ready for download, the GUI comes in PSD format with fully editable and scalable properties.

A few months ago we released an amazing GUI set ready to be implemented on your Android device and will also make your system outstand in front of the rest. The GUI comes both in Common and Sense versions and is also free for commercial use, make sure of read the license file once you download it.

As jQuery works for JavaScript, the jQuery UI is designed specifically for user interface. Easy to implement, you can freely download this theme and understand it after reviewing the documentation. The UI comes originally in PSD format so you can work on it directly.

A previously unreleased GUI set for Mac’s OSX Leopard operative system for all web developers that want to integrate great designs into their own applications, web designers that are currently working with interfaces and may find inspiration on this design and finally for all the Apple lovers that want to enhance their desktops by implementing quality designs and components on them. This nice GUI set was developed entirely by our design team at Iconshock, a signature of pixel perfect and top quality designs.

Includes fully editable vector Photoshop sources.

Customizable Fireworks PNG file.

Original fonts are also included.

Tons of interface elements such as buttons, sliders and more.

Tiny web tools

Minus is a very simple tool that lets you generate and then share custom galleries directly online with your friends, the application is optimized for Firefox, Chrome and Mac’s Safari. The system works by adding the files you want to share and then begin the upload.

We mentioned this nice tool on our “best wireframe tools” article a while ago and of course that we decided to brought it one more time. Markup was developed by Medium utilizing Node.js and allows you to illustrate directly online your ideas and then publish them so everyone can visualize your sketches.

Markup works as a bookmarklet, meaning that you need to drag it to your top bar of your browser.

Thanks to the magic maker, you can create awesome shapes and let the robot do the magic.

This is a very fun, simple, and a huge time-saver implementation that will help you to find darker and lighter tones of a single picked color with tons of ease. It’s really great to have this tool because by just browsing on the standard color pickers you won’t find the precisely tonal scale of a single color. If you’re a graphic / web designer, this tool will definitely save you a lot of time.

Less intuitive than defining tonal scales in Photoshop.

Works directly on your browser so you don’t have to download anything.

Copy the chosen color’s hex code to start using it on your design.

Save a lot of time as if you were using a Pantone table back on the old days.

Placehold.it is a nice placeholder tool that with few amounts of code can helps you to generate different image placeholders, play with the text and format and even have fun with color and size. The service is provided at no cost and can handily become a nice tool for any web developer.

Make different placeholders directly on the site or copy the code and paste it in yours.

If you’re done with Lorem Ipsum, then you will really enjoy working with this tool. Fillerati generates random texts by taking classic writers’ novels such as Herman Melville and Jules Verne. One of the nicest and yet simple releases of the year, considering how many years have passed since the release of Lorem Ipsum.

Find some of the most important authors and novels of all time.

Generate different texts automatically.

Use the slide bar to increase or decrease the amount of paragraphs.

Switch between <p>, <h1>-<h6>, <li> and plain text formats.

Select between tons of different languages, including Spanish and many more.

“Like it? Tweet it!” is a jQuery-powered JavaScript widget that enables visitors to your webpage or blog to write a tweet instantly thanks to a box that shows in the corner of the site, with a link pointing to the site in the input field.

The widget is a really nice tool for web developers because it makes easy for the average user to share your site with their buddies while still providing them the chance to type out something nice for themselves and thus unpleasant auto-tweets.

The box activates by clicking on an specific link.

Tons of customization possibilities.

The best way to invite your visitors to tweet without having to set preformatted tweets.

Yiid Social Sharing Button is a really nice online tool that connect all the major social networks into a single click. Yiid.it may become the solution for those who want to install social sharing buttons within their websites in a clean and fast-loading way.

The site does not require registration.

One simple click will let you share content through all the different social networks.

Save loading times and space inside your website.

Upload management implementations

With Shift 8 you can save a lot of bandwidth and forget about having to save optimized versions of your images in order to speed up your uploading times, the tool has no restrictions regarding its use as it’s completely free, though you can leave your donations if you appreciate the effort.

With Plupload you can easily upload files utilizing HTML5 Gears, Silverlight, Flash, Browser Plus or just normal forms, providing very unique features and options. Plupload uses a GPLv2 license, which you can read about at the Free Software Foundations website.

Uploadify is a stunning and fully-customizable file upload script. The tool is really easy to set up and can be executed with minimal effort and a basic coding knowledge. Uploadify can be download for free but you can always make a generous donation to their creators, who have definitely pulled out a great application for all of us.

Easy to edit.

Upload multiple or single files.

Tons of custom options for advanced developers.

Extended documentation.

Community forum where you can always find the answer to your questions.

Job board editors

JobAppr is a simple and easy to use job board software for all the different types of webpages (bloggers, industry associations, web publishers, non-profit groups, etc.). Starting up the application takes only a few minutes and you will be facing a premium quality job board.

Awesome open-source job board software, Jobber Base will help you create your own jobsite in a matter of minutes, because the tool has an open-source license, you can utilize it for commercial use and download the latest version of it.

Tooltips & notifiers

An upgrade to the original qTip plugin made with jQuery. qTip provides tons of features to work with tooltips and give your sites a trending and more catchy appearance; you can download it for free and make a donation to show your gratitude towards the developing team.

Nice jQuery plugin that will help you work with tooltips, the plugin licensed under the MIT license, which means that you can utilize this plugin in commercial projects as long as the copyright header is conserved intact.

Pines Notify is a helpful JavaScript notification plugin, developed by Hunter Perrin as part of the Pines project. The plugin is licensed under the GNU Affero GPL, which means that you are free to implement, study, customize, and freely redistribute it under the same license.

Great jQuery plugin that helps you create fancy sliding notifications for your website or web application. The plugin comes also as a WordPress plugin and you can download it completely free so you can start to work on it immediately.

Different versions available.

The full version includes a complete source code, demo, readme and sample stylesheet.

Good documentation on how to use the plugin.

Very useful as it comes both in jQuery and WordPress.

Tables

EditableGrid is an open source Javascript library dedicated to converting HTML tables into advanced editable components. The tool focuses on simplicity, with only a few lines of code required to generate your first table up and running.

Flexigrid is a lightweight, yet still rich data grid developed by Paulo Mariñas. It comes with resizable columns and a scrolling data to match the headers, plus an ability to connect to an XML based data source utilizing AJAX to load the content.

Nice jQuery plugin designed to tune standard HTML tables with THEAD and TBODY tags into an organizable table without having to refresh the page. The plugin was developed by Christian Bach and can be implemented for free though you can always leave a donation.

Image effects and utilities

PaintbrushJS is a lovely lightweight online tool for image processing built with Javascript and canvas. Developed by Dave Shea, you can download it for free, though you may want to know that the tool is licensed under MIT license.

Switch between many awesome photo filters such as Sepia Tone, Posterize, Emboss and more.

Astounding script inspired by American portrait painter Chuck Close, this script turns any image into a pixelated version of it utilizing an HTML5 canvas element. This tool can definitely help you generate awesome effects quickly and without having to use graphic programs. The script was developed by John Schulz and David de Sandro and you can freely download it from Github.

Fully works with any type of image.

High browser compatibility.

Large list of practical examples.

Complete documentation and code explanation.

Maps

CartoView is a nice Google maps enhancer developed by the Cartologic team; you can download both the JavaScript and the Google app at no cost, just make sure of read the terms and conditions. On the demo section you will find tons of examples, including the social demo, content, FusionTables and more.

Lovely and simple jQuery plugin that displays a sober map with a marker on it, the viewport gets automatically centered. Gmap is licensed under Creative Commons BY-SA 3.0 license and you can make a donation to support the project.

Polymaps is a free JavaScript library ideal for making dynamic, interactive maps in almost all the web browsers available. The tool is ideal for showing information from country level on down to states, cities, neighborhoods, and individual streets.

On jQuery Labs you will find everything about jQuery, from WordPress plugins, galleries, games and more. You will find all the information for each plugin, including the author’s information, original website, demo, documentation and download source.

On its beta version, jQuery plugins brings dozens of precisely that, amazing jQuery plugins. From effects to widgets, you will find a lot of resources to implement within your site. You will find all the relevant information about the plugin that you’re interested in.

Several categories to browse in.

Complete information for every plugin available.

Clean interface and easy navigation.

Interactive charts

With this great jQuery plugin you can join together all the elements of any UI and display them as a great interactive chart, where you can play with the different fields and reorganize the chart as many times you want.

DB tools

MyWebSql is an open source and online WYSIWYG (what you see is what you get) mysql client developed entirely in PHP. The tool utilizes a powerful technology and high browser compatibility in order to provide a fast, intuitive querying and editing interface to all the mysql databases.

Useful resources

A really nice and free tool for graphic designers and web developers that analyses your CSS and returns a copy with all external media “baked” right into it as Base64 encoded datasets. resulting in a massive speed-boost (server-side gzip-compression must be enabled).

The amount of time-consuming HTTP request on your site gets reduced considerably.

Catch 04 is a great jQuery plugin that helps you detect 404 errors without your users even having to abandon the page and then suggest some other options they’ve got using an inline jQuery Modal window, you can download this nice plugin brought by Addy Osmani can be downloaded for free.

Snippet is a nice jQuery syntax highlighting plugin that provides a quick and simple way of highlighting source code passages in HTML documents. The script is 100 % free and you can contribute to the project by making a donation.

With Tutti you can interactively execute JavaScript on multiple web browsers at the same time. The application works by making a room for the server # 1 and then copy pasting the URL to the remaining browsers and you’re set.

High browser compatibility.

Supported implementation.

Vector manipulation tools

Ai->Canvas is a brilliant plugin that enables Adobe Illustrator to export vector and bitmap artwork directly to an HTML5 canvas element that can be rendered in a canvas-enabled browser, helping the designers to see their designs online. You can freely download the Windows and Mac versions of the plugin to start using it within your Illustrator.

With this awesome tool you can instantly convert any bitmap image from several formats into high quality vector and downloadable files. The tryout is free but you will need to review the pricing section in order to subscribe to the service.

Aviary’s Raven is an online tool that has nothing to envoy to programs such as GIMP and Illustrator. You will find all the basic graphic tools to create lovely designs and save them into your desktop after completing the registration.

Find the most popular Photoshop and Illustrator’s toolbar elements.

Work with gradients and stroke easily.

Setup the blending mode and alpha value for your layers.

Great tool that will save you from a hurry when non having a graphic software such as Photoshop.

Invoice editors

As simple as it gets, on Billable you will find a plain invoice design ready to be filled with the proper information, including of course the item description, invoice number, date, quantity, value and more.

Easily create invoice formats directly online.

Send to printer directly from the page or download a PDF version of the document.

Another nice invoice online application, just fill the data form and click on preview to obtain an instant PDF version ready to be saved or printed so you can share it with your peers. The service has no cost as it only invites to utilize the Accounting ASAP extended version but does not force people to do it.

Complete invoice form to be filled with all the important information.

Download a PDF version of the invoice or send it directly to your printer.

Invoice Bubble offers a very complete invoice editor system to work with your clients, you cannot just create forms but also share them with your clients and get paid via PayPal. The service is completely free though you can pay 5 US per month to remove the supported ads.

Create professional invoices ready to be printed or shared via email.

Get a quality service provider after completing the free registration.

Share your invoices directly with your clients and get paid through the PayPal system.

Accessible Audio Player is a fully accessible cross-browser media player. AAP utilizes the HTML5 <audio> element for those determined browsers that support it, and the Yahoo! Media Player for those that just don’t. It’s a great tool for those who have unsupported Flash devices such as iPod and iPhone. You can freely download it and redistribute it under the GNU General Public License terms.

Everything that you might possibly want to know about HTML5 is on this place. HTML5 rocks is an open source project where you can explore through a fancy presentation that explores from the origin of HTML to all the characteristics that have made what HTML5 currently is, this is an obliged stop for all the persons that want to know about HTML5.

Addy Osmani released this stunning jQuery offline guide for all the programming fans that are just beginning or trying to improve their abilities with jQuery. Fortunately the document can be downloaded and accessed online, which means that you can study it even if you’re in the middle of the jungle.

Includes a My 1.4.3 Selectors Printable that explains what each selector does and how it should be used (PDF)

The FutureColours 1.4.3 Cheatsheet showing all the different methods supported by 1.4.3 (PDF)

The jQAPI 1.4.3 Offline Documentation pack that lets you browse the documentation and API examples on your desktop (thanks to the guys at yayQuery and the awesome Ben Alman)

Good practices, examples and all the guide to help you make a proper use of code, this document looks for the welfare of code’s future by making and extensive revision across the most important programming languages and the good practices when using them.

Navigation

Nice jQuery plugin with which you can rearrange and filter the different elements of a determined list whilst executing a fancy shuffling animation. You can download Quicksand for free and implement it on your own developing projects.

This is basically a Mac-like icon dock, constructed completely in XHTML/CSS and with smooth animation using jQuery/JavaScript. The menu works very similar to the famous Mac’s design and lets you download all the files that are part of the project.

Beautiful background animation made with jQuery and a little bit of CSS3, you will find all the required information to develop it, which means that you will find an actual example and all the code carefully explained for you to understand it.

Color management tools

Nice online tool that in a very professional way helps you to establish the perfect color palette for your website, with an easy to read interface, this application can certainly become a very useful tool for every graphic designer and web developer around.

Switch between the basic and advanced tools for define your palette.

Change the amount of colors among blend mode, comp, triad, tetrad and split.

Find the HEX code for each color so you can copy it easily.

Very intuitive handler that includes, brightness, saturation, hue and more.

XColor plugin is an easy-to-use jQuery extension to manipulate colors in all imaginable combinations. You will find all the necessary information to comprehend its functionality and then begin using it.

Astounding color management tool, explore across several color palettes or customize your own while adjusting and mixing all together. The site is just great and will serve you a lot for everything color-related, make sure that you take the tour and create an account to take full advantage of all that Colorotate has to offer.

Text editors

As the original description says, elRTE is an open-source WYSIWYG HTML-editor written in JavaScript using jQuery UI. It features rich text editing, options for changing its appearance, style and many more. You can use it in any commercial or non-commercial projects.

An Open Source jQuery plugin that helps you to insert a lightweight, fully functional HTML editor into your website, the demo can give you an idea of how it will look once it gets featured within your site. You may utilize CLEditor under the terms of either the MIT License or the GNU General Public License (GPL) Version 2.

An standalone text editor made with JavaScript; with only 8K, this lightweight tool can really help you out when looking for a text editor to be implemented on your site. TinyEditor can easily be customized to integrate with any website via CSS and plenty of parameters. The script can be download for free as it is licensed under the Creative Commons license.

One of the nicest browser based text editors, Aloha editor offers you tons of great features that will help you edit any web content simultaneously. The editor has an Open Source license so everyone can support the software development.

Instead of delivering an HTML5 player to support all current browser and a Flash-based for those older browsers, this team pulled together a nice reproduction player with custom Flash and Silverlight plugins that mimics theHTML5 MediaElement API. Developed by John Dyer, you can download this great player for free.

Web video recorders

Red 5 is an Open Source Flash video recorder and player. For start, deploy the RED5 server side solution, and install the red5 Recorder, then setup the corresponding parameters and you will be ready to start recording directly from your webcam.

With jQuery webcam plugin you can easily communicate with your webcam and easily start recording or taking pictures. You can freely download the plugin though you have to remember that all rights reserved by Robert Eisele.

Nice online screen recorder, with Screen Toaster you can make quality recordings of your monitor, the only thing you need to do is complete the registration process. Think of this service as an online version of Camtasia, which is something very useful for those that don’t want to download anything and rather want to do everything directly over the internet.

Best icons

The second version of iconSweets came out with more great icons in different sizes and with original Photoshop sources included, the collection reunites more than 1000 different icons ready to be download at zero cost.

The greatest and most extensive social icons set of the year, Iconshock delivered a high quality package featuring all the major social networks and its respective icons. Original Illustrator and Photoshop sources for every design are include, as well as all the different color versions. You can encounter both PNG and ICO formats ready to be utilized on your projects.

You will also find the Christmas version of these fantastic icons, a really nice gift for this New Year’s Eve season for you to implement on your website.

Using pure CSS and semantic HTML, Nicolas Gallagher created this astounding GUI icons set featuring more than 84 different designs, it’s important to state that this is an experimental exercise and as the author says, these icons are not production-ready. You will find all the documentation explaining how the icons were made so you can get a closer idea of the whole process.

CSS3 gradients

Created by Alex Sirota (iosart), this CSS gradient generator is a really powerful gradient manager from ColorZilla. Thanks to HTML5, you can generate pretty cool gradients with ease, though it’s important to highlight that you need to have the latest version of your current browser of choice.

Another tool to work with gradients, Gradcolor offers you the basic tools that you may possibly need in order to create a custom gradient and once you have it, the HTML and CSS source codes will be ready for you to copy paste them into your website. Make sure that you have the latest version of your browser in order to support CSS3.

A simple and yet useful CSS3 gradient application developed by Damian Galarza. You will find an standard color tool to define your gradient while the corresponding code shows up so you can copy paste it on your site.

Thanks to PIE you can make Internet Explorer 6-8 support the render of most of the nicest CSS3 features and create lovely and yet simple designs. You can use the demo to adjust your design’s appearance or go directly to the code and see what’s happening every time you make a change.

Great graphical resources for Adobe Fireworks, the page includes buttons, calendars, forms, icons and many more. This is definitely an awesome library to be kept on Favorites for all the Fireworks fans.

Organized file sources, ready for customization.

Complete layers and graphic objects so you can easily work on your designs.

All files are available for free and can be used for noncommercial or commercial usage too.

One of the most extensive libraries to find high quality Photoshop brushes, both free and premium. Every single brush is carefully designed and is ready to fit every designer’s needs. The brushes can be utilized for both personal and commercial projects.

Every day a new PSD resource is released and ready for download, 365 PSD is a huge catalog of quality Photoshop files, both free and premium that will definitely make your life as a designer a lot easier. You can also use the search bar and look for an specifical design.

Awesome fonts

As the original description says, Null is a free font applicable for any type of graphic design, including web, print, motion graphics and is also perfect for t-shirts and other items like posters, logos. Definitely a beautiful Sans Serif font that everyone must have within their personal font catalogues.

A very young font, Yanone has became a real classic inside the typography world a very short period of time thanks to its beautiful look and style. You can download both the Open Type and True Type versions of the font and install them on your computer, you can visit the site to read more about the short but rich history of the font and why not leave a donation during your stay.

Lobster is one of the most beautiful script fonts released lately. The job behind the creation of this font is just remarkable, from the creation of different ligatures to the thoughtful planning to make it a really good looking and yet beautiful typeface; you can download this font for free but we truly encourage you to make a donation to applaud the huge work that is behind Lobster.

Ranking systems

A powerful ranking website made thanks to the collaboration of several people, including designers, developers and programmers. This fantastic web analysis tool delivers a complete study about any website to help people with SEO and polish their websites.

Find out traffic estimation and Alexa ranking of the site in question.

Look for similar pages and find their respective Woorank scores.

See all the major information, including meta description, backlinks and lot more.

Think of Social Mention as the Google for everything social media, on this page you will be able to perform a complete analysis for every site and see how is it going within the social network world. See which links are pointing to the studied site, keywords, related searches and more.

Galleries

This fancy image gallery made with the great JavaScript library jQuery offers a nice solution for saving space while showing several pictures on a single spot. The main purpose of this gallery is to become an alternative to the popular Lightbox by offering the same and even more great features.

Lovely Polaroid photo gallery made with pure jQuery; you will find all the necessary documentation to easily use this plugin and insert it within your own projects. It’s important to say that they utilized the 2D Transform plugin to animate rotations.

On this link you will find a stunning full page image gallery with jQuery with scrollable thumbnails and a scrollable full screen preview. The idea behind the making of this gallery is to have a thumbnails bar at the bottom of the page that scrolls automatically when the user moves the mouse.

This beautiful gallery constructed with jQuery works basically as a slider of different albums, and when one of these is chosen, the images of that album are showed as a beautiful photo stack. This amazing gallery uses jQuery and CSS3 properties for the rotated image effect and a tiny quantity of PHP to call the images.

Lightbox

YoxView is a free Lightbox-type media and image viewer jQuery plugin. It’s easy to use and offers tons of great features. The plugin was developed by Yossi Kolesnicov is licensed under the MIT license and can be downloaded for free.

A lightweight, customizable lightbox plugin for jQuery 1.3 and 1.4. Colorbox is a nice complement for making fancy slideshows, make AJAX calls and more things that will let you make the fittest lightbox for your own projects. The plugin was released under the MIT License.

As the original description affirms, Lightbox is a simple, unobtrusive script utilized to overlay images on a current page. It’s easy to setup and works on all modern browsers. Since its second version you can group related images and navigate through them with ease, access to more fancy transitions and there’s also a backward compatibility enabled.

Rotation scripts

Rotate3Di makes it possible to do an isometric 3D flip or 3D rotation of any HTML content. It also enables custom 3D rotation animations. It’s important to say that CSS3 Transforms are used to create this visual “3D” isometric effect.

With this awesome jQuery plugin you will be able to flip any element in four different directions with ease. The plugin has a MIT/GPL license and can be downloaded for free. Flip is compatible with: Firefox, Chrome/Chromium, Opera, Safari and even IE (6,7,8).

Nice jQuery plugin to rotate images made in pure Javascript + HTML5 <canvas> element and VML in Internet Explorer. You can use this little script to rotate images in any angle directly on client side (e.g. user generated content), and animate them using custom functions.

Quotes

Lovely example of how to display quotes in an animated and lovely way thanks to jQuery. The quotes that were for the example are part of a list of very clever quotes on design that you must definitely read.

Face detection plugins

Simple and useful jQuery plugin that as the name suggests, works as a face recognition system based on pure jQuery. This plugin was developed by Jay Salvat and you can acquire it for free or make a gentle donation.

Did you ever wanted to filter every nudity image to make your website a content-safe zone?, then this jQuery plugin can be very suitable for you. This plugin works as a nudity scanner based on approaches from research papers. HTMLCanvas allows to analyze image data and tell whether it’s nude or not.

Best freebie

45Royale is one of the most die-hard fans of killing the web 2.0 look (everything glossy, everything with gradients) and on his attempt he launched this stunning series of free HTML email templates ready for download.

Every template has been tested in more than 20 email clients such as Outlook, Gmail and more.

Each template includes an original PSD file, HTML template and Campaign Monitor Template.

All the templates have been personally created by some of the best web designers worldwide.

Form editors

Sheep it is a helpful jQuery plugin that lets you clone form elements dynamically. The plugin itself is quite useful for those cases when you need to develop advanced forms that require to load the same kind of data multiple times.

Thanks to this tool, the gap between different browsers when displaying forms can be considerably reduced by taking the best of each browser and join it with the rest. If you want to know more about this nice idea, please visit the original source.

Nice set of free contact form styles ready for download, you can select between different styles, all of them properly designed and ideal to be used on your business. You can also look for the complete bundle if you’re interested on obtaining all the styles.

Basically Formee is a helpful framework that helps you develop and personalize your own web forms. This will definitely save you a lot of programming times. You can download the application for free as the only thing the developers ask in return is for you to spread the word.

High browser compatibility, fully tested.

Easy to personalize, letting you change between different styles and appearances.

Formwizard is a jQuery plugin that can be used for making wizard-like page flows for forms without having to reload the page when moving between wizard steps. The plugin is easy to understand and gives the developer great freedom on how they set up the flow of the different steps in their wizards, as the plugin supports making specific routes in the form; depending on the user input.

Built on top of jQuery UI for a more flexible editing.

Divides a single form into different steps to simulate a flow of steps instead of a single big form.

Supports different routes to be taken in the form, depending on user input.

Submits only input fields located on visited steps in the form.

Supports multiple “submit”-steps.

Supports both back and forward navigation.

Supports the usage of browser back- and forward-buttons through integration with the jQuery BBQ: Back Button & Query Library plugin

Supports client-side validation through integration with the jQuery validation plugin

Supports posting the form using AJAX through integration with the jQuery.form plugin

Integrated plugins are fully configurable, providing several possibilities for things like localization, extra validation rules and custom callbacks used during the AJAX-request.

A flexible CSS forms framework that can really help you when trying to beautify those web forms that have been causing you problems. To apply it to your forms, simply download the RMSforms CSS Stylesheet, link to it from your HTML and apply the correct classes to the HTML structure described on the documentation.

This is definitely a dummies-proof application, just follow the steps and you’re done: Start by deciding the color palette that you want to see on your form, then decide the elements that are going to be within it and finally get the HTML code, copy it and paste it on your site. The possibilities are wide for you to create your custom web form.

Wireframing tools

A quick mockup creator and prototyping tool for help designers show their ideas to their clients with ease, this application will definitely be among every designer’s bookmarks as it can save them on those occasions when Photoshop is just not available.

Simple wireframing tool, sketch your own UI designs, save them and obtain a link to the wireframe, then send the link to your client and you’re done. This tool can certainly help you explain your ideas quickly and with ease.

Gestures management

We cannot show you an actual preview of this add on as it consists of a series of mouse and keyboard gestures to use for executing commands using things such as mouse gestures, rocker navigation, scroll wheel navigation and page scrolling.

Sliders

Astonishing Flash gallery developed by Björn Crüger. The exact words to describe Piecemaker is 3D Flash image rotator gallery, the gallery is ready for download and works under Open Source so you can use it for free

Great jQuery accordion plugin developed by Andrea Cima Serniotti, this fancy and smooth horizontal accordion was created to offer you a nice way of displaying your job in a very nice way. You can download this resource for free but a kind donation will not bother the developer.

Beautiful slider created using jQuery, Nivo Slider is suitable for any kind of website as it offers fancy transitions within an elegant and minimal design. You can either download it as a WordPress plugin, Drupal compatible or Joomla module.

jqFancyTransitions is a comprehensible and really great jQuery plugin for displaying your photos as slideshow with fancy transition effects showing up between one picture and another. The plugin has a high browser compatibility and comes ready for download.

Grid Accordion works with the same theory as most other accordions, which is that only one cell is open at a time. You can browse throughout the entire documentation and finally download the accordion for free so you can start working on it.

Simple design with awesome interactivity, you will not find a regular slider in here but actually a dual slider, meaning that you can have in one side the photographs and on the other the descriptions, generating separated animations of each one of them. You can find some basic documentation and the download links on the same page.

Sliderman.js is a standalone JavaScript library for sliding images whilst displaying some beautiful transition effects. You will find a download package with all the source codes and demos for you to check, Sliderman.js can be download for free, though you need to read the disclaimer at the homepage.

CSS compatibility

As you can read on the original description, Transformie is a lightweight JavaScript plugin that comes in less than 5k that you embed into web pages and brings you CSS Transforms by mapping the native IE Filter API to CSS transitions as proposed by Webkit.

This is one of the most useful links of the list, the purpose of this script is to provide Internet Explorer support for some new styles available in the upcoming CSS3 standard. The original script was written by Remiz Rahnas, you will find all the necessary documentation to understand its functionality.

Useful compatibility table where you can explore across the main browsers around and see what features are and are not supported by them so you can develop applications and interfaces suitable for the major part of the population.

A huge chart that every web designer and programmer must have on his pocket, you will find an extended support for both CSS3 and HTML5, you will find a complete list of what you can and cannot do on the main browsers such as Opera, Firefox, Safari and Chrome.

A pretty cool cross browser CSS3 rule editor, you will find an actual stylesheet on this site completely editable along with a web element that will get all the changes that you will perform, you can copy the edited stylesheet at anytime and paste it within your own site.

Web buttons

Excellent collection of high quality UI buttons submitted by designers from all over the world, you will find the preview for each button and the corresponding link pointing to the original source where you can actually get the element in question.

Beautiful buttons created with pure CSS3, there’s not a single pixel taken from Photoshop, it’s pure code magic ready for download at zero cost. It’s important to read the documentation before installing it they’re a few flaws that still haven’t been completely solved.

Utilizing descriptive class names and CSS3 properties like gradients and box shadows this great button set was released on this site. You can find a explanatory documentation an clarifying example to see how these buttons actually look alike.

Font management tools

With Google you can find a solution for almost any inquiry that you may possibly have, and typography could not be the exception. The Google Font Directory lets you browse all the fonts available through the Google Font API. All the fonts that are nesting inside the directory are available for use on your website under an Open Source license and are provided by Google servers.

FontFriend is a nice typeface bookmarklet for typographically obsessed web and graphic designers. It enables a quick checking system of fonts and font styles directly in the browser without editing code and refreshing pages, making it the ideal companion for creating CSS font stacks. The bookmarklet is licensed under the GPL 2 license.

Easily create high quality bundles of beautifully matching, free web fonts, with failsafe font stacks to back them up. Including ready-to-go CSS code. You can either create a font bundle or browse through their extended library.

Useful online tool that helps you to simultaneously compare different fonts to see which one fits to your designs the best. You can see the font working as heading and paragraph and also watch different color combinations.

Another great font comparison tool, on this case you can actually see the different typefaces applied to a web template, which is a closer approach to what you will actually get if you decide to use that specific font, definitely a great tool for every web and graphic designer.

Validation tools

jQuery.validity is an easy to install and lightweight plugin to perform validations without slowing your website, this useful plugin can be utilized to setup validation forms for your clients easily. You have full control of error handling and adjusting it to your page’s design.

Ketchup is a lightweight jQuery Plugin that helps you validate your forms. It aims to be a very flexible and extendable tool for using on your projects. You can also personalize its appearance to make you fit your design and even put your hands inside the code if you want to add or remove elements, this resource can be downloaded for free.

A jQuery plugin that helps you add notes below text areas and input fields based on regex patterns. Since the 0.6 version you can add notes with an inversed behavior (adding a note when the pattern isn’t matched). This useful plugin was developed by Fredi Bach and can be downloaded for free.

Chill out time

Hilarious comic series featuring some of the biggest problems that any designer has to face every day when dealing with clients, from being forced to use ugly fonts, to glossy colors and cluttered boxes, all this daily situations are represented in a funny and yet critical way.

Basically HTML5 games is a huge directory of online games made with pure HTML5. This specification introduces an exciting group of new features for making games, such as WebSockets, canvas element, WebGL, and audio. These games can even be played on your mobile phone and digital devices, you will find many great games that will make you have a pleasant time.

Amazing video by Ted Chung, winner of the Vimeo Festival Awards, this video features a captivating history about those little opportunities that life presents to us all the time of connecting with new people and live new experiences.

Beautiful video created by the RiotCinema team, this video tells the story of design taken from the point of view of the customers instead of the often designer’s point of view. One of the greatest videos featured on Vimeo during 2010, you will definitely have to see this video, not only for its editing quality but for the deep message that is placed inside of it.

And there you have them, a huge collection of everything that made of 2010 one of the greatest years for web design, hopefully after scrolling through this entire compilation you can make your own predictions about what the future awaits for design, from the raise of tablet devices such as iPad and Samsung Galaxy to the developing of new internet standards and the crescent concurrency of people joining social networks, the 2011 is going to be a year full of changes and this post is going to help us prepare for these upcoming events, we want to thank you for supporting Webdesignshock and on the behalf of our entire team we wish you a happy new 2011 and you can be sure that there will be more great articles and resources coming from us, see you guys soon.

Do you mind if I quote a few of your articles as long as I provide credit and sources back to your weblog? My website is in the very same niche as yours and my users would certainly benefit from some of the information you present here. Please let me know if this okay with you. Many thanks!

[...] 16 Best Web Design Galleries for Inspiration 16 Best Web Design Galleries for Inspiration 27 Best Places You Should Visit To Get Incredible Web Design … Best of the best web design tools and – WebDesignShockDescription : A complete revision on the best design tools and resources that saw the light during the past year, including some great plugins, web tools and freebies.http://www.webdesignshock.com/ .. [...]

[...] amount of content, but what makes it on this blog really packs a punch. How about lists like “The best of the best web design tools and resources of 2010” and the “200 best illustrations in web design”? It’s clear that they spend a lot of time [...]

[...] Best of the Best of Web Design Tools and Resources of 2010 A huge collection of tools and resources. It includes tools in the domain of web design, web development, widgets, plugins, color management applications, text editors, GUI sets, social management and many more. A MUST SEE collection. [...]

[...] Leave a comment Another awesome but quick post for all you designers out there courtesy of webdesignshock.com, the Best of the best web design tools and resources of 2010. So get downloading the best of PSD [...]

[...] would like to share, then please feel free to leave a comment below and I will add it to the list. The best of the best tools and resources for web design of 2010 Ahuge collection of news and resources that saw the light during 2010, we did the work for you and [...]

[...] as well.33 Creative Movie Posters of 2010The 69 Coolest Apps Of 2010Best of 2010: Sites of the WeekThe best of the best tools and resources for web design of 2010Top 50 Free Fonts Created in 2010Best Free Textures and Patterns of 201040 High Quality Free PSD [...]

[...] The best of the best tools and resources for web design of 2010 ... A really nice and free tool for graphic designers and web developers that analyses your CSS and returns a copy with all external media “baked” right into it as Base64 encoded datasets. resulting in a massive speed-boost (server-side . [...]

[...] 2010 – Web Design Shock Posted on December 30, 2010 by Custom WordPress| Leave a comment The best of the best in web design of 2010 – WebDesignShock Recommend on Facebook share via Reddit Share with Stumblers Tweet about it Subscribe to the [...]

LinkedIn Company Page PSD GUI
A nice company page made with as a mockup of LinkedIn pages. It was created in PSD graphic user interface, composed of menus, icons, profile pic space, widget areas and more. This company page only has a desktop version, it weighs around 33MB and it is free to use in any way.

localFont: localStorage Web Font Caching Online Tool
An online JavaScript tool that converts your font family files into a ready to use solution for localStorage web font caching. To use it, just drop the font files and set up each font’s style and weight, and finally grab the code that will be automatically generated. It is released under the MIT license, and it was created by Jaime Caballero.

Essential React: Testable App Development Framework
Essential React is a skeleton that helps you create testable React apps using ES6. Among its features you can find minimal tools, several polyfills for current browsers, total testability and session-driven routing with async data fetching, among others.

TurboTabs: Responsive Tabs jQuery Plugin
TurboTabs is a responsive jQuery plugin for creating tabs with simple HTML markup and plenty of customization options. It is lightweight, comes in three modes (horizontal, vertical and accordion) and it has implemented animations. On smaller screens in transforms to accordion.

CSS Material Design Social Buttons
These are a set of gorgeous social buttons made in CSS with a material design appearance. When hovered over, they show the effect, perfect for recent types of websites, and the buttons included are for Facebook, Twitter, Google+, Dribbble and skype, although you can add any social network since it uses FontAwesome icons.

Radium: Responsive Blogging WordPress Theme
Radium is a responsive WordPress theme for bloggers. It has a simple layout including some cool elements like a big featured photograph, a blog area, latest posts widget, recent comments, and about area. The theme is perfect for wirters and bloggers, and it is totally free.

SuperSimpleSlider: Automatic Slider jQuery Script
SuperSimpleSlider is a script which automatically generates your slider and gives you lots of settings to configure. It is a stylish and flexible way of integrating sliders in any web page that will speed up your workflow without losing quality in design.

Menu-to-cross Icon jQuery Plugin
A cool plugin with several jQuery effects for creating animated icons for menus. It includes 6 variations, clicking the code brackets icon will vertically center the page into your browser, you can use CSS brackets, use SVG, Unicode characters, pseudo-elements and more.

New Lotus: News & Magazine WordPress Theme
New Lotus is a WordPress theme perfect for magazines and news organizations thanks to its media organized appearance. It is flexible, allowing ever page of your site behave and be customized independently. The theme comes with an orange predisposition but it can be easily modified and improved to fit your needs. It was created by KopaTheme.

Facebook Timeline PSD GUI
The Facebook timeline GUI is a complete creation made in PSD format for easy edition. perfect for this social network's lovers. It works for several mobile and desktop devices, including the relevant design elements for each one, like the icons, profile pic, search boxes, chat avatars, buttons and many more. This GUI is free.

Google Plus Page PSD GUI
A complete and sleek mockup for Google+, including all of its design elements, totally editable in PSD format. The elements included range from simple ones like icons and buttons, to more complex like complete menus, sharing boxes and more. There are designs for mobile and desktop devices, the file weighs around 45MB and its totally free.

WPSpeedster: Website Speed Testing Online Tool
A website with Google PageSpeed test scores for 2500 free themes from the official WordPress theme repository. The tests were executed on the blogs sample page and the home page, both in mobile and desktop environments.

Off-canvas CSS & JavaScript Menu
An off-canvas menu with effects on click and hover made with CSS and JavaScript. When clicked on the menu button it displays the effect on links, and when you hover a link it darkens a bit. This snippet can be implemented in any project.

BiancaA: Free Blogging WordPress Theme
BiancaA is a minimal WordPress theme created for writers and bloggers, designed for a correct visualization of written content thanks to its layout and typography. It features simple logo and menu on top, a big featured image with caption, and then leaving space for the blogging area. This theme is free to use in any way (personally or commercially) and it was created by Theme Junkie.

Gorgeous Real Estate PNG & SVG Line Icons
A pack with 150 awesome icons in both PNG and SVG, where you get to choose a wrench from swimming pools to faucets for your brochure or web design. As always the icons are free for personal and commercial use for your next design project!

Bold Fonts
47 submissions
A big set of fonts that has in common the thickness among each one. Their objective is to emphasize, and they are perfect for headlines, captions, and words and phrases that need particular attention.

Web Templates HTML
78 submissions
A collection of HTML website templates, perfect for multiple purposes like corporations and new media, designed with fresh, modern styles and ready to be used anywhere.

Cursive Fonts
62 submissions
Massive set of cursive fonts with both formal and casual alternatives featuring the fluidity proper of handwritten calligraphy. Useful for invitations, signatures and so on.

JQuery Tooltips
16 submissions
Multiple jQuery tooltip plugins coming in different flavors and providing easy implementation. These tools are ideal for guided tour pages on your websites and other similar tasks.

Content Box Designs
58 submissions
Find the right content box and widgets designs for several purposes such as profile previews, keypads, social share screens and more, all through this huge selection.

Drupal Themes
15 submissions
Drupal is a complex system, but fortunately, here you will find a selection of themes in multiple styles: Minimalist, flat, Ecommerce-ready, and more to ease your workload.

JQuery Grids
21 submissions
jQuery grids are a very useful layout option when its potential is grasped. In this list, you will see responsive, drag and drop, animated filtering, and other types of grids.

Vintage Fonts
63 submissions
A beautiful curated set of vintage fonts to give your next project a retro look. These designs are particularly useful to make striking headers and titles for websites, posters and more.

JQuery Accordions
37 submissions
This group of resources will help you create and style jQuery accordions with, which are a great alternative for organizing large datasets and give them a neat presentation.

Icon Fonts
24 submissions
Icon fonts provide major advantages to your designs, such as compatibility with high-resolution displays and easy customization. Take a look at this set to explore different options.

Download Buttons
10 submissions
If you are providing content to your visitors, make sure you do it in style by using one of these download buttons (graphics and css) coming in multiple styles: Realistic, 3D, shiny and more!

Video WordPress Themes
13 submissions
This is a fresh list of WordPress themes for video. They include all the necessary features and layout style to deliver great video content easily and beautifully.

JQuery Form Tools
42 submissions
Use any of these jQuery form tools to create forms and add special characteristics to them, such as credit card validation, input counts and limits, date entries and more.

JQuery Pagination Plugins
6 submissions
In some occasions when you want to showcase content, it could be too much to put it up all at once. These jQuery plugins will help you divide the publication into multiple pages.

Typewriter Fonts
20 submissions
A selection with typewriter fonts that were either carefully made to give the effect of being printed in paper by a type bar, or were designed after well-known typefaces used in typewriters.