Best of the best web design tools and resources | Bypeople

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

iPad GUI set

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.


  • The GUI comes formatted to fit into a 768 x 1024 resolution.
  • All the main iPad elements are included on this set.
  • Fully editable source, ready for customization to fit your needs.

Android GUI set

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.


  • Fully editable Photoshop files.
  • Original fonts also included
  • Beautiful PNG previews.
  • Complete list of elements.

Aristo, a jQuery UI Theme

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.

Watch Demo


  • Includes different buttons, including contextual menus and autocomplete bar.
  • Both vertical and horizontal sliders included.
  • Fixed elements since the 0.2 version.

OSX Leopard GUI set

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.
  • Work with typography using the text tool.
  • Publish directly online to share it with your colleagues.

0 to 255

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 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.
  • Render images in different formats, PNG included.
  • Assign different colors via hex code.
  • Determine height and width values.


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.
Social management tools

So So Social

Awesome tool for all the social media fans developed by John Patrick Given. So So Social manages to gather several feeds from the most important social networks and display them as some kind of “social news” billboard. The plugin is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 License.


  • The plugin was developed using jQuery and YQL (Yahoo Query Language).
  • No server side proxy needed.
  • Fully customizable via CSS and JS settings.
  • Easy to handle and manipulate.
  • Supports different social networks such as Facebook, Flickr, Twitter and more.

Tweet it

“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 It

Yiid Social Sharing Button is a really nice online tool that connect all the major social networks into a single click. 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

Shift 8

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.


  • Attach and upload several files of any kind.
  • Utilize a custom attach button image.
  • Completely free.
  • Enhanced JPE encoding to leave your images always looking awesome.
  • Good integration with JavaScript.
  • Simple and compact interface.
  • Full compatibility with several browsers.


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.


  • You can see the upload progress during the entire process.
  • Ability to make image resizing.
  • Make chunked uploads.
  • Open Source tool.
  • Great documentation to understand its functionality.


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.

Watch demo


  • Includes an admin panel to help you manage your job boards.
  • Completely free.
  • Allows you to generate payments via PayPal.
  • RSS feed for all job listings.
  • Customizable site logo, title and description.
  • Search engine optimized.

Jobber Base

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.

Watch demo.


  • Job posting without account registration needed.
  • Powerful job searching.
  • Easy way to apply for interesting jobs.
  • Administration panel.
  • RSS feeds.
  • Includes a JavaScript badge/widget.
  • Homepage-featured jobs management.
  • Locations management.
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.

Watch demo


  • Bubble tips enabled.
  • AJAX integration.
  • Modal dialogue.
  • Image maps.
  • ThemeRoller integration.
  • Enhanced Flickr integration.
  • IP Geolocation.
  • And many more great features.

jQuery Bubble Popup

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.

Watch demo.


  • Extended browser compatibility.
  • Display animated and fancy bubble tooltips.
  • Easy to customize with few jQuery lines.
  • Nice documentation on how to implement the plugin.


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.


  • Provides an astonishing level of flexibility.
  • Easy to implement and utilize.
  • Developed with the jQuery UI CSS library for styling.
  • Fully and simple to set ability of define themes.
  • Complete documentation.
  • Code and tooltip examples.


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.

Editable Grid

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.


  • Load grid from XML or attach to an existing HTML table.
  • Simple to use and easy integration with existing web applications.
  • Every column is typed (string, integer, double, boolean, url, email, date).
  • Customize cells with a suitable editor, according to the column type (eg. checkbox for boolean).
  • Chance to declare a list of possible values for the cells of a column (statically or in Javascript).
  • Management of unit, precision and NaN values for numeric columns.
  • Built-in validators for columns of type integer, double, url, email and date.
  • Possibility to plug your own cell renderers, editors and validators.
  • Sort columns accordingly to their types, by clicking on the column header.
  • PHP binding: build your grid in PHP and let it generate the XML file.
  • Grid filtering.
  • Insert and remove rows.
  • Open Flash Chart integration: render charts from the grid data (follows when editing or sorting).
  • Callbacks for all events: load, edition, sorting, etc..


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.


  • Columns with adjustable size.
  • Resizable height and width.
  • Sortable column headers.
  • Easy connection with an AJAX data source (XML and JSON[new]).
  • Show/hide columns.
  • Nice toolbar included.
  • Accessible API.


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.

