When I first started out honing my design skills, Photoshop tutorials bombarded me from every direction. Pretty soon it became apparent that anyone not using Photoshop for web design must be some sort of noob, since everyone else was doing it. Why would it be so popular if it wasn’t the best tool for the job?

I upgraded from the free (and awesome) GIMP to Photoshop in 2007 and was immediately confused and frustrated by tiny things that, to my mind, were essential for any web designer. Luckily I had a friend who ran his own web design company and I asked his advice.

“How do I tell how big something I’ve drawn is in pixels?”

“How do I draw a rounded rectangle that can actually be resized if needed?”

“Is it really supposed to be this hard to go back and change stuff?”

And so on, and so on. It turned out that a lot of what I in my naivety thought should be standard features were not, and more shockingly that many people couldn’t even understand the need for them. I persevered, and became vaguely competent yet still just as frustrated as ever.

Then I was introduced to Fireworks. Imagine the typical scene where heavenly light descends from the clouds to illuminate the hero and a choir of angels sing…it was exactly like that. Within about an hour I’d mocked up my first site layout, marvelling at how easy and intuitive everything was. A lot of Photoshop users say they’re too used to it to change, but I took to Fireworks like a puppy to a carelessly discarded slipper. I’ve never looked back.

Different software has different uses, Illustrator is for (shocker!) illustration, Photoshop is for the shiny effects you can’t do anywhere else (as well as photo work, obviously) and Fireworks is for website layouts. Mix and match all you want, but don’t try to bludgeon one into doing everything itself.

A lot of your design ability will come through practise and research, knowing what is “in” and knowing what will always look good. However, if you’re just starting out and don’t quite have a hold on the nuances, here are a few things to consider.

1. Practise creating suitable graphics

Before you ever try to design something yourself, you need to know how to make what’s in your head appear on your screen. If you’re not familiar with the current trends you can get a feel for the prevailing wind in web design by simply visiting a few CSS galleries. Choose a site you particularly like, or certain elements from a few, and try to recreate them. You’re not learning design here, you’re learning techniques to create the graphics you need. Once you have a few tricks up your sleeve…

2.  Actually Design

“I know how it should look in my head, that’s enough”

It may sound ridiculous, but I’m sure I’m not the only one to have done it backwards and just jumped into a site build feet first. This approach is unlikely to yield favourable results. If you can’t afford Photoshop consider GIMP, it’s free Open Source and doesn’t have all the features you’d ideally have at your disposal, but it’s a good starting point.

3. Don’t be afraid to copy

Obviously I’m not suggesting you steal someone’s entire site design, but if you see a navigation style or a texture that you like, use it as a starting point for a design of your own. There are always certain “looks” that are more prevalent than others, and there is absolutely no shame in using something tried and tested.

4. Design for appropriate resolutions

There’s no hard and fast rule where website width is concerned. Depending on the site in question your users could be a completely different demographic. Generally speaking however 1024 resolutions are still considered appropriate to design for. 960 is a common width for modern sites, take a look at the 960 grid system. Using a grid will help you achieve a nicely proportioned design, making it much more pleasing to the eye.

5. Get your layout sorted first

Leave any colour decisions for now, and just mock up the main elements of the design in shades of grey. Make sure content is given an appropriate position and size relative to it’s importance. If it works well without colour, you’re onto a winner. Once the layout is finalized you can start to make the more “exciting” decisions.

6. Choose your colours carefully

It shouldn’t need to be said, but don’t choose colours that look hideous together. If in doubt, there are many colour scheme sites and applications out there, when stuck for inspiration my tool of choice is usually Kuler.

7. Pay attention to fonts

Typography is a complex subject in itself, but for a beginner it is enough to know that it exists, and that font choices are important. While the majority of your website’s content will need to be an easily-readable websafe font, a lot of the time you can go a bit wild with headings to give your design some extra oomph. Investigate Font Squirrel or dafont for something appropriate. For the love of God, do not use Comic Sans.

Typography is more than just choosing a suitable font, of course. You can read about some of the basic philosophies at I Love Typography.

8. Whitespace. It is good.

Whitespace is, as the name suggests, the space between elements in your design. A cramped page can look overcrowded and messy, while the same page with slighly more space between elements will look completely different.

