A Comprehensive Showcase of Fresh-Cooked Resources and Freebies for Hungry Designers

Today’s web professionals have to be always up-to-date about new tools, freebies and resources that may be handy for their daily work. This technological (geek) world changes every day, so it’s not a good idea to be using 90’s tools for 2012 projects. That’s the reason we created this huge list of fresh resources, hoping all you guys can save it in your favs and use its contents in your next winning project. Remember to share it with your friends!

Termsfeed: Terms of Service and Privacy Policy creator

Rev8_thumb

Every website needs Terms of service and privacy policy, these terms and policies allow the page’s owner outline what users can and can’t do in the page and also outlines how the sensible information are managed. This site let site administrators create these terms and policies for free, after creating the term or policy administrator can copy the generated term or policy to their sites.
More Details | Demo.

Easel: designing web apps faster

Rev36_thumb

Easel is an in-browser web design tool that integrates with any small team’s design and development process, allowing designers to do what they do best without worrying about code, the same goes for the developers that don’t need to guess the code from mockups. Easel is released under commercial license, so to use it, it is needed to pay a monthly fee. More Details

Best Web Fonts: the best Google fonts

Best Web Fonts

Picked manually this selection of the best fonts from Google directory will allow you to choose from the best and not from all, besides you will see not only the font and how to import it, but you will also be able to add a CSS effect to the font that can be copied and pasted on your own page. More Details


QRHacker: QR codes generator

Rev38_thumb

QR Codes are becoming the most popular system due to its large storage capacity. The encoded information could be almost anything, that is because it supports four basic types of common data i.e. numeric, alphanumeric, byte/binary and Kanji; however, with the supported extensions the support goes way beyond. What QRHacker does is allowing the users to create QR codes easily, QRHacker works with the basic supported data except for Kanji data. More Details

Create: A web editing interface

Rev39_thumb

Create.js is a web editing interface for CMSs. The idea behind Create is as simple as allowing the web designer to modify any editable element while in the page, there is no need to go to the code to look for what needs modifications. All the modifications done are saved in the browser and then those changes can be sent to the the CMS using just one button.

More Details | Demo

Backup Box: Great tool for backing up your site.

R4_thumb_thumb

Nowadays the storage drives are big enough to keep as many files as you want, but in a connected world there is a problem, what happen when you need to access those files from another PC? There comes the cloud storage that allows users to access files from any computer that has a connection and the needed App, apps like Dropbox. So why not to save all your WP site? although these apps allow to save files they don’t support FTP transactions, but that will be no problem because Backup Box lets user transfer whatever they want via FTP to a Dropbox account.

More details

Twitter Bootstrap button generator

Rev32_thumb

Twitter Bootstrap Button Generator is the easiest way to set up your buttons by just selecting some options a bootstrap based button will be ready in seconds. More Details

Cursive: Minimalistic responsive WordPress theme

Cursive theme

A responsive minimalistic styled theme that will allow you to create a nice magazine site or anything you want, packed with all features the Theme Generator’s themes have. More Details

PHPPowerPoint: A set of php classes to write and read from PowerPoint files

Rev1_thumb

This project released under the GNU Library General Public License (LGPL) provides a set of classes to manage not only PowerPoint files but also different presentation file formats. Supported on the Microsoft OpenXML standard and PHP. This project provides some features like image and slider addition to the presentation.

More Details| GitHub

Publishing to WordPress from your desktop, Even Offline

Rev16_thumb

Inspiration comes quickly and goes in the same way and for the bloggers this very important, but at the same time if they don’t have an Internet connection they could say goodbye to their inspiration, but that will not happen again thanks to an XML-RPC client. The XML-RPC is an app that’s on the user computer, what the app does is to let the blogger write the post even if he/she is offline, the post is stored on the H.D. and when a connection is found the app upload the post automatically to the WP installation. More details

Custom 404: Creating custom 404 pages in seconds with this WordPress plugin

404_5

Do you get tired from the classic blank 404 page that shows you just the error and nothing useful? well this plugin will help you avoid that by allowing you to customize your 404 page. More Details

Invisible Captcha: Avoiding comment spam, the intelligent way.

Rev29_thumb

This invisible captcha allows web designers to protect them from spam comments, but don’t worry readers won’t need to fill anything, because this captcha is only seen by the bot spammers, a simple solution, 100% of security. More Details

Shrink PNG: Compress PNG Images while preserving alpha transparency

Rev18_thumb

TinyPNG uses compression techniques that reduce the size of the PNG file, this makes that the same image needs less space to be stored, this is done decreasing the number of colors in the image, although the process reduce the number of colors from the image in the final result no one will see the difference among the original and the size reduced one. More Details

