Escuela de Sistemas (VF)
Aprende a pensar en Sistemas y trabajar con ellos

Para acceder a mis cursos y a los artículos relacionados (notas a pie de página), debes registrarte en Patreon. Para ver qué obtendrás al registrarte, visita mi página de PATREON ¡Gracias!

¿No sabes cómo ni por dónde empezar? Te recomiendo empezar con el nivel de Supporter de 6 €. Es una buena manera de adentrarse en los conceptos esenciales del Diseño de Sistemas Visuales Flexibles desde el principio.

Una vez que hayas completado el curso básico, de Estudiante por la mejor opciónes ascender al nivel Student por 12€. Esta ampliación te da acceso a todos los cursos anteriores y futuros, además de a nuestra vibrante comunidad de Discord, lo que te ofrece una experiencia de aprendizaje más enriquecedora. Recomiendo realizar los cursos en el siguiente orden:

Lección 1: Introducción
Mirar al pasado nos ayuda a comprender por qué estamos donde estamos, pero también a asegurarnos de que hay algo que vale la pena rescatar del pasado y traerlo al presente. Empecemos por definir qué es una Identidad Visual.

Lección 2: Diseñar Lenguajes
Estamos asistiendo no sólo a una tendencia, sino a un cambio en la forma en que las organizaciones, instituciones y corporaciones se comunican. La identidad visual está transformando sus mecanismos.

Lección 3: Logo ≠ Identidad Visual
Muchos aún consideran que el logotipo es la pieza central de una identidad visual, si no la única. Pero poco a poco, nuestra forma de pensar está cambiando.

Lección 4: ¿Por qué las identidades se han vuelto más flexibles?
En las últimas décadas ha habido un interés cada vez mayor en las IVF, y muchos estudios de diseño han comenzado a abandonar la idea del logotipo como pieza central de una IV y, en cambio, han dedicado sus prácticas al desarrollo de sistemas visuales para IVF.

Lección 5: Son las IVF algo nuevo?
Si bien la aplicación de un sistema visual flexible puede haber sido más difícil antes de Internet, o incluso en la era pre-pantallas, se pueden encontrar muchos ejemplos de sistemas visuales flexibles en la historia tanto en disciplinas relacionadas con el diseño como no relacionadas con él.

Lección 6: El Manual de Diseño
Los manuales de diseño existen desde el momento en que un diseño debía ser aplicado por alguien distinto al diseñador original. El manual proporciona instrucciones estrictas sobre las proporciones de un diseño. A menudo se utilizan construcciones geométricas, como retículas, para lograr la mayor precisión posible.

Lección 7: La Pantilla de Diseño
Mientras que un manual de diseño es simplemente una guía para reconstruir un diseño específico y contiene la posibilidad de interpretación, una plantilla no permite desviación alguna del diseño original.

Lección 8: El Kit de Construcción
Limitar el número de elementos que componen un diseño no solo es una decisión económica, también simplifica la apariencia general y facilita su reconocimiento.

Lección 9: El Programa
En 1964, Gerstner escribió un libro titulado “Diseñar programas”. Si bien los tipos de sistemas vistos en lecciones anteriores tratan con objetos tangibles, las ideas de Gerstner son intangibles al principio. En lugar de dibujar formas concretas, Gerstner diseña programas que generan formas.

Lección 10: Cómo funcionan las Identidades Visuales actuales?
Aunque el enfoque de Gerstner se acerca bastante a una Identidad Visual Flexible contemporánea, hay algo que no pudo prever…

Lección 11: Sumario y Proyecto Final
En esta última lección, voy a resumir todo lo que hemos abordado, darte la oportunidad de volver atrás si crees que pasaste algo por alto y darte una tarea final para poner en práctica lo que has aprendido.

Entrevista:
Jonas Deuter

Lección 1: Creatividad Sistemática, ¿un Oxímoron?
La creatividad sistemática hace que tu trabajo sea más eficiente y eficaz, sin restarle libertad creativa. Al contrario, potenciará tu creatividad.

Lección 2: Teoría de Sistemas
Si System Theory conduce al System Thinking, System Design debería conducir al System Doing.

Lección 3: Limitación
¿Alguna vez te has limitado a una paleta de colores, un juego de bolígrafos, un software, unas pocas formas o una tipografía? Si es así, probablemente hayas desarrollado, consciente o inconscientemente, un sistema.

