Strict Standards: Only variables should be passed by reference in /home/sizzling/public_html/ on line 1588

25 New Tools, Scripts and Frameworks for Web Designers

Strict Standards: Only variables should be passed by reference in /home/sizzling/public_html/ on line 1588

Every month countless tools, scripts and plugins appears to make the web designer’s life easier. Last month I searched for so many tools and they can’t be presented just to one list in a single post. So i will created some more lists of web design tools. Now in this post i will summarize a few resources. In addition to online tools, frameworks and this time also some scripts, templates and Alot of new stuff so heads up and Have fun.



By Bookmaklet Live.js you have to your site will not load longer manually. The script monitors the JavaScript HTML and CSS code of the website and updates the view once you have changed something.

Frameworks & Boiler Plates

The Goldilocks Approach

The Goldilocks Approach is a CSS framework for multi-screen sites. The framework supports three views of a site, fluid and rigid grid.

Proportional grids

Proportional Grid is a responsive CSS framework that uses proportions rather than fixed-width data. CSS classes with her sets the proportions, the distances between the columns with fixed widths.

The Boiler

The Boiler is a work based on HTML5, CSS3, and a liquid grid framework for use in WordPress.


If you write the CSS code your side with the Preprocessor Compass, this framework helps you more safely. Susy is a responsive grid framework based on Compass.

Fluid Baseline Grid

The Fluid Baseline Grid is a mobile first, responsive framework. In order to allow the claim typographic quality projects do justice to, the framework is based on liquid column widths and a baseline grid.


Wirefy is to create a responsive framework for rapid prototypes, mock-ups or wireframes. Based on this structure, the interactive prototype later be made.


Amazium Responsive Web Design is a framework based on the pixel grid 12-Spalten/960. It provides various presets for images, videos and tables.

Online Tools

Google Tag Manager

The Google Tag Manager is a service for managing code snippets (tags). Through the user can add tags for various applications (eg, Google Analytics, AdWords, custom HTML tags) can be configured. The day manager allows the management of various websites and provides the ability to use multiple users with different access rights.

iOS Fonts

Which fonts are included in the version of iOS? To construct reasonable fallback and font stacks, it is virtually a tool like iOS fonts at your fingertips.

Facebook ID determine

With this little tool you can the ID of a Facebook user or a Facebook page with the URL to read . Simply copy the URL into the search, the search engine responds with the matching ID.

Gradient scanner

With the gradient scanner you can CSS3 gradients from graphs can be generated.Invite simply upload an image, create a selection of the desired range and copies the appropriate CSS code. The option within the uploaded image to define a selection can still takes off this tool of comparable services.

Contrast Ratio

With the tool contrast ratio , the contrast ratio between text and background color can be calculated. The aim is to enhance readability of web texts.


Guide Guide

Guide Guide is a Photoshop plugin for creating design grids.



Uniform was already a few years under his belt, but still functions properly. The script works on the basis of jQuery and enables you to create form - radio - input - and checkbox elements are masked and can be overridden with CSS3 or graphic.


With the jQuery plugin ArcText can deform their text elements. The script, get the way by clicking on the link at the top right.

Retina Images

The script Retina Images provides images at different resolutions based on the resolution of the viewer. Thus can also img implement tags in HTML markup Retina-ready.


Whew! Another tool for the integration of a Twitter stream? This tool has made it to the list because it is easy to implement and displays links, retweets and user pictures.


FancyMoves is a work based on jQuery Carousel for attractive display of pictures.Per item, other images in a lightbox displays the script can also be controlled via the keyboard.


With the jQuery plugin jQSlickWrap you can text can flow around delicate shapes in images. The tool allows for so complex page layouts than the floating properties of CSS is possible. Adobe is already on the way, a similar solution called Adobe CSS Regions .


With Swipe.js her a list converts easily into a person touching Control slider. The script works regardless of JavaScript libraries like jQuery.

iView Slider

The iView Slider is a jQuery-based image slider with some interesting features. In addition to the “responsive” component allows video, HTML and iframe contents are placed in the slider. In addition, image descriptions are animated.


This plugin responsly.js binds “Responsive widgets” for the elements Slider and Accordion one. The effects are achieved with CSS3.

Photo Swipe

Photo Swipe is optimized for touch screens and mobile devices gallery. Photos are displayed in full screen, you can switch to the next image by gesture control (Swipe).


Blank HTML5 WordPress Theme

This blank theme offers you the perfect foundation for the launch of a new HTML5 WordPress project. Various techniques, such as the outsourcing of scripts, Custom Post Types, mobile support and much more are included. On the website you can find a complete list. Highly recommended – even just to browse around in the code.

Interface Sketches

This extensive collection of templates for browsers, tablets and smartphones , you can start your next project perfectly.

Now it’s your turn!

Do you like this post or do you disagree? Do you have suggestions, additions, found a bug or if this post is out of date? Then I look forward to your comment.

Will join this course to others. I’m grateful for all the support!

Related posts:

Leave a Reply