This is our web design and web development news series where we share our favorite design/development related articles, resources, tutorials and awesome freebies.

New Development Resources and Tools

Build Dynamic Physics Interactions with Impulse jQuery

Impulse is a library for building dynamic physics based interactions, with a focus on mobile web. You can create animations that flow naturally from the user’s movements. Rather than animating properties for a set amount of time, impulse takes a start position, end position, and velocity.

Impulse is small, weighing in at about 9k minified and gziped. Impulse has no large dependencies. It doesn’t require jquery, but it knows how to work with jquery. Animations flow smoothly from user interactions. When a user swipes an element, it moves at the velocity of their swipe.

UI Animation in Photoshop

This tutorial #1 will cover some basic procedures to create simple animations using the Timeline feature in Photoshop CS6+ (no GIMP or older Photoshop), so if you are totally new to this, I hope you will find this tutorial helpful for your first step in making UI animation using Photoshop. Let’s begin!

A Simple Responsive Charting Library Built with SVG – Chartist.js

Chartist.js is a simple responsive charting library built with SVG. Chartist’s goal is to provide a simple, lightweight and non-intrusive library to responsive craft charts on your website. It’s important to understand that one of the main intentions of Chartist.js is to rely on standards rather than providing a own solution to the problem which is is already solved by the standard.

Chartist works with inline-SVG and therefore leverages the power of the DOM to provide parts of its functionality. This also means that Chartist is not providing it’s own event handling, labels, behaviors and anything else that can just be done with plain HTML, JavaScript and CSS.

jQuery Plugin for Responsive Cropping – FocusPoint.js

FocusPoint jQuery Plugin makes sure your image looks great in any container, by ensuring the ‘spare’ parts of your image (negative space) are cropped out before the important parts. It’s made for ‘responsive cropping’. Dynamically crop images to fill available space without cutting out the image’s subject.

Easy Localization for One-page Websites

Simple localization dropdown for your website. Translates strings in the languages you provide. This widget is built with the single page scenario in mind. It supports right-to-left text direction when languages like Arabic are selected.

An SVG Based Seamless Pattern Maker – Plain Pattern

Plain Pattern is An SVG based seamless pattern maker. This is currently a work in progress with more features to be added soon. It has been tested on IE 10/11 and the latest versions of Chrome, Firefox and Safari. Not fully tested yet on iOS and Android devices.

Lightweight jQuery Popover Plugin – WebUI Popover

A lightWeight popover plugin with jquery ,enchance the popover plugin of bootstrap with some awesome new features. It works well with bootstrap ,but bootstrap is not necessary!

HTML Abstraction Markup Language – Haml

Haml (HTML abstraction markup language) is a markup language that’s used to cleanly and simply describe the HTML of any web document without the use of inline code. Haml functions as a replacement for inline page templating systems such as PHP, ASP, and ERB, the templating language used in most Ruby on Rails applications. However, Haml avoids the need for explicitly coding HTML into the template, because it itself is a description of the HTML, with some code to generate dynamic content.

Free Templates and Themes

Email Design Inspiration

Beautiful emails to help inspire your next email design.

Free Responsive HTML Template – Fore

SNDSGN. Free PSD Template

Design Freebies

Compacticons – 180 PSD Tiny Icons

Compacticons is a set including 180 good looking icons for mobile app design.

Jolly Hand-Drawn UI Kit

Jolly UI Free is a free hand-drawn UI kit with all the items originally hand-crafted and then vectorized. All UI elements provided in .AI and .PSD formats are vector compound shapes that can be edited without any loss of quality.

Free Font – Looque

Looque is a decorative free font based on linear patterns with circular and angular edges.