El uso de la ilustración en el diseño web
La ilustración es una herramienta increíblemente versátil que puede encontrar muchos usos diferentes en el diseño. Y cuando se trata de diseño web, podemos encontrar una gran variedad de implementaciones.
Hoy quiero profundizar en algunas formas clave en las que se ha puesto en marcha esta herramienta para que podamos extraer nuevas ideas que inspiren y desafíen los diseños que producimos.
Comencemos en algún lugar que rara vez hago, con una definición básica: Ilustrado: 1) Para aclarar ; 2) Dejar en claro dando o sirviendo como ejemplo o instancia; 3) Proporcionar características visuales destinadas a explicar o decorar .
Parece que en el mundo real del diseño web, la ilustración tiende a realizar ambas funciones a la vez. Embellece mientras aclara. Y si solo está haciendo uno de estos, quizás deba preguntarse por qué. Tal vez al poner la ilustración a trabajar para cumplir ambos roles es la forma de aprovechar verdaderamente el elemento de diseño para todo lo que vale.
Esto, por supuesto, no quiere decir que un diseño no puede tener éxito si solo maneja uno u otro; sin duda puede. Pero para aprovechar al máximo nuestro trabajo, encuentro que desafiar nuestro pensamiento siempre es útil. Como de costumbre, profundicemos en algunas agrupaciones de muestras para ver qué se puede hacer con este dispositivo visual. En el camino, considere si cada enfoque proporciona claridad o decoración, o ambos.
Ilustración temática
El primer acercamiento a la ilustración que quiero cubrir aquí es el uso de este estilo para producir un enfoque temático general. En esta situación, las ilustraciones se ponen a trabajar para establecer un tema general. ¿Estamos escalando montañas, visitando una estación espacial o explorando la oficina de una compañía?
Si bien este enfoque no tiene por qué llevarnos a un lugar, con frecuencia lo hace. En otras situaciones, el estilo simplemente establece un motivo general que sigue el sitio.
La razón por la que nos interesa aquí es que se está utilizando para impulsar el diseño general de una manera radical. La ilustración no es un pequeño elemento de apoyo. En cambio, es el elemento de diseño más destacado y controla todo el diseño.
Lleva a mi jefe a North Cape
En esta muestra, el enfoque no podría ser más claro. El diseño del sitio hace eco claramente de su propósito más básico. La ilustración proporciona una referencia visual de lo que hará el individuo. Y en términos de definir la ilustración, la obra de arte proporciona decoración y belleza a la página.
En este caso, el tema establece firmemente el propósito del sitio y ayuda al usuario a comprender el concepto.
Kit de lanzamiento
Un enfoque temático no tiene que ser tan directo de alguna manera. A veces puede ser una parte más natural de un sitio estructurado más típicamente. En este caso, el sitio es ligeramente único en su diseño, y el tema no obliga a una interfaz exagerada basada en naves espaciales.
En cambio, el tema está entretejido en el diseño de tal manera que comunica sus toques decorativos sin interferir con el contenido. Aquí la ilustración sirve para decorar, pero no aclarar tanto. Esto no es sorprendente en absoluto y, por supuesto, demuestra que no hay una fórmula a seguir.
Atelier Anonyme Design
En otras situaciones como esta, la ilustración temática literalmente ES el sitio. No es un elemento de apoyo, sino que se convierte completamente en el diseño en sí mismo.
Aquí, el uso de la ilustración desempeña claramente un papel decorativo. Pero yo diría que también proporciona un gran nivel de claridad para el visitante. Este es un sitio web para una agencia de diseño. El diseño y la naturaleza de este sitio comunican mucho a sus visitantes. Como tal, estoy seguro de que sirve como un filtro masivo para su base de clientes. Serás arrastrado y amarás su enfoque lúdico y creativo, o serás totalmente desalentado. Entonces, hasta este punto, creo que proporciona una gran claridad sobre la agencia y su mentalidad.
Diseño gráfico Allure
En este sitio, el uso de la ilustración juega un claro enfoque temático también. Aunque el sitio sigue algunas fórmulas de diseño estándar, todo el diseño está envuelto en un diseño temático. Estos elementos impulsan no solo el diseño del sitio, sino que se fusionan con el logotipo principal y la copia utilizada en el sitio. El tema es inmersivo e impulsa todo el mensaje que presenta el sitio.
Muestras temáticas adicionales
Aquí hay algunos sitios adicionales que hacen uso de ilustraciones temáticas para establecer un entorno o tema para un sitio.
Ardilla listada
Drift Boys
Iutopi
Chandu4u
Mascotas
¿Cómo podría cubrir la idea de usar ilustraciones sin revisar una de las más obvias: las mascotas? Con este elemento visual, los diseñadores tienden a personificar el sitio, su producto o propósito con un personaje. La implementación de dicho elemento no solo varía, sino que también lo hace el poder y el razonamiento detrás de él.
InkFinder
En este diseño, la mascota ilustrada desempeña un papel bastante claro. Claro en que echos el nombre del producto. No solo proporciona algo de vida para el diseño, sino que le da cara. De esta manera, el público tiene algo un poco más exclusivo para archivar en su cerebro. Con suerte, la mascota ayuda a hacer una experiencia más memorable y única que ayudará a que el producto se destaque del oído.
Tal vez ese es el propósito más poderoso detrás de una mascota, para ayudar a que algo se destaque. Lo mejor de una mascota ilustrada como esta es que puede ser totalmente única y específica para este producto. Suponiendo que fue hecho a medida para este diseño, debería ser el único lugar donde exista esta ilustración exacta.
El Evnt
Irónicamente, encontramos aquí otra mascota ilustrada como un pulpo (¿qué es una criatura marina de tres patas?). En este caso, la mascota es, obviamente, un paso mucho más lejos de la realidad: un robot de tres patas con un cerebro en una burbuja.
Si bien puede ser una elección extraña, proporciona un elemento distintivo hermoso para el evento. Esta mascota única ofrece un elemento visual genial para conectarse con el evento. Toma una vida propia y realmente conecta a las personas con algo concreto. Supongo que este es exactamente el propósito de una mascota.
El diseño de este sitio es hermoso, pero considere lo aburrido que sería sin esta loca mascota en su lugar. Producir tal elemento no es fácil, pero es extremadamente efectivo en esta situación.
Big Eye Creative
Para ver un ejemplo de una mascota que no está basada en el pulpo, eche un vistazo al Big Eye Creative sitio. Aquí la mascota no juega un papel predominante en el diseño. Sin embargo, le agrega mucha personalidad. Obviamente, las otras ilustraciones y el estilo general del sitio hacen una presentación menos formal. Pero la mascota en el logotipo está presente en todo el sitio. Esto asegura que su estilo desenfadado impregne el diseño.
Ilustraciones adicionales de la mascota
Aquí hay algunas muestras adicionales de mascotas en el trabajo en el diseño. Incluyendo otro pulpo más; parece que es muy popular de usar.
Pioneer Records Management
Argyle Octopus
Coucou
Konsebt
Decoración ilustrada
El siguiente tipo de uso que me gustaría considerar es a lo que me refiero como decoración temática. Esto es cuando la ilustración se pone a trabajar de una manera decorativa que realmente no proporciona una referencia física específica. Por ejemplo, la mayoría de las veces, la ilustración incluye imágenes de personas, animales, objetos o lugares. Pero en este caso, la ilustración no representa nada real, sino que simplemente proporciona decoración para embellecer el diseño de una manera que solo la ilustración puede. Como siempre, aclaremos esto a través de algunas muestras.
1000 temas de WP
Para nuestro primer ejemplo, considere la 1000 temas de WP sitio web En este sitio, el uso de la ilustración proporciona un marco y estilo subyacente para el sitio. Pero lo hace en lo que es más puramente decorativo. El estilo general se siente como una ilustración y, sin embargo, no tiene los elementos humanísticos típicos.
Ahora, quiero contradecirme por completo. Creo que el estilo es predominantemente decorativo. Pero realmente puedo ver cómo podemos argumentar que proporciona un nivel de aclaración para el sitio. El estilo que usa el diseño se conecta con un público determinado. Dice algo sobre el estilo del sitio y los temas que podrían producir. De muchas maneras, la calidad del diseño ilustrado demuestra la calidad del trabajo que puede esperar ver a través de este sitio. De esa manera, la aclaración es tal vez más sutil y menos en su cara, pero presente de todos modos.
Historia de Coca-Cola
En este sitio web encontramos otro diseño impulsado por la ilustración. Aquí hay algunos elementos ilustrados que demuestran cosas reales, pero la mayor parte del enfoque temático se establece con una decoración pura. Este ejemplo no solo demuestra el enfoque, sino que también muestra que casi ninguna técnica se usa de forma purista. La realidad es que probablemente combinará estos elementos de varias maneras.
Metaphiziks
En este ejemplo final de ilustración decorativa, encontrará algunos excelentes elementos de fondo. Algunos de estos son más tangibles que otros, pero en general se trata más de elementos de apoyo estilísticos que cualquier otra cosa. Es notable lo bellos que pueden ser esos dibujos lineales simples cuando se combinan con bellos textos, colores bien elegidos e iconos simples. El resultado final aquí es fantástico y notablemente hermoso.
Más diseños con decoración ilustrada
Aquí hay algunas muestras adicionales para completar este tipo de ilustración en el diseño.
Magdalenas de Moo
Empleos de tecnología
Pixel Stadium
Bolsas personalizadas HQ
Texto ilustrado
El texto renderizado a mano no es un concepto nuevo, y es algo que he cubierto muchas veces antes . Sin embargo, nunca he considerado tal enfoque con una perspectiva de ilustración.
El texto de renderizado manual es una variación popular del texto ilustrado y una gran solución para muchas creatividades. Por un lado, es una gran manera de poner en práctica todo el entrenamiento práctico de la escuela de arte. En segundo lugar, es una gran manera de producir algo único. Después de todo, si renderiza texto, será 100% único. Incluso si dibuja sobre un tipo de letra existente, se convertirá en una creación distinta.
Rangus
Este es un ejemplo perfecto de tipo ilustrado. El estilo es extremadamente hermoso, totalmente único y muy atractivo. Pero no se detiene allí. El tipo de mano representa en realidad los talentos individuales. Muestra que crea obras de arte con sus manos y se conecta perfectamente con sus habilidades de animación. En particular, me encanta el hecho de que todo se basa en un tema de pizarra, ya que realmente une perfectamente el tema y los elementos. En mi opinión, este sitio demuestra cómo la ilustración unificadora puede ser con el propósito y el mensaje del sitio.
Joey Lomanto
En este caso, el texto ilustrado es mucho más sutil. En lugar de manejar toda la dirección del diseño, simplemente se juega muy bien. De hecho, en la primera toma, es posible que ni siquiera note el estilo dibujado a mano del texto grande de la página de inicio. De acuerdo, el texto podría ser una fuente, pero se ha usado de tal manera que se combina perfectamente con el estilo del sitio. De todos modos, el estilo está muy bien unificado y la ilustración juega muchos roles en el diseño general.
Ir a vivir
Sin embargo, el texto ilustrado no necesita ser renderizado a mano. Como encontrará en este ejemplo, el texto se diseña de varias maneras que convierten el texto en sí mismo en partes de la ilustración general. La belleza de este enfoque es que unifica el texto con las otras ilustraciones. Esto evita una sensación menos unificada donde simplemente tiene ilustraciones sobre texto estándar basado en web. Esto último puede funcionar, pero en este caso el impacto del texto ilustrado es claro.
Muestras adicionales de texto ilustrado
Los siguientes ejemplos encajan holgadamente en esta categoría. Digo vagamente porque a veces es difícil decirlo, ya que a veces es algo sutil. En algunos de estos casos, el texto simplemente parece una obra de arte, así que lo he colocado en esta colección.
Rebelión de contraste
Fakta
La Web Shop
Ilustraciones informativas
Por la definición misma de ilustración, uno de sus propósitos es aclarar y explicar. Por lo tanto, es lógico que encontremos algunos ejemplos donde las ilustraciones lo hagan con extraordinaria claridad.
Libresco
Comencemos con el Libresco sitio. En este diseño inusual, encontramos que las ilustraciones simbolizan muy claramente los diversos puntos del diseño de la página de inicio. Cada bloque tiene un elemento visual que no solo lo embellece, sino que lo más importante, lo explica. Tanto es así que, como lector, casi ni siquiera tengo que leer la copia. La ilustración de dispositivos en la parte inferior izquierda demuestra especialmente esto.
Conferir
De una manera mucho menos prominente, la ilustración en este diseño resulta igualmente informativa. La ilustración simple solo muestra el tema del sitio. Puede que no te golpee en la cabeza con su mensaje, pero se hace eco del propósito del sitio maravillosamente.
Activar
La ilustración en este diseño no solo comunica información sobre el evento que representa, sino que también hace eco del propósito del evento. Este evento particular gira en torno a la desconexión de la tecnología. Es una oportunidad para las personas inundadas de tecnología para escapar de sus garras.
La ilustración aquí nos muestra lo que harán los asistentes, por lo que es informativo. Y por su propia naturaleza, la ilustración rompe con la tecnología y se enraiza en una sensación puramente orgánica, una forma fundamentalmente genial de comunicar el propósito del sitio.
Ilustraciones más informativas
Estos sitios adicionales también demuestran la idea de ilustraciones que nos informan. Algunos son iconos pequeños y básicos, mientras que otros son elementos inmersivos que definen y representan completamente el contenido.
Vitality City
Uklizenodoma.cz
Qubiq
Un antídoto tecnológico
Con el último ejemplo (The Activar sitio) entramos en lo que quiero considerar a continuación, el uso de la ilustración para romper con la sensación de las cosas orientada a la tecnología. A veces es necesario desconectarse de los fundamentos tecnológicos de la web y demostrar una sensación muy orgánica. La ilustración es una de las herramientas más poderosas para lograr tal idea.
Aplicación de envío
Esta página sencilla próximamente es extraordinaria. Y claramente cómo logra su belleza es radicalmente simple. Una sola gran ilustración en solitario nos distrae del hecho de que se trata de una página web. Se siente más como una obra de arte que tiene un pequeño elemento interactivo, sin duda una gran manera de causar un gran impacto en los usuarios y establecer una imagen memorable.
Muziekpark
Si bien este sitio no hace uso de un enfoque tan radical, la ilustración sigue siendo grande y prominente en el diseño. Aquí las imágenes animadas respiran vida en la página. Combine esto con un diseño creativo e inusual y se siente completamente separado de la tecnología que lo impulsa. Quizás el hecho de que no se vea como un sitio normal juega un papel importante en esto también. También considere que la ilustración en este caso realmente ayuda a informarnos sobre el tema del sitio.
Egopop
En otro diseño atípico encontramos que la ilustración se puso a trabajar. Aquí la obra de arte no solo nos dice sobre el individuo que representa el sitio, sino que también nos saca de la mentalidad normal de la web que un visitante podría tener. Una vez más, parece más una obra de arte interactiva que un sitio web. Si este es su objetivo y necesidad, entonces este es un gran enfoque a considerar.
Zaarly
Comparado con los ejemplos anteriores, el Zaarly el sitio se encuentra en marcado contraste. Aunque el diseño se rige por una sola ilustración grande, y esta ilustración sirve para establecer un tono para el sitio, la función subyacente es mucho más compleja que estas otras muestras.
Este sitio es una aplicación que está destinada a ser utilizada. Y la ilustración ayuda a establecer un cierto conjunto de expectativas. Da una sensación alegre y humanista que es claramente un sentimiento muy orgánico y natural. Imagine esto en contraste con aplicaciones semi-minimalistas sin personalidad en absoluto. El diseño le da al sitio un sentido de accesibilidad y cambia nuestras expectativas.
Conclusión
El uso de la ilustración en el diseño es una práctica antigua, y su aplicación a la web es clara. Como con cualquier elemento de diseño, disfruto el proceso de reconsiderar su propósito y uso. A través de tal esfuerzo, inevitablemente descubro que entiendo mejor cómo funciona, maneras de aprovecharlo para un propósito intencionado y, en última instancia, algunas ideas nuevas e inspiradoras.
¿Cómo se usa la ilustración en el diseño web? Por favor comparte tus propias experiencias a continuación ...