IxDF Developer Docs

Appearance

Template module overview ​

What are Templates? ​

Many of our articles feature downloadable templates, which are files that set out the best practices for different design deliverables, processes, etc. These templates are valuable assets for marketing as well. Each template has its own download page, where anyone can download the template for their own use.

Each template has the following properties defined:

  • Name: E.g., "Moveable Pieces", "Breadcrumbs"
  • Slug: E.g., "moveable-pieces". The slug will be automatically created based on the name of the template, but it can be overridden. It used in the URL for the download page, e.g. "https://www.interaction-design.org/template/moveable-pieces"
  • Thumbnail image: Displayed in the template download page, emails etc., as a preview of the template
  • Description: Displayed in the template download page to briefly describe the template
  • File URL: Link to the file located in our S3 server
  • Heading: (Optional) We can manually define a heading to override the heading displayed in the template download page. This is usually for rare cases where the default "formula" for the heading is grammatically wrong.
  • Linked template bundle(s): If a template has a bundle defined, that template bundle will be shown in the template’s download page. See below for more details on what a template bundle is.

What are Template Bundles? ​

We can group several related templates together to form what we call “master bundles” - these are highly valuable packs of templates that require the user to share about it before they can download it. For instance, we can have a master bundle for “UI Design” templates, which contains all 24 templates used in “UI Design Patterns for Successful Software” lesson articles.

Each template bundle has the following properties defined:

  • Name: E.g., "Design Thinking", "UI Design"
  • Slug: Unique URL-friendly string, part of the URL. E.g if the slug is design-thinking, then the full URL would be *https://www.interaction-design.org/template-bundles/design-thinking*
  • Picture: The full-sized version of the template bundle preview image
  • Thumbnail image: Displayed in the template bundle download page, emails etc., as a preview of the bundle
  • Templates: A list of templates that are included in the bundle (a template can appear in more than one bundle)
  • Zip File: The filename of the template bundle zip file stored in our S3 assets server. On the live site (production), this file will automatically be re-created whenever a template is added or removed from the template bundle

Thumbnail images ​

All templates and template bundles have a thumbnail image. The thumbnail images are PNG files created using Photoshop templates, located in our Dropbox folder /IxDF Dropbox/IxDF - Design/3-templates/course-templates-previews.

Remember to optimize the PNG files generated using the template before uploading them.

Inserting Templates into Articles ​

Part of the template control panel’s function is to allow you to insert template UI elements into UX Daily articles, via rich text editor. You may do so via the Article Control Panel. All downloadable templates within articles should be inserted as a template UI element, rather than a direct link to the file.