Tutorial: Creating an effective pricing table

Rev9_thumb

An effective pricing table can improve a lot the sale of a product. It’s important to make things clear from the beginning because this way visitors can take the best decision by choosing the plan that suits them. This tutorial allows to create a pricing table only with HTML and CSS. More Details | Demo

Newsletter sending guidelines, by Google

Gmail

When bulk sending there are times when our mails go directly to spam, with this guidelines the good people from Google tells us how to avoid that our mails end being consider just spam. More Details

Resizing webpage elements with CSS3

Rev20_thumb

Responsive web design is a web developing method through which the website resizes itself according to the device resolution of the visitor. This tutorial is designed to explain how a little piece of code added as a CSS property could modify how the user will see the elements within the page, also the code will give the end user the ability to control the size of the element.
More Details | Demo

Custom form checkboxes and radio buttons with just CSS

Rev23_thumb

CSS allows us to style things as we want it to look, but when doing forms the things are not as simple as we would like. This tutorial will show exactly how to style some inputs like radio buttons and checkboxes and make customized forms with just CSS. More Details | Demo

Timed notifications with CSS animations

Rev26_thumb

Here will be shown how to create a simple timed notification with CSS animations. What the tutorial shows is how to display a notification for a predefined time and after the time has gone make the notification disappear, to track the progress of time there will be a progress bar that will show how many time left for the box to disappear. More Details | Demo

Experiment: CSS3 7 cool text-shadow samples

Rev41_thumb

CSS3 is letting designers create almost anything and text has not escaped this, this tutorial goes onto creating some interesting text effects, from simple depth effect to more elaborated effects.
More Details

Freebie: Notepad style contact form template

Rev59

This template appear as a change to the classic contact forms, this template shows a notepad style contact form, allowing the site to be different from all the others in market.
More Details

Freebie: Buttons pack 200 free buttons for your apps or web designs

Rev62

Needing some button designs and haven’t find any? With this pack you won’t need buttons for a long long time, 2000 buttons for your web design or your next app. More Details

Freebie: PSD progress bars design

Rev60

In a CSS world there are still some interesting PSD designs, Today there are 2 progress bars fully layered and with vector data included. More Details

Inspiration: Nice typography works

Rev47_thumb

Typography in less words is art and sometimes designers and artists need an image or scene to inspire themselves, well here is a typographic design, created to inspire all. More Details

jQuery Select2 : Select Boxes Replacement

Rev37_thumb

Need a select box replacement because the old ones don’t fit your design, well Select2 can help you solve this problem. More Details | GitHub

Hallo.js: a simple rich text editor for the web

Rev44_thumb

This plugin will allow you to add a text editor UI, but it will also allow you to edit all the content marked as editable on your website thanks to HTML5’s content editable functionality. More Details | Demo

Mousetrap: Keyboard shortcuts library in JavaScript

Rev17_thumb

Mousetrap is a standalone library with no external dependencies, Mousetrap was designed for handling keyboard shortcuts in JavaScript. Besides what other similar libraries can do, Mousetrap can also manage not only key down events but also key press and key up, this just one of the features that difference Mousetrap from other libraries.

More Details | GitHub

Redactor: A WYSIWYG JavaScript plugin for easy content edition

Rev2_thumb

A What you see is what you get (WYSIWYG) editor designed with jQuery. Due to it’s base design this editor has the power and speed most needs and there is no need of a big H.D. to store it thanks to its small size. Redactor is pretty simple to install, so web designers will just need a few clicks and they will have it set up. This tool provides not only text edition but it also comes with some handy things like uploading images and files using the simple and well know drag and drop system. This editor is released under the Creative Commons Attribution-NonCommercial 3.0 license.

More Details | GitHub

SelectNav.js: Responsive Drop-Down navigation for mobiles

R7_thumb_thumb

SelectNav.js lets you change the way people navigate through your site transforming the navigation into a drop-down menu, this will also reudce the space required for many navigational elements, the best if you plan to move onto small screen devices.More details

jQuery Vector Maps Plugin: Render scalable maps

R9_thumb_thumb

jQuery Vector Maps is a jQuery plugin that renders Vector Maps using Scalable Vector Graphics, this allows to keep maps as clear and defined as possible ideal for educational purposes. Designed to work with modern browsers like Firefox, Chrome and Internet Explorer 9.
More details | GitHub

HTML5 jQuery paint plugin

Rev48_thumb