Watch demo.


  • High browser compatibility.
  • Extended documentation included.
  • Complete compressed file ready for download.
  • Clarifying explanation directly on the site.
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.
  • Adjust the amount value for every filter when utilized.
  • Find complete documentation and instructions on how to use the tool.

Close Pixelate

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.


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.

Watch demos


  • JavaScript, .NET and Google maps compatibility.
  • Nice Flickr plugin included.
  • Foursquare plugin also included.
  • More great plugins and extensions.
  • Fully functional demos.
  • Ideal for implement on your map visualizations.


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.

Watch demos.


  • Easily embed Google maps into your site.
  • Only 2KB makes it a very lightweight plugin.
  • Flexible and highly customizable plugin.
  • Understandable documentation.


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.

Watch demos.


  • Provides speedy display of multi-zoom datasets over maps.
  • supports a variety of visual presentations for tiled vector data, in addition to the usual cartography from OpenStreetMap, CloudMade, Bing, and other providers of image-based web maps.
  • Utilizes SVG to display information.
  • Easy implementation of CSS rules.
  • Uses spherical mercator tile format for its imagery and its data.
jQuery widgets

Web Delicious

On this site you will find several frequently-used jQuery UI plugins ready for download and with Open source LGPL license. All the plugins are easy to use and offer tons of great functionalities.

Watch Demo.


  • Many jQuery plugins.
  • Complete information to understand each plugin located on the page.
  • Useful resources and applications.

jQuery Labs

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.


  • New plugins added all the time.
  • Find all the information regarding each plugin.
  • Clean interface with previews showing the latest plugins.
  • Useful tag cloud to explore according to your interests.

jQuery plugins

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.

Watch demo.


  • High browser compatibility.
  • Complete documentation to understand the plugin.
  • Find also jsPlumb within Google Code.
  • Check out TweetPlumb, a nice Twitter visualization of jsPlumb.

Lovely Charts

This beautiful online application helps you generate high quality charts with ease and at zero cost, the only thing you need to do is complete the registration and start making your own designs.


  • Nicely designed workflow.
  • Large amount of tools and resources inside the interface.
  • Works like a desktop software but online.
  • Share your designs with your friends and coworkers.
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.


  • A very fast, and intuitive user interface.
  • High browser compatibility.
  • WYSIWYG editing of mysql tables and query data.
  • Easy to install and ready to use without any further configuration.
  • Syntax highlighting rich text sql editor inside browser without any plugin needed.
  • Easily export complete database,tables and query results to external files.
  • Process manager to manage mysql processes with no problem.
  • Sleek interface with multiple themes support.
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.
  • Generates a massive speed-boost.
  • The embedded images are encoded as text-files.
  • Explanatory documentation on how to proper utilize Spritebaker.

Catch 404

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.

Watch Demo.


  • Do more than simply inform about the fact that the person has landed into a 404 page.
  • Performs an AJAX query for a URL and handle the response provided accordingly.
  • The plugin employs a neat trick using the Yahoo YQL Engine to access the URL for us which returns a HTML string.
  • Improve your visitors’ user-experience enormously.


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.


  • Natively supports 15 popular languages, including Java, PHP, Ruby and more.
  • Can be extended to support Bison, Makefile, Shell, Scala and many more.
  • Switch between 39 different colors.
  • Complete documentation to understand the plugin.


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 to Canvas

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.



  • Export almost any Illustrator file into an HTML5 canvas element.
  • The Ai->Canvas plugin supports rotation, scaling, fading, and movement along a path.
  • Extended documentation and support.
  • Explanatory introduction video to comprehend the plugin’s functionality.

Vector Magic

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.

