3.1: C.R.A.P. Principios de Diseño Gráfico

“Todos somos inherentemente comunicadores visuales. Considera jardín de infantes: crayones, pinturas de dedos y arcilla impulsaron nuestra expresión, no procesadores de texto ni hojas de cálculo...”

“Desafortunadamente, en algún lugar, en algún momento, alguien probablemente te dijo que no eras muy bueno dibujando. Y, después de mirar a tu alrededor y compararte con otros niños en el aula, probablemente consentiste, tiraste la toalla y decidiste que las clases de piano o fútbol podrían ser una mejor apuesta para la gloria de la educación primaria”.

“Ahora, como adulto, puede que ya no lo intentes, al menos en el ámbito visual. Esto es irónico considerando que tus empleadores y colegas te evalúan por lo bien que te comunicas, una habilidad que se refleja en las revisiones anuales, aumentos salariales, promociones e incluso tu popularidad. La comunicación efectiva es un requisito de trabajo ahora, ya sea que esté tratando de vencer a los competidores, comunicar visión, demostrar liderazgo de pensamiento, recaudar capital o cambiar el mundo de otra manera. Y te guste o no, tu profesión probablemente requiera que te comuniques usando una herramienta visual, independientemente de tu dominio o formación en este medio. Las escuelas de negocios en particular perforan a sus alumnos en gestión, contabilidad y tecnología, pero pocas ofrecen algo que se acerque al Diseño 101, una cosa que combina el pensamiento creativo, la analítica, la asimilación de datos y la capacidad inherente de expresarse visualmente”. Duarte, Nancy, slide:ology: el arte y la ciencia de crear grandes presentaciones, O'Reilly Media, Inc. 2008, p2.

-Nancy Duarte

Objetivos de aprendizaje

• Compara y contrasta ilustraciones usando principios de diseño gráfico: contraste, repetición, alineación, proximidad (C.R.A.P.)
• Comparar y contrastar ilustraciones usando principios de diseño de anuncios (imagen, título, texto, logotipo)
• Comparar y contrastar ilustraciones usando principios de diseño de tipos (fuente, tamaño, peso, color, forma, dirección)
• Distinguir entre diseños que entran en conflicto frente a diseños que van bien juntos
• Categorizar fuentes basadas en inspección visual
• Manipular imágenes y texto para recrear un anuncio de mejores prácticas en PowerPoint
• Elija y emplee con éxito técnicas de PowerPoint para resolver una tarea compleja

Introducción

¿Cuánto diseño gráfico necesitas en los negocios? Teniendo en cuenta el fuerte énfasis que actualmente se pone en “el aspecto” de los entregables, la respuesta podría ser mucho. No pretendemos que te convertirás en un maestro del diseño gráfico después de solo un capítulo. No obstante, existen algunos principios de supervivientes del diseño gráfico establecidos por Robin Williams. Esos principios son contraste, repetición, alineación y proximidad (C.R.A.P.) .

Aprenderás a ver el mundo de una manera nueva. Durante años, has mirado diseños de revistas, anuncios, banners, volantes, etc. algunos te han llamado la atención y otros no. A menos que hayas sido entrenado en diseño gráfico, lo más probable es que te resulte difícil vocalizar lo que se trata de un layout que te atraiga.

Los principios de diseño gráfico, diseño de anuncios y diseño de tipos se repetirán a lo largo del texto al diseñar los siguientes entregables:

• Anuncios
• Sitios web
• Currículums
• Papeles a término
• Presentaciones de PowerPoint
• Hojas de Cálculo
• Gráficas

Todo lo que diseñes en este curso tendrá una sensación profesional. Nuestro objetivo es hacer que su trabajo sea indistinguible del trabajo que aparece en publicaciones como el New York Times y el Wall Street Journal. Darse cuenta de ese objetivo también te ayudará a convertirte en un valioso contribuyente en la fuerza laboral. Otros valorarán tu trabajo como profesional, pulido y comunicativo. También podrás dar orientación a otros sobre cómo mejorar el aspecto de sus entregables.

