50+ incredible freebies for web designers, June 2015
New projects are being released all the time that make us excited, curious, inspired and sometimes a little bit jealous. Today we continue our monthly series of the very best free resources for web designers with a collection that includes cool scripts, awesome fonts, great ideas, and must-see experiments.
If this month’s collection is anything to go by, the Summer is shaping up to be a great few months for web design! Whether you’re a designer, developer, or enthusiast we’re sure you’ll find something here to feed into your next project.Animated weather icons CSS snippet
This set consists of 6 amazing icons for weather purposes. The icons are made with CSS and the cool thing about them is that they are nicely animated!![Animated Weather Icons CSS Snippet](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/06/animated-weather-icons-css-snippet.jpg)
Free set of vector isometric material icons
A pack of icons in isometric perspective and a Material style depicting different devices and other elements.![Free Set of Vector Isometric Material Icons](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/06/free-set-of-vector-isometric-material-icons.jpg)
Vector Android icons pack
A really big collection of icons for Android, divided into several categories for easy access, totally editable thanks to vector shapes. All of them follow the official Android guidelines for icons.![54K Editable and Scalable Android Icons](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/06/54k-editable-and-scalable-android-icons.jpg)
Tri-fold brochure Photoshop template
A clear and easy to modify tri-fold template made in PSD format. It uses clear typography and simple imagery to get to the point (usually selling a product or service).![Tri-fold Brochure Photoshop Template](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/06/tri-fold-brochure-photoshop-template.jpg)
High-resolution iMac PSD web mockup
A high-resolution mockup of an iMac beautifully styled and located, evoking simplicity and professionalism. Includes smart objects to easily add your creations.![High-resolution IMac PSD Web Mockup](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/06/high-resolution-imac-psd-web-mockup.jpg)
Free CV PSD and AI template
A different design for a CV, perfect for designers, showcasing all their strengths, skills and educational level. Made in Photoshop and Illustrator.![Free CV PSD and AI Template](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/06/free-cv-psd-and-ai-template.jpg)
Fancy editable PDF items for scene generation
This is a big collection of more than 440 items, inspired by many industrial designers. The elements come as individual and editable PDF elements.![Fancy Editable PDF Items for Scene Generation](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/06/fancy-editable-pdf-items-for-scene-generation.jpg)
Branding identity presentation PSD mockup
A compelling branding UI kit including a business card, letterhead, logo showcase, and iPhone screen mockup in a photo-realistic environment.![Branding Identity Presentation PSD Mockup](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/06/branding-identity-presentation-psd-mockup.jpg)
300 cute icons and avatars in Kawaii style
300 multipurpose icons and avatars comprised in a single pack, created with a Kawaii style and editable to their core.![300 Cute Icons and Avatars in Kawaii Style](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/06/300-cute-icons-and-avatars-in-kawaii-style.jpg)
Verve: a sleek mobile user interface PSD kit
A set of 15 PSD user interface screens for a mobile app. It has a dark style and it's mainly focused on photography.![Verve: A Sleek Mobile User Interface PSD Kit](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/06/verve-a-sleek-mobile-user-interface-psd-kit.jpg)
Free lucid PSD UI kit
A minimal user interface kit made in PSD format called Lucid. It has a gorgeous color palette, standing out thanks to semi-realistic colorful components.![Free Lucid PSD UI Kit](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/06/free-lucid-psd-ui-kit.jpg)
Creative UI kit: a flat Bootstrap responsive web template
A creative and colorful user interface kit for making a complete website. It includes menu bar, video player, calendar, weather and skills widgets, and others.![Creative UI Kit: a Flat Bootstrap Responsive Web Template](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/06/creative-ui-kit-a-flat-bootstrap-responsive-web-template.jpg)
Flat user interface PSD design kit
This user interface kit is a flat creation made for Photoshop, totally editable and scalable. The UI is free and customizable, usable for personal and commercial projects.![Flat User Interface PSD Design Kit](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/06/flat-user-interface-psd-design-kit.jpg)
Simple shapes wireframe for Sketch
A basic and light website set of wireframes consisting of simple shapes available for Sketch. It was designed by Yusuf Besim.![Simple Shapes Wireframe for Sketch](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/06/simple-shapes-wireframe-for-sketch.jpg)
53 multi-style vector tri-fold templates
A set with 53 templates for tri-folds, perfect for showing your products and services, web and print ready, and fully editable.![53 Multi-style Vector Tri-fold Templates](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/06/53-multi-style-vector-tri-fold-templates.jpg)
Parker: hand crafted grunge font
Parker is a vintage grunge handmade typeface, awesome for posters, stationery design and t-shirts. It can be used in logos and badges as well.![Parker: Hand Crafted Grunge Font](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/06/parker-hand-crafted-grunge-font.jpg)
Dpopper: free 3D-like puffy font
Dpopper is a complete font which includes regular, italic, regular, greek characters, numbers and additional symbols. It is puffy and can be used in lots of web and printed designs.![Dpopper: Free 3D-like Puffy Font](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/06/dpopper-free-3d-like-puffy-font.jpg)
Zujal: free cartoon vector font
A simple font created by designer Igor Petrovic who had the idea to make a multi-purpose font that can also be elegant and playful.![Zujal: Free Cartoon Vector Font](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/06/zujal-free-cartoon-vector-font.jpg)
Hallo Sans: free elegant typeface
Hallo Sans is, as its name indicates, a sans serif font which also happens to be elegant and sharp, fitting all sorts of website designs.![Hallo Sans: Free Elegant Typeface](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/06/hallo-sans-free-elegant-typeface.jpg)
Free PSD landing page design
A PSD template with an organized template and organized layers and groups. It has a kids-learning focus, especially in the areas of technology and programming.![Free PSD Landing Page Design](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/06/free-psd-landing-page-design.jpg)
TripWay: travel and adventure PSD template
This PSD template is perfect for travellers and adventurers seeking for ways of showing their experiences. It has a bright color palette with colors that can be easily modified.![TripWay: Travel and Adventure PSD Template](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/06/tripway-travel-and-adventure-psd-template.jpg)
Email client Photoshop template
A simple template for Photoshop with the necessary elements for creating an email client. It's clean, minimal and its color use is exceptional.![Email Client Photoshop Template](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/06/email-client-photoshop-template.jpg)
One page PSD website template
A free single page website PSD template, designed especially for any sort of mobile app showcase. Comes in an organized PSD format file.![One Page PSD Website Template](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/06/one-page-psd-website-template.jpg)
Cover: free minimal writing WordPress theme
This WordPress theme is perfect for writers and bloggers only interested on sharing their thoughts with the world. The theme is GPLv2 licensed.![Cover: Free Minimal Writing WordPress Theme](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/06/cover-free-minimal-writing-wordpress-theme.jpg)
Urban Bold: refreshing blogging WordPress theme
A cool blogging theme for WordPress sites which has a simple layout, focusing on the written content. The theme is well rated and free.![Urban Bold: Refreshing Blogging WordPress Theme](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/06/urban-bold-refreshing-blogging-wordpress-theme.jpg)
BillyDroid: mobile and technology blogging WordPress theme
BillyDroid is a nice WordPress theme, perfect for Android, mobile and technology related websites which can be easily customized and implemented.![BillyDroid: Mobile and Technology Blogging WordPress Theme](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/06/billydroid-mobile-and-technology-blogging-wordpress-theme.jpg)
Startup WP themes, a complete collection
This collection of stylish and multifaceted WordPress themes can help you develop your business to success. Free and ready to use.![Startup WP Themes, a Complete Collection](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/06/startup-wp-themes-a-complete-collection.jpg)
Retrospect: one page HTML5 template
A beautiful one-page template perfect for startups and small business in need of showing products and services.![Retrospect: One Page HTML5 Template](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/06/retrospect-one-page-html5-template.jpg)
Majestic: interior design multipurpose HTML web template
Majestic is an HTML template for websites focusing on interior design or architecture. It is free and you can use it for freelancing purposes.![Majestic: Interior Design Multipurpose HTML Web Template](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/06/majestic-interior-design-multipurpose-html-web-template.jpg)
Multiple page scroll CSS effects
This is a set of CSS transition effects for pages on scroll. There are several transition effects like parallax, fixed, rotation and more.![Multiple Page Scroll CSS Effects](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/06/multiple-page-scroll-css-effects.jpg)
Material button hover effect snippet
This snippet made with pure CSS generates a common button that shows options when hovered over.![Material Button Hover Effect Snippet](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/06/material-button-hover-effect-snippet.jpg)
Off canvas menu with animated links
A snippet that generates an off canvas menu including animated links and multiple options, which can be edited easily thanks to its CSS and JavaScript code.![Off Canvas Menu with Animated Links](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/06/off-canvas-menu-with-animated-links.jpg)
Auto-split form input fields CSS and JS snippet
A compelling code snippet for making forms that divides the input fields to add additional information. It is made in JavaScript and CSS.![Auto-Split Form Input Fields CSS and JS Snippet](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/06/auto-split-form-input-fields-css-and-js-snippet.jpg)
CSS search button and field animation
A simple hover effect applied to a search input made in CSS which transforms the icon into an input, cool to save space on mobile devices.![CSS Search Button and Field Animation](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/06/css-search-button-and-field-animation.jpg)
DebugCSS: HTML CSS debugging tool built
A debugging tool made in CSS which checks your HTML by looking for potentially broken, malformed or legacy code.![DebugCSS: HTML CSS Debugging Tool Built](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/06/debugcss-html-css-debugging-tool-built.jpg)
A11y: an online accessibility tool for websites
A tool for auditing websites by checking the accessibility issues to make it truly responsive and ready for all platforms.![A11y: An Online Accessibility Tool for Websites](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/06/a11y-an-online-accessibility-tool-for-websites.jpg)
Meat!: collaborative platform for web developers
Meat is a collaborative platform that can be installed on your own server, providing all the tools you need to develop web projects in a better way.![Meat!: Collaborative Platform for Web Developers](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/06/meat-collaborative-platform-for-web-developers.jpg)
Codeface: a set of development fonts
Codeface is a set of monospaced typefaces for web developers, displayed in the main gallery to download and install the one you like the most.![Codeface: A Set of Development Fonts](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/06/codeface-a-set-of-development-fonts.jpg)
Bootcards: bootstrap-built cards-based user interface
A user interface for creating cards with a dual-pane capabilities totally usable on mobile and desktop environments.![Bootcards: Bootstrap-Built Cards-based User Interface](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/06/bootcards-bootstrap-built-cards-based-user-interface.jpg)
CSS3, HTML5, microdata, open graph and twitter code generators
This online tool helps you generate code for CSS3, HTML5, microdata, open graph and Twitter, which you can later use on your website.![CSS3, HTML5, Microdata, Open Graph and Twitter Code Generators](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/06/css3-html5-microdata-open-graph-and-twitter-code-generators.jpg)
Scally: Sass-based responsive ready CSS framework
A CSS framework based on Sass, BEM, and OOCSS, totally responsive and perfect for building reusable UIs easily and fastly.![Scally: Sass-based Responsive Ready CSS Framework](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/06/scally-sass-based-responsive-ready-css-framework.jpg)
Scut: Sass utilities for web development
A collection of Sass utilities to help you make things easier and improve the implementation of common style-code patterns.![Scut: SASS Utilities for Web Development](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/06/scut-sass-utilities-for-web-development.jpg)
Let's Chat: small self-hosted chat tool
A persistent messaging application made with Node.js and MongoDB, intended for small teams that need to collaborate while making projects.![Let's Chat: Small Self-hosted Chat Tool](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/06/lets-chat-small-self-hosted-chat-tool.jpg)
Bazel: quick and reliable code builder
Bazel is a website building tool for making development really quick and reliable. It is designed to handle huge source code repositories.![Bazel: Quickly and Reliably Code Builder](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/06/bazel-quickly-and-reliably-code-builder.jpg)
Dynamics.js: physics-based JavaScript animations library
A lightweight yet complete JavaScript library that allows you make animations based on mathematical functions and physics.![Dynamics.js: Physics-based Animations JavaScript Library](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/06/dynamicsjs-physics-based-animations-javascript-library.jpg)
HTTTML: Custom HTML tags JavaScript library
A library made in JavaScript similar to vanilla HTML, which allows you create customized tags to style your code. It works best with an OOCSS toolkit.![HTTTML: Custom HTML Tags JavaScript Library](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/06/htttml-custom-html-tags-javascript-library.jpg)
Vibrant.js: prominent image colors JavaScript extractor
This library made in JavaScript is perfect for selecting the most prominent color of a given image. The library uses the Palette class.![Vibrant.js: Prominent Image Colors JavaScript Extractor](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/06/vibrantjs-prominent-image-colors-javascript-extractor.jpg)
Hammer.JS: DOM elements touch gestures JavaScript generator
This cool library helps you adding touch gestures for any kind of DOM element. The library is a small and clean creation in JavaScript.![Hammer.JS: DOM Elements Touch Gestures JavaScript Generator](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/06/hammerjs-dom-elements-touch-gestures-javascript-generator.jpg)
FolderBuilder: folder tree view CSS and JavaScript library
A simple tree view organizer made with CSS and JavaScript, a useful tool for organizing complex projects.![FolderBuilder: Folder Tree View CSS and JavaScript Library](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/06/folderbuilder-folder-tree-view-css-and-javascript-library.jpg)
Flight: event-driven JavaScript framework
Flight is a simple framework for building JavaScript components, used in apps like TweetDeck and Twitter itself. Licensed under MIT.![Flight: Event-driven JavaScript Framework](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/06/flight-event-driven-javascript-framework.jpg)
Dokker.js: professional Javascript code documentation creator
A JavaScript library which gives you the basic elements for building a complete code documentation in a professional way.![Dokker.js: Professional Javascript Code Documentation Creator](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/06/dokkerjs-professional-javascript-code-documentation-creator.jpg)
Quttons: smooth jQuery button transformations
This jQuery plugin generates buttons that can be transformed into other kinds of elements, taking advantage of the Material design visual language.![Quttons: Smooth JQuery Buttons Transformations](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/06/quttons-smooth-jquery-buttons-transformations.jpg)
Twitter Bootstrap date paginator
A simple to use date paginator made in jQuery for Twitter Bootstrap. It is simplified, modularized and lightweight.![Twitter Bootstrap Date Paginator](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/06/twitter-bootstrap-date-paginator.jpg)
JQuery Calx: a formula-based calculation jQuery plugin
An Excel calculation engine and formula parser compressed as a jQuery plugin. It uses json and formula set imported from formula.js.![JQuery Calx: a Formula-based Calculation JQuery Plugin](https://www.webdesignerdepot.com/cdn-origin/uploads/2015/06/jquery-calx-a-formula-based-calculation-jquery-plugin.jpg)
Juan Pablo Sarmiento
Founder of iconShock (high quality free icon sets), DesignShock (lots of design packs and TemplateShock (printing templates)
Read Next
15 Best New Fonts, July 2024
Welcome to our monthly roundup of the best fonts we’ve found online in the last four weeks. This month, there are fewer…
By Ben Moss
20 Best New Websites, July 2024
Welcome to July’s round up of websites to inspire you. This month’s collection ranges from the most stripped-back…
Top 7 WordPress Plugins for 2024: Enhance Your Site's Performance
WordPress is a hands-down favorite of website designers and developers. Renowned for its flexibility and ease of use,…
By WDD Staff
Exciting New Tools for Designers, July 2024
Welcome to this July’s collection of tools, gathered from around the web over the past month. We hope you’ll find…
3 Essential Design Trends, July 2024
Add some summer sizzle to your design projects with trendy website elements. Learn what's trending and how to use these…
15 Best New Fonts, June 2024
Welcome to our roundup of the best new fonts we’ve found online in the last month. This month, there are notably fewer…
By Ben Moss
20 Best New Websites, June 2024
Arranging content in an easily accessible way is the backbone of any user-friendly website. A good website will present…
Exciting New Tools for Designers, June 2024
In this month’s roundup of the best tools for web designers and developers, we’ll explore a range of new and noteworthy…
3 Essential Design Trends, June 2024
Summer is off to a fun start with some highly dramatic website design trends showing up in projects. Let's dive in!
15 Best New Fonts, May 2024
In this month’s edition, there are lots of historically-inspired typefaces, more of the growing trend for French…
By Ben Moss
How to Reduce The Carbon Footprint of Your Website
On average, a web page produces 4.61 grams of CO2 for every page view; for whole sites, that amounts to hundreds of KG…
By Simon Sterne
20 Best New Websites, May 2024
Welcome to May’s compilation of the best sites on the web. This month we’re focused on color for younger humans,…