Watch demo


  • Import from JPEG, GIF, PNG bitmap formats.
  • Export in SVG, EPS and PDF vector formats.
  • Extended documentation, support and tutorials.
  • Both online and desktop services available at a reasonable price.
  • Currently available in 4 different languages (English, Deutsch, Español, and Français.

Aviary Raven

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.
  • Save your invoice to continue working on it later.

Accounting Asap

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.
  • Simply edit the invoice if you want to make further changes to it.

Invoice Bubble

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.
Audio management tools


A pretty cool drop-in JavaScript library that lets you utilize the HTML5’s <audio> tag anywhere. You can download the library and start using as it’s covered by an MIT License.


High browser compatibility.

Does not support the ogg format as MP3 is the current music transfer format.

Access granted to the original source code.

Accessible Audio Player

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.



  • Download the standalone version as a WordPress plugin ready to be implemented on your site.
  • High browser compatibility.
  • Ideal to implement on your website and those devices with no Flash support included.


Awesome tool that lets you insert musical tablatures directly in your site through the VexFlow rendering API. It’s completely written in JavaScript and it’s an Open Source implement.


  • Quickly edit and implement your guitar tablatures.
  • Fully supports HTML5 Canvas and SVG.
  • Useful tutorial included to understand the API.
Essential eBooks

jQuery fundamentals

On this helpful eBook you will find all the necessary to begin your jQuery journey, from implementing the code to practical exercises, this text written by Rebecca Murphey is definitely an essential guide for all the people that want to learn jQuery in an easy and efficient way. The document is licensed under the Creative Commons Attribution-Share Alike 3.0 United States license.


HTML5 rocks

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.


jQuery offline

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)
  • A Complete Developer’s jQuery 1.4.3 Mobile Demo Application (PHP courtesy of DevGrow, Rails courtesy Fuel)
  • Rebecca Murphy’s excellent jQuery Fundamentals book and exercises (PDF)
  • 1.4.3 and our 1.4.4 Release Candidate Preview

Code Standards

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.




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.


Mac-like Icon Dock

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 navigation

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.

Watch demo.


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.

jQuery XColor

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.

Watch Demo.


  • Advanced work with CSS.
  • Adjust margins and padding for images and table cells.
  • Easily control border properties.
  • Lightweight, fast and very easy to integrate.
  • Several languages supported.


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.

Watch demo.


  • High browser compatibility.
  • As they say, what you see is what you get on this text editor.
  • Easily implementation on any website.
  • Contains rich drop downs for font name, size, style, text color and highlight color.


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.

Watch demo.


Aloha editor

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.

Watch demos.


  • Easy to edit any online content instantly.
  • Ideal for web developers and programmers.
  • Allows you to edit live content live and in place.
  • Great plugins to enhance the potential for your Aloha Editor.
Video management


With Mooplay you can construct your own video / audio player on top of an HTML5 element and fully customize it. You can download the player completely free and start working on it immediately.


  • Main video buttons included (play, stop, pause, etc).
  • Interactive play progress bar slider included.
  • Volume slider and mute button also contained on the player.
  • Subtitles are loaded through an AJAX request and synchronized with the video.
  • Supports SubRip (.srt) and SubViewer (.sub) formats.
  • Full page display.


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 the HTML5 MediaElement API. Developed by John Dyer, you can download this great player for free.


  • Includes plugins for WordPress, Drupal, jQuery, and BlogEngine.NET.
  • High browser compatibility.
  • Once you upgrade your browser to support HTML5, you will release all the potential of MediaElement.
  • Complete instructions on how to install and implement the player.
  • Useful documentation that explains all the major features of it.


FryPlayer is a fast and easy to use HTML5 video player, completely free to use and ready for you to insert it within your different web projects.


  • jQuery makes this player a very lightweight resource.
  • Additional plugins ready to be implemented on your player.
  • Intuitive shortcut keys.
  • Full screen mode and buffering supported.
Web video recorders

Red 5

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.

Watch demo.


  • Record and reproduce videos directly inside your website.
  • Fully documented source code.
  • Adjust different parameters including language, color, graphics and more.

jQuery webcam plugin

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.


  • Store your recorded videos directly on your server.
  • Stream the live image of a Flash element on the Canvas.
  • Complete documentation and instructions on how to use the plugin.

Screen Toaster

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.

Watch demo


  • Compatible with Windows, Mac OS X and Linux.
  • Easily record screencasts, tutorials, demos, training lessons and more.
  • Share and stream videos online using Flash.
  • Complete support and assistance to help you get over any issue that might show up.
Best icons

IconSweets 2

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.


Iconshock Social Icons

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.


Pure CSS GUI icons

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

Ultimate CSS gradient generator

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.


CSS3 gradient generator

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.


CSS3 pie

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.


Web elements


Nice collection of Adobe Illustrator templates compatible with the CS4 and CS5 versions of the program. The idea is a creation of Matt Handler and is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License. You will find great templates to generate awesome patterns for your own designs.

Watch examples.


  • One template for each type of pattern you want to download.
  • Automatic symmetric replication.
  • Automatic clipping for those messy elements drawn “out of bounds”.
  • Easy to save/export repeating tile (for webpage backgrounds).


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.