Robin Williams Robin Williams es el autor del Non-Designer's Design Book. Esta es una referencia esencial utilizada incluso en programas de diseño gráfico.

¿Dónde Estamos en el Ciclo de Vida?

Muchos proyectos de sistemas de información se conciben en un ciclo de vida que avanza por etapas desde el análisis hasta la implementación. El siguiente diagrama muestra las etapas que tocamos en el capítulo actual:

Contraste

El contraste enfoca nuestra atención y se debe utilizar para resaltar los puntos más importantes que el público debe quitarle. Los diseñadores deben usar colores, negrita y tamaño para distinguir partes del texto o una imagen y crear contraste. El contraste se utiliza en todos los aspectos de la vida. Por ejemplo, los joyeros suelen exhibir sus piezas de diamante sobre un fondo de terciopelo negro para dejar que las joyas destaquen. La página que estás leyendo utiliza encabezados para crear contraste con el texto.

El formateo, incluido el uso de una forma azul, crea contraste, llamando la atención sobre puntos de datos importantes en la gráfica de Excel.

Dar formato a los títulos para el título y los subtítulos crea contraste..

Contraste a través del peso visual

Otra forma de crear contraste es mediante el uso del peso visual. Creas un punto focal y luego guias el ojo del lector alrededor de la página. El punto focal principal es la imagen. El siguiente elemento “más pesado” de la página es el titular, seguido de la fecha, seguido del logotipo, seguido del texto del cuerpo. El ojo del lector se guía de un elemento al siguiente en función de estos “pesos”. El mayor error que cometen la mayoría de los estudiantes en el diseño de volantes es hacer que todo el texto tenga el mismo tamaño que si tuviera que ser legible a 20 pies de distancia. Mientras la imagen y el titular capten interés, un lector se acercará más para leer el resto del volante. Además, si cada artículo es del mismo tamaño entonces nada destaca y se ve poco profesional. La variación de los tamaños y pesos de las fuentes es fundamental para enfocar la atención.

Peso visual en acción. Observe cómo viaja su ojo alrededor de este volante en la secuencia numerada representada.

Contraste con Fuentes: Tipo de Diseño

Cuando trabaje con tipo, apunte a un diseño contrastante. Los diseños contrastantes crean interés visual y energía. Por ejemplo, cuando usas ropa de colores contrastantes, como rojo sobre azul marino, el atuendo puede ser bastante llamativo. Nuestros ejemplos seguirán las convenciones que Robin Williams establece en su libro.El libro de Williams, The Non-Designers Design Book analiza los principios de diseño para el diseñador novato.

Lo opuesto al contraste es la afinidad. Los diseños que demuestran afinidad muestran variaciones sutiles en color o brillo. El efecto general es agradable, aunque no particularmente notable. Por ejemplo, una persona que lleve un traje oscuro con corbata oscura estaría usando un atuendo que muestre afinidad.

En el diseño de tipos, un diseño que muestre afinidad es lo mejor para documentos formales, como invitaciones de boda y graduación. Para la mayoría de los otros documentos, use un estilo contrastante para hacer que sus documentos realmente destaquen. No obstante, adapte el contraste a la audiencia y a la ocasión para el documento. Por ejemplo, un plan de negocios preparado para un banco debe tener menos contraste que el diseño de este libro de texto. En caso de duda, sé conservador.

El único tipo de diseño que debes evitar es un diseño conflictivo. En una disposición conflictiva el tipo es muy similar pero diferente. Por ejemplo, nunca use dos fuentes serif diferentes en la misma página. Piensa en llevar un atuendo que tenga dos tonalidades diferentes de rojo que sean muy similares pero diferentes. La combinación parece un error, como si parte del atuendo se hubiera desvanecido en el lavado. De la misma manera dos fuentes serif lado a lado se verán como un error. Las fuentes deben ser idénticas o muy diferentes.

