Free design tools and resources for web developers
As a web developer, it can sometimes be frustrating when you’re trying to bring your idea to life but you don’t have the design skills or the time to make it pretty. This is because unfortunately, no matter how well written your code may be, first impressions count for a lot. Thus, when you ask for feedback from friends and family, or the general public through a beta campaign or similar effort, you tend to get uninspiring responses due to poor design.
There are ways around this of course if you have the resources or contacts to do so. You may hire a designer to spit-shine the front end for you. However, a lot of the time, the resources aren’t available yet since you’re still trying to get the project launched or resources may be tied up elsewhere.
You may also be able to partner with a designer and work together to bring your idea to life. This is great if you have a solid designer you can trust to hand. As they say, two heads are better than one. Problems arise however if you can’t find the right “head” or if you team up with the wrong one to begin with.
If the two above options won’t work for you or if you would rather work on your project alone until it develops further then this article is for you. I have been in that situation more times than you can shake a stick at and through that, I have found a ton of resources available for free which will help you to get an acceptable design for your application without too much hassle.
Before I make with the list giving, I must warn you, ALWAYS READ THE LICENSING DETAILS for each and every tool or resource you use, free or not. It only takes a couple of minutes to confirm if you can use a file, image or piece of code commercially without any legal problems. You would be saving yourself a potential world of trouble which to be honest is a no brainer. Licensing changes from time to time too so don’t take this article as any form of copyright advice in any way.
Right, enough of the chit chat. Here we go. In no particular order:
1. Premium Pixels by Orman Clark.
If you haven’t been to Premium Pixels yet, go there now. If you’ve been there, go back again for good measure. Orman Clark is a brilliant designer both graphic (PSD) and on the web (HTML/CSS). Premium Pixels is where he gives away free PSD’s to one and all.
Recently, the site has been changed and now requires subscription to access the downloads but this is a small hoop to jump through considering what you will receive in return. There are a ton of different designs from mobile application interfaces to label designs, audio and video player skins.
Pretty much all the designs are in PSD and vector format so you will have to convert them to HTML and CSS before use or you can convert them to images then use them in your application. Personally, I like code so I would replicate the design using HTML, CSS and image backgrounds but each to his own. Use the method that best suits your style and situation.
This website just does it for me. The designs that they churn out are just beautiful. Orman Clark’s designs are great, solid and they tick all the boxes but there’s something about the designs at Pixeden that gives them the edge for me. If I was marking an exam, I would give Premium Pixels top marks. However, if I had to give an award for most outstanding design work, then Pixeden would just get it. Again, this is down to personal taste. Both sites are well up there.
Pixeden provides a lot of UI/UX and web element designs as well as some interesting wireframing design skeletons. Sometimes when I am designing (or failing to design rather), I’ll head over to Pixeden for a look see just so I can remember what something pretty looks like.
it’s also worth noting that Pixeden also offers subscription for added content access. However, for the majority of the files available, you don’t have to sign up, which is great if you don’t want anyone to email you with awesome free stuff. Or perhaps you’re afraid that the man will find you, in which case. I completely understand.
3. Design Deck
Design deck is another great place to get clean and solid design for web elements and templates for free. The format of the site is similar to Premium Pixels and Pixeden in that they offer PSD and vector designs for commercial use. Additionally, you do not need to sign up to download PSD’s which is good.
Truth be told, I haven’t used Design Deck as much as Premium Pixels and Pixeden so I cannot give your more indepth details. However, I can confirm that it is a great resource for designers and developers alike.
4. Brankic 1979
Brankic 1979 from what I gather is run by a freelancer (or small team) that offers web design services as well as free software. This has become among freelancers who find it beneficial to give potential customers a taste of their work before they actually work with them.
The site has some great PSD resources which can be used for commercial use. I particularly like the corner ribbons which I am implementing in a theme I’m working on.
ColorZilla, as the name suggests, provide some great tools to help with color. The tools they offer are aimed at designers, particularly the Chrome and Firefox extensions (which are great) but the highlight for me is the Ultimate CSS Gradient Creator.
This online tool generates pure CSS gradient code using simple click and go mechanisms. The tool is laid out in a very similar way to Photoshop’s gradient tool so you’ll probably already know how to use it. However, CSS code is more efficient than images and using this tool, it’s quicker to generate the desired effect.
Moreover, the generated CSS is airtight i.e: cross browser compatible, gracefully degrades and nicely commented.
A great feature that they integrated is the ability to import an image and generate CSS code to match it. This is handy for when you spot a gradient you like but don’t really want to spend half an hour in Photoshop recreating it. Screen dump + slicing + quick upload = instant goodness. Winning!!
Since we’re on the subject of color, I must mention this great application called… Colllor. The concept is very simple but very helpful. You input a color code and it gives you an array of alternative colors.
The screenshot above says it all really. Brilliant little tool for when you need some variations in your color design.
7. Adobe Kuler
It would be criminal to talk about color without mentioning what I think is the daddy of all color resources. Adobe Kuler.
This application is a game changer for me. Essentially, it is a collection of color combinations submitted by the community. Being Adobe affiliated, or owned (damn Adobe buying everything!) they went a step further and integrated comments, ratings and so on into it. What you end up with is a teeming reserve of color pallets and people’s views on them. This makes it easy to pick a decent color combo for your application without too much trouble.
Adobe have also integrated a Kuler extension into Photoshop to make it easier to use these pallets in development.
Last but certainly not least, the most powerful resource for any web developer, or pretty much anyone really: Google. It’s been said many times before but I will say it again, if you’re not sure… GOOGLE IT.
Most, if not all of the resources above, I discovered through Google searches. You do have to be careful because not all information is good information and Google just finds it, it doesn’t test credibility for you (not yet anyway). You can normally find out the credibility of a source fairly easily though so it shouldn’t be an issue.
There’s so many resources out there to aid you in web design and I simply don’t have the time or hosting space available to list them all. Inspect Element and Free Vector are great for free PSD’s and vectors and are definitely worth checking out.
With good usage of Google, you’ll find more and probably better tools and resources to help you on your way. You’ll tend to wittle your list down to a few regulars that best suit you knowledge, skill level and working environment.
I hope you find this helpful in any case. I’m starting to blog regularly now so any tips feedback and comments would be most appreciated. If you know of any resources that are very useful that I may have forgot to mention then let me know. I might include them in my next article on the subject.