Have you used Paint from Microsoft, well this jQuery plugin is basically the same but based on HTML5 canvas element. It allows to paint in the same way you do on the original paint, at the same time this plugin provides the classic elements form paint such as the eraser or the shapes and the color palette. More Details | Demo

Collapsible panels with Akordeon jQuery plugin

R15_thumb_thumb

Akordeon is a jQuery plugin that lets add an accordion menu style to a web page. The Akordeon’s goal is to provide a customizable interface for collapsible panels that can hold any kind of data in a limited space, so e.g. you it can be used to include the menus in a restaurant’s web page. More Details | Demo

IE7.JS: Giving the other browsers behavior to IE

Rev61

With this plugin compatibility problems of many web elements, like PNG transparency, have end thanks to IE7.JS, this is a JavaScript library that gives IE 7 the same behavior from other browsers like Firefox; allowing IE to display many of the unsupported elements. More Details

Dynamic HTML5 datalist control creation

Rev46_thumb

One of the new interesting updates that come with HTML5 is the datalist control. This control gives a basic autocomplete support for an input field. i.e. users can create the datalist control options, then bind it to a control, so when users types anything the control will show the items that match the search. More Details | Demo

Laker: Designing digital publications in HTML5

Rev53_thumb

Laker allows you to create HTML5 digital publications; designed to work with Baker ebook framework, all design is aimed at the creation of ebook style publications, but with added interactivity all done thanks to HTML5. More Details

Friar: HTML5 eBook framework

Rev54_thumb

Digital books should be well designed, easy to publish and written in an open standard: that’s why Friar has been created, it is released under the BSD license, so basically Friar is an HTML5 eBook framework to publish interactive books on Android devices using simply open web standards. More Details

Tutorial: HTML5 and Responsive Web Design

Rev50_thumb

This tutorial propose to create a flexible, fluid and adaptive Web sites. Instead of creating desktop Web versions that later have to be ported to other common screen resolutions, that could be solver going to other way around using flexible and fluid layouts that adapt to almost any screen on the market. More Details

DbNinja for MySQL

Rev86

DbNinja is a MySQL management and development app. This apps allows administrators to have access to their databases remotely wherever they are whatever OS they have, the only thing they should have is DbNinja; it also supports the common functions a database administrator should support like Foreign keys, stored procedures, triggers, etc.. More Details

On/Off FlipSwitch CSS3 generator

R6_thumb

Need to add the option of turning on or off to a particular aspect of the site, well a flip switch could be the solution and better yet this App allows designers to create a flip switch with the style of iOS4, iOS5 or Android, not only the style can be customized but many other features, when all the edition has been done you can copy the CSS3 code and paste it where needed. More Details

Create wireframes using HTML5 mockup

R7_thumb

In search of a tool that allows to create UI concepts or Mockups? This HTML5 Mockup creator eases the process of designing an UI concept by giving many stencils, i.e. objects that mimic UI elements and a grid to place them; with this tool designers have the freedom needed to bring in what’s on their minds. More Details

XtGem, mobile site building tool

R8_thumb

XtGem is a WAP app that allows Mobile Web design and development for free from a mobile phone or smartphone. In a few steps web designers will have a site or WAP page fully developed; there is no need of technical knowledge. More Details

Susy Responsive grids for Compass

R9_thumb

Susy is a semantic CSS grid system with a responsive twist. The web is a responsive place, so designers need grids that are powerful, but custom; reliable, but responsive. Susy grids are fluid on the inside, ready to respond at any moment, but contained in the candy shell of your choice, so they respond how and when and where wanted. More Details| GitHub

Compass CSS authoring framework

R10_thumb

Compass is an open-source CSS authoring framework which uses the Sass to make writing style sheets powerful and easy. Compass is a tool that runs on the command line; however, there is a Compass app that allows all of the command line haters to have an ease contact with compass. More Details

Express web application framework for Node

Rev62

Express is a Framework that let users create single and multi page web applications, it is designed to work with node, so express will provide you some fundamental features to create sites without blocking the node features. More Details| Demo

Fifty Shades content Generator

R11_thumb

Tired from the classic meaningless Lorem Ipsum text? Well The Fifty Shades Generator could be the solution you were looking for, that’s if a bit hot text doesn’t disturb you.Now, you can hook customers in a new way More Details

Highlighting code like a ninja using Highlight.js

R14_thumb

Don’t let your code disappear in the middle of your posts or sites again, now with Highlight.js you can highlight your code examples within your post and its simplicity makes it easy to use due to it detects the language of the code and the code itself and highlights it. More Details| Demo

About the Author Advanced WordPress plugin

Rev33_thumb1_thumb

