Conceptos Básicos de Composición en Diseño Gráfico

Clase 3 de 22 • Curso de Diseño para Developers

Resumen

6 Conceptos básicos del diseño

Te ayudan tanto en composiciones de ilustraciones, webs, editoriales, etc.

-. Balance: La estructura y estabilidad de una composición en donde la posición de cada elemento está dada por su peso visual. puede ser un balance simétrico o asimétrico. -. Contraste: lo usamos para señalar un concepto marcando la diferencia, ya sea por tamaño, color, etc. de dos elementos distintos. -. Alineación: nos permite crear una ruta visual entre diferentes elementos que queremos señalar al usuario. -. Proximidad: nos permite agrupar diferentes elementos. Puede ser por formas, colores, etc. o físicamente. -. Repetición: se usa para generar un concepto de marca. Muchas marcas usan siempre los mismos colores, formas, tipos de letras, etc. Ayuda a reforzar un concepto. -. Espacio: El espacio lo podemos aprovechar colocando elementos de muchas maneras. Podemos poner elementos para reforzar una idea, siempre evitando recargar la composición.

Carlos Nassif Trejo Garcia

student•

Conceptos

Balance: Posición de cada elemento está dada por su peso visual a. Simétrico b. Asimétrico
Contraste: Señalar un concepto marcado por la diferencia entre 2 elementos distintos (claro obscuro, grande pequeño)
Alineación: Crear rutas visuales
Proximidad: Agrupar elementos
Repetición: Concepto de marca
Espacio: Como hacerle uso

Jose Daniel Molina

student•

Buen aporte, muchas gracias

Jose Ignacio Ruiz Corrales

student•

Gracias

Pedro Parra Vela

student•

Mi notas

Si te sirvio dale corazoncito 👆😀

Samuel Santa

student•

¿En qué app haces tus notas?

Pedro Parra Vela

student•

Hola use Miro! ☀️

Carlos José González Juan

student•

6 CONCEPTOS BÁSICOS DEL DISEÑO: Te ayudan tanto en composiciones de ilustraciones, webs, editoriales, etc. -. Balance: La estructura y estabilidad de una composición en donde la posición de cada elemento está dada por su peso visual. puede ser un balance simétrico o asimétrico. -. Contraste: lo usamos para señalar un concepto marcando la diferencia, ya sea por tamaño, color, etc. de dos elementos distintos. -. Alineación: nos permite crear una ruta visual entre diferentes elementos que queremos señalar al usuario. -. Proximidad: nos permite agrupar diferentes elementos. Puede ser por formas, colores, etc. o físicamente. -. Repetición: se usa para generar un concepto de marca. Muchas maras usan siempre los mismos colores, formas, tipos de letras, etc. Ayuda a reforzar un concepto. -. Espacio: El especio lo podemos aprovechar colocando elementos de muchas maneras. Podemos poner elementos para reforzar una idea, siempre evitando recargar la composición.

Maria Emilia Taborda

student•

Genial aporte!!!

Daniel Enrique Astudillo Guzmán

student•

Excelente aporte muchas gracias :D

GEMILLE ADASSI VAZQUEZ ESTRADA

student•

Los 6 conceptos básicos básicos del diseño gráfico

1. Equilibrio o balance . Qué es: el equilibrio es la distribución del peso visual de los elementos gráficos en un diseño. . Por qué es importante: cada elemento gráfico tiene su propio peso visual, ya sea de tamaño, textura, color o contraste. Para lograr el equilibrio, piense en su diseño como una de esas escalas anticuadas. Cuando agrega un bloque de texto, forma o imagen a un lado de su diseño, asegúrese de equilibrarlo en el otro lado con elementos gráficos de una masa similar. De lo contrario, “inclinará la balanza” y su diseño se verá inestable. .

. 2. Alineación . Qué es: Un básico fundamental del diseño gráfico, la alineación es la ubicación de los elementos gráficos en un diseño y cómo se alinean entre sí. . Por qué es importante: un diseño con una alineación deficiente es como un escritorio desordenado se ve desordenado y nadie quiere mirarlo. Una buena alineación, por otro lado, “ordena” un diseño al crear una conexión visual nítida entre todos sus elementos gráficos. Cuando los objetos de su composición están alineados entre sí, llevan la vista sin problemas de una parte del diseño a la siguiente. . Una buena alineación no debería llamar la atención sobre sí misma, pero una mala alineación es difícil de ignorar. Piense en una fila de imágenes en una pared y cuán obvio es cuando una de ellas está ligeramente torcida. Algo simplemente se siente “fuera de lugar” en un diseño cuando las líneas invisibles entre los elementos gráficos no se alinean del todo como sus ojos esperan. .

