18 Useful Kits for Designers

Advertise here via BSA

Many designers think that they have to design everything themselves from scratch — but there’s nothing wrong with using elements that other designers have made available for use, so long as you adhere to the terms on which they were made available. Below we’ve compiled 18 great resources including UI kits and icon collections for your convenience.

Electric UI Kit

Tron UI Kit

Simple UI Elements

Dark Neon UI Kit

Moonify UI

Pixel UI Icon Set

Chat UI PSD

Light UI PSD

Glyph UI Icon Set

iPhone 4 GUI PSD

iOS 5 GUI PSD

Cloudy UI Kit

Mass Web UI and Button Set

UI Element Set

Stylish Progress Bar

Simple UI Elements

UI Resource

Lion OS X UI Kit PSD

Blue and White GUI Kit

Did we miss your favorite? Tell us about it in the comments!

[ Go to Source ]

Super useful online tools to work with images

Minus

As a developer or designer, you often need to upload images for sharing them with clients or people you work with. Many websites allow you to do so, but what I really love with Minus is how quick and easy it is: Just drop your image on their website, and it’s online. They’ll even give you a short url so you can share your image easily. No registration required!

Just one request, I hope they’ll add a resize image feature soon.
→ Visit Minus

Smush It

When using images on the web, one thing you must definitely think about is the image size. You need to find the good balance between image weight and quality. Smush It is a tool developed by Yahoo! which allow you to optimize your images without losing quality. WordPress users, note that there’s a WP plugin available.
→ Visit Smush It

Placehold It

When creating a website layout, you often need placeholder images of an exact size. Placehold It allows you to dynamically create placeholder images. To use it in your designs, simply use urls like this: <img src="http://placehold.it/350x150"> to display a 350*150 pixels placeholder image.
→ Visit Placehold It

Resize images online

Don’t want to open Photoshop just for resizing an image? This site is here to help. Just upload your image, specify the desired size, and you’re ready to go!
→ Visit Resize images online

Photoshop online tools

When it comes to image editing, Adobe Photoshop is definitely the most popular software. Adobe launched a light version of Photoshop which is available online. The online app is quite powerful and has many features. Unfortunely you have to register to use Photoshop online.
→ Visit Photoshop online tools

Pixlr express

Pixlr express is a simple but powerful app which allow you to resize images, add effects, borders, watermarks, etc. The app is free and does not require registration.
→ Visit Pixelr express

Aviary Phoenix

Developed in Flash, Aviary Phoenix is a super-complete and free online image editor. A real “light photoshop” that you can access from any computer, without any registration.
→ Visit Aviary Phoenix

I just created a Facebook page for Cats Who Code, so don’t hesitate to become a fan!

Go to Source

15+ high quality, free pattern sets

As web designers, we spend most of our time praising web designs for their sleek interfaces and their awesome typography or even just the random design work, but truly, the unsung hero of design is the pattern. The pattern is popular, not just online, but offline too—we love a good pattern because it’s design in its purest form. Patterns allow us the ability to interpret good designs and rely on a little consistency.

When we talk patterns in web design, we often automatically think about backgrounds, but patterns are much more useful than that. Your favorite pattern set can be used as a wonderful texture or even a great border for your photographs. Whatever your usage for patterns, they are extremely important in good, solid web design.

Picking the right pattern is important. There are a ton of free ones out there for sure, that aren’t always in your best interest. Fortunately, we’ve decided to put together some of the best, highest quality pattern sets we could find to help you in your pattern filled endeavors.

Subtle pattern sets

Oftentimes, web designers like to use subtle textures and shapes more to create the backgrounds in their web designs. They add a bit of character to what can otherwise be a very plain or boring background. The best part about subtle patterns as backgrounds is they almost never draw attention away from what is supposed to be the more important features of the website, such as the product or the articles.

Subtle patterns don’t just have to be used as backgrounds, they are also great to help add some texture to photos. Below are some of the best, pixel perfect subtle patterns available on the web.