As simple as it sounds, this plugin lets you create a sidebar which will contain all the information of the post’s or site’s author.More Details

Sliderly a WordPress plugin for making slideshows and galleries

Rev34_thumb1_thumb

Sliderly is the proposed solution to the classic plugin management, i.e. a plugin for each and every function in this case for slideshows and galleries. More Details

Cool animated gauge with HTML5 canvas

Rev36_thumb

Gauge.js is a 100% native and interesting JavaScript/CoffeeScript for creating animated gauges in HTML5 canvas. Gauge.js is standalone (Does not require jQuery but it’s supported) and also it does not need images or CSS. More Details| GitHub

AuthManager: user authentication and management

Rev66

AuthManager is an Open source user authentication and management app. AuthManager let users protect their valuable information by just adding a few code lines, this app also protects from some other problematic elements like spam using reCaptcha, keep you safe with AuthManager. More Details

Bear CSS, generate your CSS template

Rev40_thumb

Bear CSS is a handy tool for web designers. It generates a CSS template containing all the HTML elements, classes & IDs defined in your markup.To use it, it is just upload your html document on Bear CSS, CSS template is generated based on the HTML elements used, then download the CSS file. More Details

Drag ‘n’ Drop enabled Multi-Column grids with Gridster

Rev46_thumb

Gridster is an impressive jQuery plugin to develop iGoogle-like multi-column grids that can be drag ‘n’ dropped and re-ordered. The plugin only requires jQuery (no jQuery UI) and can convert any given HTML structure into the widgets of the grid. More Details

jQuery mobile framework for Real-Time presentations

Rev47_thumb

TaciónJS is an open source presentation framework for mobile devices that is built on top of jQuery Mobile. The framework allows the usage of any HTML content, has full support for jQuery Mobile UI’s widgets + themes. More Details| Demo| GitHub

Ninja IDE for developing python apps

Rev51_thumb

NINJA-IDE is an open source and free development tool that focuses on Python developers at first but has support for code highlighting for various languages. More Details

Secure WordPress with Better WP Security

Rev53_thumb

In those times where the most valuable element is information, appears WordPress as a CMS or blogger tool; however, as every tool you will find it is not 100% secure, so to improve the numbers here is this plugin that will allow you to change many features of your WordPress installation, all of them to secure you. More Details

Users Icon pack: 100 Vector/android/iphone user icons

Rev95

In a multiuser app most of times you will have defined some roles like administrator or super user, whatever you have defined this icons can help you show the user what kind of user he/she is or to help you remember what roles you have defined just by seeing the icon. More Details

WordPress Video Gallery plugin

Rev32_thumb

The WordPress plugin that provides a facility to add and control a cluster of videos very easily and efficiently. This WordPress video plugin has a gallery format with various modules such as Recent Videos, Popular Videos, and Featured Videos. More Details| Demo

Mobilize.js: Transforming your website into a mobile version

Rev79_thumb

Mobilize allows web developers to transform normal websites into mobile versions and what is best of all there is no need to do extreme changes to the server code side in order to convert the site to a mobile version, instead Mobilize do the hard work for us. it supports devices such as iPhone, Android devices, Opera mini and BlackBerry among some other devices. More Details

Sucuri: Keep your site free from malware or get rid of it

Rev65_thumb

When you have big site or even a site that has only one page or is just your first site, there will be always a menace we must face soon or later and it is the hacker attacks and the malware. A site could be completely destroyed by malware, but you could avoid that or if you are infected now you can get rid of the problem simply by using the Sucuri service, Sucuri offers a free diagnostic tool that will let you know if your site is infected. Only the diagnostic is free, the other security features are payment only, but be sure your site worth it. More Details

Smart Time Ago: jQuery timestamp updater library

Rev69_thumb

Smart Time Ago is jQuery library that allow users to update the timestamps on a document, this library can be used as jQuery plugin, you probably have seen plugins that do the same, but what makes this library smart is that it will modify the time frame in which a revision and update will be done i.e if your newest time was 2 hours ago the library won’t be checking every minute, instead it will modify the time frame to 30 minutes. Also you won’t have again a timestamp saying: “opened a minute ago” when you where there 10 minutes or more. More Details| GitHub

PHP image workshop

Rev70_thumb

PHP is well know as a server side language that allows users to accomplish many tasks that HTML can done by its own; however, it is not limited to that, this time a PHP library shows us that PHP can reach another level, this time it will be the image market; this library let users create layers, superpose them or group them, it will not replace GIMP or Photoshop but will ease some tasks. More Details

CanLinkIt for Photoshop

Rev71_thumb