You can also use whitespace to indicate the importance of an element. A common use for this concept is call to action buttons (a button encouraging users to take an action such as sign up or buy something), surrounding a button with plenty of space ensures nothing detracts from it.

9. Be subtle

I know you want to go crazy with gradients and drop shadows. They’re just so cool.

For the most part a subtler, more natural approach will look infinitely better than a bright blue to pink gradient or a solid black drop shadow. Colours aren’t the only way to misuse these effects either, make sure your gradients are long enough to change steadily, rather than jumping suddenly from one colour to the other, and make sure your shadows blend into the background rather than ending abruptly.

10. Prepare yourself

Your first designs aren’t likely to be dazzling. As with any skill, over time you will improve. Keep practising new techniques and looking through the CSS galleries for inspiration. With a few carefully chosen design elements from various other sites you can create something beautiful, and the confidence to design something bold and original will simply come with time.

You know you’re unlikely to find anything that pays more than $4 an hour, but work is thin on the ground and you’re feeling optimistic. Thirteen hours later you’ve watched 8 seemingly sensible buyers fall for the cut and paste bids, had 2 people tell you you’ll never make it in freelancing unless you halve your rates, and made exactly 0 pennies.

I’m sure there are some people who make a good living out of these sites but if you, like the me of a year ago, feel that freelancing sites are your best bet to get some portfolio work, read on.

First I’ll go over a list of things to always bear in mind while dealing with freelancer sites, then I’ll regale you with my experiences of each.

You will not make a real income

Pocket money, yes. If you’re in this for the experience and don’t need the cash then fair enough and I’m sure we’re all jealous.

You are unlikely to score a portfolio-worthy project

At least at first. You’ll find your best chances of being hired with no feedback are for the all too common $20 PSD to HTML projects.

Buyers are often inexperienced

There are exceptions, but most of the buyers using these sites don’t really understand what they’re asking for. They’ll often reel off a list of requirements totalling around a month’s quality work, and their budget will be under $300. Don’t be afraid to point out the discrepancy, but don’t be surprised if another provider comes in under budget and steals the job.

A lot of bids are cut and paste

You’ll recognise them immediately. Some buyers go so far as to request you type a codeword into your bid to ensure you’ve actually read the job description! If you’re awake and facing the right way, you’re immediately at an advantage with this type of buyer.

Most buyers want a real person

You’re likely to see a lot of bids from companies, but in my experience the personal touch can go a long way with securing a job. Whenever you bid, send the buyer a message detailing exactly what your bid includes and how you plan to complete the project. The more information you can give them, the more confident they will feel about hiring you, especially if you have no feedback.

“So which are the sites to avoid and which are veritable goldmines?”, I hear you cry.

Get a Freelancer

Probably the most well-known freelancing site, and therefore by a wide margin the most spammed. Getting your voice heard here isn’t easy, and there are so many providers without feedback that you can even find yourself facing more competiton when bidding on the newbie-only trial projects. On the other hand their escrow payment system seems secure and I have met some very nice buyers through this site, you just have to pick your battles.

EU Freelance

This is a sister site to GaF, and is by contrast rarely used. Still worth keeping an eye on however, since you can sign up to it with basically no effort by clicking a link in your GaF admin.

Scriptlance

Scriptlance suffers from the same major overcrowding as GaF, but makes it even worse by being horrendously designed.  The front page is essentially a wall of text (or links, whatever) that will make you squint, and half of them are repeated under each heading! I’ve bid halfheartedly on a couple of things here, but never actually been chosen. I think I’m grateful.

WordPress Freelance

A nice change of pace, wpfreelance usually has one or two new projects per day and there are regulars who bid on just about everything (*shifty eyes*). In case the really obvious name didn’t inform you, this site is for WordPress-related jobs only. As usual you have the mix of unpleasant and perfectly nice buyers, though I’m glad to say the balance is more in favour of the latter. Unfortunately the escrow system on the site leaves something to be desired. On one occasion my buyer released the funds only for them to disappear! Thankfully the buyer was lovely about it and sent them a sternly worded email, resulting in me getting my money within a day or so, but it did nothing for my confidence in the site maintainers (they didn’t actually reply to his email, just sent me the money).

Joomlancers