Seamless Photoshop Patterns by onethirtytwo

Features: Photoshop Pattern (.PAT), 6 swatches (1 pattern of 6 different colors)

I like to think of this pattern set as extremely decorative and fancy. This is great for those web designs that desire a bit of sophistication without overdoing the look. Though this is the same pattern, just in different colors, it is an extremely useful and gorgeous pattern set.

class="spacer_" />

11 Light Subtle Patterns by Premium Pixels

Features: Photoshop Pattern (.PAT), 11 different swatches, requires e-mail subscription to download

A pattern set perfect for adding a bit of pizzazz to your solid backgrounds. Extremely subtle and light, this set is made for squeaky clean web design. Keep in mind, however, subtle patterns are great to add just a bit of texture to wonderful photographs as well. This is an extremely useful and versatile set.

class="spacer_" />

9 Tileable Notepad Patterns by ElemisFreebies

Features: Photoshop Pattern (.PAT), 9 different swatches

While this set is slightly thematic, I believe it is still extremely useful. It’s basically a bunch of grids and lines, with which you can never go wrong. And because it is so simple, it can be fairly easy to customize.

class="spacer_" />

40 Photoshop Seamless Patterns Set #1 by Ali

Features: Photoshop Pattern (.PAT), 40 different swatches

Another set of lines and grids, this one is a bit more versatile for those who are into print—the larger lines show up very well at 300 dpi. Also, these patterns are transparent and can be put over any color background. With 40 different presets, this is an extremely solid and must have set.

class="spacer_" />

8 Seamless “Dark Metal Grid” Patterns by Premium Pixels

Features: Photoshop Pattern (.PAT), 8 different swatches, requires e-mail subscription to download

Another thematic set, these patterns are of extremely high quality and can prove to be very useful. While they are themed, I believe they can be used in many different situations and are perfect to add a bit of character to a dark theme. If you don’t like it dark, they are also available in a light scheme as well.

class="spacer_" />

75 Seamless Photoshop Pixel Patterns by OurTuts

Features: Photoshop Pattern (.PAT), 75 different swatches

Yes, another set with lines and grids, but the great thing here is the designer never stopped at lines and grids. There are many different pixel perfect designs that step outside the box of your regular lines and grids. Again, this set has transparent backgrounds so they are easily customizable to different background colors.

class="spacer_" />

Patterns Vol. 3 by J1897

Features: Photoshop Pattern (.PAT), 6 different swatches

Much like the previous pattern set, this one steps outside the realms of your typical pixel perfect lines and grids and gives a lot more flavor. You may find something in this pack that you were unable to find in another with these extremely unique designs.

class="spacer_" />

8 Tileable Dark Wood Textures by WebTreatsETC

Features: Photoshop Pattern (.PAT), 8 different swatches

This one is almost hard to believe when seeing it, but after testing it out this is the real deal! We refer to it as subtle, because dark wood makes for wonderful backgrounds, but this can be used as you please. And once again, for those who are into print, this looks great at 300dpi. This set is definitely worth experimenting with.

class="spacer_" />

Subtle Geometric Patterns by Audee

Features: Photoshop Pattern (.PAT), 30 swatches (10 colors in 3 different sizes)

This pattern set varies by colors and sizes and utilizes a very interesting geometric pattern, that would be great for web backgrounds (and a larger size that would translate well in print). An added benefit of this set is the download comes with a .PNG file of the untiled image, great for when you are ready to actually implement the design into web.

class="spacer_" />

Not so subtle pattern sets

It really makes sense to use your subtle patterns for pretty much anything, but they are times when a design can call for something a bit louder. These patterns below are very unique and creative and are great to add a bit of ‘oomph’ to some designs. Most are thematic patterns, but if you can match the patterns up to the perfect project, you will probably end up with a perfect design.

