# Bases del diseño Índice del contenido #### Bases de diseño [**Fundamentos del diseño** ](/fundamentos-del-diseno) Elementos como la línea, el tamaño, la forma, la textura y el equilibrio son los fundamentos del diseño gráfico. Aprende aquí cómo puedes usarlos. [**Disposición y composición**](/disposicion-y-composicion) En diseño gráfico es fundamental conocer los conceptos de disposición, composición o layout para comunicar eficientemente una idea. [**Teoría del color** ](/teoria-del-color) Veamos qué es la teoría del color y qué es el círculo cromático. [**¿Cómo combinar colores?** ](/como-combinar-colores) Al elegir una paleta de colores para tu diseño, es importante que tengas en cuenta varias cosas para obtener la mejor combinación. Veamos cuáles son. [**La imagen en diseño**](/la-imagen-en-diseno) Entiende cómo funcionan las imágenes dentro del diseño gráfico y cómo escoger las adecuadas para trabajar con ellas. [​**¿Qué es tipografía y cómo elegir un tipo de letra?​** ](/que-es-tipografia-y-como-elegir-un-tipo-de-letra) Elegir la tipografía correcta es fundamental para crear un buen diseño. Aprende aquí cómo seleccionar el tipo de letra correcto. [**Proceso de diseño ideal** ](/proceso-de-diseno-ideal) Entender el diseño como un proceso que busca ayudar al cliente a solucionar sus problemas y alcanzar el objetivo que se propuso. # Fundamentos del diseño Elementos como la línea, el tamaño, la forma, la textura y el equilibrio son los fundamentos del diseño gráfico. Aprende aquí cómo puedes usarlos. Son la base de todos los medios visuales: están en el arte, el diseño web e, incluso, en pequeños detalles, como las tipografías. Pero, ¿qué tienen en común estos ejemplos? Sencillamente, algunos poseen elementos básicos, como la línea, el tamaño, la forma, la textura y el equilibrio. **Ver video:** {% embed url="" %} Puede que estos elementos no parezcan importantes cuando están solos, pero juntos forman parte de lo que ves. Estos fundamentos pueden asustar un poco, especialmente si no te consideras un artista. Pero también pueden enseñarte mucho sobre cómo trabajar con diferentes recursos y crear imágenes desde cero. ## Línea Es una forma que conecta dos o más puntos. Puede ser gruesa o delgada, ondulada o irregular. Esto le da la posibilidad de tener muchos estilos. {% hint style="success" %} Las líneas están presentes, frecuentemente, en el diseño, por ejemplo, en dibujos, ilustraciones y elementos gráficos, como texturas y patrones. {% endhint %} También es común encontrarlas en las composiciones de texto, ya que pueden enfatizar, dividir u organizar el contenido y hasta guiar el ojo del espectador. Cuando trabajes con líneas, presta atención a detalles como el grosor, el color, la textura y el estilo. Estas cualidades pueden tener gran impacto en la forma que tu diseño es percibido.
La linea
## Forma Es cualquier área bidimensional con un límite reconocible. Es decir, círculos, cuadrados, triángulos, etc. Estos se dividen en dos categorías: geométrica o regular y orgánica, en donde las formas son más libres. Las formas son importantes para comunicar ideas visualmente, porque les dan peso y las hacen reconocibles. Gracias a ellas entendemos las señales de tráfico, los símbolos y, en gran parte, el arte abstracto. ![Formas](https://974918548-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LlbV2hdZcWvK7dL54Aa%2F-LlbZbcDmBvJXQZ7XkGG%2F-LlbZuS8ZAZ2nnYLmETc%2Fbec79416b47de044cfb9e1607b8c92db.jpg?alt=media\&token=9f5f80db-3775-40ff-9cf2-c303d8bfa5bd) Las formas tienen un sorprendente número de usos en el diseño cotidiano. Pueden ayudarte a organizar o separar el contenido, a crear ilustraciones simples o a agregar interés a tu trabajo. Aprende a buscarlas en otros diseños diariamente, y pronto comenzarás a verlas en todas partes. ## Objetos Cuando una forma adquiere propiedades 3D, la llamamos objeto, el cual puede existir en el mundo real o simularse utilizando técnicas como la luz, la sombra y la perspectiva para crear la ilusión de profundidad. En el diseño bidimensional los objetos le dan un toque realista al trabajo. Sin ellos, una pelota de goma que rebota es solo un círculo, o un edificio en 3D es solo una serie de rectángulos. ![Objetos](https://974918548-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LlbV2hdZcWvK7dL54Aa%2F-LlbZbcDmBvJXQZ7XkGG%2F-LlbdVtzU5Ojqhb6Ikxc%2F2.png?alt=media\&token=2b628211-017e-44d7-841d-87af4d4604b5) Por ejemplo, una sombra puede crear la ilusión de capas o darle a un elemento profundidad. Cuando los objetos se utilizan bien, pueden convertirse en una gran herramienta para hacer que tu trabajo se destaque. ## Textura Es la cualidad física de una superficie. Al igual que los objetos, puede ser tridimensional y dar una idea de cómo se verá en la vida real. En diseño, la textura agrega profundidad y tacto a las imágenes planas. Los objetos pueden parecer lisos, rugosos, duros o blandos, dependiendo de los elementos. ![Textura](https://974918548-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LlbV2hdZcWvK7dL54Aa%2F-LlbZbcDmBvJXQZ7XkGG%2F-Llbe_IGW1CUIlyjhKXL%2F3.png?alt=media\&token=c4d3d1b7-ce53-474a-a617-fae09ed12718) Las texturas son excelentes para usar en imágenes de fondo y pueden agregar mucho interés a tu trabajo. {% hint style="danger" %} Ten cuidado de no abusar. Demasiada textura puede sobrecargar un diseño fácilmente. {% endhint %} ## Equilibrio Es la buena distribución del **peso visual** y puede verse afectado por muchas cosas, incluidas el color, el tamaño, el número y el espacio en blanco. Los diseños simétricos son iguales o similares en ambos lados de un eje. Se equilibran porque cada lado puede llegar a ser idéntico. ![Equilibrio visual](https://974918548-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LlbV2hdZcWvK7dL54Aa%2F-LlbZbcDmBvJXQZ7XkGG%2F-LlbfD7sSSu83BzcK7Q8%2F4.png?alt=media\&token=60f206d9-a328-4d29-97df-868378a07f59) Los diseños asimétricos son diferentes, aunque siguen estando bien distribuidos. La composición es equilibrada porque resalta las cosas correctas. ### La regla de los tercios Recomendamos usar la **regla de los tercios**, la cual te muestra tu área de trabajo dividida en una cuadrícula de 3x3. El punto focal de la imagen se ubica cerca o sobre de una de las líneas, lo que crea un equilibrio visual con el resto del espacio.
![](https://974918548-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LlbV2hdZcWvK7dL54Aa%2F-LlbZbcDmBvJXQZ7XkGG%2F-Llbg-p8dMMB547SB9vV%2F5.png?alt=media\&token=2292b230-a22f-4812-a600-f55052845421) ## Conclusión Los fundamentos del diseño van más allá de la pieza final, ya que lo importante es **apreciar los detalles que conforman cada composición**. Esto puede aplicarse a casi cualquier tipo de proyecto. # Disposición y composición Estos dos elementos son considerados como las bases del diseño por el orden y sentido que le brindan a los proyectos. También se les conoce como *layout* o maquetación. Generalmente se asocian a los textos, pero en realidad, se pueden aplicar a otros formatos como el diseño web o gráfico. A continuación, te presentaremos cinco características que dan cuerpo a estos elementos y que, al incorporarlos a tu trabajo, mejorarán su calidad. **Ver video:** {% embed url="" %} ## 5 Elementos de la disposición y composición 1. Proximidad 2. Espacio en blanco 3. Alineación 4. Contraste y jerarquía 5. Repetición ### Proximidad Presenta las diferentes relaciones entre el contenido expuesto, agrupando o separando los diferentes elementos que componen tu proyecto. Cuando aplicas este principio, tu trabajo adquiere mayor descanso visual. ### Espacio en blanco Se ubica entre los distintos elementos de tu trabajo, como las líneas de texto, márgenes, iconos, etc. Su función es simple, pero importante: ofrecerle espacio al contenido para que así se pueda entender. ![Uso del espacio en blanco](https://974918548-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LlbV2hdZcWvK7dL54Aa%2F-LlbirGDdcpR8QtD47TD%2F-Llc2YTHEzC_q5bE-e-8%2Fdisposicion%20y%20composicion_%20bases%20del%20disen%CC%83o%20grafico.png?alt=media\&token=2ff5459b-8650-4c56-b758-673b45c831ec) ### Alineación Organiza el contenido bajo un formato específico que mejora la lectura del proyecto. Mantiene las proporciones entre las márgenes y el espacio de trabajo utilizado. ### Contraste y jerarquía Esta característica es útil a la hora de destacar algo que nos parece importante dentro del proyecto. Existen muchas maneras de lograrlo, por ejemplo, a través de los diferentes estilos que pueden aplicarse a los textos, su tamaño o color. En conjunto, facilitan la navegación del contenido a tus espectadores. Esto quiere decir que quien observa o lee tu trabajo, puede tener una guía de dónde empezar y dónde continuar. ![Alineación de todos los elementos ](https://974918548-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LlbV2hdZcWvK7dL54Aa%2F-LlbirGDdcpR8QtD47TD%2F-Llc2rQc-ZhxZgm9tQHG%2FBases%20del%20disen%CC%83o%20grafico_disposicion%20y%20composicion.png?alt=media\&token=4415e751-f0d7-4615-8bac-b82776a8ca63) ### Repetición Como su nombre lo indica, esta característica refuerza un elemento o estilo importante en tu diseño. Úsalo en títulos, encabezados, etc., ya que además de ofrecer unidad estética a tu proyecto, le permite a tus espectadores familiarizarse con lo que estás presentando. Implementando estos elementos a tus diseños, podrás lograr composiciones con un aspecto único y profesional. # Teoría del color Esta teoría te puede ayudar en diferentes ocasiones, cómo escoger tonos para un diseño o mezclar perfectamente lo que te vas poner. Al aprender un poco sobre ella empezarás a ver el color de una forma distinta. **Ver video:** {% embed url="" %} ### El círculo cromático Empecemos por lo más básico. Los colores primarios son el azul, el rojo y el amarillo; los colores secundarios , el anaranjado, el verde y el morado. La mezcla del rojo y el amarillo crea el naranja; la del amarillo y el azul, verde; o la de azul y el rojo, morado. Si mezclamos estos colores, obtenemos aún más tonos, como el rojo anaranjado y el verde lima. En conjunto, todos los colores de los que hablamos anteriormente conforman el **círculo cromático** o **rueda del color**. ![Círculo Cromático ](https://974918548-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LlbV2hdZcWvK7dL54Aa%2F-LlcYkjsoljG_2qliMPw%2F-Llc4S7Pwh7NVaoRDKh3%2F7.png?alt=media\&token=c49174f6-1671-4bb8-bfcc-ccb8a768ee3b) #### Elementos del color. * **Tonalidad**: es la más fácil entre todas. Básicamente, es sinónimo de color. * **Saturación**: se refiere a la intensidad, es decir, si el color es más sutil o más fuerte. * **Brillo**: te indica si el color es oscuro o claro, en un rango de negro a blanco. Esto te da muchas opciones, por ejemplo, puedes pasar de un rojizo opaco profundo a un rosado pastel. ![Los 3 elementos del color](https://974918548-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LlbV2hdZcWvK7dL54Aa%2F-LlcYkjsoljG_2qliMPw%2F-Llc4svQrRLNR3OVreWx%2F8.png?alt=media\&token=0853f4fe-96e5-48ed-b937-bfd3496bc047) # ¿Cómo combinar colores? Hay fórmulas que pueden ayudarte, basadas en algo llamado armonía del color, y todo lo que necesitas es usar el círculo cromático. No temas jugar con la paleta y crear tu propia interpretación. Ese es el propósito de estas fórmulas: darte un punto de partida con el cual te puedas guiar e inspirar. ### Fórmula **monocromática** La fórmula más sencilla es la **monocromática** porque se utiliza un solo color. \ Elige un punto del círculo y usa tus conocimientos sobre saturación y brillo para crear variaciones en el tono. Lo mejor sobre este tipo de paletas es que tienes la garantía que combinarán. ![Formula monocromática](https://974918548-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LlbV2hdZcWvK7dL54Aa%2F-LlcYkjsoljG_2qliMPw%2F-Llc5Gs8BDDCA0lpmedS%2F10.png?alt=media\&token=192d06b0-ccca-44c9-bf0e-56188cea4661) ### Fórmula análoga Con la fórmula **análoga** se eligen los colores que se siguen uno al otro en la rueda, como rojos y anaranjados, o azules y verdes. ![Fórmula análoga](https://974918548-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LlbV2hdZcWvK7dL54Aa%2F-Llce5io-UBDIsdafweG%2F-Llce9uuZSOXQyaaxwbo%2F13.png?alt=media\&token=4ffb97f5-835e-4f65-a9a2-01f9dc03cf03) ### Fórmula complementaria Los colores **complementarios** son opuestos uno al otro en la rueda. Por ejemplo: azul y naranja, o el clásico rojo y verde. Para evitar que la paleta te quede muy simple, puedes agregar tonos más claros, oscuros o con poca saturación.
{% hint style="success" %} Esta fórmula funciona mejor si dejas un color como dominante y los otros tres como auxiliares. {% endhint %} ![Fórmula Complementaria](https://974918548-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LlbV2hdZcWvK7dL54Aa%2F-Llce5io-UBDIsdafweG%2F-LlceS4GzWFyPPu3qLdA%2F14.png?alt=media\&token=9c330f9d-b3b2-4da6-b2f8-0a5e170ad64e) ### Fórmula de colores divididos Con los colores **complementarios divididos** utilizas los colores que están junto al color complementario. Esto te da el mismo nivel de contraste, pero más opciones de tonos y, posiblemente, resultados más interesantes.
![Fórmula de colores divididos](https://974918548-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LlbV2hdZcWvK7dL54Aa%2F-Llce5io-UBDIsdafweG%2F-LlcemfI4OxhHHXuwfm_%2F15.png?alt=media\&token=e35a14ea-a215-45f6-9457-42ba8fcc99d7) ### Fórmula de triada Con la **tríada** se forma un triángulo en el círculo cromático y se usan los colores que están en cada esquina. {% hint style="success" %} Estas combinaciones tienden a ser bastante impactantes, particularmente con colores primarios y secundarios, así que piénsalo bien antes de elegirlas. {% endhint %} ![Fórmula de triada](https://974918548-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LlbV2hdZcWvK7dL54Aa%2F-Llce5io-UBDIsdafweG%2F-LlcfauooY8sMu6yqWj7%2F16.png?alt=media\&token=6e8385e2-a6ce-4ee8-b1e7-bfe6ecc5e6f8) ### Fórmula tetraédrica Una paleta **tetraédrica** forma un rectángulo en el círculo, por lo cual no usa uno, sino dos pares de colores complementarios. {% hint style="success" %} Una paleta **tetraédrica** forma un rectángulo en el círculo, por lo cual no usa uno, sino dos pares de colores complementarios. {% endhint %} ![Fórmula tetraédrica](https://974918548-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LlbV2hdZcWvK7dL54Aa%2F-Llce5io-UBDIsdafweG%2F-LlcgGcssyD5kLWxzg_0%2F17.png?alt=media\&token=08cd4f91-64b6-47fa-b678-ba7a974d96df) ## ¿Cómo combinar colores? Al trabajar con color, hay ciertas cosas que debes tener en cuenta para obtener un buen resultado, como el contraste, la legibilidad de los tonos, el mensaje que estos transmiten y de dónde te inspiras al combinarlos. Veamos en qué consisten cada uno de estos temas. {% embed url="" %} ### **El mensaje que transmiten los colores** Cada color envía un mensaje, así que es importante considerar lo que quieres comunicar y escoger una paleta que encaje. Por ejemplo, los colores vivos tienden a dar un toque divertido o moderno. Los colores desaturados, a menudo, parecen más orientados a los negocios. A veces depende solamente del contexto. Te sorprendería cuán flexibles pueden ser. ![El mensaje que transmiten los colores](https://974918548-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LlbV2hdZcWvK7dL54Aa%2F-LlcxB19bCtM-uaB4fR7%2F-LlcxewWrtWl8Kij3qCX%2FLos%20colores%20transmiten%20mensajes.%20\(1\).png?alt=media\&token=7e6a51a4-9359-46d2-9de8-2d62361a2eee) ### **Inspiración al combinar colores** Podrás encontrar ideas de cómo hacerlo en carteles publicitarios o famosas obras de arte, entre muchos otras cosas y espacios. ![Inspiración al combinar colores](https://974918548-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LlbV2hdZcWvK7dL54Aa%2F-LlcxB19bCtM-uaB4fR7%2F-LlcxlzvvZ6U7sO_S_0q%2FPaletas%20de%20color%20de%20obras%20de%20arte.%20\(1\).png?alt=media\&token=c9362b24-6d41-4ae4-8251-450094c59c95) También puedes usar algún recurso web para buscar paletas de colores o crear las tuyas. Incluso diseñadores experimentados buscan inspiración en su entorno. No hay nada malo con encontrar algo que te atraiga y adaptarlo a tu gusto. Aprender sobre la teoría del color y el círculo cromático te ayudará a saber cómo hacer combinaciones de forma monocromática, análoga o complementaria, entre otras fórmulas que existen. ## Herramientas para generar paletas de colores {% embed url="" %} {% embed url="" %} {% embed url="" %} {% embed url="" %} # La imagen en diseño Naturalmente estamos atraídos hacia las fotos hermosas, ilustraciones cuidadosamente elaboradas e imágenes como íconos y logos. Las imágenes son más que solo decoración. En diseño, son el gancho que atrae al espectador. Te pueden ayudar a conectar con la audiencia y dar una buena impresión, antes de que lean una sola palabra. **Ver video:** {% embed url="" %} No tienes que ser un artista para usar imágenes en tu trabajo. Todo lo que se necesita es un poco de creatividad y motivación para pensar fuera de lo común. Con los recursos correctos, puedes aprender a destacar tus diseños. Para iniciar, debes encontrar imágenes de alta calidad para cualquier tipo de proyecto. Hay innumerables fuentes en internet que ofrecen imágenes exactamente para este propósito. ![](https://974918548-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LlbV2hdZcWvK7dL54Aa%2F-LlcyCKFV2EyHCF7zJLQ%2F-LlcyHKMp5DtRhiIG7QQ%2F18.png?alt=media\&token=b1f999ff-5704-415a-9c9f-d4cd923b0ffb) La mayoría de personas, incluyendo profesionales, usan imágenes gratis o de bajo costo que se llaman “**stock**” o **archivo**. Estas son perfectas cuando necesitas algo específico, pero no tienes el tiempo o los recursos para hacerlo por tu cuenta. Muchos de los sitios de imágenes de archivo te permiten navegar en sus galerías. Busca resultados que sean relevantes para tu proyecto, pero que también sean únicos de alguna manera. Tus espectadores están naturalmente atraídos a imágenes que se sientan auténticas; fotos distintivas, pero creíbles, e ilustraciones que cuenten una historia. Para un diseño más moderno y profesional, evita usar imágenes que no tienen contexto o son muy literales en su significado. ### **Tecnicidad de las imágenes** No importa si la foto que escogiste es casi perfecta en todos los aspectos. Si está borrosa o pixelada, podría dar una mala impresión de tu trabajo.
Busca imágenes de alta calidad que sean nítidas, claras y libres de distorsión. En general, entre más grandes sean, tendrás más opciones para trabajar. Una imagen grande y en alta resolución siempre puede ser recortada o reducida, dependiendo de las necesidades del proyecto. ![](https://974918548-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LlbV2hdZcWvK7dL54Aa%2F-LlcyCKFV2EyHCF7zJLQ%2F-LlcyKoI5P3j6GX8xDfG%2F19.png?alt=media\&token=2854fa36-55a4-4f1f-a00f-a78ee8a34527) Desafortunadamente, no funciona al revés. Si agrandas una imagen pequeña, esta inmediatamente pierde calidad, ya que la mayoría están en un formato **rasterizado**. Es decir, están hechas de miles de pequeñísimos pixeles, que son invisibles en el tamaño original de la imagen. Por otro lado, están las imágenes **vectorizadas**, a las cuales puedes agrandar o reducir su tamaño, sin perder calidad. Esto es porque están hechas de algo más complejo que los pixeles. Son procesadas usando una forma especial de geometría. ### **Ajustes de imágenes** #### **Recortar** se puede usar para cambiar la medida, forma o enfoque de una imagen y volverla útil en diferentes situaciones. Esta opción es la adecuada si tu gráfico no tiene las dimensiones correctas o incluye algo que preferirías dejar de lado. ![](https://974918548-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LlbV2hdZcWvK7dL54Aa%2F-LlcyCKFV2EyHCF7zJLQ%2F-LlcyN2xMmdRlE_WTU4K%2F20.png?alt=media\&token=e1053ced-04c3-4158-8416-1dac7f61385b) #### **Ajustes cosméticos** Te permiten resaltar ciertas características de las imágenes, como la luminosidad, el contraste, la saturación y el color. Si tu programa favorito ofrece filtros o ajustes preestablecidos, puedes cambiar tu imagen drásticamente con poco esfuerzo y tiempo. #### **Cambiar tamaño** Esta herramienta asegurará que la imagen encaje perfectamente en tu proyecto. Solo recuerda: no puedes agrandarlas más allá de su tamaño original sin afectar su calidad. Si la imagen con la que estás trabajando no es suficientemente grande, es mejor escoger algo diferente o buscar la forma de trabajar con el tamaño que tienes. # ​¿Qué es tipografía y cómo elegir un tipo de letra?​ grafLa tipografía está en donde quiera que mires: en los libros que lees, en los sitios web que visitas, en letreros, en señales de tránsito y empaques de productos. Sencillamente, es el estilo o la apariencia del texto. También puede referirse al arte de trabajar con él, algo que probablemente haces todo el tiempo si creas documentos u otros proyectos para ti, tu trabajo o tu escuela. Puede ser intimidante al comienzo, pero es más fácil de lo que parece. Solo necesitas saber un poco sobre el tema para marcar una diferencia en las cosas que haces diariamente. {% embed url="" %} ### Serif **Las fuentes de *****Serif***** ** tienen pequeños trazos, llamados serifas, pegados en la parte principal de la letra. Por su aspecto clásico, son una buena opción para proyectos más tradicionales. También son comunes en publicaciones impresas, como revistas y periódicos. ![Serifas](https://974918548-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LlbV2hdZcWvK7dL54Aa%2F-Llcyvh7Oc3DkqdiXgIy%2F-LlczAMPpykjH7LKoRjV%2Fserif-1.png?alt=media\&token=b2a52915-a296-449c-8e47-94454d583dbc) ### Sans serif **Las fuentes *****Sans serif*** no tienen ese trazo extra, de ahí el nombre, que en francés significa "sin serifas". Este estilo es considerado más limpio y moderno. Además, es más fácil de leer en las pantallas de los computadores, los teléfonos inteligentes y las tabletas. ### **¿Qué tener en cuenta al elegir un tipo de letra?** En cierto modo, las fuentes tienen su propio idioma, ya que pueden ser casuales, neutrales, exóticas o gráficas. Es importante que pienses en tu mensaje y elijas una fuente que se ajuste a él. Algunas tipografías vienen con otras características, como las fuentes *Comic Sans*, *Curlz*, *Papyrus*, etcétera. Lo malo con estas es que tienen la reputación de estar pasadas de moda y sobreutilizadas. Si las quieres usar, piénsalo dos veces y considera buscar otra opción. Hay muchas fuentes con apariencias similares y con menos probabilidades de desviar tu mensaje. Al decidir qué fuentes usar, menos es más. Es decir, es mejor limitarte a una o dos fuentes por proyecto. Por ejemplo, si necesitas más contraste, intenta repetir tus fuentes en un tamaño, peso o estilo diferente. Este truco es bueno para crear combinaciones interesantes y funcionales. ![](https://974918548-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LlbV2hdZcWvK7dL54Aa%2F-Llcyvh7Oc3DkqdiXgIy%2F-LlczL6my_TxxFvT_1Fd%2F22.png?alt=media\&token=f9585dac-761a-48ce-aa99-faba92c9425d) Probablemente has escuchado el dicho: "los opuestos se atraen". Bueno, lo mismo pasa con las fuentes. Puedes combinar tipos de letra diferentes pero complementarias, como *sans serif* con *serif*, corta con alta o decorativas con simples. Esto puede parecer extraño, pero tranquilo, mira otros diseños para inspirarte y ponerlo en práctica. ## **Jerarquía, Interlineado, Espaciado e Interletraje.** Estos conceptos son esenciales al diseñar algo. ## La jerarquía **La jerarquía** es utilizada para guiar el ojo del lector a lo más importante. En otras palabras, le muestra dónde comenzar y a dónde ir, usando diferentes niveles de énfasis. ![](https://974918548-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LlbV2hdZcWvK7dL54Aa%2F-Llcyvh7Oc3DkqdiXgIy%2F-LlczUfk9k5elvWKu_MM%2F23.png?alt=media\&token=ff5ae6e6-da0d-4ec0-9466-4dfdef6bd62a) Establecer una jerarquía es simple: decide qué recursos quieres que el lector note primero y luego haz que se destaquen. Los elementos más importantes suelen ser más grandes, más gruesos o diferentes de alguna manera. Recuerda que es mejor mantener una forma sencilla y usar solo algunos estilos complementarios. ### El interlineado **El interlineado** es el área entre las líneas del texto, también conocido como espacio vertical. Si no estás seguro de cuánta distancia debes dejar, no te preocupes, el valor predeterminado usualmente es el correcto. El objetivo es hacer tu texto cómodo de leer. Mucho o muy poco espacio puede ser molesto para el lector. ![Interlineado](https://974918548-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LlbV2hdZcWvK7dL54Aa%2F-Llcyvh7Oc3DkqdiXgIy%2F-LlczrUrYOAr7KejTFL7%2F24.png?alt=media\&token=180d9237-a7bf-4afd-966e-1d29ff9f6992) ### El espaciado **El espaciado** es la distancia general entre los caracteres o letras. La mayoría de los programas permiten reducir o aumentar esto según tus necesidades. En algunos diseños, puedes ajustar el espacio para crear cierto efecto. También puede ayudarte a entender y arreglar las fuentes que están mal espaciadas.
![Espaciado](https://974918548-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LlbV2hdZcWvK7dL54Aa%2F-Llcyvh7Oc3DkqdiXgIy%2F-Lld-3QhuyEe7L605Pl-%2F25.png?alt=media\&token=23aa49ce-a5f4-43f5-9277-e49ce2f5a23e) ### El interletraje **El interletraje** es el espacio entre letras específicas. A diferencia del espaciado, cambia en el transcurso de la palabra porque cada letra encaja diferente. Algunas fuentes tienen mal interletraje, lo que hace que las letras se vean mal espaciadas. Si utilizas una fuente que tenga esto, es mejor elegir otra.
![Interletraje](https://974918548-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LlbV2hdZcWvK7dL54Aa%2F-Llcyvh7Oc3DkqdiXgIy%2F-Lld-658xPEzkajdb9CN%2F26.png?alt=media\&token=9e0f6fda-c818-423c-878f-142fcfb8ad56) Un texto bien diseñado puede significar la diferencia entre un proyecto ordinario y un proyecto extraordinario, incluso si estás comenzando en el diseño. Todo lo que necesitas es interesarte en la tipografía, así serás más eficiente y podrás hacer mejor tu trabajo. # Proceso de diseño ideal No existe ningún diseñador estrella que sea capaz de ir a un proyecto y diseñar exactamente lo que el cliente requiere todas las veces. Por esa razón tener un proceso de diseño ayudara con lo siguiente: * Un enfoque compartido para encontrar y solucionar problemas * Un marco metodológico para evaluar ideas e identificar prioridades ## El proceso de diseño 1. Definir el problema 2. Recopilar informacion 3. Desarrollar soluciones 4. Mejorar las soluciones 5. Entregar ### **Definir el problema** Para definir el problema es necesario saber cual es el objetivo del arte que se va a creer. Usualmente el formato o la aplicación del arte en si mismo nos da mucha informacion sobre el objetivo del cliente. {% hint style="info" %} El objetivo de un cliente que solicite un facebook ad, usualmente va a ser conseguir ventas o clics a dicho ad. Por tanto nuestro objetivo al diseñarlo debe ir de la mano con el objetivo del cliente {% endhint %} ### Recopilar informacion Usualmente el cliente debe entregarnos toda la informacion requerida para hacer su proyecto sin embargo queda de nuestro lado organizarla de forma congruente con el objetivo del cliente. ### Desarrollar soluciones Una vez que tenemos definido el problema y toda la informacion a usar debemos a empezar a desarrollar soluciones gráficas a los problemas de los clientes que estén alineados con los objetivos del cliente. {% hint style="info" %} Utilizar las [bases del diseño](/) es fundamental a la hora de desarrollar soluciones {% endhint %} Consideramos soluciones a las propuestas a presentar por el cliente ### Mejorar las soluciones Para mejorar las soluciones debemos jugar con las que ya hemos desarrollado, los pequeños detalles pueden hacer la diferencia a la hora de ayudar a nuestros clientes alcanzar el objetivo propuesto con el arte en cuestión. ### Entregar los diseños Subir a dropbox las propuestas una vez terminadas. ## Proceso de diseño ideal: la práctica 1. Identificar los recursos gráficos que nos pueden ayudar a resolver el problema 2. Elegir la mejor herramienta para el problema 3. Elegir la mejor orientación posible (si no ha sido previamente identificada por el cliente) 4. Introducir la medida 5. Crear líneas de márgenes y cuadrícula de 3x3 6. Empezar a crear usando los recursos 7. Refinar 8. Entregar ### Identificar los recursos gráficos que nos pueden ayudar a resolver el problema Utilizar recursos gráficos ya creados previamente nos ayuda a ahorrar tiempo en su creación. Ahorrarle tiempo al cliente es parte fundamental de nuestra misión como agencia. Los recursos gráficos pueden ser encontrados en: {% embed url="" %} {% embed url="" %} ### Cómo buscar recursos gráficos que puedas usar Sin importar el lugar en donde los busques (Freepik o Elements) idealmente vas a buscar recursos que tengan la misma aplicación que requiera el cliente. {% hint style="info" %} Si el cliente solicita un Flyer para su barbería entonces puedes buscar "Barber flyer" y luego elegir el que mejor se adapte a los objetivos del cliente. {% endhint %} #### ¿Que es mejor Freepik o Elements? Freepik cuenta con muchos elementos al igual que elements, la diferencia de elements es que es un servicio premium y por tanto la calidad de los gráficos y templates en especial de impresión van a ser mayor, sin embargo dejamos a tu consideración profesional que recurso gráfico usar. ### Elegir la mejor herramienta para el problema #### ¿Photoshop, Illustrator o Indesign? **InDesign** * Documentos de 2 o más páginas **Photoshop** * Edicion de imagenes * Flyers * Mockups * Gráficos para la web **Illustrator** * Logos * Vectores * Iconos * Gráficos para la web * Documentos de 1-2 páginas #### Modo de color Una vez elegida la herramienta debes elegir el modo de color correcto. Si el proyecto va a ser usado en una pantalla debes elegir RGB, por el contrario si va a ser impreso debes usar CMYK. ### Elegir la mejor orientación posible Si la orientación no ha sido definida por el cliente entonces debe ser una decisión que debes tomar tomando en cuenta **el uso del diseño,** en caso de ser de impresión, pregúntate: {% hint style="success" %} ¿Cómo sería más fácil de usar, entender y disfrutar para el consumidor final - de forma vertical o de forma horizontal? {% endhint %} ### Introducir la medida Introduce la medida en la herramienta que has elegido ### Crear líneas de márgenes y cuadrícula de 3x3 Las guías y la cuadrícula te ayudan a colocar imágenes o elementos de forma precisa. Las guías aparecen como líneas en la imagen, pero no se imprimen. Puedes mover y quitar guías. También puede bloquearlas para que no se muevan por descuido. La cuadrícula resulta útil para disponer elementos simétricamente. La cuadrícula aparece por defecto como líneas que no se imprimen pero que se ven como puntos. **Las guías y las cuadrículas se comportan de manera similar:** * Las selecciones, los bordes de selección y las herramientas se ajustan a la guía o a la cuadrícula cuando se arrastran dentro de 8 píxeles en pantalla (no de imagen). Las guías también se ajustan a la cuadrícula cuando se mueven. Esta opción puede activarse y desactivarse. * El espaciado de la guía, junto con la visibilidad y el ajuste de la guía y la cuadrícula, es específico de cada imagen. * El espaciado de la guía, junto con el color y el estilo de la guía y la cuadrícula, es el mismo en todas las imágenes. #### Visualización u ocultación de una cuadrícula, guías o guías inteligentes #### Pasos: * Seleccionar Vista > Mostrar > Cuadrícula. * Seleccionar Vista > Mostrar > Guías. * Seleccionar Vista > Mostrar > Guías inteligentes. * Seleccionar Vista > Extras. Este comando también muestra u oculta bordes de capa, bordes de selección, trazados de destino y sectores. ### Empezar a crear usando los recursos Una vez que el canvas está listo con el tamaño apropiado, guías y cuadrículas es momento de iniciar a crear utilizando los recursos que previamente decidiste para el proyecto. ### Refinar Refinar el diseño que ya has creado incluye revisar y reconsiderar lo siguiente: * Consistencia en espaciado * Consistencia en tipografías y tamaños * Consistencia en jerarquía, interlineado e interletrado ### Entregar Una vez que el trabajo este culminado debes exportarlos en todas las versiones solicitadas por el cliente # ¿Que son conversiones o resultados? Una conversión o un resultado es una acción tomada por la persona que interactúa con el material diseñado. Los productos que generamos para nuestros clientes, ya sea en formato digital como web ads, banners, imágenes para redes sociales o en formato de impresión como flyers, brochures o banners tienen todos de trasfondo un objetivo para el cliente. Un negocio puede tener como objetivo más llamadas que le generen más prospectos y para lograrlo identificó que puede utilizar un flyer. En este caso debemos tener en cuenta el objetivo principal del flyer: lograr más llamadas de prospectos. # Los 5 principios del diseño enfocado en generar conversiones y resultados **Generar atención en el usuario.** El primer paso para lograr convertir al usuario requiere de su atención, debemos usar elementos gráficos o de texto que capten de forma rapida la atencion del usuario. **Generar acción en el usuario.** Un buen material de marketing siempre debe generar una acción que esté alineada con el objetivo del cliente. **Encapsular el contenido más importante.** Si el objetivo es generar clics o llamadas telefónicas, encapsular con elementos de diseño como recuadros o botones ayuda al usuario a identificar la acción que queremos que tome. **Hacer uso del contraste para resaltar el contenido importante.** Si el contenido más importante no se distingue del resto lo más probable es que pase desapercibido. **Dirigir el ojo del usuario con pistas gráficas o visuales.** Puedes utilizar flechas, imágenes sugestivas o cualquier elemento creativo que invite al usuario a mirar a donde quieres. # Psicología del consumidor Cuando diseñamos material de marketing el objetivo es generar acción en el consumidor. **La disonancia cognitiva: diseño para la duda**\ Los seres humanos luchan cuando su identidad y sus valores no son consistentes con su comportamiento. El diseño debe ayudar a reducir la tensión posterior a la compra, generando confianza. **Atención selectiva: plan para distracciones**\ El diseño compite por atraer la atención del usuario en medio de un mar de contaminación visual. Es por ello que debes considerar que tu diseño no está aislado. La atención selectiva apunta al hecho de que las personas están expuestas continuamente a múltiples estímulos y son conscientes de que responden a los deseos y necesidades de activos. Es decir, filtramos la información que no coincide con lo que estamos buscando. **Valor percibido**\ El cliente sabe cuando un producto es superior, es responsabilidad del diseñador comunicarlo visualmente. La percepción es un poderoso concepto en la psicología que se ocupa de nuestra capacidad para organizar e interpretar la información proveniente de todos los estímulos que nos rodean. El valor percibido es una valoración subjetiva profunda, pues lo que parece muy valioso para uno puede no tener importancia para otros. **Motivación**\ La motivación es algo que altera el comportamiento de los usuarios. Comprender la fuente de la motivación de nuestro público nos ayudará a comunicarse más con empatía y a lograr los objetivos de diseño. **Aspiraciones**\ El comportamiento de los otros, los objetos y actitudes forman aspiraciones que influyen en nuestro comportamiento. Como diseñadores hay que estar preparados para integrar aspiraciones en diversas piezas de comunicación. Las aspiraciones no son nada más que un deseo de esperanza de convertirse en algo, por lo que los diseñadores deben aprovechar esto para persuadir. Al seleccionar las imágenes para complementar las piezas de diseño, piensa en cómo el ser humano se relaciona con ellas para parecerse a esa imágenes