Aprende Conceptos Importantes de Diseño Gráfico

Aprende Conceptos Importantes de Diseño Gráfico

Los fundamentos del diseño gráfico: Los elementos

Hay en total seis elementos de un diseño que usted necesita ser consciente de: la línea, la forma, el color, la textura, el valor y el espacio.

1. La línea

La línea está generalmente presente en cada diseño, incluso si es una frontera sólida de 1px o una punteada de 5px. Cada sitio web tiene líneas, pero el estilo minimalista que se hizo más popular en el último par de años trata de borrar las líneas de los diseños, o al menos para disminuir el uso de ellos.

Las líneas pueden ser largas, rojas, rectas, delgadas, azules, discontinuas, cortas, negras o curvas, todas ellas están en la misma categoría. La mayoría de las veces se utilizan para la delimitación entre diferentes secciones de un diseño, o se utilizan para dirigir la visión de un espectador en una dirección específica.

Las líneas pueden crear diferentes efectos y efectos visuales. Mientras que una línea gruesa y audaz llama la atención debido a su poder visual, las líneas finas tienden para ir la otra manera. El color tiene un impacto también, los colores oscuros son más fáciles de ver y llamar más la atención que la luz o los colores pálidos.

Y esto no es todo. El estilo de una línea también puede influir en la forma en que el usuario la ve. Este estilo se puede definir fácilmente a través de CSS y puede ser sólido, punteado y discontinuo entre otros. Las líneas sólidas tienen un impacto diferente que las punteadas, porque son más imponentes.

El estilo minimalista del que he hablado anteriormente utiliza líneas menos sólidas o líneas más curvas, ya que dan un aspecto dinámico y fluido a un diseño, que es también el propósito del estilo. Ellos indican la energía, mantener al usuario interesado y, si se combina con la ilustración, son muy poderosos para el ojo humano.

Hace muchos años las líneas sólidas eran muy populares porque determinaban el estilo del diseño: rígido, sólido y organizado. La web ha cambiado en los últimos años y este estilo ya no es muy popular, especialmente para los portafolios de diseñadores y otras páginas con una fuerte necesidad de un toque personal.

Las líneas separan las dos columnas y no son muy audaces.

Las líneas sólidas se utilizan para separar diferentes partes del sitio web.

2. La forma

La forma, o la forma, es el segundo elemento más utilizado de un diseño web. En realidad son líneas combinadas en diferentes formas. Las formas son todavía populares y esto es porque si hay algo que necesita destacarse, las formas son una de las maneras de hacerlo.

Puede haber círculos, cuadrados, rectángulos, triángulos o cualquier otra forma abstracta; La mayoría de los diseños incluyen al menos uno de estos. Los diseños minimalistas lo utilizan mucho, porque a menudo se basan en ilustraciones y dibujos.

El viejo estilo de diseñar Web site incluyó formas también, así que permanecieron populares durante todo el tiempo y continuarán probablemente siendo como eso.

Al igual que las líneas, las formas también están asociadas por la mente humana con diferentes movimientos. Por ejemplo, los círculos están asociados con el movimiento y la naturaleza, mientras que los cuadrados se ven a menudo como estructurados, diseños básicos. Al igual que con las líneas, el color, el estilo, el fondo o la textura de una forma pueden cambiar totalmente la percepción del espectador.

La cartera de Fred Maya utiliza formas para enfatizar el logotipo y el trabajo anterior.

3. Texturas

Las texturas no eran muy populares hace un par de años, pero tienden a ser cada vez más utilizado. Ellos reemplazaron (o compiten con, si se puede llamar una competencia) los fondos de un solo color.

Las texturas pueden parecerse a los colores de fondo sólidos, pero si se analizan más de cerca, se pueden notar diferencias pequeñas pero efectivas.

Los estilos de textura incluyen papel, piedra, hormigón, ladrillo, tela y elementos naturales, entre colores planos o lisos. Las texturas también pueden ser sutiles o pronunciadas y pueden usarse con moderación o liberalidad. Ellos trabajan con casi todo.

Incluso si no parecen importantes, las texturas pueden cambiar totalmente un sitio web y ofrecer un impacto visual totalmente diferente.

Cartera de Jason Julien utiliza una textura de grunge.

Esta página web utiliza una textura diferente a la del primer ejemplo, que parece un cuaderno de matemáticas.

4. Color

El color puede incluso ser el elemento más importante de un diseño, ya que ofrece el impacto visual más poderoso en un solo vistazo. El color es obvio y no necesita habilidades gráficas básicas para ser notado.