Vector Repeat Patterns – Plaid by PatternHead

Features: 3 .PNG’s (Photoshop – Edit > Define Pattern) and 3. EPS’, 3 swatches

There’s nothing wrong with a good set of plaid patterns to have if necessary. Though it’s not set up as a .PAT file, you can open and edit these files to suit your needs and the PNG files are easily ready for web implementation.

class="spacer_" />

16 Abstract Patterns by Elemis Freebies

Features: Photoshop Pattern (.PAT),  16 different swatches

This is a bit of a mixture between subtle and non-subtle patterns, but there are some really nice and unique geometric patterns in this set. There are a bunch of patterns that have a really retro feel, by using many vector techniques.

class="spacer_" />

14 Geometrical Patterns by SuccoDesign

Features: Photoshop Pattern (.PAT),  14 different swatches

High resolution pattern sets, again, are really great for print design, but sometimes an over-sized pattern can also make for great web design. These abstract, geometric and colorful patterns are really great when you are looking to do something that deserves a ton of attention.

class="spacer_" />

Dots and Crosses Patterns by Chike

Features: Photoshop Pattern (.PAT),  2 .PSD’s, 13 swatches (2 different patterns, various colors and sizes)

Another rather high resolution set, these vibrant polka dots and crosses can add a bunch of flavor to a necessary design. This set also hails transparent backgrounds, easy for customization. An added bonus of this pattern set: the .PSD files are included so you can customize the colors and looks of your own pattern.

class="spacer_" />

Decorative Patterns for PS by Skyje

Features: Photoshop Pattern (.PAT),  48 different swatches

Quite frankly, not all 48 of these patterns are something to write home about, however, there are some real diamonds in this set if you are willing to thumb around a bit. Many of these are off the wall, geometric and tribal (which is a growing trend) and are all of pretty great quality. Some of them do have transparent backgrounds, as well.

class="spacer_" />

Abstract Tileable Patterns by Alice Grayce Noid

Features: 1 .AI (Adobe Illustrator file),  4 different swatches

If you want to open this in Photoshop, you will have to open the .AI file in Photoshop (I opened mine at RGB with 72 dpi). Once you do that, crop the swatches and go to Edit > Define Pattern to use them. Yes, it takes a little work to use them in Photoshop, but it is definitely well worth it. These patterns again borderline between subtle and non-subtle but there is no argument about whether not they are beautiful and high quality.

class="spacer_" />

Ribbon Dancer by Seth Nickerson

Features: 1 .AI (Adobe Illustrator file),  6 different swatches

Refer to the previous pattern set to successfully open the Illustrator file in Photoshop and make good use of it in Photoshop (I opened this one at 150 dpi, RGB). This is an absolutely magnificent pattern set, once you chop it all up. It’s great if you have Illustrator to customize it further, but fortunately, you have transparent backgrounds if you are only working through Photoshop. This is a wonderful set to have on hand.

class="spacer_" />

Conclusion

It’s really a great thing when we design and use patterns for our work. Again, it really takes us to the basics of what design is and patterns always add a bit of spunk to what could be a lacking design.

If you cannot find what you need in a pattern, try your hardest to create your own pattern designs–and then share them with the design community! You never know, what you think is crazy and out the box could be another persons treasure!

class="spacer_" />

Kendra Gaines is a freelance designer from Virginia, USA. Connect with her.

What are some of your favorite pattern sets? Do share!

/>
width="100%" height="20">
valign="center"> Clean your Mac Desktop with DesktopShelves! – only $7! width="90"> /> />

Source

[ Go to Source ]

Free download: 200 icons from Inventicons

Today we bring you a great icon set from Inventicons! It includes 200 free icons that you can use for personal and commercial uses.

If you love these icons as much as we do, you can get this deal which includes another 198 vector icons and 9 useful photoshop actions (for only $11).

Want more? See this Mighty Deal where you can get the entire Inventicons collection of 1,000 vector icons for only $25, instead of $50 (for a limited time only!)

