There are a lot of moving pieces that go into partnering with a developer for your web design projects. If you’ve never done it, it can certainly be an intimidating task. Not only do you have to figure out how it all works, but you have to find the right person for the job and make sure your project actually goes the way you expect it to.
Luckily, having a solid design process makes collaborating with a developer a whole lot easier. It’s the difference between a project going smoothly or ending up as a slight disaster.
So today we’ll go over 4 important pieces of your design process when you’re partnering with a developer!
1. Project Scoping
The first piece of your process you want to have down to a science is project scoping. That is, figuring out exactly what will go into a project as far as pages being designed, special features, and more.
The first reason this is important is so you can get an accurate quote and timeline from your developer. If I had a dollar for every time I got an email saying, “Hey, I have a new website project coming up. Can I get a quote and timeline?”, I’d have lots of dollars. The thing is, your developer’s estimates will rely very heavily on the size of the website and what kinds of features it will have.
For example, when quoting a project I need to know things like:
- How many pages will be included and what those pages will be
- If there will be any sort of shop or membership capabilities
- If sliders or image galleries will be included
- Whether the client needs hosting set up, a domain transferred, or an entire website transferred
- If there will be any unconventional page layouts
- What websites that client is looking at for inspiration
When you’re working with a developer and have those types of questions built into your own project scoping process, getting an accurate quote becomes a lot easier.
In addition to determining the initial quote and timeline, letting your client know that the scope can’t be changed easily throughout the project is also important.
When you’re working on a project by yourself, it might be okay if new requests are constantly coming in from your client, but when you’re working with a developer it becomes a bit more problematic. That’s because, a feature that might be easy to add to a design could mean hours of extra development work, which will change the expected timeline and project cost.
If you don’t yet have a good process for determining project scope, create a questionnaire that incorporates the questions listed above. Also, ensure your contract states that changes to the agreed-upon scope will lead to changes in the project cost and timeline. Which leads us right into our next point…
The next important part of your process is your project timeline.
Take a second and think through the stages of your web design projects. For example…
- Do you know exactly how long it takes you to complete a moodboard, including client approval?
- What about logo concepts?
- How about the entire process from starting a project to getting the final sign-off on a website design?
If you don’t know how long each piece of your process takes, working with a developer becomes much more difficult, since you’re unable to give them an accurate start date. This can lead to your developer having to reschedule your project to whenever their next opening happens to be, which can bring along some hefty fees.
The From Mockup To Code Toolkit contains an entire lesson on determining your start date as well as a Start Date Calculator. But to get started yourself, begin tracking how long each step of your process takes you. After a few projects, do some comparisons and see what you end up with.
3. File Organization
Next up comes the process you have for file organization. I’ll be honest with you, my files and folders for personal projects can get preeeettty disastrous. You with me?
When you’re relying on someone else to bring your designs to life, the unorganized files, folders, and naming conventions have to come to an end. It’s time to clean everything up and organize in a way that will make complete sense to someone other than yourself.
That means folders with descriptive names, files named properly and sorted into those nicely-named folders, and even your Photoshop or Illustrator files organized so your developer doesn’t spend hours searching through crazy layers.
Keep this in mind going into your next project and see what a difference it makes – even just for you!
4. Final Sign-Off
Last, but certainly not least, is your client’s final sign-off on the design portion of the project.
Before we talk about why this is important when you work with a developer, let’s think about how helpful it can be for you! I know I haaate it when I’ve gotten the final approval on a project and 2-days later the trickle of small, nitpicky changes starts to filter in. I talked about this more in a post about reducing changes and revisions in your design projects, but having your client sign-off after getting approval can help you wrap up your projects without the extra headaches.
Those after-the-fact changes become even more problematic when there’s a developer in the mix. Clients don’t tend to understand that their “quick tweak” could add a significant amount of time to a project – especially when that portion has almost been completed.
It’s never fun to go to a client and say “sure, we can do that, but it’s going to cost you”. So the easiest thing to do is to avoid it all by having them sign-off on your final design, acknowledging that there won’t be additional changes and if there are any the project timeline and cost will be affected.
How is your process looking?
Reading this post may have pointed out a few holes in your process. If that’s the case, don’t worry! It’s completely normal to let your process be a bit looser when there aren’t other people depending on it. Use your next few projects as a way to tighten up those looser pieces so you’re ready to bring on a developer when the time comes.
To learn more about working with a developer, unlock the ultimate checklist to go from hours of code to development-free design projects. Click the button below to get started!