Freelance Designer & Developer Tools & Services Stack with Costs

It’s been a couple of years since I did freelance work and as I’m getting back into it, I wanted to create a nice workflow for the project management, client communication and business organisation with easier accounting. The thing is when you do things alone you want to spend as little time as possible on non-billable hours and have a system/process in place for your projects and tasks. And this process is ongoing so we need to adapt and evolve it as time goes by.

As designers, we’re usually really good at organising the clients work and caring for it, but we tend to get sloppy when doing ours or just don’t put in that much time for it.

In the last 2-3 years, things have quite changed with the software and services we could use to make our work easier. And for each of those services there usually is a nice app and tonnes of alternatives so it’s hard to find and stick with one or find the best value.

Changing these regularly is also counterproductive and time-consuming as each has a learning curve to get used to it. Because of that, you want to pick one and stay with it for as long as possible. The only reason for swapping it for another app would be that either the company creating it went down and there won’t be any updates to it or if there is a new and clear winner that makes things easier and faster for you. Another reason could really be a price but the time/ease of use should have priority over it.

Don’t think apps or services with the most features are the best. If you just need to make a quick task you don’t need 20 settings or another tool to do that one small thing.

So what would a freelancer need in his tools or services arsenal and how much would it cost him?

Here are a nice service and app stack I will be using from the start.

 

The design stack

Adobe Creative Cloud / £63.40 per month

Since Adobe changed their model to a subscription model this software has become a lot more attainable and a lot more people can afford it now. It is the most used stack for any creative and in my opinion, there is no alternative for it. You could argue that there are some like Affinity Designer (£38.99) for Photoshop CC and Inkscape (Free) for Illustrator CC.

Adobe Creative Cloud is monthly subscription that will cover you for any project from branding to animation or video editing.

If you’re using just Photoshop or just Illustrator those alternatives could be for you. But as today and especially freelancers know and use a lot of different skills and create design solutions for different media, you want to have the right tools for it. But if it opens a file it doesn’t mean it will keep anything intact (plugins, filters, effects,…) and not bring any problems to either you, client or even the printer guy.

Doing freelance work for a design studio you may want to use the same software and even version you get the files from and keep it the same as you’re sending finished work. What good would it be if your affinity designer saved PSD broke the Smart objects or some other things when your client opened the file? I wouldn’t want to redo all the work I did in a compatible app again for free, would you?

 

Sketch ($99) or Adobe UX (part of Adobe CC)

If you’re doing web design, Sketch is by far a better tool than Photoshop or Illustrator. I know photoshop now supports Artboards but let’s be honest it’s not doing it good or right and if it can be done it doesn’t mean it should be done.

Sketch App is currently the most popular tool in the UX/UI design. Will Adobe XD be the next one?

Sketch App is tailor-made for web and app design. Use Photoshop if you need to create images and visuals and import them to Sketch as these two work really well together and complement each other nicely.

I’ve been also playing with Adobe XD and it’s impressive for a Beta but still needs some basic functions (creation of columned grids for example) to be able to be used for production fully. I just can’t do much work without those grids, I’m just lost. BUT XD has prototyping built in which could mean that you won’t need another app or service to do that for you.

 

Prototyping tools

Marvel (free plan or $12/month) or InVision (free plan $25/month) app are good tools for prototyping with Sketch and they have Free plans too. More on InVision later, though. You could also upgrade Sketch with Principle ($129) for animation and prototyping but it would cost you xxx more. But it’s a must if you want to do UX/UI design work on a higher level. Today it’s also about how a product or app feels and not just how it looks so animations in your prototypes will be needed.

InVision App helps with the communication and presentation of your work to the client. If you’re working remotely with your this is almost a must have to get your ideas and concept easily accepted by the client.

InVision is also really good for getting client feedback as you can post a link to the designs (hosted in the cloud) and the client can click and comment on specific parts of the pages which are really helpful for revisions as it keeps the communication clean and simple.

Time will show if Adobe UX will be better than Sketch. This would mean more compatibility and a project would stay inside the Adobe-only project space which means a lot more compatibility support and a cleaner workflow.

And that’s it for the design part of the stack, you can do pretty much anything with these tools and there is a huge community behind it so tips, guides, tutorials are available for any problems you may have, be it technical or just a “how to design …” one.

 

The dev stack

If you’re starting out you want to keep this stack as cheap as possible and use some open source alternatives which can be better than the paying ones.

Code editor

My choice here is Atom (Free) as it’s free and offers a lot and has tonnes of plugins although you may just need a couple. If you bloat it could get slow, though. Sublime text 3 ($70) is a nice upgrade and a great alternative if you want to invest in speed and some nicer features. But if starting out, Atom is a smarter (and cheaper) choice.

As you will probably be doing quite a bit of dev tasks from your terminal I’d suggest going through the course Command Line Power User by Wes Bos. It will make it pretty and a lot more enjoyable to work with.

 

Github ($7 per month)

Popular Git service for creating and managing a version history of your app/web projects. Free for public repositories and $7 for unlimited private ones. You need Git if you’re doing any coding. It makes your life easier and you can have a peace of mind and a backup for anything that can come. Just don’t forget to push those nice commits you’re making. It’s also used for deployments with some services.

 

DigitalOcean (starting at $5/month)

My favourite droplet provider of choice, low prices, high quality and amazing ease of use. Hosting one or more projects and having different environments (staging, production) is a godsend. It just works and is great for learning setting up your own server, they even created guides for WordPress deployment etc. Speaking of WordPress, DigitalOcean is pure magic with Roots – Trellis, Bedrock and Sage combo for development, deployment and production. Best practices from these smart people and their community will make you a better developer and your site will be blazing fast and secure and clients like that. It’s not for beginners as it has a steep learning curve but you don’t want to stay one for the long right so it’s a great starting point?

When you get better at this or find you want to know more and do things better, you may want to upgrade your project to Amazon Web Services which is a massive system ops heaven and is for advanced users. Just don’t use it if you think you could achieve a similar outcome in a shorter time and cheaper way with DO.

Laravel Forge ($15)

For smaller, lower traffic sites I use Forge to provision my DigitalOcean server and then deploy my GitHub projects that contain either a Laravel or WordPress app. At $15 per month, it’s a good companion if you’re managing your client’s sites. It takes away the time needed for provisioning of a server and it’s setup helping you to focus more on the code.

A WordPress only alternative is ServerPilot which also has a Free plan but I suggest using the Coach plan ($10) as it gives you important features like the Free SSL certificate. ServerPilot is optimised for WordPress so it’s blazing fast and secure.

 

What to start with

Definitely start with Adobe CC as it covers a lot of design disciplines from branding to animation. These are professional tools and you can’t go wrong with them. For a code editor, use one of the open-source ones like Atom, as it’s free. After you get some projects going, upgrade and learn a new service or app as you go and add new ones when you’re able to or you will really need it.

Other services

So the design and development tools listed above will take care of what is needed to create a product. These other tools and services are there for saving time and managing your accounts and projects.

In my future post, I’ll go over some of the services and tools I use for project management, time-saving, documents, invoicing and finances which are also an important part of being a freelancer. Even if you’re just one person you need to do the work and have the skill-set of many specialised people as you’re running a business and you will want to grow it too. Don’t just do “gigs” if you’re capable of more so some of these things will help you with the nicer clients out there and keep you well organised and focused.