60 free resources you really must try

Finding the right elements for a project can significantly improve the quality of the final product, especially if your deadline’s too tight to build these things yourself.

Quality is essential if you’re to maintain a professional finish. Fortunately the quality of the resources available to us continues to rise and premium standard resources are everywhere. Here’s a collection of some of our current favorites:

 

Mmenu

This jQuery plugin creates slick, app-like sliding menus for mobile sites.

A-showcase-of-must-have-tools-for-webdesigners_001

 

Fabric textures

These 5 cloth textures are free to download as JPGs.

A-showcase-of-must-have-tools-for-webdesigners_002

 

Fitgrd

This is a lightweight and cool looking responsive grid.

A-showcase-of-must-have-tools-for-webdesigners_003

 

Horizontal menu

This is a horizontal slide-out menu with a grid based submenu.

A-showcase-of-must-have-tools-for-webdesigners_004

 

Upload form

This is a mini Ajax upload form.

A-showcase-of-must-have-tools-for-webdesigners_005

 

Minimalistic (free for personal use)

Minimalistic is a minimal WordPress theme with nice brushstroke patterns.

A-showcase-of-must-have-tools-for-webdesigners_065

 

Mobile application UI kit

This mobile application UI kit is downloadable as a PSD.

A-showcase-of-must-have-tools-for-webdesigners_006

 

Flat icon set

Who can have too many flat icon sets?

A-showcase-of-must-have-tools-for-webdesigners_007

 

Flatilicious icons

Seriously, who can have too many?

A-showcase-of-must-have-tools-for-webdesigners_008

 

Fries

Create an Android-like UI with HTML, CSS and JavaScript

A-showcase-of-must-have-tools-for-webdesigners_009

 

Linecons

48 fully scaleable vector icons.

A-showcase-of-must-have-tools-for-webdesigners_010

 

Windows

A jQuery plugin for fullscreen scrolling windows.

A-showcase-of-must-have-tools-for-webdesigners_011

 

Slider

A useful free slider with gliding backgrounds.

A-showcase-of-must-have-tools-for-webdesigners_012

 

Transit

Super smooth CSS transitions and transforms for jQuery.

A-showcase-of-must-have-tools-for-webdesigners_013

 

FastCache

The fastest PHP object caching system ever, apparently.

A-showcase-of-must-have-tools-for-webdesigners_014

 

Beag

A set of useful mobile app UI elements.

A-showcase-of-must-have-tools-for-webdesigners_015

 

Mixitup

A CSS3 and jQuery filter and sort plugin.

A-showcase-of-must-have-tools-for-webdesigners_016

 

Pricing table

A minimal pricing table for designers and developers.

A-showcase-of-must-have-tools-for-webdesigners_017

 

Cesium

This is a JavaScript library for creating 3D globes in a web browser.

A-showcase-of-must-have-tools-for-webdesigners_018

 

Bootstrap magic

Use this to create your own Twitter Bootstrap theme.

A-showcase-of-must-have-tools-for-webdesigners_019

 

Map icons designer

Icons for Google maps, suitable for map applications.

A-showcase-of-must-have-tools-for-webdesigners_020

 

Transparent UI kit

This is a layered UI kit in a PSD.

A-showcase-of-must-have-tools-for-webdesigners_021

 

Topcoat

A CSS kit for lightweight web apps.

A-showcase-of-must-have-tools-for-webdesigners_022

 

Controls settings

A useful PSD flat control panel.

A-showcase-of-must-have-tools-for-webdesigners_023

 

CSS modal

A modal builder in pure CSS.

A-showcase-of-must-have-tools-for-webdesigners_024

 

Sassaparilla

This is a quick way to jump-start responsive design projects.

sassaparilla

 

Beach UI

A minimal UI kit in the form of a PSD.

A-showcase-of-must-have-tools-for-webdesigners_026

 

Retina-ready menu

This is a responsive, touch-friendly menu with three layouts for different browsers.

A-showcase-of-must-have-tools-for-webdesigners_027

 

Flexisel

A responsive carousel jQuery plugin.

A-showcase-of-must-have-tools-for-webdesigners_028

 

W2UI library

As set of connected jQuery plugins designed for front end use.

A-showcase-of-must-have-tools-for-webdesigners_029

 

Dark Accordion

A stylish navigation menu in a PSD.

A-showcase-of-must-have-tools-for-webdesigners_030

 

Skel.js

A frontend framework for building responsive sites.

A-showcase-of-must-have-tools-for-webdesigners_031

 

Magnific Popup

A responsive jQuery lightbox plugin.