Lección 4: Iteraciones
Los sistemas pueden volverse muy complejos y las posibilidades son infinitas, así que ¿cómo lo hago para no perderme?

Lección 5: Fritz Zwicky
Hasta la búsqueda misma de las variables que quieres utilizar para tu sistema puede ser sistemática. En lugar de seleccionarlas al azar, puedes trabajar con una caja morfológica para ser consciente de todas las posibilidades, antes de elegir una conscientemente.

Lección 6: Karl Gerstner
No se pueden agregar más parámetros a la caja morfológica porque solo tiene tres ejes. La única forma de agregar más parámetros es convertir el cubo en un plano o una tabla y usar las filas para los parámetros y las columnas para sus valores.

Lesson 7: A box for FVS
La caja morfológica de Gerstner que mostré en la última lección proviene de su libro “Diseñar Programas”. Su propósito, además de explicar el funcionamiento del método de la caja morfológica de Zwicky, era mostrar las opciones que tiene un diseñador al diseñar marcas denominativas. Sin embargo, dado que el diseño ha evolucionado desde los años sesenta hacia identidades visuales menos basadas en logotipos y más en sistemas, me preguntaba cómo sería una caja morfológica para sistemas flexibles de identidades visuales…

Lesson 8: Sumario y Proyecto Final
Las lecciones de este curso deberían haberte ayudado a hacer más eficiente y efectivo tu proceso sin quitarte libertad creativa. Te deberían haber ayudado a aprender a concentrarte, a profundizar en tu exploración, a hacer transparente el proceso de diseño, a identificar elementos clave y a distinguir entre los esenciales para tu trabajo y los que perjudican el resultado. Si no es así, aquí tienes un resumen de todas las lecciones para que te sea más fácil volver a repetirlas. … ¡y un proyecto final! 🙂

Lesson 1: Introduction
In this course, you will learn how to design flexible systems for visual identities based on form. The 3-Step method “Components, Assets, Application” is the main approach used in the book Flexible Visual Systems. 

Lesson 2: What do I mean by …?
Before I show you how helpful this three-step approach to designing flexible visual systems is, let me explain some of the terms I am constantly using.

Lesson 3: Components
In this lesson, you will design your own custom component which you will use later to design your assets. Using your own components makes your visual identity distinctive.

Lesson 4: Asset Symbols
Assets are an efficient way to enable teamwork. But also if you are working alone you will see that you will be much faster by applying pre-build assets. 

Lesson 4.1: Asset Line
The next asset we are going to build is a line because a line is nothing else than the one-directional repetition of a component.

Lesson 4.2: Asset Frame
Using the line assets from the last lesson and deleting components I am creating frames.

Lesson 4.3: Asset Shape
Shapes with characteristic edges are very useful assets too. I use them as masks and place illustrations, photos, or text inside of them.  And they are soooooooo easy to make. 

Lesson 4.4: Asset Letters
Using the components you designed, you can design a distinctive modular font. 

Lesson 4.5: Asset Pattern
It is obvious, but patterns are a fantastic asset too. You can find them in any culture, they can be adapted to any format and application and are easy to build with just one component and a couple of colors.

Lesson 5: How to Apply Your Assets?
In each lesson, I already made suggestions on how you could use your assets. You might think that there are infinite ways how to apply them, but you know what? There are actually only four ways to apply your components and assets.

Lesson 6: Summing Up & Final Project
You made it! This is already the end of the course! Congratulations! Before I say goodbye and see you soon, I will sum up what we have done and how you could make use of it.

The CAA Method Explained
I am explaining in this footnote the dynamics of the design processes of form-based visual systems.

Stacked Components
In the CAA course, I am not discussing the possibility of stacking components. Here are a couple of case studies of visual identities using stacked components.

Lena Weber
In my book Flexible Visual Systems as well as the course The CAA Method I am working with basic geometric shapes to make keep the identities as generic as possible, so you would substitute them for other shapes. Lena shows you how to work with organic shapes.

Interview with Supermarket
At the beginning of the year, William McLean contacted me, and what he showed me blew my mind. Supermarket, the design studio he co-directs with Kernow Craig and Jeremy Walker, has built a design tool, based on the chapter about form-based systems in my book Flexible Visual Systems. It is so good, I had to interview them.

