The Cheap Bastard’s Guide to WordPress Design

I design websites for a living. A friend of mine recently wondered about getting started in web design. He noted that I had spent a decent sum of money on the current suite of tools I work with. Fortunately, that doesn’t have to be the case if you’re just getting started.

I’ve invested in a decent laptop that set me back about $1500 3 years ago, perhaps another $1,000 in software/training materials, and I’m in the market for a new computer that will probably set me back $3,000 or so. With that said, keep in mind, this is what I do for a living. I spend 50-60 hours per week in front of my computer. If a faster computer, more efficient software, and improved skills from training can save me just a few hours a week, they’ll pay for themselves VERY quickly.

However, if you’re just starting out, you have no portfolio, and you don’t really know if you’ll ever be able to get paid to do web design…let alone “go pro.” Again, that’s ok! I’ve got a list of 9 tools to make a beginning WordPress designer’s life easier…and they are all FREE!

FileZilla

Filezilla is the best free FTP program on the market. For that matter, its one of the most beginner friendly programs out there period. It allows you to drag and drop files where you want them, open multiple ftp connections at one time, and much much more!

NetRenderer

NetRenderer is a web based engine that will allow you to view a printscreen snapshot of a given web page in just about every relevant web browser in existence. While its not perfect (snapshot doesn’t extend below the fold), it is a pretty good starting point, and its free.

The Gimp

The Gimp is an open source Photoshop clone. While it works a bit differently, there are a lot of similarities and the gimp’s functionality has come to rival that of its expensive step brother. I definitely recommend Photoshop if you have the means, but if not, the gimp will do quite nicely for the time being…especially if you’re not doing any complicated graphic design.

Color Picker

Color Picker is an extremely simple web based tool that will allow you to choose a color and get the hex and/or RGB code for that color for use in CSS or whatever else you need it for.

CSS Compressor

The CSS Compressor is another web based tool that will allow you to compress CSS files. Your theme has at least one CSS file, and many themes also come with extra CSS files (for example, Thesis has 3 CSS stylesheets). Many plugins also come with CSS files included. Compressing CSS files will probably knock at least 5% off of your page load time and possibly as much as 10% if you’re using a large number of CSS files. I know it doesn’t sound like much, but little things like this add up.

Hint: Always keep uncompressed versions of your CSS files. Edit the uncompressed version, save it as a back up, compress, and upload to your server. Repeat this process whenever you edit your CSS. This will save you some serious headaches.

Image Omptimizer

The Image Optimizer is a free web based tool that will drastically reduce the size of your image files. This is HUGE for reducing your page load time. If you’re using a lot of images in your design (or your content) this could cut your page load time in half. Seriously. This is a big deal…and its free! They also have a version for download, but it may or may not work on your machine.

Hint: Keep an eye on the quality of your images. Making them smaller is great, but don’t sacrifice their visual appeal or you’ve defeated the entire purpose of having images in the first place.

Web Page Analyzer

The Web Page Analyzer is yet another web based tool that will calculate how long it takes to load any given page on your website. It will also break down all the elements of your page and tell you what you can do to make your page faster. Some of the advice is a bit outdated, but this is an amazing starting point for anyone looking to learn a thing or two about web performance (which any designer/developer worth his salt should do).

Snipplr

Snipplr is a repository of code snippets to help you do just about anything. Anytime you’re stumped, its a good place to look for a solution. Keep in mind that you should always test anything you find here before using it on an actual live site.

HTMLizer

The HTMLizer will allow you to convert HTML/PHP code into a form that will not actually create any output. It does this by changing special characters (like <, or >) into long code that will be read by web browsers by not by anything trying to create any sort of output from that HTML code.

Why is this useful you ask? When posting in a blog, blog comment, or forum post, the blog or forum software will often take your code and just show the output rather than the actual code. This can be very frustrating when trying to find an answer to a question.

Google

You’re probably thinking I’m kind of a jerk for putting Google on the list of tools, but I’m serious. Google is absolutely the beginning (and experienced) web designer’s best friend. If you don’t know how to do something, there is probably a great tutorial just waiting for you. You just gotta go find it. There’s no excuse.

The Rub

So, that’s the list. If you’re just getting started, it can be a bit daunting to try and digest all of the information that is available to you. Be persistent, stay motivated, and you’ll probably land on your feet. Hopefully these tools making it easier for you to do so.

Written by Adam Baird

I'm a freelance web designer from a small town in Indiana. I love the Chicago Cubs, my wife, Coca Cola and dark chocolate...in that approximate order.

Bio Twitter Portfolio Contact