Today, we’re going to show you our compilation of fresh tools and resources for web designers and developers. And we’re really excited for this roundup because we’ve put together some really cool and useful stuff!

Here, you’ll find resources for vector icons and UI designs, tools to help you with your task to optimize your mobile website, a tool to help you process photos in large batches into multiple image dimensions, as well as a tool to make your site voice-enabled.

Let’s jump right in!

Brick

Brick

Brick is a set of reusable UI aimed for fast mobile and web application. Developed by Mozilla, this tool uses X-tags to construct UI components. At present, it has 13 general web components like Appbar, Calendar, Datepicker, and Flipbox.

Sizzlepig

Sizzlepig

When it comes to responsive web design, we usually need a set of multiple image dimensions to cater to multiple screen sizes. It could be a real hassle to crop a huge number of photos so you need a tool like Sizzlepig to ease the burden. This handy web tool will automatically resize or crop all of the photos in a folder in a specified dimension.

NProgress

NProgress

When navigating across YouTube pages, you’ll notice that there’s a loading bar moving at the very top of the window. This progress bar is a popular method in Ajax-based websites to show that the content is still being loaded. If you want to add the same type of progress bar to your site, there’s a JavaScript library for that: NProgress!

PSD Fonts

PSD Fonts

PSD Fonts is an amazing web tool that allows you to quickly determine which fonts are being used in a PSD file so that you won’t have to painfully search through a bunch of PSD layers on your own. It’s a real time-saver and is worth bookmarking.

Mobile Design Kit

Mobile Design Kit

Compared to desktop computers, mobile devices come in too many different screen sizes. It’s quite difficult to accommodate this when designing a mobile app or a mobile-optimized website, so you might require a design kit to help you out on your project. As the name implies, Mobile Design Kit is a set of mobile device mockups with real screen size pixel, created by Daniel Chitu. It supports 15 types of devices, ranging from iOS and Android to Window Phone platform. You can use it to help you design an app or website for mobile in the right size and great precision.

Pttrns

Pttrns

Every web designer relies heavily on inspiration for his/her work, and an app designer is no exception. If you’re looking to build your own mobile app, Pttrns is one of the websites you should visit to find some inspiration. It has more than 1,000 well-crafted UI design in mobile application. Check it out!

Tridiv

Tridiv

CSS has rapidly evolved in the past few years, and with new features in CSS3 specifications like drop shadow, 2D/3D transformation, and transition, we’re now able to build a comparable 3D object using only HTML and CSS techniques. Tridiv will make this idea of creating 3D upon CSS less complicated. With this web app, you can build a 3D object in an interactive way with the GUI.

Annyang

Annyang

Annyang, which in Korean means “Hi” or “Hello”, is a newly released Voice Command library. While we usually use a keyboard or mouse to interact with a site, by using this library, you can add voice interaction to your site, similar to what Siri does for iOS. Using Voice Command will come in handy to extend your site’s accessibility, as well as to improve user experience.

iOS 7 Vector Icons

iOS 7 Vector Icons

iOS7 comes with new UI direction – it’s now flat and thin! This only means that you’ll also need a different set of UI components, including the icons when designing for iOS7. Here, you’ll find a huge collection of over 800 different vector icons for iOS7.

SkalaPreview

SkalaPreview

Looking for a free OSX and iOS app for previewing images in real mobile devices? SkalaPreview is the one for you! After creating your crafted design, it’s time to preview it in a real mobile device. By using this app, doing it is a breeze! You can also preview the design in real time as you’re editing in Photoshop, which could really streamline your workflow.