Learning Experiences as a Freelancer

I thought it might be useful to share some of my not-so-great experiences as a freelance web designer so that others can learn from my mistakes.

All Work and No Pay

What’s really frustrating is that I made the same mistake several times. That costly mistake was doing work and not getting paid for it. I’d get an enquiry for building a site by phone or email. I’d get straight back with some ideas and a quote and more often than not my quote would be accepted. I’d even have written confirmation that yes, they wanted to pay me for a website. On this basis I’d do the work and then when it came to sharing my design they’d say that they didn’t want to go ahead any more or that they’d found another designer.

It’s hard as a designer. You can get excited by a project. As soon as you finish speaking to the customer the ideas start flooding into your head and you want to capture that excitement and creativity there and then. Unfortunately, in my experience it often doesn’t actually materialise. They’re just not as serious about the project as you think they are.

My advice would be to assume that it’s just talk until you see some commitment, and by commitment I mean money. Ask for a deposit. It doesn’t have to be much, even £10 or $10 will do, but it’s just enough to prove that they’re serious. Don’t lift a finger until you’ve got a serious commitment. Trust me -you can’t afford to work for nothing.

The Price is Right

The other mistake I made was in my pricing. As I was fairly new to web design I thought I’d hit the low end of the market where I could compete on price and get lots of small cheap sites in my portfolio. It worked well for some customers but it’s surprising how many people expect you to travel to see them at your expense when you’re charging less than £100 for a website. The only way you can operate at the cheap end is by having very low outgoing costs.

Later, when I stopped being a full-time freelancer and moved into a permanent job I kept the web design going as a side line. At this point I could afford to be more picky about which projects I took on, and, without needing to be so competitive I raised my prices. In fact, I doubled my prices. Here’s the thing. I was expecting my number of enquiries to drop off. It didn’t. It pretty much doubled. I think that going too cheap was actually suggesting low quality or making people suspicious. Charging more can suggest higher quality and strangely provide some reassurance.

My advice would be to find the price that you think your service is worth and then double it. Serious customers want to buy quality services and with something like a website they’re looking for a long term relationship, not a quick handover.

Losing Focus

The third mistake I made was spending my time on the wrong things. I spent a lot of time trying to market myself rather than focusing on client work. I put a lot of hours into studying Google Analytics, SEO and building other sites to promote my main business. It would have been far more cost effective to just pay for advertising rather than commit this time. Trying to market myself by spending time and not money was a false economy. Focus on what you’re good at and pay others to do what they’re good at.

Hope that helps someone.

How to Be a Good Designer

I’ve been designing web sites and user interfaces for quite a long time now and thought I’d try to pass on what I think it takes to be a good designer. This isn’t about design techniques or theory, just how to interact with other people.

Rule 1. Don’t be a dick.
That’s really it. Don’t let your ego take over. You will inevitably have to present your work to others. Don’t presume that because you’re the designer that your opinion is worth more than anyone else’s. It’s a collaborative process and if you start feeling that you know best it will stop you listening to others. This leads neatly into…

Rule 2. Listen to others.
This isn’t because you have to or to be polite. If you actually listen and understand people’s views, opinions and concerns you can learn how to adapt your designs to meet their needs or explain how there might be a different solution to the problem.

Rule 3. Explain your thinking.
Don’t just present a design and let others judge it. Explain clearly all of the design decisions you have made. If you can justify these and articulate them clearly people will understand, you’ll have more of a conversation and, in turn, their feedback will be more constructive. It will also give them more faith in you – you don’t do things on a whim but your decisions are well thought out.

Rule 4. You don’t have to win.
It’s ok to not get your way. It’s important to show that you respect others’ opinions and concede to try their ideas. If their idea really was wrong it will come out over time and the next time they will be more inclined to trust your view.

What to Look For in a Web Designer or Design Agency

Imagine you’re a business owner or marketing bod and you need to get either a new website or you want a redesign of your current, slightly tired looking site. You need to hire a web designer or design agency. How do you tell the good from the bad?

Web designers range from the top end agencies who have major international corporations in their portfolios down to someone’s neighbour’s kid who made a website for someone once. Chances are you want something in between – not paying over the odds and not getting something held together by sticky tape.

Agency or Freelance Designer

I’d say your first choice is knowing whether to go with an individual or an agency. Traditionally agencies would cost you more as they had an office with bills and marketing costs whereas an individual might be working from their room. Today, with more home working, those lines are a bit more blurred and some very good agencies might be made up of remote workers. An agency brings some reassurance, that if a particular person is on holiday for 3 weeks, off ill or leaves then there’s usually someone else to pick up your work, whereas with an individual you might not have that fallback. By the same token, some designers have very sound fallback plans – working with other designers, passing all relevant access back to the client so it can be picked up by another freelancer. It’s really a case of asking the right questions and making sure you feel adequately covered for what you need.

It’s all about how it looks

Look at what the designers have done previously. Obviously consider if the designs look appealing but look slightly beyond that. Is each design tailored to the content of the site or business it represents or are they trotting out the same template for all their sites? An overuse of templates suggests that they’re bashing out sites as quickly as possible for maximum profit rather than really caring about doing a good job.

Actually, it’s not about how it looks

Looks are one thing but how a site performs for you is much more important. It needs to load quickly and display properly on any device. Some sites have great home page animations or big images which cycle to promote things. Whilst these may look great on a desktop they’re a nightmare on a mobile device without WiFi. If a user has to wait 30 seconds for your page to load and then pinch and zoom to read your page, do you think they’ll hurry back? Fast loading and appropriate sizing for all devices is essential.

