Armed with the right resources, can anyone run a webdesign business? Lets face it there are lots of great resources out there from the inception of a project, right up to completion. If you are newbie in the field, and are wondering about how to get your processes and resources in shape, this is the post for you. The first part of this post will cover the process from estimate to final development and the second I’ve planned for next week covers testing and after sale.
Estimating how long a project will take, and how much to charge for the work is a task that many people struggle with, particularly newbie freelancers, which is why we put together our own guide on how much a website costs. Hopefully some of these tools and resources will make things less painful for you.
There are a few tools and kits online which can help you estimate projects. Astuteo released a great free webbased tool recently that takes your hourly rate, and workload, and works out an estimate. Another similar rates calculation tool is available via Freelance Switch. Taming the beast have a web design tool kit, (£137) along with a good article for free. Sitepoint have followed suit with their own freelancer toolkit,(£172) which also includes estimating tools / prebuild spreadsheets. I also love this article from Antonio Lupetti which shows his process to estimate time and costs in a web project – using Google Spreadsheets. If you are a software developer, and are estimating a software project, these are two must reads. Basic Software estimating concepts and estimating and tracking software projects.
There are plenty of folks that think that advocate fixed rate pricing, however the majority of the web design / development community seem to be content to charge or at least estimate by the hour. It’s ok to sell yourself on the value of your time. Still not convinced on what way to go? Cristiano Graziano has a great article on a risk based approach to hourly vs fixed pricing.
Now that you’ve decided how much it is going to cost, the next important and often overlooked aspect of the process is writing a winning proposal. If you’ve been guilty of throwing your price down in an email, shame on you. People want to know the breakdown of the work, and how well you understand their requirements. Other things you may want to include in your proposal is the qualities of your team (if applicable). Obviously if you are a lone freelancer, then this is an opportunity to sell yourself.
I’m not a big fan of proposal writing software, so I’m not recommending any automated tools here. My view is that it takes away from the personalization of the pitch – which can be the all important part, and the one that separates you from the crowd. Considering that your potential client may be obtaining quotes from ten other vendors plus, you are going to have to show your worth here. However there are a few tools that can aid you. You can easily create a proposal template in Word, or iWork for you Apple boys – which will save you the repetitive bits that you always include. Better again, design a fancy layout for it, and template for it using InDesign. That extra bit of polish maybe enough to win the pitch, when up against a comparable quote. Remember, you are showing off your creative skills here, so why isn’t your proposal creative?
Honeypitch is a great service that can be used to “close the deal”, taking your quote / proposal and offering it up in a collaborative format for your potential client to approve. Once they decide to go with you, great! Time to put together a tight contract.
Writing a good contract is important for a number of reasons, firstly in protects both you and your client from yourself. It’s important that your contract is continually amended, as you will learn of potential issues that can happen with clients that cost you money. For example, developing a site that is compatible on older browsers. There should be a stipulation that development for older platforms and browsers will cost extra, which frees you up to use cutting edge technology on the project without fear of repercussions. Andy Clarke’s article on 24ways is a great read when writing a contract. Jen has guidelines over on About.com – including charging for a preliminary contract – which is a good idea. This fantastic thread over on TalkFreelance also gives solid advice, and a sample contract.
Now that you’ve won the contract, the next thing is to track how much time you spend on it. If you are working for yourself, then you aren’t making money when you are doing nothing, so keeping track of time is essential. Thankfully, an abundance of tools are available to do just that, but none of them in my mind match up to the convenience of some of the desktop offerings.
Timesheet Express comes from a Belfast based software company, and I’ve used it at work before with great ease. They also offer a free version with less features that would perfectly suit a freelancer in a Windows environment. Fanurio is another offline offering which is cross platform. Online time tracking tools would include TSheets (which has optional iPhone interface),as does Harvest. Motismo or Tempo are another two web based tools well worth a look. If you are on a Mac, I’m told reliably that Timepost can export milestones for integration with Basecamp.
I couldn’t possibly mention project management software for the web wise without mentioning Basecamp from 37Signals. It’s the defacto standard, and is arguably the best of the best out there. However it ain’t free. There are however a couple of direct competitors to Basecamp. I’ve recently seen some posts on newly launched Lighthouse, – free for Teams of two (Designer and developer teams it would work really well for). Open source activeCollab is available as a download that you host yourself and Goplan from Webreakstuff is another freebie for smaller teams.
A good project management system ties everything together, and makes sure that you are keeping track of goals, to-do lists and deadlines.
Wireframing is the process of creating a very basic mockup of a site, with process and flow integrated to show your understanding of the requirements to a client. I put together a post recently on some 5 of the better prototyping tools available online. Some people wireframe after they have won the contract, and develop the wireframe into the final solution. Others prefer to wireframe at the proposal stage, as a way of proving their worth. Either way, it’s important to try and avoid spec work – and wireframing can prevent that to a degree. No matter what way you look at it, proposal writing, and pitching is always going to take time from you time that you may not be able to recoup financially if you don’t win the contract. It amazes me that some people are willing to proposal write for an hour, but feel that a 15 minute wireframe or mockup is taking things too far.
Some people I’ve spoken to jump straight to code, and attempt to get that signed off by the client, bonus being that if they accept the first design, you’ve already got most of your code done. Anders talks about this approach over at boxesandarrows. CSS frameworks via Speckyboy such as the grid system allow for that sort of flexibility. My own thoughts are that the constraints of CSS and XHTML will limit you to thinking in boxes, and results in a creative restraint. Anyway, each to their own. Andy offers an alternative approach and thinks smarter with Fireworks symbols.
Personally, I jump into photoshop whenever I get the chance, it lets your creativity flow, and easily lets you move bits and bobs around quickly. Nice roundup of Photoshop Tutorials on SmashingMag. Not ready to fork out the dollars yet? No problem. Six revisions put together a post recently on Photoshop alternatives. Brilliant. If however you are more of a developer than a designer, then you can get away with using WordPress theme designs for certain projects, with a few tweaks. They are a great way of spitting out a quick design for smaller clients, and are quickly and easily branded. Again – hard not to link to this roundup of 83 themes. Or this monster post of top wordpress themes. If you are happy enough to collaborate with others, you could find an awesome designer on Twitter via this post.
If on the other hand you are more of a designer than a developer you are probably going to need to brush up on some development practices. Luckily there are plenty of tools for designers to integrate server side applications into their website easily, and one of the most common is the website contact form. I’ve put together these web based form tools for designers. If you do decide that you’d like to get into development more, Ruby on Rails seems to be in favour at the minute with designers, not least because of its low barrier to entry and scaffolding (database code generated automatically). A list apart put together a good article on getting started with Rails. Well worth a read if you have no experience in working with server side languages.