Brush lovers

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.


  • High quality brushes, both free for download and premium.
  • Buy entire packs and put your hands over entire collections of brushes.
  • Browse across the different categories and find your favorite resources.

365 PSD

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.

Social Mention

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.



jQuery Popeye

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.

Watch demo.


  • Clean and elegant interface to place your images in a reduced area.
  • The script itself is quite easy to setup.
  • Respects the page flow and stays anchored and rooted in the webpage at all times.
  • Provides a better user experience than modal windows.
  • Complete documentation to understand the script.


A really nice fullscreen image gallery made with jQuery and some basic CSS. The system utilizes the jQuery UI (jQuery User Interface), jQuery Easing by George McGinley Smith and Brandon Aaron’s jquery mousewheel plugin. Definitely a great gallery for photographers and designers.

Watch demo.


  • Complete code available to be studied.
  • You can find all the upgrades that have been made across the time in order to prettify the gallery.

Polaroid photobar gallery

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.

Watch demo.


Full page image gallery

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.

Watch demo.


Photo stack gallery

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.

Watch demo




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.


  • Supports images, videos, inline content and more.
  • Online video is also supported.
  • Resizes content to make it fit inside the browser’s window.
  • Available multiple instances usage within a single page.
  • Keyboard access enabled.
  • And tons of more great features.


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.


  • High browser compatibility, fully tested.
  • Supports photos, grouping, slideshow, AJAX, inline, and iframed content.
  • Lightweight: less than 9KB of JavaScript.
  • The entire appearance is controlled via CSS so users can restyle the box.
  • Behavior settings can be over-written without affecting the ColorBox JavaScript file.
  • Can be extended with callbacks & event-hooks without altering the source files.
  • Completely unobtrusive, options are set in the JS and require no changes to existing HTML.
  • Generates W3C valid XHTML and adds no JS global variables & passes JSLint.

Lightbox 2

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).


jQuery rotate

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.




Quovolver is a simple extension for jQuery that takes a group of quotes and then displays them on a page in an elegant and organized way.


Quote display

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

Face detection jQuery plugin

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.

Watch demo.


Best freebie

Stunning HTML email templates

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


This plugin is a jQuery styling plugin which allows you to skin form elements to fit your taste. The plugin works under a GPL license and can be download for free from the site.


Sheep it

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.

Watch demo.


Formalize CSS

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.

Watch demos.


CSSG collections

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.
  • Formee works with the technique provided by Fluid 960 Grid System.

Formwizard plugin

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.

Watch demo.



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.

See it in action.



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

All-in-one gestures

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.


Chrome gestures

A Chrome version of the Mozilla add, this extension will add to your browser tons of mouse gestures, smooth scrolling, superdrag and many more.




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


Easy accordion

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.

Watch demo.


  • Easily decide whether or not automatically animate your slider.
  • Insert multiple instances of the accordion in the same page.
  • Set the active slide when the user loads the page
  • Text is rotated utilizing CSS properties, no images needed.
  • Easy Accordion is totally customizable via CSS: change height, width, set borders and paddings, use background images and so on
  • Slide any kind of content (divs, simple text, images, lists, etc.)
  • Lightweight plugin, less than 8KB!.

Nivo slider

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.


jqFancy transitions

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.

Watch demo.


Coin slider

Pretty cool jQuery image slider with some great transition effects on it; the latest version of this great slider is ready for download so you can instantly implement it on your site.


  • Compatible with Internet Explorer 6+, Firefox 2+, Safari 2+, Google Chrome 3+, Opera 9+.
  • Lightweight (8kb only).
  • Free to use under MIT license.
  • Fully customizable through CSS.

Grid accordion

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.

Watch demo.



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.


CSS3 support

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.


Compatibility master table

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.


HTML5 & CSS3 support

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.


  • CSS3 properties.
  • CSS3 selectors.
  • HTML5 web applications
  • HTML5 graphics & embedded content
  • HTML5 audio codecs
  • HTML5 video codecs
  • HTML5 forms inputs
  • HTML5 forms attributes

CSS3 please

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

House of 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.


BonBon buttons

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.


Super awesome buttons

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

Google font directory

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.


Soma fontfriend

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.


Awesome fontstack

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.



With this great jQuery plugin you will obtain a complete down-to-letter control so then you can start working with complete freedom over typography. You can freely download this useful plugin.


Font comparer

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.


HTML5 games

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.


A thousand words

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.


To me, design is…

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.

Related Deals

Related Posts