( Case Study )
( About )



Case Study


Work System: Fasten the Print & Web Delivery Process

RESEARCH / UI DESIGN / BRANDING / PROGRAMMING



In current communication process, there is a separation of printed and digital media production, I began 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 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 this ideas helped me to create an open branding with code’s help.


( 2 )

Responsive Logos


Having a responsive logo helps 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 not 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 in:

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


by 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 pawerful 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 file differentiation: scripts and exports.


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