3.5 Designing a certificate template
There are four main steps to designing and configuring a certificate template:
Step 1: Gather requirements
Research and define what registration data need to show on the certificate
Step 2: Design a certificate template
Create your certificate template using a design software such as Figma or Adobe Illustrator. Check out the Help and advice: section below to learn how to design a paper certificate for a digital civil registration system.
Step 3: Review your designs with stakeholders
It is important to review your certificate design with required stakeholders to get sign off. Once it has ben exported to SVG and configured to include the registration handlebars. It become harder to make changes.
Step 4: Export to SVG
When you have finalised your design you need to export to SVG. Important! If your using Figma make sure to uncheck 'Outline text' for the handlebar dummy text. All other fonts can be outlined. Make sure 'Outline Text' is off!
Step 5: Configure the .SVG template file
In this step the SVG file ids edited to replace the dummy data with the necessary handlebars. Required to populate the certificate template with registration data. Guidance on this step is document here 4.2.6 Configure certificate templates
Help and advice:
Existing template vs designing a new template Implementing a digital CRVS system is a great opportunity to rethink your paper certificate design. With a digital registry the paper certificate is no longer that important. As the source of vital event data is in an easily searchable and accessible digital database. Existing paper certificates have been designed to be completed by hand. So they add elements such as dotted lines or boxes to prompt where the information needs to be written. In a digital system which auto generates the certificate this is is not required. Existing certificate templates are often designed in MS Word. So the original source file can not be imported into a graphic design software to be configured and export to SVG. This means you will need to recreate the design as pixel perfect as possible. Existing paper certificates often provide space to allow data to be written on multiple lines at the discretion of the Registrar. With a digital system trying to populate an existing certificate template this can make the configuration far more complex. To cater for all possible scenarios where data needs to wrap onto multiple lines. See our guidance video below where we explain some of the complexities working with existing templates
Figma or Adobe Illustrator You can use any design software as long as it can export your design to SVG. Figma is recommended as it is free and working on OSX, Windows and in the browser
Select a page format: A4/A5 Any page format can be used. Note that the certificate preview page currently only supports A4 or A5.
Fonts! Any font can be used as long as you have the source file (.tiff). You will need to upload this to your country repository package
Consider the font size Try to use a minimum font size of 12pt to ensure the certificate is easy to read and accessible to all
Consider the longest potential character length Will the longest option fit on one line? Will it wrap? If you expect text will have to wrap. The SVG will need to be edited during config to allow text to wrap. Extensive testing will be required to check all scenarios. The Core team to date have designed certificates so no wrapping of text is required
Use dummy data for Registration data This will be replaced later when configuring the SVG to include the registration handlebars
Using security paper If you are printing onto security paper. Don’t include the security paper design in your template. In a future release we will allow you to do so. So that the certificate preview page shows the complete certificate but only prints the required data
Use PNG for images You can add as many images as you want. Use high resolution .pngs for the best results. Make sure any text that overlays an image is still readable
Digital signatures Add a place holder image for where you want the digital signature to be. Choose a suitable aspect ratio. eg. 2:1. When uploading a signature for the Registrar in user management make sure the same aspect ration is used. So the signature size is maximised
Very certificate QR code Add a placeholder image to your design to indicate where the QR code will go if you are using OpenCRVS verifying certificate feature. Make sure the image is square (1:1 aspect ratio)
Export to SVG. Make sure ‘Outline text’ is false!
Last updated