CanLinkIt simplifies some tedious tasks and it is that when you have a PSD files composed by many others updating it, when you modify one of the composer elements, will be awfully time consuming. What CanLinkIt does is letting you link the composer files to the composed file, which will facilitate the updating process by allowing the user to update the composed files with a single click. Also your files will be significantly smaller due to you won’t have to add all the composer files into a single file, just link them. More Details

jQuery Shopping Carts

Rev73_thumb

Is not a pretty common task, but there are times when you need a shopping cart and doing it from scratch is a pretty time consuming, but for all of you out there are ready to use Shopping Carts, this ones are made on jQuery. More Details

CSS box machine: 25 pure based CSS boxes

Rev74_thumb

CSS boxes can be very useful and most of times while designing one will need at least one box to contain anything like a calendar or the whole content. For those designs there is the box machine that will allow you to create a CSS box going from 25 base designs, at the end you will all the CSS code ready to put in your site. More Details

Metro UI CSS framework

Rev75_thumb

Windows 8 hasn’t come out yet, but all the designers, developers and the market itself is preparing to receive this new release. This framework allow web designers to create sites with the same aspect of Windows 8 and not only the aspect but it can also replicate part of the functionality W8 shows. More Details

Tooltipster: Tools tip creator

Rev61_thumb

Tooltipster is a jQuery plugin that allows users to create tool tips in HTML5. Tooltipster allows not only to add plain text in the tool tips but also to add HTML tags on the tool tips this give tooltipster a wide range of action. Tooltipster works on every common browser and fallback gracefully on old versions or unsupported browsers. More Details

Opera Mobile Emulator

Rev77_thumb

If you are unsure about how your site is going to look like when seen on Opera mobile web browser here you got the perfect tool, this tool will let you make the tests you need to see if you are doing things right and will allow you to debug your code, this tool emulates a wide variety of devices too. Don’t be unsure never again. More Details

Foundation: Responsive front-end framework

Rev78_thumb

Foundation is a responsive front-end framework that will allow you to create rapidly designs for your new projects, letting you not only to create the design but letting it be responsive, i.e to work on any device in the actual market. It comes with several pre-made layouts that will let you create what you want. More Details

CSStypeset

Rev82_thumb

Sometimes our text needs a little change, maybe a bit bigger or we need that the space between each letter will be a bit larger or any other effect. Now that effects can be easily added to your site by using this tool, it will allow you to modify the font family, color, size, the background color, the space between letters and words and you will have the CSS needed to do that. More Details

WordPress Admin Menu Editor

Rev83_thumb

Tired from the WordPress classic menu? do you think it could be modified to suit your needs better? Well then this plugin is what you were looking for, it will allow you to modify the order of the menu it will even allow you to hide options you don’t use and better yet you can define access rights to some parts of the menu, so if you don’t want anybody but you to activate or deactivate plugins this plugin could help you a lot. More Details

Perfect pixel designs with Screenqueries

Rev87

This tool will allow you to create an exact design, i.e if you say it has 35 PX it will really have 35 perfect to the minimum detail. More Details

Nibbleblog

Rev88

Need an option to WordPress, well Nibbleblog could be the option you were looking for to drive your own blog, like WP it is completely free and better yet you don’t need to have a Data base so if you haven’t use MySQL and are not interested in using it, this option could be your best choice. More Details

Handsontable: HTML & jQuery Excel approach

Rev56

This project based on jQuery allows users to have an Excel, Google Spreadsheet or LibreOffice table on their page just by using HTML and jQuery. As you might imagine, you will have most of the functionalities Excel has, i.e you can copy, cut or paste as if you were in Excel, row and column headers, the mighty drag down values and some other interesting features. More Details

About the Author:

The Shock family is a team of designers behind some nice web projects: iconshock stock icons, Premium wp themes at WordPressThemeShock, A responsive theme’s builder at wpThemeGenerator and design sets at DesignShock.

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads.

5 Responses

Comments are now closed on this post.

  • Andrew Rostad, September 26, 2012

    This post made my nerd-sense tingle. Thanks for the great finds.

  • Nimsrules, September 27, 2012

    Had my browser turned into a heavy mess opening all these in new tabs :) Thank you so much for sharing these, some are really new and uncommon.

  • Ahsan Idrisi, September 27, 2012

    Great tools, some of them were new to me

  • C. R., February 10, 2013

    I have had this open since it was emailed back in September and I am just getting to the bottom of the list. Such great resources.

  • Pete, February 21, 2013

    So many new findings for me, thank you!

    Just one more
    http://compresspng.com
    really good tool, performs better, than tinypng

Close