Lesson 1: Amuse Gueule
This is the fourth course I developed for FlexibleVisualSystems.info!!! To celebrate this milestone I am releasing the first lesson of this course for free for everyone! It is an Amuse Gueule that hopefully motivates you to keep on studying systems in type design. 

Lesson 2: Form Follows Function
I hope you enjoyed the first lesson and are ready to dive into a deeper understanding of typography, type design, and lettering. When I say “deeper” I refer to everything you need to know about systematic type design in general and modular letter design.

Lesson 3: Form Follows Function II
Let us look in this lesson at a more detailed distinction between different types of fonts, and the new DIN classification. It is really helpful to learn something about the architecture of letters and their readability.

Lesson 4: Form Follows Tool
In this lesson I will explain the theory of Gerrit Noordzij, which is easy to understand, and therefore a very powerful tool for teachers and students alike.

Lesson 5: Form Follows Grid, Part 1
In the last lesson, you learned about how Form Follows Tools and the theory of Gerrit Noordzij. One of the most important lessons in type design. Learning to use or make a writing tool is a very interesting subject I might explore in another Footnote Article or FVS Course. But we have a task we must focus on Modular Type Design. 

Lesson 6: Form Follows Grid, Part 2
In this lesson, I would like to have a look at grids. What are they good for? What is the right kind of grid? Are there more than just grids made of squares and rectangles?

Lesson 7: Form Follows Grid, Part 3
In part three of the Form Follows Grid lessons of the Modular Type course, I will summarize the modular approach to type design from my book Flexible Visual Systems. Paying attention to the details of the components is a beautiful way of making complex lettering with relatively simple letter structures. This approach lets you use your component creation skills from the CAA (Components, Assets, Application) course.

Lesson 8: The Grid of Tp ESPN Next
In the last lesson, I showed you grids that are built by the repetition of triangles or squares of the same size. In this lesson, I will show you a grid that works with modules of different sizes to obtain column and row gaps. I will also show you how diagonals need optical corrections in a rectangle grid to appear of similar weight. 

Lesson 9: Components First
In the last lesson, I showed you a grid with column and row gaps, how the design of the font emerged out of the grid, and how the grid helped to establish consistency. In this lesson, I will show you that you do not need a grid to achieve consistency.

Lesson 10: Summing Up
In this last lesson of the Modular Type Design course, I will sum up what you have learned so far. If you are not sure if you really explored all the possibilities of a lesson or exercise, I recommend going back and redoing the lesson or exercise. You learn the most from doing, not reading. At the end of this last lesson, I will give you inspiration where you could take your new (embodied) knowledge.

Interview with the Elisava Master students
Since 2006 I have taught at the prestigious Barcelona design school ELISAVA, and even co-directed a Postgraduate Degree. At the Master of Visual Design, led by Marc Panero, I have taught since 2020 a fun workshop on Systemic Type Design. Although we just have 5 days, the results are always beyond everyone’s expectations.

Interview with Mitch from Dia
DIA is a Brooklyn-based creative studio specializing in kinetic identity systems, graphic design, and typography. The core team are Mitch Paone, Meg Donohoe, and Deanna Sperrazza. With clients ranging from Nike and Samsung to the U.N., DIA’s work has reached international fame through its unique mixture of traditional and kinetic typography.

Interview with Felix from Feixen
Felix Pfäffli, who founded Studio Feixen in 2009. Felix teaches at the Fachklasse Grafik Luzern and is the youngest member in the history of AGI. Besides winning prizes worldwide, he has also given lectures and organized exhibitions and workshops. In his own words, he is responsible for the “necessary chaos” in Studio Feixen’s designs.

Modular Type Design
… with the Students of Elisava’s Master of Visual Design 2023/24. One of my favorite weeks of the year is the week I am spending with the wonderful students of the ELISAVA Master of Visual Design, directed by Marc Panero. I have taught this fun workshop on Systemic Type Design since 2020; it is becoming more fun every year.

Modular Type Design
Another year, another fun workshop with the wonderful students of the ELISAVA Master of Visual Design. As every year, I interviewed a couple of them, and this year I even had to make two pages. This is page one.

Lesson 1: Introduction
If you are new to Flexible System Design, the course “Grids as Transformational Tools — How Grids Can Become Visual Identities” will give you a whole new perspective on System Design. 