. El logotipo de 7-Eleven es un gran ejemplo de buena alineación. Notará que la palabra “Once” tiene la misma longitud que la barra superior del número “7”. . 3. Proximidad . Qué es: La proximidad crea una relación entre los elementos gráficos de un diseño. No es necesario agrupar estos elementos para que estén próximos entre sí. Solo tienen que estar conectados visualmente de alguna manera, ya sea en color, forma, tamaño, fuente, etc.

Por qué es importante: La proximidad es una poderosa herramienta de diseño gráfico porque influye en nuestras percepciones. Cuando vemos elementos gráficos que están muy juntos, ya sea en la distancia o en la apariencia, los percibimos como relacionados entre sí. Cuanto más diferentes son, o cuanto más separados están, menos relación parecen tener.

Debido a esto, las áreas en blanco son tan importantes para diseñar como las áreas que se rellenan. Este “espacio para respirar” adicional se conoce como espacio negativo . El espacio negativo fortalece las agrupaciones con la misma eficacia que las diferencia entre sí, creando puntos focales y destacando las partes del diseño a las que desea llamar más la atención. .

. Un excelente ejemplo de proximidad se puede encontrar en el logotipo de Unilever. La “U” está compuesta por 25 símbolos distintos que representan los valores de la marca. El espacio negativo entre cada símbolo los distingue entre sí como entidades separadas. Al mismo tiempo, el espacio negativo alrededor de los bordes exteriores de la forma de U los une a todos como un grupo. . 4. Repetición Qué es: La repetición es el uso de un elemento gráfico más de una vez en un diseño. Ya sea fuente, forma, color, peso o textura.

Por qué es importante: la repetición es un elemento básico del diseño gráfico que a menudo se pasa por alto. En pocas palabras, la repetición “lo une todo”. Los elementos gráficos elegidos al azar pueden causar confusión.

Sin embargo, cuando ve elementos gráficos repetidos a lo largo de un diseño, crea una sensación de cohesión. Y, cuando continúa viendo estos mismos elementos en diferentes canales de marca , la identidad de marca se refuerza, lo que conduce al reconocimiento de marca. .

. Piense en el logotipo de Target. El uso inteligente de la repetición a través de círculos rojos y blancos se extiende también a la marca de los grandes almacenes. Cada anuncio es único, pero cualquiera que esté familiarizado con la marca lo reconocerá de inmediato, incluso sin la presencia de un logotipo. Bastante inteligente, ¿verdad?.

Nuestros cerebros están preparados para el reconocimiento de patrones, y la repetición se conecta directamente a eso. .

. 5. Contraste . Qué es: el contraste es la yuxtaposición de dos o más elementos gráficos con cualidades opuestas. Si bien la mayoría de la gente piensa en el contraste como oscuro versus claro, también puede ser delgado versus grueso, brillante versus opaco, grande versus pequeño, geométrico versus orgánico, etc. . Por qué es importante: el contraste crea el dinamismo que hace que un diseño parezca “saltar” de la página. Crea una jerarquía visual que trae elementos clave a la vanguardia mientras simultáneamente hace retroceder las cosas menos importantes a un segundo plano. Piénselo: si todo el texto de un diseño fuera del mismo tamaño, tendría que hojearlo todo para descubrir el mensaje principal, y nadie tiene tiempo para eso. . El contraste se puede lograr mediante el peso. Al contrastar una fuente más grande y en negrita para el mensaje principal con una más pequeña y delgada para los detalles, se separa la información en fragmentos del tamaño de un bocado y fácilmente digeribles. . Asimismo, el contraste se puede lograr mediante combinaciones de colores . Una forma blanca sobre un fondo negro es mucho más difícil de ignorar que una forma gris en un campo ligeramente más gris. .