El texto de la siguiente página está tomado de La Declaración de Independencia de Estados Unidos y demuestra algún tipo de técnicas contrastantes. Al aumentar el tamaño de fuente y cambiar el color del texto, puedes resaltar ciertas palabras o información que deseas destacar. El objetivo es hacer que “Creador” destaque como la palabra más importante de la oración. También puedes negrita para dramatizar el peso del texto o cursiva para acentuar el texto. Dirección se refiere a agregar espacio entre letras para hacer que el texto destaque. La estructura, utilizando fuentes serif o sans serif, también puede diferenciar texto y se discutirá en la siguiente sección.

Contraste con Fuentes: Serif/Sans Serif

Las dos categorías principales de fuente son serif y sans serif. Las serifas son los trazos ornamentales al final de las letras, que tienen todas las fuentes serif. Sans serif significa sin serifs, por lo tanto las fuentes sans serif no tienen estas adiciones decorativas.

Las fuentes Serif y sans serif se pueden usar juntas para crear contraste dentro del texto. Por lo general, las fuentes sans serif se utilizan para los encabezados, mientras que las fuentes serif se usan para el texto principal.

Ten en cuenta que debes evitar combinar dos fuentes que sean de la misma categoría. Por ejemplo, dos fuentes serif que se ven similares, como Georgia y Garamond, no deben usarse juntas.

Las fuentes Serif se usan mejor en libros pesados de texto porque las serifas guían rápidamente el ojo del lector de letra en letra. Las fuentes Sans serif son la mejor opción para el texto en línea porque las serifas pueden desenfocar en los píxeles de una pantalla. La resolución de la mayoría de las pantallas de computadora no es suficiente para dibujar con precisión las serifas en un cuerpo de texto. El resultado tiende a verse borroso. Por lo tanto, la mayoría de los sitios web utilizan una fuente sans serif. A veces se hace una excepción para el título de la página, que por su mayor tamaño de fuente, puede mostrar serifas mucho más claramente. Para permitir serifs en línea, Microsoft desarrolló una serie de fuentes ClearType diseñadas para reproducir serifs con precisión.

Aunque las opciones de fuente son limitadas en línea, otras técnicas como el tamaño, el peso, el color, la forma y la dirección se pueden usar para crear contraste dentro del material en línea. El color es especialmente potente en un sitio web ya que la mayoría de los espectadores tienen un monitor de color.

Consulte el Apéndice para conocer las categorías de fuentes adicionales. Estos incluyen losa serif, moderno, escritura y decorativo.

Contraste con rellenos y contornos

Un relleno es el color, degradado o patrón que ocupa el interior de un objeto dibujado. Un contorno es el color, degradado o patrón que bordea el objeto dibujado. PowerPoint tiene amplias opciones de relleno y esquema.

Diferentes rellenos, mismo contorno

Mismo relleno, diferentes contornos

La repetición unifica una imagen

La repetición une objetos o imágenes. Por ejemplo, sabemos qué futbolistas están en un equipo por la repetición de sus uniformes. Este texto utiliza la repetición de fuentes, estilos y tamaños para unificar el diseño. En la página frontal, la repetición de elementos gráficos dibuja una imagen juntos.

La repetición del formato en los encabezados de texto crea un aspecto profesional unificado.

Este anuncio utiliza la repetición con los colores en el texto, la flecha, la mancha y el fondo para reflejar los colores en el logotipo y los nachos. Observe cómo este anuncio se ve más cohesivo y profesional. Un agradecimiento especial a Gregg Fouch por diseñar los materiales de marketing de Casa de Yuca.

Repetición con Color

