You finally take the leap to work with a developer on your latest custom web design project. You’re excited to see your unique and intentional design come to life without having to do any of the development yourself. But…then you get the website from your developer and wonder what in the world they were even looking at. You’re out hundreds or thousands of dollars, are going to miss your deadline, and are right back to where you started.
This scenario isn’t a fun one, but I see it happen all too often for designers who decide to jump into a collaboration for the first time without being sure of what the process looks like or what they should look for in a developer.
My goal when working with a designer is to be able to put the finished website and their mockup side-by-side without them being able to tell the difference. That’s the kind of experience you should expect.
Today we’ll go over the two steps you need to take to ensure the website your developer creates actually looks like your mockups.
Step 1: Find a developer who knows what they’re doing
The most important step you can take is to find a developer who actually knows what they’re doing. It’s tempting to look for the cheapest option out there, but that approach almost guarantees that you won’t be thrilled with the final result.
But, as an overview, look for someone with experience. Look for mentions of formal training on their website, impressive portfolio pieces, and powerful testimonials. If you don’t see any proof of them being able to bring your designs to life and give you a positive experience, keep on looking.
It’s also good to find a developer who specializes in collaborating with designers. Developers with this type of experience generally have a much better eye for the little details you’re looking for. As someone who has worked 1:1 with clients and now works only with designers, I can tell you that designers have much higher expectations than general clients. You want to work with a developer who expects and can deliver to the level of your expectations.
Finding an experienced developer who knows how to work with designers will also make the process a whole lot easier on you. Instead of having to figure out the collaboration process as you go, your developer can lead you. For example, when I’m working with a designer I outline my entire process in Asana so they always know what to expect, give frequent updates, know exactly what content I need beforehand and provide a detailed checklist, and give access to the From Mockup To Code Toolkit to make sure all questions are answered.
In short, finding an experienced developer will make the process easier and ensure the website you get is exactly what you imagined.
Step 2: Give your developer what they need and clearly communicate your design
After you’ve found an experienced developer who can deliver exactly what you need, it’s time to give them the tools and materials they need to do their job right.
The biggest mistake I see is designers thinking a basic wireframe is enough for their developer to go off of. Remember, most of us are developers for a reason. You don’t want to trust us to make a beautiful website based on a black and white wireframe. 😉
These materials include things like complete and organized mockups. Each page of the website should have a mockup and you should expect the final website to look exactly like what you’ve provided. If you use Photoshop or Illustrator, make sure your layers are named, are unmerged, and are organized. If you use something like InVision, you’re making your developer’s job even easier!
Along with your mockups, include notes or a walkthrough video of any special features. For example, if you have a pop-up in a hidden layer that should appear when a certain button is clicked, make sure that is communicated. Or if you want a certain hover effect, provide a detailed explanation or a link to another website that is doing what you’re looking for.
Next come the brand files, copy, and images. Brand files include things like the logo, fonts, patterns, and style guide. As far as images go, make sure all images are exported at the correct size, keeping retina screens in mind.
Showing your developer exactly what you want the website to look like and providing them all of the right materials will ensure they can make your mockups a reality!
For more details on exactly what your developer will need from you, check out the From Mockup To Code Toolkit!
Are you ready to collaborate with a developer?
If you’ve had a bad experience with a developer before, giving it another try can be intimidating. But if you find someone who truly knows what they’re doing and give them everything they need to do the job, you can ensure that your mockups will be made into a website that you and your client can be proud of for years to come.
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!