Website mockups are completed and client-approved. Pages and templates have yet to be built. It’s time for a website development handoff. A website development handoff is the point in the website project where the design and development teams get together to go over the designs and discuss the project.
During this meeting, the designer can walk the developer through the designs and fill them in on how the website should look. It’s the perfect time for the developer to ask questions and get an understanding of everything that’s needed for the build.
Below is a list of things that your developer may need to have or be aware of in order to be successful:
Brand or Style Guide
Having a clearly defined brand guide that lists out the various typefaces, font sizes, font weights, colors, and so on, along with notes on when and where to use them is extremely useful for the developer when setting up a new website’s stylesheet. This not only helps keep the styling consistent across the whole website but it keeps the developer from having to make guesses or assumptions about these elements.
Sitemap
A sitemap is a simple visual diagram that lists all of the pages within the website and how each are connected. This is a great way to clearly communicate where each page (or group of pages) fits in the overall hierarchy of the website.
Wireframes
It’s unlikely that every single page in your new web project will have its own mockup, but you’ll still need a way to illustrate to your developer how certain non-designed pages should be built. That’s where wireframes come in handy. These are simple guides, often created with black-and-white boxes and dummy text to represent the general layout of a web page. Think of them as the blueprints or skeletons of the pages.
Designs
Some of the more important or highly customized pages, such as the homepage, will usually be fully designed. Make sure your developer has access to these mockups so they know exactly how these pages should be built. If possible, send over the actual design files so they have the ability to double-check specific font sizes or colors when needed.
Animations and Design States
How should links or buttons change when hovered over? Are there any subtle (or not-so-subtle) animations that should happen on the webpage? Make sure your developer is aware of any of these types of use cases. In addition to talking through all of the special details of a design, it’s a good idea to also notate them on the mockups or wireframes. This ensures that these smaller pieces aren’t missed during development.
Copy
If the final copy is written and ready to go, your developer can incorporate it into their build instead of using placeholder text. This not only saves them time later on by not having to enter the copy in twice for a page, but it also gives them the chance to see how the content fits into the design. If the final copy is on the page, it’s easier to test it out and catch any bugs or layout issues early on.
Images
It’s also important to give your developer any and all required assets ahead of time. These would be things like banner images, product images, icons, logos, or videos.
CTAs
Calls to action and other links can be added to your website’s copydeck or mockup. Just note that a CTA needs to be included, along with where it should link to. The developer will be able to set these up while building or staging a page, ensuring that these elements will be functional when the page goes live.
There are a number of other things that could be helpful for your specific developer, but hopefully, this list gives you a good place to start. In the end, nothing is more important than making sure your developer knows that if they’re missing anything, all they need to do is ask.