Adobe tiene una maravillosa aplicación web gratuita llamada Kuler, que te ayuda a elegir una paleta de colores. Una de sus características más espectaculares es la capacidad de subir una imagen y hacer que Kuler genere automáticamente una paleta de colores a partir de esa imagen. Luego usas esa paleta para fuentes, rellenos, etc. en tu composición, y prácticamente tienes la garantía de que todos los colores funcionarán bien juntos.

Para utilizar las características más interesantes de Kuler primero debes crear una cuenta en: kuler.adobe.com. Ahora puedes guardar tus paletas de colores. Una vez guardado, puedes revelar los valores numéricos que corresponden a tu paleta de colores. Estos valores numéricos se pueden importar a PowerPoint (bajo color personalizado).

Kuler ayuda a crear una paleta de colores. Puedes crear una paleta de colores cargando una imagen. Después de guardar tu paleta, Kuler te permitirá ver los valores RGB asociados a cada color. A continuación, puede escribir estos valores en PowerPoint. Captura de pantalla del producto de Adobe reimpresa con permiso de Adobe Systems Incorporated.

Alineación

La alineación indica organización, pulido y resistencia. El texto en una página es más fácil de leer y entender si está correctamente alineado con el margen. La alineación debe aplicarse a cada diseño o diseño de página para mostrar el orden. La alineación en esta página se crea alineando a la izquierda todo el texto y los gráficos.

La alineación del texto organiza las categorías en el currículum.

La alineación de texto e imágenes en este anuncio crea un aspecto pulido y profesional.

Proximidad

La proximidad crea relaciones dentro de los objetos de una imagen. Colocar objetos juntos muestra su conectividad y enfoca la atención del público. Por ejemplo, los subtítulos colocados cerca de las fotos en un diseño de página muestran que describen las fotos que están cerca. La página que estás leyendo coloca encabezados junto al texto que introducen para significar su relación.

La proximidad ayuda a organizar esta hoja de cálculo en Excel. El título y el subtítulo están separados del resto de la hoja de cálculo.

La proximidad se utiliza para agrupar los enlaces en la barra de navegación. De igual manera se agrupan la imagen, el título y el precio de cada botella.

Resumen de diseño gráfico

El diseño gráfico es quizás el aspecto más creativo del diseño de información. Aunque el diseño deja espacio para la originalidad, hay principios claramente articulados que todo diseñador debe seguir para crear imágenes claras y efectivas. Adoptaremos cuatro principios básicos esbozados por Robin Williams. Estos principios que se han introducido en las páginas anteriores son: contraste, repetición, alineación y proximidad (C.R.A.P.).

Dominar estos principios te permitirá producir documentos claros y hacer que las presentaciones se vean más profesionales. Las tarjetas de presentación de la siguiente página demuestran buenos y malos ejemplos de cada principio de diseño. Por favor, estudien estos principios tal y como aparecerán una y otra vez a lo largo de este texto.

Buen contraste, repetición, alineación y proximidad.

El diseño soso carece de contraste.

Las imágenes que carecen de repetición parecen desconectadas.

La falta de alineación parece descuidada.

La mala proximidad carece de enfoque.

Diseño de anuncios: imagen, titular, texto y logotipo

Los principios del diseño gráfico C.R.A.P. son universales. Sin embargo, la mayoría de los medios tienen principios de diseño adicionales que deben seguirse. Por ejemplo, los anuncios tienden a seguir una convención en su composición. Estos principios adicionales se describen aquí y sirven de base para una de las asignaciones.

Un anuncio efectivo debe posicionar el producto de una manera atractiva para su público objetivo, al tiempo que demuestra el concepto de producto. Si bien hay muchas formas de diseñar un anuncio, adoptaremos el formato defendido por John McWade.John McWade escribió un excelente libro llamado Before & After Page Design. También mantiene un sitio web de diseño, www.bamagazine.com. Los cuatro principios de diseño de anuncios son:

• Imagen: Las imágenes son el punto focal de un anuncio y deben ocupar la mayor parte del espacio. Se utilizan para captar la atención de una audiencia.
• Titular: El titular de un anuncio debe ser conciso e ilustrado con una fuente clara. Esta es una de las pocas veces que funciona el texto centrado.
• Texto: El cuerpo del texto se utiliza para vender el producto. Entrega el mensaje a la audiencia.
• Logotipo: Cada anuncio debe incluir una línea de etiqueta, el lema de la empresa o del producto, y un logotipo.

Debido a que las imágenes son el punto focal del anuncio, deben ocupar un lugar central. El uso de una imagen en un anuncio es una oportunidad para exhibir el producto y, por lo tanto, la imagen debe ocupar aproximadamente de dos tercios a tres cuartas partes del espacio disponible sin importar la forma del anuncio.

Algunos diseños de anuncios de muestra. La imagen debe ocupar de dos tercios a tres cuartas partes del anuncio y aparecer en el espacio sobre la línea blanca.

Claves para llevar

• Los mismos principios de diseño gráfico se aplican a las pantallas de computadora, documentos y gráficos de presentación.
• Los cuatro principios del diseño gráfico son contraste, repetición, alineación y proximidad (C.R.A.P.).
• El contraste ayuda a resaltar y enfocar la atención. El contraste se puede lograr usando color, tonos de gris, tamaño, peso visual, y así sucesivamente.
• La repetición ayuda a unir un documento para que parezca un
• todo coherente. La repetición se puede lograr repitiendo fuentes, estilos, imágenes, etc.
• La alineación ayuda a organizar la información para que sea más clara y de aspecto más profesional. La alineación se puede lograr usando pautas en pantalla.
• La proximidad ayuda a establecer relaciones entre los elementos. Los artículos en proximidad aparecen relacionados.
• El diseño de tipo se puede utilizar para reforzar el contraste y/o la repetición. Fuente, tamaño, peso, color, forma y dirección son todos atributos de diseño de tipo.
• Los colores deben armonizarse en una paleta. Herramientas profesionales como Kuler ayudan a establecer una paleta de colores a partir de una imagen.
• Los rellenos y contornos pueden crear contraste y/o repetición.
• Cada anuncio debe tener una imagen, título, texto y logotipo.

Preguntas y ejercicios

1. Identifique la imagen, el título, el texto y el logotipo en 3 anuncios diferentes.
2. Describe el uso de los principios de C.R.A.P. por tu revista favorita.
3. Describa el uso de los principios de C.R.A.P. por su sitio web favorito.

Técnicas

Las siguientes técnicas, que se encuentran en la referencia del software, pueden ser útiles para completar las asignaciones de este capítulo: PowerPoint: Resumen Mapa de interfaz • Image-Recortar • Image-Borrar fondo • Image-Insertar • Image-Rotación • Líneas guías-Vista • Desactivar Snap To Grid; En la sección de Google de la Referencia de software de computación en la nube: Crear una cuenta • Agregar un gráfico de firma; y en la sección Word de la referencia de software: Text-Formula

Asignación L1: Firma de correo electrónico

Muchos estudiantes se preguntan cómo crear firmas de correo electrónico llamativas. Una firma pegadiza te ayuda a destacar entre la multitud. Parte de tu firma es la fuente y el tamaño que usas para responder a otros correos electrónicos. También aprenderás más sobre computación en la nube a través de Gmail.

Configuración

Si aún no tienes una, crea una cuenta de Gmail en www.gmail.com. Inicia sesión en tu cuenta de Gmail y ve a Configuración para cambiar tu firma. Las fuentes en Gmail son limitadas ya que intentan mostrar fuentes disponibles en todas las plataformas de computadora: Windows, Mac y Linux. Sin embargo, puedes escribir tu firma en Word o PowerPoint y copiarla y pegarla en Gmail con fuentes más ingeniosas. Para ver qué fuentes probablemente se instalarán en todos los sistemas que reciben sus mensajes, visite estos sitios:

http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

www.codestyle.org/css/font-family/sampler-combinedresults.shtml

Contenido y estilo

• Cree una firma de correo electrónico legible, interesante y profesional utilizando texto y [opcionalmente] gráficos.
• Especifique la fuente que utilizará para responder a los mensajes.
• Aplicar y seguir todos los principios de diseño gráfico.
• [Opcionalmente] Crear gráficos para la firma en PowerPoint usando herramientas de dibujo. Guarda la diapositiva como una imagen PNG en tu carpeta pública de Dropbox. Después haz clic derecho sobre el archivo en Dropbox para copiar su URL. Si desea cambiar la firma, simplemente actualice el archivo de PowerPoint y vuelva a guardarlo como un archivo PNG para reemplazar la versión anterior. En Gmail haz clic en ajustes e inserta una imagen en el editor de firmas. Se le pedirá una URL. Pegue la URL del archivo en su carpeta pública de Dropbox.
• Envíate un correo electrónico con al menos una línea de texto para probar la firma. Guarde su correo electrónico de prueba con la firma como un archivo PDF o tome una captura de pantalla del archivo usando la Herramienta de recorte de Windows (los usuarios de Mac pueden usar Cmd+Shift+4).

Entregable

Envío electrónico: Envía el PDF o captura de pantalla de tu mensaje de prueba de Gmail al sistema de gestión del curso como comprobante de completar la tarea.

Envío de papel: Crea una copia de tu mensaje de prueba de Gmail.

Ejemplo de mensaje de prueba para asignación de firma de correo electrónico.

Asignación L2: Anuncio Hotspot para portátiles

PowerPoint permite alterar imágenes para crear una composición que realmente no existe. Composiciones como esta deben hacerse con precaución. No quieres tergiversar nada a un cliente potencial. En este caso no estamos vendiendo la playa, solo la idea de trabajar desde la playa, así que no se hace ningún daño. No obstante, esto no sería apropiado para anunciar un resort. Si esto fuera una “foto” para un artículo de noticias entonces alterar la escena en realidad sería poco ético. El ejemplo que se muestra aquí es un anuncio para un restaurante, pero estarás creando un anuncio para un proveedor de telefonía celular, mostrando su capacidad para usar el celular como punto de acceso wifi para que puedas trabajar desde tu computadora portátil. Usted elige al proveedor y luego incluye su logotipo y el texto apropiado en el anuncio.

Configuración

Dibuja un diseño en papel y luego encuentra imágenes de creative commons y guárdalas en tu carpeta. Buscar

http://www.flickr.com/creativecommons.

Contenido y estilo

• Crear un anuncio original. Puede usar algunas o todas las imágenes dadas o crear un contexto completamente diferente, por ejemplo, el espacio exterior.
• Cree un encabezado, un texto y un lema originales para esta tarea.
• Es posible que tenga que eliminar fondos de sus imágenes usando la herramienta de eliminación de fondo de PowerPoint.
• Aplicar y seguir todos los principios de diseño gráfico y publicitario.
• Cada imagen y cuadro de texto aparecerán en una capa separada en el panel de selección. Nombra cada capa a medida que la creas.
• Asegúrese de que su nombre y derechos de autor sean lo suficientemente grandes para ser leídos, pero lo suficientemente pequeños como para permanecer discretos en su documento. (Tu nombre sustituye a “Joe Bobcat”).
• Sube tu imagen a Kuler para encontrar un color para tu fondo de texto.
• Puede elegir incluir una foto de una computadora portátil, teléfono celular y/o persona que considere apropiada para el anuncio.

Entregable

Envío electrónico: Guarde su archivo como presentación en PowerPoint. Preséntelo electrónicamente.

Envío de papel: Cree una impresión en color imprimiendo la diapositiva en color directamente de PowerPoint.