Lesson 2: Making a grid with a circle
Let’s begin. The initial step is to create a grid using shapes. I’ll begin with a circle. By the way, I’m using Adobe Illustrator, but feel free to utilize any tool you prefer. What I’m teaching is an approach, not a specific tool.

Lesson 3: Making a grid with a triangle
Lesson 2 was fun! Let’s experiment with a couple more shapes to make grids. As in my book, I am going to stick to geometric shapes because they are easy to work with. I recommend reproducing my grids first but then feel free to make your own. Try either a different position, repetition, or even shape. In this lesson, I will work with a triangle.

Lesson 4: Making a grid with a square
We arrived at the last lesson using a geometric shape to create grids and patterns. In this lesson, we are going to experiment with a rectangle. It might seem the most boring of shapes but don’t underestimate its potential. 

Lesson 5: Making a Three-Dimensional Grid
In the past lessons, we have prepared various two-dimensional grids. It is time to enter the lesser-used third dimension and create more distinctive grids. As you already know, “distinctiveness” is the secret to a unique Visual Identity—an Identity that stands out and is recognized.

Lesson 6: Using the Grid as a Transformational Tool
In the previous lessons, we prepared grids based on circles, triangles, and rectangles and even took them to the third dimension. Any of these lessons could be the beginning of the development of a Visual Identity. The part that has been missing so far is how to use the grids. Let’s dive into this part of the project now.

Lesson 7: Focusing on Masks
We have learned in the previous lessons how to make grids and how to use them to generate distinctive shapes, which become the identification element of visual identity. It is important to repeat that we have designed a design process, not a library of assets. By drawing the shape every time from scratch, the shape can respond to each deliverable’s formal and semantic needs. This gives you much more creative freedom. You can draw shapes that play with the format you are working on and the communication concept your Identity follows. In this lesson, I want to show you a couple of communication concepts that appear when using distinctive shapes as masks for images.

Lesson 8: Focusing on Typography
In the previous lesson we used the shapes, which derived from the grids, as masks for images. In this lesson we will focus on the possibilities we have with typography. At least some of them. There is always room for further exploration and I am curious about what you will come up with.

Lesson 9: Multi-Layered Designs
In 2011, we, TwoPoints.Net, made a book called “Pretty Ugly.” It documented a “rebellious” movement that challenged functional, easy-to-the-eye design. The bad, ugly, amateurish, and dysfunctional were elevated to a new beauty. A rebellion that stopped being a rebellion when it opened new spaces of exploration and perception.

Lesson 10: Summing Up
You made it! You completed the course “Grids as Transformational Tools.” It took us several weeks, in some cases even months, to learn, reflect, and experiment. The more time you took, the more possibilities opened up to you. A couple of great ideas might have got lost. To remember them and also make you proud about what you have learned, I will sum up in this lesson what we have done in the course.

Footnote Interview: Pretty Ugly
There are moments when leafing through the pages of Pretty Ugly, that you’ll feel a little perplexed. Not by the stretched and layered type that practitioners of the New Ugly graphics movement use to obscure the messages contained in their work, nor by the fact that brands and organizations are trying to sell themselves with these deliberately obtuse images. What you’ll find so confusing, rather, is just how beautiful most of the projects appear, despite their creators’ best attempts at visual rebellion.

Lesson 1: Introduction and Set Up
The world of modular variable fonts. In contrast to the course Modular Type Design, I won’t explain the basics but jump directly into hands-on lessons. So, if you haven’t taken the Modular Type Design course yet, I recommend you do that first.

Lesson 2: Emergent Opportunities
In lesson 1, I mentioned a couple of terms that need explaining: Form-Based System, Modular Variable Font, and Emergent Identity. Before we start sketching our font, I need to elaborate on the mentioned terms because they give you the perspective you need to understand that your font can be more than just a font.

Lesson 3: Components & Letters
In the last lesson, I discussed concepts relevant to this course. Zooming out into the macro to see the opportunities the micro gives you was essential. This is a lesson I learned in life: Don’t become a Creative Director who does not understand what the Art Director and Designer do. Creativity is not a top-down process.

Lesson 4: Draw the whole f****** font
In the last lesson, you learned how to draw a letter with the pixel tool. Now, I will show you what to consider when drawing your entire font.

What’s Next?

The FVS Curriculum
Light Grey = Courses I am working on
Yellow = Footnotes to Courses
Light Pink = Additional Learning Material