Fresh Resources for Web Designers and Developers – September 2013

Four months to go before we revisit another round of new year resolutions. In the meantime, let’s see what is in store for September’s round up of fresh resources for designers and developers like you.

In this list, we got a Photoshop plugin that allows you to create a new open image format called WebP, a source for free illustrations, and another for free hi-res photos, a tool that presents your app in a device mockup without the use of Photoshop, and many other great resources.

Let’s check them out.

CSSComb

CSSComb is a tool for sorting CSS properties so that they are more organized, readable, and easy to maintain. You can set your own rules on how it should sort the properties. CSSComb supports CSS3 and CSS Pre-processor â€" LESS and Sass. It is available as web tool, and also plugins for several code editors like Sublime Text, TextMate, Coda, and Notepad++.

Emmet LiveStyle

Tools such as LiveReload lets us see the changes we’ve made to our CSS, on the browser instantly. Emmet LiveStyle takes this process a step further via bi-directional live editing. That means we can do Live Editing both from within the browser and the code editor without any page refresh and file saving. Watch it in action in this video: Emmet LiveStyle sneak peak.

Read Also: How To Refresh Changes On Browser With Sublime Text

WebP Photoshop Plugin

Site developers have been paying attention to high-definition image quality and its impact on website loading performance. To address this situation, Google introduced a new open image format format called WebP. Compared to PNG and JPEG, WebP can be smaller by 26-39% while still maintaining the quality of the image.

A full list of application and operating system that supports WebP image format can be found here and here.

SVGeneration

SVGeneration is a patterns generator for SVG. As we have discussed in our previous post series, SVG is one of the way to go to serve graphics for HD screens. And now with SVGeneration tool, creating a background pattern with SVG is made a lot easier. (And this is my favorite: Circle Everywhere).

MockupPhone

There are many free PSD files to present your mobile app design or prototype in a phone or tablet mockup. But, that means it requires Photoshop to use the file as it is a PSD. In the case where Photoshop is not available, you can use MockupPhone as your alternative. At the time of the writing, you can choose iPhone, iPad, Galaxy, Nexus, and Lumia mockup.

KoalaApp

KoalaApp is a GUI application for compiling LESS, Sass, Compass and CoffeeScript. Unlike Codekit (a similar application), which only runs on OS X, KoalaApp can be run on Windows, OS X and Linux.

Unsplash

Unsplash is a collection of free HD images. The collections are really fantastic, and it can really give a good impact on your design prototype look. So, if you are looking for great image Unsplash is one of the sites to go. Worth-bookmarking and checking it regularly as there will be 10 new hi-resolution photos every 10 days.

TychPanel

We see the trend in social sites where photos are displayed in a box side-by-side or top-bottom in one frame. TychPanel is an extension that allows you to do the same thing automatically in Photoshop. Even better, you can create your own layout and boxes, adjust background colors, the width and the height.

iOS7 Wireframe Kit for Illustrator

For some designers, they may choose Illustrator over Photoshop (or Fireworks) for creating an app design prototype. If you are the one, you probably need this bookmarked and saved, iOS Wireframe for Illustrator.

Story Board Illustration

Julian Burford, a designer and illustrator from Netherland shared for more than 430 illustrations in AI format that can be useful for creating sketches and storyboard. I can say that this is one of the great free stuff every designer should bookmark. Head over to his Dribbble page to download the file.