Contour

Contour is a no-code software extension built into Adobe Illustrator used to create editable media templates for the web. Designers use the Contour extension to design configurable media templates. Contour’s interface allows them to select elements in the design that will become editable on the web. They can publish the editable template on their website and Contour will produce print-ready PDFs of the customized design for their website users.

Link contour.h2lk.com ↗︎
Roleengineer & UX/UI designer
engineering collaboration Kaveh Mohammadpour↗︎
design collaboration Kayla Van Der Byl↗︎
Infodeveloped using Adobe Extendscript, React, Node.js

Contour AI Extension

Contour is an extension built into Adobe Illustrator that allows designers to lay out media templates using their normal workflow and configure the editable components of the design for the web. It reads data from the artboard and provides configuration parameters for each area of the template that should be editable on the web.

Extension Functionality

The extension supports complete configurability of text input areas. The designer chooses the following bounds of editability for the template when it is published on the web:
• fixed or scalable font size
• alignment
• number of line breaks and line height
• letter case
• text input validations.
Version 2 of the extension also supports image upload areas.

UX Design

Contour sits inside of Adobe Illustrator, thus I wanted to ensure that it's user experience aligned with that of Adobe's software suite. I collaborated with designer Kayla Van der Byl↗︎ to develop brand guidelines and icons that satisfied the useability and aesthetic conventions that already exist in Adobe's software ecosystem.

Icons

Editable Media Template

Once the designer clicks 'Publish', the media template is uploaded to Contour's web portal where all published templates can be viewed and managed. The template is now customizable in the web browser and can be embedded into any website using a provided embed code.

Print-ready

Now any visitor to the website can customize the template. Contour provides an export feature that allows the website owner or user to create a print-ready, CMYK-converted PDF of the customized design. The PDF can be sent directly to any print manufacturer to print the customized poster, flyer, sign, or card.

FUTURE

Contour was developed to help graphic designers integrate their skillset into the web ecosystem. Our view is that customizable design will continue to become prominent on the web. Contour is an evolving project that will accomodate other uses in the future.