Mientras que las líneas y las formas significan lo mismo que en la realidad, sólo a un nivel un poco más profundo, el color significa exactamente lo mismo que en la naturaleza. El color crea emociones – el rojo es apasionado, el azul es tranquilo, el verde es natural.

Incluso si no te das cuenta de esto, los colores tienen un efecto claro en tu mente.

Se han hecho estudios y una persona que vive en un ambiente rojo tiene un latido cardíaco y un pulso más alto que una persona que vive en un ambiente azul. El cerebro humano ve esto e influye en el resto del cuerpo.

Por lo tanto la teoría del color es muy importante saber, porque no muchos diseñadores pueden llamarse expertos en este campo. Ser un maestro de los colores podría hacer la diferencia entre un buen diseño y una impresionante.

No estoy diciendo que usted tiene que saber todos ellos, pero sabiendo cómo el tono, la saturación, la cortina, el tinte, el tono o el chroma trabajan juntos es crucial para un diseñador gráfico.

Feed Fever utiliza diferentes colores para el texto, tratando de enfatizar la importancia de cada línea con un matiz diferente.

5. Valor

No he especificado el valor anterior, incluso si está estrechamente relacionado con el color, porque el valor es más general y representa lo oscuro o ligero que es un diseño. El valor tiene mucho que ver con el humor también, sólo a un nivel más profundo.

Comprender los colores te llevará cerca de la perfección, pero saber cómo funciona el valor te llevará más allá de esto. Los diseños más ligeros ofrecen un impacto y una sensación diferentes que los oscuros y usted necesita un ojo experto notar diferencias y decidir cuál es el mejor.

6. Espacio

El espacio y cómo se utiliza es de crucial importancia en el diseño. Últimamente el “espacio en blanco” (también llamado espacio negativo) se utilizó ampliamente porque permite al ojo humano leer más fácil.

Para quien no está familiarizado con el término “espacio en blanco”, no significa exactamente el espacio lleno de blanco, sino cada área del diseño que sólo se llena con el color de fondo. Puede ver varios ejemplos a continuación para entender mejor el concepto.

Si hay un montón de espacio negativo en su diseño web, que ofrece luz y una sensación de apertura. La falta de espacio en blanco convertirá su diseño en un anticuado, desordenado. El espacio también tiene mucho que ver con cómo el diseño es percibido por el ojo humano.

Incluso si he dicho que el color es quizás el elemento más importante de un diseño, el espacio está definitivamente presente en la parte superior, porque también es muy fácil de notar por el ojo no entrenado. Puede convertir un diseño a su ventaja y obtener lo mejor de su diseño.

Google es el mejor ejemplo de cómo maximizar el espacio negativo.

Site Inspire también utiliza el espacio negativo en los lados y lo combina con una tipografía bien adaptada.

Conclusión

Estos son los elementos básicos que un diseñador gráfico principiante debe conocer. Tener este conocimiento le permitirá pensar más centrado en el usuario y el diseño con un mejor estilo. Sin embargo, esto no lo es todo.

Hablemos sobre los principios del diseño.

Los fundamentos del diseño gráfico: Principios

En la primera parte cubrimos los elementos básicos del diseño gráfico con formas, líneas, texturas y colores, entre otros.

En esta sección vamos a ir un poco más en profundidad y echaremos un vistazo a los principios de diseño, que son muy importantes saber porque son lo que separan a los buenos diseñadores de los diseñadores increíbles. Algunos de los principios que cubriremos hoy se aplican inconscientemente, pero definitivamente existen y te mostraremos ejemplos de la web para ilustrar los conceptos.

1. Equilibrio

El equilibrio es cómo los elementos de un diseño se distribuyen a lo largo de un diseño. Si el equilibrio es bueno, entonces la estabilidad está asegurada, aunque últimamente muchos diseñadores buscan diseños desequilibrados porque son dinámicos y ofrecen una perspectiva totalmente diferente.

Las páginas personales son las más adecuadas para diseños poco equilibrados, y pronto verá algunos ejemplos.

Para poder notar qué tipo de equilibrio tiene un sitio web, necesita conocer los tres tipos de equilibrio : simétrico, asimétrico y radial . El primero tiene lugar cuando ambos lados de un diseño son los mismos en forma, líneas, textura y así sucesivamente.

Debido a que esta es la forma que diseñamos hoy, esto sucede la mayor parte del tiempo a lo largo de un eje vertical, por lo que cuando hablamos de los dos lados de un diseño, hablamos de izquierda y derecha. Hay también ejemplos a lo largo del eje horizontal ya veces incluso a lo largo de ambos, pero éstos son raros. Los diseños simétricos son prácticamente la mayoría de los sitios web en Internet hasta hace 5 años.