For more vector and PSD graphics check out InventLayout. The full preview appears after the jump… File provided is a single PSD file containing raster images. Enjoy!

/>
width="100%" height="20">
valign="center"> Clean your Mac Desktop with DesktopShelves! – only $7! width="90"> /> />

Source

[ Go to Source ]

Random Apps And Tools For Designers And Developers

I’m very glad that we work in a vast domain where new resources appear everyday from handy developers and designers for the rest of us, developers or designers. Having said that, I’m inviting you to check out this list of 33 tools and apps that could help you on your projects.

Bear CSS

Bear CSS is a handy little tool for web designers. It generates a CSS template containing all the HTML elements, classes & IDs defined in your markup.

Rickshaw

Rickshaw is a JavaScript toolkit for creating interactive time series graphs, developed at Shutterstock.

Jeditable – Edit In Place Plugin For jQuery

Hi! My name is Jeditable and I am inplace editor plugin for jQuery. With few lines of JavaScript code I allow you to click and edit the content of different html elements.

Font.js: A Powerful Font Toolkit for JavaScript

Mike Kamermans has been working on a little font toolkit for your JavaScript that is kind of akin to the built-in Image object but for Fonts. It gives you font loading events using a technique perfected in Mozilla’s pdf.js project, metrics information, and a better version of the canvas element’s measureText method with additional information such as height, bounding box, and leading.

HTML5 Reset v2

Like a lot of developers, we start every HTML project with the same set of HTML and CSS files. We’ve been using these files for a long time and have progressively added bits and pieces to them as our own personal best practices have evolved.

Now that modern browsers are starting to support some of the really useful parts of HTML5 and CSS3, it’s time for our best practices to catch up, and we thought we’d put our files out there for everyone to use. By no means do we see this as the One True Way to start every project, but we think it’s a good starting place that anyone can make their own.

jQuery Collapse

This Plugin delivers an accessible and lightweight solution to a widely adopted interface pattern (known as progressive disclosure). It includes features like cookie persistence, ARIA compliance, and is designed to be flexible and modular enough to be used in many different’t scenarios.

PxLoader: A JavaScript Preloader for HTML5 Apps

PxLoader is a Javascript library that helps you download images, sound files or anything else you need before you take a specific action on your site (like showing a user interface or starting a game). You can use it to create a preloader for HTML5 games and websites.

jquery.mentionsInput

jquery.mentionsInput is a small, but awesome UI component that allows you to “@mention” someone in a text message, just like you are used to on Facebook or Twitter.

ofmlabs codecs: A suite of JavaScript audio codecs

Web browsers are becoming more and more powerful, and new APIs like the Web Audio API and Audio Data API are making the web an ever more interesting and dynamic place. At ofmlabs we are invested in improving the state of audio on the web, and with JSMad showed that decoding audio purely in JavaScript is possible thanks to these APIs and the hard work of browser makers and spec authors. And now we’ve done it again. Introducing alac.js, a port of the recently open sourced Apple Lossless decoder to JavaScript. Now it is possible to play MP3 and Apple Lossless even in browsers without native support.

Ember.js

Ember is a JavaScript framework for creating ambitious web applications that eliminates boilerplate and provides a standard application architecture.

Enlight

Enlight is the new open source e-commerce framework by Shopware. Enlight is based on both the Zend framework and the Symphony 2 framework but, unlike them, focuses on the developing of modern rich internet applications (RIA) as well as individual e-commerce applications.

PHP BUG LOST

PHP Bug Lost is a one-file script PHP debug and monitoring console. Include it in your script and: send log messages, view SQL queries (sends an email to the admin if there’s an error), measure times and memory usage (sends emails for long loading times or excessive memory usage), see all the vars in your scripts and view all your AJAX queries (send params and responses).

Gridpak: The Responsive grid generator

