( Case Study )
( About )

Case Study

Work System: Fasten the Print & Web Delivery Process


In current communication process, there is a breakup of printed and digital media production, I did an investigation project that wants to combine both areas to create a dynamic branding architecture that can fasten the graphic design delivery process.

This idea helped me to win the SOTA Catalyst Award, and let me explain the process in conferences for Typelab@Typographics, TypeCon, IxDA, TMX, and more.

( 1 )

Main Concept

Code can help to store graphic's data to automate the design process.

Variable fonts came out in late 2016, having a web and branding background, I started to wonder how they could affect these areas.
I did some experiments and these ideas helped me to create an open branding with code’s help.

( 2 )

Responsive Logos

Having a responsive logo will help you to adapt your brand to different spaces and situations in the future. It helps your design grow with the brand.

Right now, more than ever, we have variable environments. This means that we don't only have different sizes in screens — tablet, mobile, desktop — but also in print. You design in every scale, from a business card to huge billboards and posters. With this in mind, I did some experiments with variable fonts to store the logo information in code.

I talk more about this topic:

Here’s Why You Should Be Thinking About Responsive Logo Design

in The Adobe Blog

The digital version of a logo should work in a variety of spaces: web headers, in square and circular spots on social media, and more print and web media.

( 3 )

Information Flow and Structure

As mentioned before, part of the project is to have a fluent brand that doesn't separate print and digital media. The following image shows a concept map of how the information travels between the user and the system to make a change/update to the brand information.

Every design item is populated using a database. In this case, the user can have access to it with a web server that synchronize data between print and web items.

( 4 )

Personalized Experience

Having a database helps to provide the user a personalized experience in web and print items.

( 5 )

Python for Graphics

Python is a very powerful programming language that can be used as a universal form of communication between files. By doing this, data can transfer easier between print and digital. These merged areas can now facilitate access, not just with designers and programmers, but with other production stakeholders: project managers, copywriters, printers, etc. – that can edit content without changing the design aesthetic.

By automating deliverables, the design process becomes streamlined and more productive. This is not limited by programs or software, but it's managed as a file differentiation: scripts and exports.

The final product is a working brand using this system that sync automatically between design with back and front end development.