This document presents the service guidelines and common tasks during uhuu template design and development. The document is continuously updated and subject to change anytime.
Please revisit this document before the start and after the completion of each template project. Ensure all checks pass and suggest new checks if necessary.
Deliverables
Required:
- Template design as exported PDF.
- Template data (JSON), Designer is responsible for exploring data and positioning them in a document.
- Template data binding document, showing data attributes with comments & arrows over the design.
- Templates supporting multiple language: All translation keys should be exported as CSV and conversion tested on Uhuu Utility and shared with developers. Template data bindings should also show keys corresponding to different languages. If possible provide designs in different languages to ensure developers build correctly.
- Check brand fonts, make sure web fonts are available, and prepare Unicode web font URLs to deliver to developers. Test with
ß,Ä,ä,Ö,ö,Ü,ü,À,È,É,Ì,Ò,Ù,à,è,é,ì,ò,ù - All static template assets (SVGs, images, etc.) should be exported. Developers might not have the necessary tools to export or might export low quality.
Optional:
- (if available and requested by the developer) Template design editable version (InDesign, Sketch, Figma or alternative file).
Designer Checklist
- Provide data bindings to developers. Mark all visual elements that are corresponding to dynamic data elements otherwise mark them as a static image and provide those static images as exported SVG/JPG/PNG files.
- While designing for hardcover book printing, the binding area (vertical middle area of a book cover) needs design. Make sure the binding design is final when delivered to developers. Since developers need to calculate coordinates horizontally then rotate and recalculate again vertically. Binding design development is a time-consuming process that involves handling rotated graphics.
- Check desktop/web font encodings. (They should support Unicode characters especially German).
- Growing vectoral background paintings might cause issues, provide how SVGs should look with samples to developers.
- While exporting SVGs including texts, convert text as vector shapes (Sketch). (Otherwise uhuu might draw or position texts incorrectly.)
- Ensure SVGs are exported without
CSSclass attributes. Exporting SVG (Adobe Illustrator). - Footer / Header / Margin boxes of a page (reference below) that contain dynamic data ( such as page counters) should have single design style through the area. Avoid using multiple font weights, colors, underlines etc in a single area.
- Make sure language files are exported seperately as CSV, each language should be in individual file, avoid using excel styling, Download Sample Language CSV. Test converting via Uhuu Utility - JSON/CSV.
Checklist before change requests from developers
- Try to use the same placeholders/images for design iteratations and revisions. For example, if a design has "Alena Rausch" for a title, always use the same title in the design's revisions. (Changing titles requires developers to find and change bound sample data.)
- For printable template changes that include print partner in the loop, make sure revisions are first approved by print partner before sending to developers. For example if print partner requests text position changes on cover, first send to print partner, ensure it is correct and then send to developers.
- When a font family or font weight changes, update the design before sharing the font revision with developers. Deliver new font(s) in woff, woff2 formats for web and in ttf or otf formats for desktop.
Translation Tips
- While working on translations using Excel or Numbers, you can use
Option + Enterfor line breaks. - Translation strings surrounded by curly brackets are programable keys for integrating dynamic values into your translations. For example,
I am {{ name }}uses{{ name }}for interpolation, text between curly brackets{{ name }}should not be changed.
Hot Tips
- Exporting SVG (Adobe Illustrator)
- Learn paper sizes in different units.
- Paged.js Margin Boxes documentation.
Do you have a recommendation or a hot tip to share? please mail us to improve.