Gridpak is the starting point for your responsive projects, improving your workflow and saving time. Create your responsive grid system once using the simple interface and let Gridpak do the heavy lifting by generating PNGs, CSS and JavaScript.

jqMobi

jqMobi is a Javascript framework targeted at HTML5 browsers with a blazingly fast query selector library that supports W3C queries.

FeedEk jQuery RSS/ATOM Feed Plugin

FeedEk is an RSS/ATOM Feed Reader/Importer/Parser that is written with jQuery. You can obtain feeds easily from any domain.

Fbootstrapp

Fbootstrapp is a toolkit designed to kickstart development of facebook iframe apps in both relevant sizes. It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more, styled in the typical facebook look and feel.

Revolver.js

Revolver is a new content slider that makes no assumptions about your markup. Think of Revolver as a boilerplate or framework for making your own slider, exactly the way you want it.

3×4 Grid Builder

The 3 × 4 grid poster illustrates a change in design practice. Computation-based design—that is, the use of algorithms to compute options—is becoming more practical and more common. Design tools are becoming more computation-based; designers are working more closely with programmers; and designers are taking up programming.

Scrollorama

impress.js

It’s a presentation tool inspired by the idea behind prezi.com and based on the power of CSS3 transforms and transitions in modern browsers.

jQuery UI Bootstrap

With this theme, not only do you get the ability to use Bootstrap-themed widgets, but you can now also use (most) of Twitter Bootstrap side-by-wide with it without components breaking visually.

Screenfly

CoderDeck

CoderDeck combines Deck.js with the CodeMirror2 highlighting code editor to make it easy to demo and teach live HTML, CSS and Javascript directly in the browser.

Dialawg

The astonishingly simple way to share, track, protect, and control your files, messages…and relationships.

WhatFont Tool

What is the easiest way to find out the fonts used in a webpage? Firebug or Webkit Inspector? No, that’s too complicated. It should be just a click away.

Patternizer

With Patternizer, it’s easy to make something amazing in just a few minutes. It takes all the work out of creating complicated patterns, letting you focus on creativity and play. Patterns can be saved and shared with anyone, allowing for collaboration and remixing.

Clickdummy

Clickdummy is about communicating your designs better. ClickDummy turns your website, mobile and software mockups into clickable prototypes with room for annotation and feedback from your clients, friends, and co-workers. No more emailing .PDFs, trying to trace feedback through message threads, or worrying about putting Photoshop images into an HTML container. Clickdummy puts your designs and feedback in context.

Remind Me Later

Remind Me Later adds events to iCal in two clicks. Type “Buy groceries at 4pm tomorrow”, and it will add “Buy groceries” to iCal at 4pm tomorrow.

Projectial

Projectial is a system which makes managing projects, human resources, finances, and time, more effective. Implementing it, you can overview the employees, their tasks and projects, and the whole company.

Skyclerk

Skyclerk will change the way you look at bookkeeping and accounting forever. Our system makes it so any small to medium size business can be up and running with a fully robust accounting system in seconds. No software to install, no backups to worry about, no expensive shrink wrap software to buy.

Golden Ratio Calculator

There are two scenarios the calculator is designed for. The first is that you have a column with a certain width (perhaps to achieve a nice word:line ratio). You wish to find a matching column. Type in the width and use the left side, which gives you both a smaller and larger column.

The second scenario is that you have a container and wish to divide it in two. Type in the container width and use the right side measurements

Opus Domini Lite

Personal Planner and management application, includes
-Daily Tasks
-Master Tasks
-Compass
-Goals
-Mission
-Multiple Planning Views
-Meeting Planner
-Repeating Tasks
-Subtasks
-Master Task Planner
-Event synchronization with ical
-Search
-Password protection
-Weather info

Smartling

Web and mobile app content is becoming more dynamic. Content that could, should and would be translated is growing exponentially. The “translation challenge” is only getting bigger.

Go to Source