Adrián Somoza _____________ Buenos Aires /// Workshop

__
Dominando las grillas
en el diseño digital.

Miércoles 13 de Junio, 2018 ________________________///

Adrián Somoza _____________ Buenos Aires /// Workshop

Porqué usar
grillas?

/// Dominando las grillas en el diseño digital

“ Según Massimo Vignelli, la grilla:

●
Ayuda a organizar el contenido.

Provee consistencia.

Crea un aspecto de orden.

Proyecta un nivel de elegancia intelectual

que “nos gusta expresar” (y a mí también).

Miércoles 13 de Junio, 2018 ________________________/// 2

Adrián Somoza _____________ Buenos Aires /// Workshop

Lo que determina si dominamos a la grilla o si la grilla nos

domina a nosotros, es la manera en la que definimos la
relación entre los elementos del diseño y la grilla.

Quién domina
a quién?

/// Dominando las grillas en el diseño digital Miércoles 13 de Junio, 2018 ________________________/// 3
Adrián Somoza _____________ Buenos Aires /// Workshop

Grilla 1
Diseñador 0

/// Dominando las grillas en el diseño digital Miércoles 13 de Junio, 2018 ________________________/// 4
Adrián Somoza _____________ Buenos Aires /// Workshop

Diseñador 1
Grilla 0

/// Dominando las grillas en el diseño digital Miércoles 13 de Junio, 2018 ________________________/// 5
Adrián Somoza _____________ Buenos Aires /// Workshop

Helvetica Posición de los elementos:

Dos o más elementos que comparten

un mismo eje, están relacionados
conceptualmente, por más de que no
Tipografías estén uno al lado del otro.

Bodoni
Futura
Garamond
Baskerville

/// Dominando las grillas en el diseño digital Miércoles 13 de Junio, 2018 ________________________/// 6
Adrián Somoza _____________ Buenos Aires /// Workshop

Tamaño de los elementos:

Usar los ejes de las columnas para

definir el ancho máximo de la caja de
texto porque:
1. El texto podría ser más largo o
más corto.
2. La plataforma podría estar en
varios idiomas.

/// Dominando las grillas en el diseño digital Miércoles 13 de Junio, 2018 ________________________/// 7
Adrián Somoza _____________ Buenos Aires /// Workshop

__
Consideraciones
para responsive.

/// Dominando las grillas en el diseño digital Miércoles 13 de Junio, 2018 ________________________/// 8
Adrián Somoza _____________ Buenos Aires /// Workshop

Desktop Tablet Mobile

— — —

/// Dominando las grillas en el diseño digital Miércoles 13 de Junio, 2018 ________________________/// 9
Adrián Somoza _____________ Buenos Aires /// Workshop

Desktop Tablet Mobile

— — —
Columnas: 12 Columnas: 6 Columnas: 2
Calle: 40px Calle: 40px Calle: 20px
Márgenes: 130px Márgenes: 40px Márgenes: 20px

/// Dominando las grillas en el diseño digital Miércoles 13 de Junio, 2018 ________________________/// 10
Adrián Somoza _____________ Buenos Aires /// Workshop

__
Ejercicio.

gum.co/bancogalicia

/// Dominando las grillas en el diseño digital Miércoles 13 de Junio, 2018 ________________________/// 11
Adrián Somoza _____________ Buenos Aires /// Workshop

Realizar al menos una composición para Desktop, Tablet y

Mobile con los siguientes elementos:
● 1 título.
● 2 párrafos.
● 8 imágenes.

Texto: #FF6600 /// Imágenes: #878A98 /// Fondo: #4F5159

Consigna:

/// Dominando las grillas en el diseño digital Miércoles 13 de Junio, 2018 ________________________/// 12
Adrián Somoza _____________ Buenos Aires /// Workshop

Ejemplo:

/// Dominando las grillas en el diseño digital Miércoles 13 de Junio, 2018 ________________________/// 13
Adrián Somoza _____________ Buenos Aires /// Workshop

__
Recursos.

/// Dominando las grillas en el diseño digital Miércoles 13 de Junio, 2018 ________________________/// 14
 Adrián Somoza _____________ Buenos Aires /// Workshop

Libros Instagram Dribbble

— — —
Te dejo una serie libros que han influenciado Lo mismo para Instagram. Podes seguirme acá y Podes visitar acá algunos perfiles de colegas que
fuertemente la forma en la que diseño: acá. Y te dejo otros usuarios que me gustan para me gustan:
que busques inspiración:

● La psicología de los objetos cotidianos ● AIGA ● ALEXEY MASALOV

The Vignelli Canon (gratis) ● PENTAGRAM ● GARETT DEROSSETT
● Elementos de estilo tipográfico ● FUTUR NEUE ● MILKA
● Sistema de retículas ● STEFAN HUERLEMANN ● SKINNY SHIPS
● No me hagas pensar ● ERIC PARE ● JOHNY VINO
● Designing for emotion ● MOTION GRAPHICS ● GLEBICH
● Designing for the web (gratis) COLLECTIVE ● ERAN MENDEL
● Designing web interfaces ● KIRILL KIM
● Principios universales del diseño ● AARON IVAN
● Seductive interaction design ● GAL SHIR
● Contagioso ● THERAA
● Mobile first ● NET GURÚ
● La Grilla, Tipografía Venancio ● MIX PANEL
● ANDREW BAYGULOV
● HRVOJE GRUBISIC
● INKRATION
● ANIMADE
● ANTON SKV
● M2H AGENCY
● UI8
● KOKO PAKO
Pinterest ● ANDRE KRAJCIR
— ● NICKSKINARNIA
Podes ver mis tableros públicos de Pinterest acá. ● EIGHT HOUR DAY

/// Dominando las grillas en el diseño digital Miércoles 13 de Junio, 2018 ________________________/// 15
Adrián Somoza _____________ Buenos Aires /// Workshop

__
Gracias!

YouTube / Instagram / Dribbble

@hellobont & @adriansomoza

Miércoles 13 de Junio, 2018 ________________________///