. El logotipo de Marvel Studios aprovecha brillantemente el contraste tanto en peso como en color para llamar la atención sobre el nombre de la marca primero. El contraste no solo capta su atención desde el principio, sino que también guía sus ojos directamente a lo que es importante. . 6. Jerarquía . Qué es: la jerarquía dirige el orden en el que vemos los elementos del diseño, de principio a fin. La escala, el color o la disposición de los elementos gráficos determinan la jerarquía visual de un diseño. . Por ejemplo, probablemente notará una forma de color rojo brillante antes de notar una línea delgada como un lápiz. También notará un objeto más arriba en una composición antes de notar uno más abajo. . Por qué es importante: la jerarquía visual guía a su audiencia a través de todo su mensaje en un orden que tenga sentido. Un diseño sin una jerarquía clara bombardea a los espectadores con demasiados mensajes a la vez, sin darles una idea de la imagen completa. Cuando tiene muchos elementos en un diseño, quiere asegurarse de que el mensaje más significativo tenga el mayor peso visual y trabajar desde allí. .

. El Instituto Americano del Petróleo actualizó recientemente su logotipo utilizando la jerarquía como principio de diseño rector. Una línea central divide el logotipo por la mitad, mientras que los colores llamativos dirigen la mirada hacia el logotipo. Luego nos guiamos por una tipografía gris liviana para comprender el significado del acrónimo API. E

Fuente:

Mauricio Doncel

student•

Esta precisión sí que se valora.

Edward Suarez

student•

Página para revisar el nivel de contraste entre colores. https://contrast-ratio.com/

Wilson Delgado

student•

genial!

Jhon Carlos Colorado Angulo

student•

Gracias, buen aporte para nosotros.

José Enrique Pérez Aquino

student•

Hola! Dejo por aqui mis apuntes por si le sirven a alguien :)

Balance ⇒ Existe el balance simétrico o asimétrico, permite proporcionar un peso visual claro de los elementos
Contraste ⇒ Marca la diferencia entre dos elementos distintos. Similar a buscarle las diferencias a dos objetos
Alineación ⇒ Define una ruta visual para mejorar la comunicación del mensaje hacia el usuario. Coloca la información relevante en orden
Proximidad ⇒ Define la clasificación de información, permitiendo un consumo mas ameno
Repetición ⇒ Ocupado para crear concepto de marca, consiste en repetir estilos o patrones de diseño para vincular un producto con un patrón de diseño
Espacio ⇒ La forma en que se pueden acomodar de diferente manera los objetos. Permite aprovechar de manera eficiente el espacio proporcionado

Carlos Arturo Murcia Andrade

student•

Gracias por tus apuntes José. Muy útiles.

Arturo Sanchez

student•

Rolando Mamani Salas

student•

Gran aporte!

Guillermo Garcia

student•

Guadalupe Monge Barale

student•

Está genial. Lo agregué a mis notas. Muchas gracias

Daniel Capa

student•

Gran aporte. Gracias

Tomas Salina

student•

Balance (simétrico o asimétrico) Contraste (claro-oscuro, moderno-antiguo, grande-pequeño) Alineación (vertical-horizontal, centro-extremos) Proximidad (agrupar elementos para indicar las distintas categorías) Repetición (da el concepto de Marca Persona, mismos colores, mismos logos, etc) Espacio (aprovechar el espacio que sobra, siempre teniendo en cuenta el peso de los elementos)

Roger Flores

student•

gracias por el resumen

José Gregorio Block

company_admin•

Gracias

Luis Carlos Sarmiento Baez

student•

Hola Soy ingeniero y programador, pero nunca he entendido bien a que se refieren los diseñadores con el concepto del diseño. qie es realmente? gracias

Roger Carlos Ariel Alba

student•

Hola, Luis

Todo es diseño, todo.

Tu teléfono, tu reloj, tu casa, tus zapatos. El buen diseño es ese que considera todo. El mal diseño es eso que usas y que incomoda.

En cuanto a la web y a la tecnología, todo aquello que es: fácil, simple, que resuelve, es diseño y es buen diseño.

Luis Carlos Sarmiento Baez

student•

Pues yo me refiero mas a cuando ellos dicen, que el concepto de este trabajo es tal cosa osea mas a lo que significa para ellos concepto

Esteban Francisco Sánchez

student•

Note Board - Tablón de Notas les recomiendo esta extensión de google para poder realizar sus apuntes.

Diego Rubio

student•

prefiero manito lapiz y cuaderno, a la antigua

Rolando Mamani Salas

student•

Xavier Carrera

student•

Balance: estructura donde la posición de cada elemento se da por su peso visual. Constraste: Diference marcada entre dos elementos Alineación: ruta visual entre elementos Proximidad: agruapación de diferentes elementos. Repetición: usos de mismos elementos Espacio: lugar donde se aplican los conceptos básicos de diseño

