Desde pinturas rupestres de 45 000 años de antigüedad hasta diagramas de cohetes espaciales del siglo XXI, las ilustraciones han desempeñado durante mucho tiempo un papel importante en la comunicación humana.
Representa barreras entre idiomas y alfabetización, lo que permite a las personas comprender y comunicar estados de ánimo y sentimientos complejos que no pueden expresar con palabras. Cuando éramos pequeños, podíamos entender y apreciar las ilustraciones de EH Shepard de Winnie the Pooh y amigos mucho antes de que pudiéramos leer las palabras de AA Milne.
La palabra ‘ilustrar’ tiene dos significados principales: crear una imagen de; y para demostrar o proporcionar un ejemplo de. En el contexto de la web, la ilustración es en parte decoración, en parte señal emocional, que ayuda a crear una impresión particular en el usuario al pintar una imagen metafórica.
¿Por qué usar ilustraciones en un sitio web?
Las ilustraciones proporcionan un medio abreviado útil para transmitir el estado de ánimo o el tono, la voz de una marca.
Se podría argumentar que los íconos son ilustraciones porque son pictóricos, pero son símbolos. Los íconos pueden, y por lo general deben, encajar estilísticamente con las ilustraciones, pero no son ilustraciones en sí mismos. Un símbolo es una representación simplificada de un objeto, idea o acción. Por ejemplo, ‘buscar’ generalmente se representa con una forma de lupa.
Las ilustraciones, por otro lado, son más complejas. Transmiten una cualidad emocional subyacente que conecta con el público objetivo. Las ilustraciones pueden crear una narrativa sobre el tema sin necesidad de agregar más texto. Le da un sentido de personalidad incluso al sitio web más básico y funcional cuando se usa correctamente.
Tipos populares de ilustración en línea
Los estilos de ilustración son muchos y variados, desde contornos simples hasta imágenes detalladas, a todo color y realistas. Y la cantidad de ilustraciones utilizadas varía mucho de un sitio a otro.
Los diferentes estilos evocan diferentes sentimientos y provocan diferentes respuestas, por lo que es importante pensar detenidamente al elegir un estilo de ilustración. Hay dos factores principales a considerar: para qué es el sitio y qué tipo de carácter quieres darle.
Es posible dividir las cosas en categorías amplias para ver qué funciona mejor en diferentes áreas. Vamos a ver cómo los diseñadores pueden usar la ilustración con buenos resultados en cuatro categorías…
Financiero y Corporativo
Los servicios financieros, la tecnología financiera, el software empresarial y los sitios corporativos más grandes tienden a usar la ilustración como una forma de humanizarse.
El estilo tiende a ser minimalista, utilizando formas simples y con moderación. bellotas utiliza un motivo de hoja de roble simple para combinar con su logotipo de bellota. Otras ilustraciones están ligadas manteniendo tonos de verde.
Esto crea una sensación típica de las empresas más nuevas (Acorns se fundó en 2014), especialmente aquellas que se basan principalmente en la web.
Las organizaciones más tradicionales y establecidas desde hace más tiempo utilizan la ilustración para los mismos propósitos, aunque pueden estar restringidas solo a ciertas áreas, donde quieren enfatizar la accesibilidad. banco danskepor ejemplo (fundada en 1871), tiene una ilustración en su sitio corporativo en las secciones ‘Acerca de’ y ‘Sostenibilidad’.
Visa también limita la ilustración a un área específica, la sección sobre Visa Direct. Esto tiene el efecto de separar este servicio particular (más nuevo) del resto de lo que ofrece Visa.
Otro enfoque cada vez más popular en esta categoría son los gráficos abstractos. Esto es particularmente útil cuando es difícil mostrar lo que se está promocionando. Por ejemplo, Instabase agrega arreglos de formas geométricas para el interés visual, utilizando la misma paleta de colores que los íconos del sitio.
Uno de los puntos clave con la ilustración en este tipo de sitios es lograr el equilibrio adecuado entre amigable, humano y accesible por un lado y serio, confiable y seguro por el otro. Ponte demasiado cursi y los clientes potenciales no te tomarán en serio. GithubLa página empresarial de tiene algunas ilustraciones, pero el color es menos vívido y solo se alude a Octocat, a diferencia de la página de inicio, que es rica en ilustraciones.
Comida y bebida
Las cosas se vuelven un poco más libres cuando se trata de comida y bebida. Los estilos varían mucho más y la personalidad transmitida puede ser más fuerte e individual. Algunos todavía optan por un toque ligero de ilustración, con aspectos como el color y el tipo más fuertes, mientras que en otros casos, la ilustración se vuelve mucho más prominente.
Cocina Palais y Caleño ambos hacen lo primero, con dibujos lineales apropiados para la marca.
Mi bebidaLas ilustraciones animadas de estilo vintage toman el lugar de las fotografías para equilibrar el texto en su página de inicio.
Miel de Melopeion no usa muchas ilustraciones, pero lo que sí usa es grande.
mono47 podría describirse como un sitio web conceptual, y las ilustraciones juegan un papel clave. (El menú de redes sociales es bastante encantador).
Hospitalidad y Ocio
En esta categoría, lo que los usuarios realmente quieren ver son fotografías, pero la ilustración también puede ayudar. Una fotografía solo puede mostrar cómo se ve algo, mientras que la ilustración puede agregar la dimensión emocional adicional relacionada con una experiencia.
En el extremo mínimo de la escala, Alquiler de coches Protos utiliza algunas ilustraciones bonitas y sencillas para enfatizar el aspecto festivo de su negocio.
Comptoir libanés combina fotografías con ilustraciones para crear una identidad muy distintiva.
Hotel Frida también se trata de personajes, y las fantásticas ilustraciones de animales de estilo victoriano ayudan a crear una peculiaridad.
Suprema Corte utiliza ilustraciones de diseño simplificadas y estilizadas para ofrecer una visión general más completa del interior del edificio que las fotografías.
El País de Nunca Jamás no solo usa ilustraciones; todo el sitio es una experiencia inmersiva basada en la ilustración.
La Web Responsable
Los sitios que promocionan empresas éticas o sostenibles, cuidado natural de la piel, alimentos y bebidas naturales y/u orgánicos, productos veganos, responsabilidad social, etc., tienden a depender en gran medida de las ilustraciones, especialmente si son razonablemente nuevas.
Muy a menudo, esto es en forma de dibujos de plantas que hacen una alusión perezosa a la naturaleza, pero también puede implicar transmitir información de una manera que no parezca una lección.
almas salvajes se mantiene alejado de cualquier indicio de hippie, con una sensación de aleatoriedad en la ubicación de la ilustración.
Ginebra de superalimento hace lo de la planta, pero aquí se refiere a los ingredientes botánicos, por lo que es muy relevante.
La página principal de la empresa de Capsul’in es una oferta bastante estándar, pero por su Impacto cero producto, tiene una sección separada con ilustraciones para ayudar a explicar las características del producto.
Donar responsablemente usa ilustraciones para explicar cómo una acción bien intencionada puede ser dañina sin darse cuenta sin que parezca regañar o ser condescendiente.
Una variedad de marcas para niños usarán ilustraciones, incluso cuando los padres o tutores sean realmente el objetivo, y Pequeño bostezo colectivo combina los enfoques de productos naturales y amigables para los niños con sus ilustraciones de animales dormidos.
Uso de ilustraciones en la Web
La ilustración puede ser una herramienta poderosa en el arsenal de un diseñador, pero puede ser difícil hacerlo bien porque evoca emociones, y las emociones son subjetivas.
Al igual que el tipo o el color, debe usarse de manera adecuada y con cuidado. A veces, menos es más y, a veces, lograr la ubicación correcta puede marcar la diferencia entre un diseño exitoso y un fracaso.
Esta es solo una selección de la amplia gama de estilos de ilustración y usos que existen en la web, pero esperamos que le brinde un punto de partida cuando esté considerando si usar ilustraciones en su próximo proyecto y cómo hacerlo.