Ask about page speed and responsive design. If they don’t seem to know about this, or view it as an extra, run, run fast, far away. Responsive design is not a “nice to have” like it was a few years back, it’s critical. Even if you think you’ll never have any mobile visitors, 1) you’re wrong, by the way, and 2) having a site work on mobile is a key factor in Google’s ranking of search results. If it doesn’t perform well on mobile Google’s search ranking algorithm will lock your site in a dungeon and make it eat nothing but porridge for the rest of its anonymous life. Probably.

Relationships

You also need to consider if you’re looking for a one-off piece of work that’s signed off and shipped or an ongoing relationship where they will keep working on your site. Make sure you find out costs for any future work – new features or pages or tweaks to existing stuff – even if you don’t think you’ll need it. It’ll give you a good idea of how they operate.

UK VAT

This applies to the UK. I’m not sure quite how Value Added Tax or equivalents work in other territories. If you’re a small business, individual, club, etc and not VAT registered yourself it may pay to find a freelance designer who is also not VAT registered as it will save you having to pay an extra 20%. This does imply that they’re working at a lower turnover level but for a smaller project this might be a better fit.

Summary

To bring that all together in a nice to do list, ask about the following:

  • Fallback plans if the designer is not available
  • Use of templates
  • Page loading times, especially on mobile
  • Appearance on different devices
  • Ongoing or future work
  • Are they VAT registered (if relevant)?

Developing in Codepen

A look at why and how I use Codepen for front end development work.

Background

I work on a web app with a development team. We use AngularJS with a RESTful API. My role is looking at the design and UX side of things and scoping out how a new feature will look and behave in a web browser, or, I should say, in various browsers at different screen sizes.

I generally do my work up front. I’ve always been a design in HTML and CSS kind of guy. To me, with my skill set, working in a graphics editor takes as long as coding it so it makes little sense for me to do the work twice.

Until recently, I’ve been using static HTML and then another developer has added the binding and data. Where the feature is on a new screen I can go a step further and create a dummy data object, to represent the data returned from the API, and actually do the binding as well as create any custom behaviour.

Working on existing screens has been much more difficult. It’s almost impossible to add new data, binding and behaviours without breaking the existing code. To use a dummy data object I need to intercept the real data retrieval and replace the object, which stops the page working when wired up again. However I work things, I’m having to check in code which is not releasable.

A new way of working

I’ve started using Codepen to abstract away the new feature. I set up a new pen, import any existing dependencies and then create the HTML, CSS and JavaScript for the new feature in isolation.

This means that the original project code does not get touched and broken. As the next developer brings in any model/schema changes he/she can bring in my front end code so we don’t have any breaking check-ins.

By importing the dependencies – JavaScript libraries, CSS – we avoid any clashes or inheritance issues and additional work trying to integrate my code.

It also means I can give the new feature my full attention without having to use other parts of the screen, for example, if I’m working on a modal window, I don’t have to go through the usual page processes in order to call it.

I’m using Codepen in the way it was intended, as a front end playground, an environment where I can experiment with different ways of doing things. The results are displayed in a frame, updated instantly as you type, which makes working much faster – no more manual refreshing or rebuilding.

From what I’ve described up to this point, this abstraction could be done by making a copy of the page but copying the HTML page, the CSS and JavaScript and changing all of the references between these files is quite a headache. Believe me, I’ve been there enough times.

One of the massive advantages of Codepen for a designer is the ability to fork pens, so you just hit one button and you’ve got an exact copy of the pen you were working in, making it very easy to create a few variations of a design.

As each pen is available on a public URL it’s easy to share designs with colleagues or clients and they can see a working prototype – much better than a static screenshot. It also means that links can be embedded in documentation. Personally, I feel that now web animation has become mainstream, it’s important to be able to show how screen elements transition between states, how things appear/disappear and demonstrate where the user’s attention is drawn through processes. Static screenshots just don’t cut it any more.

Final point. Designing in the browser with work stored in the cloud is awesome for design. I could be out and about and suddenly see some inspiration for something I’m working on or get a new idea. Rather than hope I’ll remember it, I can quickly create a new pen or fork an existing one and add some code or notes there and then from a phone or tablet. I don’t have to hope I’ll remember or wait until I’m back at my desktop. It’s exactly what the web should be.

How to choose the right web host

web hosting serversIf you’re starting a new site, it’s very hard to know how to pick the right web host. Which company should you host your site with? How much should you be spending?

There are a number of factors to consider.

Disk Space
This is the actual physical space on the server for your files. If you’re just using text, screen resolution photos and a few icons and graphics then you really won’t need much space at all. A few megabytes will do. If you’re going to be working with high resolution photos, audio or video files then you might need more.

Data Transfer
This is the amount of data that is downloaded each month. It’s a combination of the sizes of files on the site and the number of visitors. If your site is well optimised and you’ve kept your files as small as can be then, again, you probably won’t need much data transfer. With a new site things are usually slow to start of with but then snowball as the site grows. YOu need to keep an eye on the monthly data transfer (your web host should give you this) and upgrade to a higher transfer limit only when you need to.

Reliability
Many web hosts talk about their “uptime” – the proportion of time that your site will be up. It’s usually 99.9% or higher. With greater reliability comes a higher price tag. YOu have to ask yourself if your site going offline for a short time is really such a bad thing and what it would cost you. Obviously, if you’re a massive site like Amazon then being offline for even a minute could cost you thousands but, in reality, for many new sites it’s probably better to risk a few minor outages and save money on the hosting.

Support
Finally, it’s worth weighing up what kind of support you will receive. If you’re new to working with web hosting, managing email accounts or have specialist requirements, e.g. working with ASP.NET, then knowing that there’s someone there to help you can be valuable.

With a new website my advice would be to start small and let the hosting grow with the site. As the numbers of visitors increases you can naturally afford to invest more in your hosting. Only pay for what you need. Start with a small hosting package on a shared server and upgrade as you need to.