Designing in Outfit

Using the latest that globally accessible web technology has to offer, Outfit enables a wider community of designers to create on brand collateral that is also scalable. This process would surpass the use of relying on bulky design files that can only be accessed by those with expensive design programs, we can open design files to a massive community of web designers.

What do we design in Outfit?

Instead of designing in the traditional ‘artboard’ workflow of create, copy, reposition, repeat, at Outfit we apply a one size fits all approach. A brand’s style guide and all it’s nuances can be programmed into a template so collateral is always adhering to those guidelines, however the repetition of content is eliminated by only using one set of elements that are dynamically repositioned, when constrained to certain dimension compositions (in Outfit we call these Formats).

These traditional design files can be collated in Outfit into a template. The definition of an Outfit template is that it represents a pre-defined design or layout, with a distinct purpose and similar elements. These templates are then provided to authors who can dynamically edit elements within the templates design (we call these dynamic elements, Inputs). For brands entering Outfit we have a few examples for what a template could be:

  • Digital Collateral for a Marketing Campaign

    This would include a suite of documents for social media and web ads. The template would have strong continuity between the different ad sizes, be distinctly linked visually and include the same editable elements.

  • Re-purposed Infosite for Ad-Hoc Events

    This would simply be an on-brand infosite with a variety of section types to allow authors to create websites efficiently and allow a quick turnaround.

  • Internal Bulk Business Card Generator

    Repeatable content, with differing text variables, like Business Cards can also be converted into a template to remove the need for internal production queues and speed the process of delivery.

What Tools do we use?

Outfit utilises the power of HTML, CSS, JS and even SVG to create templates, instead of using the Adobe suite or bespoke design utilities like Sketch or even Canva. Here is a list of all the supported file types we can utilise within a templates repository (things like .ttf, .png, .jpg and any other file type that can be used within a template can be externally linked to a template, however it cannot currently reside within the repository).

.html, .css, .js Yes
.svg Yes
.mst, .mustache Yes
Preprocessors (ie. scss, sass, less) Some day