El segundo tipo de equilibrio se produce cuando los dos lados de un sitio web no se parecen entre sí, pero todavía tienen elementos que son similares. Aunque se llama asimétrica, todavía proporcionan cierta simetría, como el primer tipo de equilibrio, sólo en un nivel inferior. Los sitios web asimétricos son cada vez más populares hoy en día (ver diseños de WordPress con contenido en un lado y barra lateral en el otro).

El balance del radio tiene lugar cuando los elementos de diseño se colocan en un patrón circular. Ellos dan una sensación de movimiento, el dinamismo, pero no se ve muy a menudo en Internet, porque incluso los diseñadores más experimentados tienen problemas para diseñar tal diseño.

Como dijimos anteriormente, el equilibrio se logra a través de formas, colores, texturas, líneas y los otros elementos de los que hemos hablado en el primer episodio.

Florida Flourish es un buen ejemplo de un sitio web simétrico total

Duplos utiliza un diseño asimétrico que funciona muy bien.

2. Dominancia y prioridad

Estos dos principios están juntos porque están fuertemente vinculados. Ambos tienen mucho que ver con la experiencia del usuario porque la falta de prioridad y el dominio de los elementos pueden ser confusos.

El nivel de dominancia es el que prioriza la importancia de diferentes elementos, como menú, logotipo, contenido o pie de página. Claro, esto también se hace jugando con la fuente y el tamaño, pero vamos a ir un poco más profundo y ver lo que significan dominancia y prioridad.

Hay tres niveles principales de prioridad . Tenemos el título o llamado a la acción, que viene como un elemento primario; Entonces tenemos los elementos secundarios como imágenes necesarias para hacer un punto o, la mayor parte del tiempo, la navegación.

Obviamente no son el elemento más importante de un sitio web, pero tampoco lo puedes hacer sin ellos. Los elementos terciarios son información como enlaces de pie de página, meta información sobre blogs o diferentes elementos, y un sitio web puede la mayoría del tiempo sin ellos. Sin embargo, se utilizan con frecuencia porque completan el diseño de diferentes maneras, ya sea ofreciendo más información o completando el diseño con algunos elementos.

Area17 hace hincapié en el elemento dominante en la esquina superior izquierda y el mensaje de bienvenida te atrae también por el color.

3. Proporción

La proporción es importante y representa la escala de los elementos comparados entre sí. Tienen un fuerte efecto sobre el usuario y también están vinculados con el principio anterior. No es ninguna sorpresa que los elementos más grandes tengan un impacto más fuerte en el usuario que los más pequeños.

El dominio, la prioridad y la proporción trabajan juntos para asegurar que el usuario ve correctamente la información en un sitio web. Tener una fuente más grande en el pie de página que en el contenido es un error porque no respeta estos tres principios.

Bluecated Interactive utiliza la proporción para llamar la atención sobre la imagen.

4. Contraste

Este es otro principio importante no sólo del diseño, sino también de la fotografía y cualquier otro arte visual. No creo que debamos profundizar en esto, porque todo el mundo sabe lo que significa el contraste.

Tener suficiente contraste entre los elementos se asegura de que algunos de ellos se destacan más que otros. Si los diseñadores desean mezclar elementos juntos, lo hacen por tener el mínimo contraste entre ellos. Si el contraste es alto, los elementos son distintos entre sí.

Si el equilibrio se crea a través de formas y líneas, el contraste se puede crear a través de color. Sin embargo, últimamente el contraste también se ha cambiado a través de la tipografía y la textura, por lo que se vuelve más y más popular.

Tener una tipografía perfecta puede ayudarle a lograr no sólo el contraste perfecto, sino también la proporción, el dominio y la prioridad. Es fácil ver que los tres últimos conceptos de los que hemos hablado están ligeramente ligados entre sí de alguna manera.

Si habláramos un poco más general sobre todo este tema, podríamos ponerlos todos en el mismo párrafo.

El botón “Find My Matches” de eHarmony destaca por un buen uso del contraste.

5. Ritmo

Esto podría ser uno nuevo para usted. El ritmo de la página es el principio que hace que el ojo humano se mueva de un elemento a otro. Asegura el flujo del ojo y en qué orden los usuarios deben ver los elementos.

Ahora esto es difícil de hacer, porque todo el mundo tiene su propia manera de ver un sitio web y hacer que todos lo hacen de la misma manera podría ser demasiado abrumador.