A-showcase-of-must-have-tools-for-webdesigners_032

 

Nice Less buttons

A set of buttons made in CSS.

A-showcase-of-must-have-tools-for-webdesigners_034

 

Multipurpose website template

A beautifully designed PSD for any purpose.

A-showcase-of-must-have-tools-for-webdesigners_035

 

Two.js

A 2D drawing API.

A-showcase-of-must-have-tools-for-webdesigners_036

 

Flat UI login form

A trendy login and register form.

A-showcase-of-must-have-tools-for-webdesigners_037

 

Ecommerce flat

A flat ecommerce UI kit in PSD format.

A-showcase-of-must-have-tools-for-webdesigners_038

 

Brand identity

A layered PSD for presenting logo and identity design.

A-showcase-of-must-have-tools-for-webdesigners_039

 

Animation fill code

An app to fill in the necessary code for CSS3 keyframe animations.

A-showcase-of-must-have-tools-for-webdesigners_040

 

Countable.js

This script adds live paragraph, word, and character counting to an html element.

A-showcase-of-must-have-tools-for-webdesigners_041

 

Github Archiveroom

Explore your Github archive in 3D.

A-showcase-of-must-have-tools-for-webdesigners_042

 

iPhone 5 flat

A flat iPhone 5 mockup.

A-showcase-of-must-have-tools-for-webdesigners_043

 

HoverMenu

An easily accessible menu anywhere on your page.

A-showcase-of-must-have-tools-for-webdesigners_044

 

SLY

A JavaScript library for one-directional scrolling.

A-showcase-of-must-have-tools-for-webdesigners_045

 

Flatstrap

A bootstrap skin using flat design techniques.

A-showcase-of-must-have-tools-for-webdesigners_046

 

Packery

A JavaScript plugin for bin-packing layouts.

A-showcase-of-must-have-tools-for-webdesigners_047

 

Snaps theme

A free portfolio theme for WordPress.

A-showcase-of-must-have-tools-for-webdesigners_048

 

Easy responsive tabs

A jQuery plugin that optimises horizontal or vertical tabs.

A-showcase-of-must-have-tools-for-webdesigners_049

 

CSS social share button

A flat social tooltip button.

A-showcase-of-must-have-tools-for-webdesigners_050

 

Knockout

Use Knockout to simplify dynamic JavaScript UIs using the MVVM pattern.

A-showcase-of-must-have-tools-for-webdesigners_051

 

Magazine mockup

A PSD template ideal for showcasing your projects.

A-showcase-of-must-have-tools-for-webdesigners_055

 

Weather icons

A great set of weather icons in PSD format.

A-showcase-of-must-have-tools-for-webdesigners_056

 

Flat icons set

Another set of icons, this time delivered as .png files.

A-showcase-of-must-have-tools-for-webdesigners_057

 

Social media icon set

A free set of social media icons.

A-showcase-of-must-have-tools-for-webdesigners_058

 

Simple icons

Another set of free icons.

A-showcase-of-must-have-tools-for-webdesigners_059

 

Icon hover effects

Round icon hover effects, this time with CSS transitions.

A-showcase-of-must-have-tools-for-webdesigners_060

 

Percentage bars

Flat style percentage bars built with CSS.

A-showcase-of-must-have-tools-for-webdesigners_061

 

Twitter UI

A Twitter client UI built in CSS and HTML.

A-showcase-of-must-have-tools-for-webdesigners_063

 

Music widget

A flat widget music player with simple animations.

A-showcase-of-must-have-tools-for-webdesigners_064

Have you used any of these resources? Have we missed any of your favorites? Let us know in the comments.

0 shares
  • http://templendo.com/ Chris Brown

    Thanks for sharing these resources.

  • http://www.blazewebstudio.co.za/ Geoffrey Gordon

    Wow what a treasure chest, there a few I can actually use here ;)

    Thanks Juan

  • http://lispolakarnego.pl/ Dominik Chiniewicz

    Thank you

  • James

    That’s because “Flat” has turned into the new, cover-all buzzword for making something “trendy”. Like “clean” before it and “Web 2.0″ before that. Much like the other recent “flat” icon set on Designer depot that had gradients, inner shadows and glows *rollseyes.

    However, sounds like you were referring to glyph icons :)

  • BBeniston

    This posting is much appreciated.

  • http://www.designmarkgraphics.co.uk/blog Mark Thomas

    That’s a really useful roundup; thanks for collating and posting.

  • Jow88s

    Very usefull collection !!

  • JP

    oh beatiful!! thanks

  • Barefoot

    This is a monster collection of resources! Thank you kindly!