How to run a one-person web design agency
11th Oct 2009 | 11:00
How to pitch, design and deliver - on time and on budget
We're lucky enough to work in an industry where resources are seemingly endless. Books, magazines and online articles are readily available to offer hints, tips and advice about working with the web and all that comes with it.
There's no shortage of knowledge to be found on the subjects of design, development, project management and freelancing. However, I've always had a problem with many of these resources.
It's not that they're wrong, just that they're so often aimed at studios that much of the 'best practice' advice is irrelevant to independent designers, whose clients' budgets rarely stretch to include time for thorough research, a variety of design options and usability testing for the completed site.
Even my own book (Sexy Web Design, published earlier this year by SitePoint) talks about web design projects in an ideal world. The harsh reality is that us freelancers often have to cut corners. This is not out of choice, but because projects usually have a smaller scope than those taken on by large agencies.
It's not just the unknowns that struggle: many 'big name' designers face the same problems, simply because projects created by one person take on a different shape than those created by a team.
So let's look at how a one-man-band achieves a great working life. "Knowing yourself, working hard, playing even harder and being able to quickly switch between different tasks is a start," says Tim Van Damme.
"The best way to get good work is to produce good work. The better work you create, the more people will want to work with you," says Ian Coyle. Whether you have to pitch for clients, actively seek them out or find that they come to you, the initial communication with your new or potential client should always have the aims of impressing them and making them feel excited about working with you.
For Sam Brown, it's about personal branding. "The perfect client is someone who wants to work with me because they've heard about me, perhaps via word of mouth or a link on a site design they loved," he says. "It's really not about being the number one link on Google for 'web designer'."
When working with a solo designer, there's an extra element that clients are looking for: your personality. Unlike an agency, everything that happens with a one-man business is going to go through you. This has a major advantage for the client: they get a more 'hands on' approach and a direct relationship with the person doing the nitty-gritty work, but this also means that you need to get along and communicate well.
So, while it's important to assure your client that you're a consummate professional, it's equally important to be friendly and open. Show them that you're happy to chat, happy to discuss different directions and generally pleased to be working on their project. "Good communication really is the key to a successful project," enthuses Sam Brown.
SAM BROWN:Sam Brown is a forward-thinking designer who runs the one-man studio Massive Blue
Doing your research
While impressing your clients, don't forget that the clients should also be impressing you. Ian Coyle says you should "proactively interview the client to see if they're a good match for you, not the other way around. Each one must value my design philosophy before they're considered a potential to work with."
Research is one of those phases in a project that's easily overlooked, particularly when it comes to designers working solo on a project. However, it needn't take up much time – and research is a broad umbrella for a wide variety of pre-design activities, so it's not as daunting a concept as you might first think!
With the majority of the sites I create, the budget and timescale rarely allow for research on the scale you might find conducted by agencies, so I try to get as much done as possible within just a few hours. That means looking at the client's competitors to see what they're doing right and what they're doing wrong, and then developing ideas about values the brand should express.
"At its core, design communicates," says Ian Coyle. "Prior to designing, I work to discover what we're communicating and how we want the viewer to connect with it. Then I define an interaction model that's centered around that experience."
The brief I've read a lot about how different types of brief should be written (a creative brief, a technical brief and so on) but for smaller projects, this isn't usually necessary. Similarly, the lines between a brief, a spec or scope document and a contract can often be blurred. Even when they're combined, sometimes all that's needed is a well-written email in which the aims and expectations are clearly defined.
Essentially, a brief, spec or contract is just an agreement between you and the client about what needs to be done, and a formal way of covering yourself, should the client end up unhappy with the final product. Of course, that's not to say a formal contract isn't a good idea and you'll be pleased to know that, like the brief, writing a proper, legally binding contract is actually rather easy.
"A solid contract is really important," notes Sam Brown. "Don't get complacent: if anything goes wrong, you'll have to rely on your contract heavily, so it needs to be able to hold its own!"
Structure and navigation
In my experience, the biggest area of client confusion or indecision comes not from the design itself, but the structure of the site, and how the pages and sections interact with each other. Some sites, even relatively small ones, can seem difficult to plan when there are many features, or if you haven't managed to secure a particularly thorough brief or spec document.
In these situations, it can help to focus the client on the site's navigation – to simply ask them what the main links will be. This can then be furthered by discussing sub-navigation that should appear on the various pages and, before long, a structure will appear all by itself.
It's usually at this point that it's sensible to start thinking about sitemaps, if they haven't appeared already through your conversations about navigation. WriteMaps provides a simple, out-of-the-box method and is an ideal web application for those clients who aren't used to more advanced tools such as Microsoft Visio or OmniGraffle – and even more so for clients to whom sitemaps are an entirely new concept.
Or, if you'd like to create a clickable sitemap yourself using HTML and CSS, try using SlickMapCSS from Astuteo.
Sitemaps do a great job of seeing the 'bigger picture' of a website's structure, but sometimes more subtle interactions need specific focus. Take, for example, an order form that updates its fields without refreshing the browser window, or hides certain elements depending on the user's input.
There's no need to bog the client down with how it'll work technically, but it's important to get them thinking about the different interactive processes that their users will be going through. I've found that clients are more able to think of these detailed forms of interaction once they start seeing visuals, even if they're just 'grey box' wireframes.
If your client happens to be visually inclined and wants more input into the layout, then it might be an idea to let them loose with a tool such as Balsamiq Mockups, which generates rough wireframes in a hand-drawn aesthetic, using a library of common interface elements.
How much free rein you give to your clients with a tool such as this is dependent on the situation and the client, but it can help to ease the burden on you.
Once the approximate placement of elements on the pages is decided in your wireframes and signed off by the client, it's time to get down to the fun stuff: making it look like an attention-grabbing, aesthetically pleasing website. And this is what tends to take up the most time in a project, because the aesthetic layer is where things start to get emotive.
People have very strong feelings about colour, texture and, of course, the general atmosphere that's conveyed. This is why it's a good idea to really separate out the wireframe and aesthetic stages. Although they're both parts of what you could liberally call 'the design phase', they focus your client's attention on different aspects, one part at a time.
Very loosely, you could say that wireframes enable them to think about layout from an interaction point of view and aesthetics enable them to concentrate on the emotive experience.
One of the reasons the aesthetics stage lasts so long is because it's where the detailed decisions happen and so it's logical for the design to go back and forth between client and designer, undergoing a number of refinements in the process.
How many design variations you show the client during this phase is an important consideration, and although clients often like to see as many variations as possible, many designers believe it pays to be more conservative.
Ian Coyle says: "I only show one design that's best suited to a project's goals: in my opinion, the client should never be given multiple options – a designer focused on creating the best work should only show the best one."
Whenever I present a new mockup to the client, I always present it in the browser, setting it as the <body> background and ensuring that the <body> height matches the height of the image itself.
There are two reasons for this: first, it's better for clients to see the mockup in a browser so that they can get a clear idea of how big the design appears on certain resolutions, and with parts of the screen taken up by things such as browser chrome (which is impossible to gauge if the image is presented as an email attachment).
The second reason is that it makes a lot more sense psychologically for clients to see the design in what will be its final context. It forces them to think about the design as a website and not just a static image.
Typically, this mockup approval process will end when the client is satisfied enough for the site to be built. In recent times, I've tried to stop myself from making 'final' decisions in the Photoshop stage and instead I complete the design process in the browser, where elements such as typography will never match their Photoshop approximations.
Asserting your rights
When handing over your designs to a client, it's worth considering the level of copyright you give them, says Ian Coyle. "In my contract, I retain all intellectual property rights; the client only receives a licence to use what I've created."
Matthew Smith feels the same: "What if I designed a unique way to display a calendar for a client?" he says. "Should I be able to utilise and continue to develop that style, or does the client own it? These are the questions that you need to ask as you determine which rights to offer your clients and which rights you'd like to retain."
MATTHEW SMITH:Matthew Smith trades under the name Squared Eye, which also acts as an umbrella for additional freelance talent
Although the build process can be painful at times – think of Internet Explorer compatibility and weird "why won't it do that?" moments with CSS – in general I find it to be the most straight forward part of the whole creative process. There are very few decisions that need making at this point (as long as you've paid attention to the details in the previous stages) and really it's just a case of delivering a working version of the design you alluded to in the mockup phase.
You could also view a content management system as a type of framework, because it provides you with a working skeleton on which to build your bespoke projects. WordPress, for instance, is a highly adaptable CMS that has a very small learning curve – and several sub-frameworks exist for it, such as Thematic or even my supersimple Starkers, both of which are intended to provide the starting blocks for a WordPress-powered site.
Learn to network
For more complex development work, in which you need to achieve something outside your knowledge base or skillset, it's worth bringing in some extra help on a project-to-project basis.
Matthew Smith explains, "More and more, I'm working with teams of freelancers as a network of service providers. Through the networked approach, I'm able to do more of what I love and what I'm good at, and leave the parts of the work that I'm less skilled at to the folks who are best at this portion of the project."
Once a site is completed and set live, it would seem like a logical place for the project to end, but there's more to the story. If possible, encourage the client to partake in usability testing so that you can see if the appropriate solution has been reached. It's difficult for clients to find the time and budget for this additional work, but it can be done cheaply and easily, as Paul Boag explains.
With the web, we have the freedom to tweak, polish and perfect. Projects can be revisited and an extra bit of TLC – when your client's budget allows for it – dropped in at any time.
The key to being successful when working on your own is to "stay ahead of the game, keep up to date on all the latest techniques, only work on projects you absolutely believe in, never sell yourself short and continue to pump out great projects that you've spent your time making," says Sam Brown. "Most importantly, love what you do."
Matthew Smith sums up the life of the solo web designer: "Yes, we have to watch out for our rights, be careful about money, and attract the best clients. But, in the end, what we're here for is using our expertise and creativity."
To keep yourself satisfied and happy, concludes Ian Coyle, "work exclusively on projects that you're passionate about, with clients that trust and respect you and on brands you want to be associated with."
First published in .net Issue 193
Liked this? Then check out Secrets from the world's top 20 web designers
Sign up for TechRadar's free Weird Week in Tech newsletter
Get the oddest tech stories of the week, plus the most popular news and reviews delivered straight to your inbox. Sign up at http://www.techradar.com/register