Fresh Resources for Designers and Developers — October 2013

Ladies and gents, our fresh resources compilation has reached its first year! And I’m really excited for this round as we have put together some really cool stuff.

Find resource piles for vector icons and UI designs, get tools to help with your task to optimize your site for mobile, a tool to help you process images in large batches into multiple image dimensions, and if you want to make your site voice-enabled, you can.

Let’s check out October’s roundup.

Tridiv

CSS has evolved rapidly in the last couple of years, and with the new features that are introduced in CSS3 specifications like Drop Shadow, 2D/3D Transformation, and Transition, we are now able to build a comparable 3D object using only HTML and CSS.

Tridiv is a web application that makes this idea of creating 3D upon CSS less complicated. With Tridiv, we can build a 3D object in an interactive way with the GUI. Some of the examples are really amazing, check them out.

Mobile Design Kit

Unlike desktop computers, mobile devices come in too many different screen sizes. It is challenging to accommodate this when designing an application or a mobile-optimized website. So, you might need a design kit to help you out on that matter.

Mobile Design Kit, as the name suggests, is a set of mobile device mockups with real screensize pixel, created by Daniel Chitu. It comes with 15 types of devices ranging from iOS to Android to Windows Phone platform. You can use it to help you design an app or website for mobile in the right size and great precision.

SkalaPreview

SkalaPreview is a free OSX and iOS application for previewing images in real mobile devices. After constructing your crafted design using the Mobile Design Kit above, it is time to preview it in a real device. By using SkalaPreview app, this is a snap. You can also preview the design in real time as you are editing it in Photoshop, which could tremendously streamline your workflow.

NProgress

Did you notice that when you are navigating across Youtube pages, there is a loading bar moving at the very top of the window? This Progress Bar is a popular way in Ajax-based websites to show that the content is being loaded. If you want to add the same progress bar, there is a JS library for that called NProgress.

iOS 7 Vector Icons

iOS7 comes with new UI direction. It is now flat and thin. That means, you also need a different set of UI components including the icons when designing for iOS7. Here are collections of more than 800 vector icons for iOS7 designed by Icons8.

Read Also: 10 High Quality Freebies For Your Next IOS 7 Project

Brick

Brick is a set of reusable UI aimed for rapid mobile and web application. Brick is developed by Mozilla, and it uses X-tags to construct UI components. At the time of this writing, it comes with 13 general web components such as Appbar, Calendar, Datepicker, and Flipbox.

Pttrns

Every designer relies on inspiration for his or her work, and an Application designer is no exception. If you are building a mobile application, Pttrns is one of the sites you should visit to find some inspiration. It collects more than 1000 beautifully crafted UI design in mobile application.

PSD Fonts

PSD Fonts is a nice little web tool that allows you to figure out the fonts being used in a PSD file quickly, so that you don’t having to painfully search through a bunch of PSD layers on your own. It’s a time saver tool and worth-bookmarking.

Sizzlepig

In Responsive Design, we ideally need a set of multiple image dimensions to cater to multiple screen sizes. However, It could be a rea pain to crop large numbers of images. So, you need a tool like SizzlePig for help. Sizzlepig is a web tool that will automatically resize or crop all the images in a folder in a specified dimension.

Annyang

Annyang â€" which in Korean means Hi or Hello â€" is a Voice Command library. While we traditionally use a keyboard or mouse to interact with a Website, by using this library, we can add voice interaction to our website, similar to what Siri does for iOS. Using Voice Command might come in useful to extend website accessibility as well as to enrich user experience.