Sounds like another specialist site doesn’t it? Well actually you get a bit of everything listed here, which scientifically proves my theory that everyone who works with Joomla is mental. Don’t be offended, I count myself in that group too. My one experience with this site was not a good one, and that obnoxious buyer only has herself to blame when she reads this (which will definitely happen) and sees that her rudeness got the entire site a bad review. Sweet revenge.

Ok. So maybe that’s a bit mean. Joomlancers has actually changed a lot since I last used it, including the addition of tests providers can take and display proudly on their profile to attract more buyers. Good idea.

oDesk

I only recently discovered this site, and am very impressed so far. There are of course your usual selection of idiots, but the site has a few measures in place to make it much easier to find the decent projects. First of all, as with the new improved Joomlancers, as a provider you can take tests in pretty much whatever your expertise might be. Secondly, buyers can list certain required qualifications with their jobs, such as specific skills or tests passed. Of course plenty of people will bid who do not meet or have not even read these qualifications, but oDesk sends them straight to the bottom of the list. Scanning the job postings for those that list qualifications is how I found my first job there, since I knew I wanted to work with a buyer who actually had standards.

If a buyer is interested they don’t just award you the job arbitrarily, they actually invite you for interview. This can be in the form of private messages, or use Skype or another messaging equivalent. It might seem like a lot of effort, but it’s steered toward finding quality providers for quality jobs, and you’re quality…right?

Compared to other sites of my aquaintance, oDesk works in a strange way. There are two types of job, hourly and fixed. Fixed is where you find the usual “no bids over $20 please” jobs, and hourly is guaranteed payment. The catch is that you must download and run a time-tracking application that then reports your work hours to the buyer. All very professional.

Since I’ve only just scored my first job here, I can’t comment on the payment process. However, I am quietly confident.

That is all!

I realise some of the big-name freelancing sites are missing from my list, but I wanted to give a personal view of each. Some sites are so famous for their lack of quality, I wounldn’t touch them with somebody else’s.

If you really want to give these sites a try, just be prepared for the rejections and the frustrations. Once you get your foot in the door they can become more lucrative but it takes a special sort of dedication to get that far in the first place. Godspeed.

“You taught yourself all this web stuff, I want to do it too. Teach me?”
My usual reaction is a sort of resigned sigh, since their newfound desire to learn soon fizzles out rendering my efforts useless. Instead, from now on, I will with a lazy wave of my hand and a heavy heart send them on their way to this blog, where I shall eventually compile the ultimate web stuff learners guide.

Getting Started

First of all, when I started I started at the beginning. It makes sense if you think about it. Working steadily through the tutorials at W3Schools I had soon mastered basic HTML, including tables and the infamous frames. A lot of what I learned there was already out of date, but trust me when I say it came in useful.

Next up was CSS, and again I scurried off to W3Schools for help. That site really was a lifesaver in my early forays, you can’t go wrong with a brief simple tutorial and a do-it-yourself example.

HTML and CSS are, in fact, all you need to build your very first website. Basically, HTML is the structure of your site and CSS is the pretty colours and styles. Flash and Javascript may be fancy, but they’re far from essential. PHP and other “scary” code can definitely wait. Practise with what you’ve just learned and make sure you’re confident in the basics before trying anything else.

Staying Started

Ok, so you have the ability to physically build a site, but you don’t really know where to go from here.

Read! Read until your eyes bleed. Read every design/development blog you can get your hands on even if you have only the vaguest notion of what the article is talking about. Hear about jQuery enough (which you will) and it starts to sound less like gibberish and more like a popular Javascript library. See enough references to WordPress and you’ll know it’s an open-source blogging platform (and CMS, oh yes I went there). In fact, before long you’ll even know what CMS stands for.

Some recommendations to get you started are Smashing Magazine, Webdesigner Depot and Noupe. These are all big name web stuff blogs, add them to your feed reader and you’ll be drowning in education. Also, thanks to Smashing Magazine, endless (somewhat repetitive) showcases of awesome sites.

Most of all I would advise patience. The quickest of learners can be overcome with too much new knowledge and you don’t want to immediately forget everything you’re learning so be sure to practise everything you can on a test page. Spend some time creating various layouts with just HTML and CSS, the more you do it the more it sinks in.

In this series of posts you’ll be visiting many many links and learning many many things, the last thing you need is to forget the things we already covered. Especially when you get that job to update a hideously old site and can’t remember how an HTML table works.