Planning a new CLM design and development project can be a daunting task – especially when wanting to impress a new client or working in an unfamiliar project area. Our simple checklist contains what we believe to be the key elements for a smooth project handover. We hope this list will boost your confidence and understanding while also reducing pressure so you can focus on the areas where you can add real value to the end client and user.
We also have a downloadable PDF version of the checklist available, should you want to print it out.
Use the RGB colour space for artwork files and in the correct resolution(s) for target devices
Monitors and other device screens work by emitting light, which is why we use the additive RGB colour space. This is the inverse of the CMYK model commonly used for printed materials, where the perceived colour is produced by absorption of light.
It’s important to ensure your design tools are set up to use the correct colour profile from the start, since changing midway through will cause unexpected colour shifts in existing work.
To find the appropriate target resolution, you could use our cheat sheet containing screen resolution information for Apple devices, which is coming soon. Sign up for our resource updates so that you don’t miss out!
Ensure that artwork layers and groups are clearly named
Having layers and groups clearly named makes it easy to locate assets, understand how they should be constructed and helps smooth out the process of exporting files ready for the web. It’s also good practice to reinforce the ‘component’ mindset – meaning elements should be designed for flexibility and reusability in order to give a consistent feel throughout the project.
Guarantee that elements are atomic – not dependent on a specific background colour or other items on the page
Elements should be completely independent and confined to their own layer or group. A great example of this could be a button which is made up of a background layer, a text label and an icon layer – all contained within the button’s group.
Building up elements in this way ensures they are flexible, reusable and contribute towards a consistent feel throughout the finished product.
Additionally, taking the time to prepare an “asset library” for your project will greatly streamline both the design and development processes; reducing the burden of having to make amendments or creating additional page layouts.
Conversely, it’s important to keep in mind that making “quick” changes to shared components could have unforeseen effects elsewhere in the project.
Use pixel values that are a multiple of the target device’s render scale
If an object isn’t aligned to full-number pixel values, it means they won’t map accurately to the device’s screen pixels. Instead, the device must interpret how fractions of a pixel should be drawn to the screen (and isn’t always consistent in doing so). This upsampling effect can cause images to appear blurry or lines to have uneven thickness despite the same weights being set. To avoid this situation, both the physical and logical screen resolutions of your target device(s) need to be taken into account when producing source artwork.
For example, a common target device is the later-generation 9.7” iPad. For these devices, we recommend using positioning and dimension values that are divisible by 2 (this is the render scale value). This ensures logical positions can be cleanly mapped 1:4 with screen pixels, making the final product clear and sharp on-screen.
Confirm that items are aligned to the pixel grid
Following on from the previous point, it’s important to check that your elements are aligned along exact pixel boundaries in the first place. Be aware that this situation usually occurs when drawing new text or vector elements freehand with the mouse. Fortunately, most software packages will have some kind of “snap to pixel grid” option that should be enabled to avoid this problem automatically.
Include additional assets in the artwork package – stock material, videos and fonts etc.
Some software packages such as Adobe Photoshop or InDesign have a “linked file” feature, allowing you to update an asset you’re using in your layout just by updating the file. This is extremely helpful, but don’t forget that you need to package up these files along with your main artwork file(s) when you hand them off for development! In the same way, any fonts or other assets will need to be supplied to make sure the developers get an accurate representation of your design when opening the files at their end.
Add notes and other documentation from the design process
The design process is a tricky one, requiring collaboration between multiple different parties and a lot of decision-making. Naturally, we love to be included in this process, but we – as a development partner – understand it’s not always feasible on every project.
As such, the important thing to remember is that every meeting produces ideas, decisions and plans that become indispensable documentation for your project. This often gets overlooked, but it’s essential for bringing people up to speed on the status of the project. Having information like this on-hand, speeds up the onboarding process and ensures your developers will get a complete, rounded view of the challenges and proposed solutions at hand.
Be certain that licensing terms for any third-party assets are met
Licensing for things like fonts can get very tricky, especially when dealing with the issues of embedding them in web content and distributing through a CLM platform such as Veeva. It’s best to check with the license holder to see which licenses they offer that meet your exact needs. Alternatively, if you need a “safe” option, the Google Fonts suite offers a wide variety of typefaces with generous licensing terms suitable for use in CLM or web content.
We hope you find this checklist useful for your own projects. If you’d like to print it out or share it with your co-workers, we have a downloadable PDF file available here. If you’d prefer an interactive digital version of the checklist, tweet us for access!
We’re always on hand for advice on smoothing the transition between design and development on Veeva CLM projects, so if a checklist simply isn’t enough, get in touch with us today to see how we could help.