Hay dos tipos de ritmos : el fluido y el progresivo. El primero es una variación y el mejor ejemplo es el movimiento del agua, que fluye en la misma dirección básicamente, pero tiene mucha variación en cómo se mueve. El ritmo progresivo se produce cuando hay una secuencia clara sobre cómo el ojo debe moverse entre los elementos.

La cartera de David Desandro sigue un ritmo muy regular y progresivo

6. Armonía y unidad

El último principio del diseño quiere asegurarse de que incluso si todos los principios anteriores se utilizan correctamente, todavía es imposible crear un diseño impresionante sin armonía y unidad, y esto es muy a menudo visto en la vida real.

A menudo oímos hablar de gente rica que tiene todo lo que quiere, pero carece de armonía y unidad en sus vidas. Es la misma regla en el diseño. Si todos estos elementos funcionan correctamente, entonces usted ha logrado lo que llamamos unidad.

Sólo colocar todos estos elementos en una página sin vincularlos entre sí no crea un diseño, sino una página con un montón de elementos. Si los elementos se complementan y el sitio web es fácil de ojo y ofrece una buena experiencia de usuario, entonces el trabajo que has hecho está más o menos terminado.

No hay realmente necesidad de un ejemplo aquí, todos sabemos que los sitios web con armonía y unidad pueden ser vistos por todo el lugar; Pensar en un sitio web que te gusta mucho y que siempre recuerda. Eso es probablemente un sitio web que tiene armonía y unidad.

Conclusión

El segundo artículo de la serie completa el proceso de análisis de los principios muy básicos de diseño que realmente necesita saber. Después de leer los dos primeros artículos que prácticamente tienen la mayor parte del conocimiento que necesita para empezar a diseñar su propio diseño, pero espera un poco más.

La tercera y última parte cubre los aspectos básicos de la composición, tales como el punto focal, la teoría de la red, las leyes de la gestalt y otras que también pueden usarse para productos como revistas, volantes o folletos.

Los fundamentos del diseño gráfico: Composición

La segunda fue acerca de los Principios de Diseño Gráfico y echamos un vistazo a conceptos tales como Balance, Dominancia, Contraste y Armonía. Hoy vamos un poco más en profundidad con el último artículo y hablamos sobre la composición y sus elementos básicos.

1. Simple Visual

Esta composición es donde se utiliza una sola imagen para el diseño. Esto significa que la imagen suele ser potente, crea un impacto y todo el diseño se basa en él. Ejemplos de páginas visuales únicas incluyen páginas de destino, pero esto es más popular en la impresión que en la web.

La composición visual única es una de las más fáciles de lograr, aunque es necesario seleccionar cuidadosamente la imagen, de lo contrario no tendrá el efecto deseado. El principal principio detrás de este patrón es asegurarse de que la tipografía y los otros elementos de diseño refuerzan el elemento visual y no compiten con él.

Tiene que haber una definición clara sobre cuál es más importante y en este caso la imagen, la ilustración o el elemento gráfico usado tiene que ser el más de gran alcance.

Glitter Dinamarca es un muy buen ejemplo de un solo patrón de diseño visual.

2. La relación de oro

La Ración Dorada, que también es conocida como la Espiral de Fibonacci o Phi, es alrededor de 1: 1.618. La espiral de Fibonacci se encuentra en todo el mundo en diferentes cosas y la web no es una excepción.

Es una buena idea colocar los elementos en un sitio web a lo largo de las líneas de la Espiral, porque esta es la forma en que el ojo humano funciona. La gestión de utilizar la proporción de oro correctamente traerá el foco de los visitantes en cosas específicas que desea enfatizar.

3. Punto Focal

Esto es otro importante porque el punto focal es el que da a los espectadores algo que mirar. El punto focal añade una idea más específica al diseño y actúa como punto de partida para la mayoría de los visitantes.

El punto focal se puede representar a través de una simple tipografía, un botón, ilustración, una imagen o cualquier otro elemento. Es totalmente hasta los diseñadores que es la manera él desea crear un punto focal a través.

Aprende Conceptos Importantes de Diseño Gráfico

El punto focal tiene que estar en foco y tiene que ser el primer elemento que un espectador ve cuando entra en la página (especialmente por primera vez).

Sin embargo, hacerlo demasiado importante y visible romperá el equilibrio del diseño. Mantenga el punto focal dentro de la meta de su sitio y haga que el propósito de la página se muestre a través de ella. Por ejemplo, tener un botón de llamada a la acción es un punto focal, ya que es la acción final que desea que el usuario tome en su página.

4. Diseño de la cuadrícula