Diego Rubio

student•

super gracias por el aporte

Wilson Delgado

student•

Desbloqueando conceptos de los cuales no caía en cuenta

Diego Rubio

student•

siguiendo tus pasos :D

fermin martin

student•

🙈 Hace tiempo que no veía esta página web 🙈

https://twochimpscoffee.com/ 👈 Les recomiendo que la hojeen en profundidad, merece la pena 😻

Beicker Jesus Zambrano Escalona

student•

En esta aprte me hubiera gustado que explicara bien el por qué ese balance va de arriba hacia abajo y de izquierda a derecha. Al menos yo no lo entendí. ¿Alguien me lo podría explicar?

Leandro Tenjo

student•

Esto es más una opinion personal:

La parte de arriba es más ancha que la de abajo, eso concentra la atención en la parte superior y nos hace empezar por ahi.

Y en el margen derecho parece que la imagen se pierde hacia el fondo. Como sí más adelante hubiera más contenido. Entonces, suponemos que el inicio esta en la izquierda.

Guadalupe Monge Barale

student•

Hola, Beicker. Seguramente ya encontraste más información. Por las dudas, o para estudiantes nuevos, dejo enlace al curso dónde se profundizan estos conceptos

Alejandro Lopez Contreras

student•

confirmo deberian agregar alguna lectura o algun note de notas privadas en platzi :o nose seria una buena idea no? para anotar tus datos y información valiosa por sectores o clases nose ustedes que opinan?

Guadalupe Monge Barale

student•

Hola, Alejo. Lo estamos haciendo. :)

Patricio Villarroel Durán

student•

Como diseñador, les puedo decir que conocer los fundamentos de diseño les hará ver el mundo de otra forma. Será como tener un súper poder, podrán entender cosas que están en frente de sus naricen y no habían notado. Tambien compartirles que el Curso de Fundamentos de Diseño es oro puro y si les interesa aprender de diseño para programar, deben si o sí complementar este curso de diseño para programadores con el de fundamentos de diseño.

Jansenio Gonzales Venegas

student•

buen curso y claro

Juan David Puertas Vargas

student•

Como sugerencia para el curso, luego de esta clase agregaría una lectura que permitiera profundizar aún más los conceptos de diseño para dejarlos claros, y un poco más de ejemplos, ya que con 4 minutos no alcanza a repertirse el concepto.

Guadalupe Monge Barale

student•

Hola, Juan. Seguramente ya encontraste más información. Por las dudas, o para estudiantes nuevos, dejo enlace al curso dónde se profundizan estos conceptos

Junior Jeancarlos Quiroga Mío

student•

Espero les sea de ayuda.

Jimmy Caicedo

student•

Los conceptos básicos orientados a UI https://medium.com/17seven/ui-design-principles-c6e5e63690f0

Conceptos Básicos de Composición en Diseño Gráfico

Introducción

Diseño Eficiente para Programadores: Herramientas y Conceptos Básicos

Entender los Fundamentos del diseño

Desarrollo de la creatividad para diseño y aplicaciones web

Conceptos Básicos de Composición en Diseño Gráfico

Responsive Design: Metodologías y Prácticas Esenciales

Accesibilidad Web: Mejores Prácticas y Consejos Básicos

Creación de un Brief para Aplicaciones de Restaurantes

Aprender sobre Diseño Experiencia de usuario

Diseño UX: Creación de Prototipos y Flujos de Usuario

Creación de Diagramas de Flujo para Diseño de Aplicaciones

Creación de Wireframes para Diseño UX Básico

Aprender sobre Diseño de interfaz de usuario

Diseño UI: Estilos Visuales y Diferencias con UX

Creación de Mood Boards para Aplicaciones Visuales

Psicología del Color y su Aplicación en Diseño Web

Creación de Paletas de Color para Aplicaciones

Selección y Uso de Tipografías en Diseño Web

Creación de Grillas Responsivas con CSS Grid y SASS

Desarrollo de Aplicaciones Web con Componentes Reutilizables

Implementación de Themes en Aplicaciones Web con CSS y SAS

Selección y uso adecuado de imágenes para la web

Uso Eficiente de Animaciones y Videos en Páginas Web

Repaso y Construcción Final de Aplicación Web en React

Conclusiones

Colaboración efectiva con equipos de diseño

Mentoría Expert

Diseño Web Responsive: Integración de Equipos y Herramientas