Design Handover Guide

While we’ve all tried, we all really know: there is NO standard project. Every project is unique, so here at Wowholic we’re happy to adapt to your specific project needs. Based on our learnings from past projects, we’ve created this simple Handover Guide to make working together as smooth and enjoyable as possible.

NOTE: This guide is a living document. We’re happy to receive your feedback on how to make it better 👍

1 – Design Files

Of course the heart of the handover will be your design. We’d like to receive the following:

Open Design Files: For us it’s best to direct access to all your files, so please send them to us or invite us to your project files once the project is underway. We personally encourage Figma, Sketch or Adobe XD but had to work with with PSD or InDesign back in the days.
Alternatively or in addition we had good experience using tools like Zeplin or Marvel.

2 – UI Style Guide

We encourage creating a Style Guide for your handover. While for small projects it may seem like extra work, it will actually save a lot of time later on.

Style Guide could look like this: UI Style Guide Example.
The Style Guide should contain information about the used grid system, how to use fonts, button styles including, hover states, form fields and error messages, etc.
Information about effects and animations is typically also part a of the Style Guide. We’re happy to receive links to other pages or your own animations made in After Effects, etc.

NOTE: Sometimes teams have of Design Systems. From our experience only very big projects with many collaborators will have a Design System. If there’s one for your project, we’re happy to work with it!

3 – Click Dummy & Prototype

If you have a prototype please share it with us, especially so we can better understand the page’s architecture or special click/scroll events this will be very helpful. If you don’t have a click dummy already we can work with the information provided to us in the UI Style Guide.
We suggest tools like Figma, InVision, Framer, etc. for prototypes.

4 – Assets

Logos: Please provide as SVG files.
Icons/Illustrations: We suggest working with Icon Fonts. If possible create an icon font with IcoMoon. Alternatively, send all icons as SVG files.
Images: Images might be part of the design file or can be downloaded from tools like Zeplin, but providing the original raw files might reduce back and forth or may be necessary based on the type of design file. We suggest that images should have SEO names (keywords separated with a dash “-”) and are optimized in resolution and size (Compress with tools like ImageOptim).
Fonts: If you use custom fonts, please send us the web font files and the desktop fonts if we need to open your design.
Favicon: Mostly a png file with 512x512px.

NOTE: If you would like for us to animate SVG Files, please name the path/layers in the file as semantically as possible so it will be easier for us to work with.

5 – Sitemap

If it’s a OnePager, we don’t need a Sitemap 😉 but for medium-sized to larger projects we’re happy to receive the sitemap, especially if the structure of the page is not clear based on the design.

6 – Hosting Information

In some cases customers ask us to help them with the decision of choosing the right hosting option. Then we probably already have all we need. But in many cases the customer also has an account with a hosting company. In that case please share:

The easiest option: Send us the hosting account login.
Alternatively we will need FTP and database access (phpmyadmin) to the customer’s hosting or the customer’s IT has a specific Deployment Setup. Either way, let’s discuss.

7 – CMS Setup

Often everybody is caught up in front-end design and forgets to talk about the CMS setup. By standard we use WordPress Advanced Custom Fields and setup a mix between page templates and flex content modules. If there are special wishes let’s discuss.
Naming: Mostly we will have to name design modules or fields in the CMS. Due to project speed we normally name design modules and fields our selves in English. If you have special requirements, please let us know.

8 – Other Logins

Sometimes we implement Instagram Feeds etc. Let’s remember to share the necessary login information. Since this is very nuanced, we’ll clarify this during our kick-off call.

9 – Edge Cases & Empty Cases

Often there are some Edge Cases creating issues once the final content is added to the page. We suggest to test or consider the following during the Design Phase already:

320px vs. 375px width: Mostly we get designs in iPhone X size (375px) and in testing find issues on iPhone 5 (320px). Maybe try out some critical elements on 320px width during the design process to avoid issue later on.
No results: If we have a search feature or similar, did you create a design for the page if nothing was found? Please send us the “No results” page.
Long headlines or more text: Mostly designs contain dummy text with the perfect length. Try your design with shorter or longer text and see if your design still works.
Big screens: Most designs we get have a width in the ball park of 1.280px. But what about big screens with 2.000px width or bigger? Generally speaking we should limit the container width to a certain value (2.000px is a good number), but some design modules might stretch to 4.000px width or more. Let us know in the Style Guide.