Esto no debe ser uno nuevo para usted. La teoría de la red es quizás el elemento más popular de una composición, porque lo hacemos todo el tiempo incluso sin darnos cuenta. Las cuadrículas añaden estructura a un diseño y se utilizan para contener una buena proporción entre los elementos de la página.

Usted puede encontrar un montón de marcos de la red en Internet, que son gratuitos para descargar y construir, y de hecho te recomiendo que los uses si eres un principiante en este dominio. Trabajar desde el principio con las cuadrículas le hará sentirse cómodo con este enfoque y esto es bueno para sus diseños.

Las rejillas no tienen que ser rígidas todo el tiempo, también pueden ser sutiles, pero si usted va para esta opción, a continuación, asegúrese de que el diseño seguirá siendo limpio y refinado antes de la entrega.

Cuando se trabaja con rejillas es siempre una buena idea pedir información de los que te rodean, porque trabajar durante horas con un marco de rejilla delante de ti probablemente hará que tus ojos no vean pequeños errores que necesitan ajustes.

Aprende Conceptos Importantes de Diseño Gráfico

El Sistema Grid

5. Leyes de la Gestalt

Cuando aprendí este principio en la escuela me sorprendió la diferencia que hizo en mis diseños. Las leyes son el resultado de la percepción visual humana de las cosas, incluyendo sitios web y elementos. Las leyes se crean por la forma en que diferentes elementos impactan al espectador.

Existen cinco principios: Leyes de Gestalt: cierre, similitud, continuidad, alineación y proximidad.

Poco explicado, la ley del cierre dice que estamos acostumbrados a cerrar las cosas en nuestra imaginación que no están realmente cerradas. Un buen ejemplo es un círculo cercano que se dibuja sólo en 330 °. El cerebro humano lo percibirá como un círculo entero y completo.

La ley de la proximidad muestra que tendemos a agrupar objetos que están más cerca unos de otros, mientras que la ley de similitud enfatiza lo mismo, sólo que agrupamos las cosas que tienen el mismo color, forma o textura.

La ley de continuación enfatiza que los objetos se agruparán como un todo si son co-lineales o siguen una dirección específica, mientras que la última regla, la de alineación, muestra que los objetos están alineados en función de sus bordes (patrón muy popular) O basado en sus líneas centrales. Los objetos también pueden superponerse entre sí.

La Ley de Clausura de la Gestalt

La Ley de Gestalt de Proximidad

En realidad, hay más Leyes de Gestalt, pero no todas son importantes para los diseñadores. Al final del artículo puedes encontrar un enlace con todas las leyes y puedes aprender más sobre cada una de ellas.

6. El diseño “Z” y “F”

El llamado diseño “Z” se basa en el movimiento normal del ojo humano. Como dice el nombre, la mayoría de las personas que han sido observados en los ojos miran una página web en forma de Z, lo que significa que comienzan en la esquina superior izquierda y terminan en la parte inferior derecha.

Administrar para alinear todos los objetos en una página de inicio a lo largo de esta forma definitivamente proporcionará mejores resultados y hará su diseño más eficiente.

Aprende Conceptos Importantes de Diseño Gráfico

Diseño en forma de Z

Hay otro tipo de diseño, así, en forma de F. Esto significa que los usuarios leen la primera línea y luego continúan leyendo el segundo, continuando así en un orden específico.

Aprende Conceptos Importantes de Diseño Gráfico

Goal Arena es un diseño en forma de F visible

Línea de fondo

Estos son los principios más importantes del diseño y por tener un fuerte conocimiento de cada uno de ellos sus diseños no sólo se verá mejor, pero también ofrecerá una mejor experiencia de usuario.

Creación de buenas interfaces para el usuario hará que mantener su página en mente y, si te acostumbras a trabajar con estos principios, en algún momento en el tiempo, incluso se normal y la lógica.


Conceptos de Diseño Gráfico

Ahora el maestro en diseño Marco Creativo, nos trae estas excelentes recomendaciones para comprender los aspectos relevantes del DISEÑO

 

¡Conclusión !

Claro, hay mucho más conocimiento para obtener sobre todas estas leyes, pero este conocimiento viene junto con la experiencia y realmente no se puede obtener sólo de los libros, sino por la práctica.

Al mirar hacia atrás, ya deberías tener suficiente conocimiento de los elementos básicos de un diseño gráfico y espero que si eres un principiante, esta serie de artículos te hace pensar más seriamente en una carrera de diseño gráfico.


Gracias por acompañarnos en este artículo.
¡Recuerda si te gustó dale like y compártelo por favor :)!