Listo para tomar un riesgo de diseño? Intenta mezclar fotos e ilustraciones en el mismo proyecto de diseño. Un elemento dibujado a mano puede agregar fantasía e interés a un diseño que incluye fotografía. Por el contrario, una foto puede hacer que un diseño ilustrado más alegre parezca más real o importante.
Esta técnica puede ser un poco difícil de imaginar hasta que vea algunos ejemplos de cómo puede funcionar a la perfección. Hoy estamos analizando esta tendencia y brindando consejos y ejemplos para ayudarlo a desarrollar formas creativas de crear su propio diseño.
1. Usa ilustraciones como acentos de interfaz de usuario
Puede incorporar elementos ilustrados en el diseño todo el tiempo y ni siquiera pensar en ello. Muchos elementos de la interfaz de usuario a menudo se ilustran de alguna manera. No están necesariamente en ese estilo dibujado a mano, pero tienen un botón web menos táctil y más? Mira.
Si quieres probar un efecto dibujado a mano, ponlo en marcha. O considere usar un boceto como una marca de acento.
WittyCookie, arriba, utiliza una combinación de ilustraciones y un video de estilo héroe para atraer a los usuarios al diseño. La página de inicio (no se muestra) presenta una ilustración. Lo que es bueno es el elemento de la fantasía aquí. Elementos dibujados a mano? Colgar? del video. El resultado hace que el sitio se sienta menos como un argumento de venta para trabajar con la agencia y más como si se divirtieran juntos.
El concepto es interesante y no abrumador. ¿Y la mejor parte? Es una forma divertida de crear interés visual cuando no tiene un buen catálogo de imágenes o videos para trabajar.
2. Ilustrar primero
Si una ilustración es su primer instinto cuando se trata de un proyecto, primero dibuje ese esquema. Realice un boceto de las partes ilustradas y vea dónde va el diseño antes de agregar elementos de foto o video.
Ese es el camino tomado por la Conferencia Made by Few, arriba. Las ilustraciones intrincadas en todo el diseño son impresionantes e incluyen un nivel de detalle que cualquier diseñador puede apreciar. Justo debajo de la imagen del héroe hay un video en bucle con escenas de la conferencia. Lo que hace este pequeño, pero real elemento, es mostrar que se trata de un evento en vivo. Combina eso con las imágenes asombrosas y solo quieres registrarte para ver de qué se trata. El ambiente de la conferencia se ve divertido y moderno gracias al par de video de ilustración.
Hay otra ruta al pensar en comenzar con una ilustración también. Dibuja una imagen de fondo increíble para el diseño. Esta es una forma divertida de obtener exactamente lo que desea en un segundo plano sin rastrear las imágenes prefabricadas.
One Happy Camper, arriba, hace esto de una manera interesante con una mezcla de paneles de fondo ilustrados, fondos blancos lisos e incluso fondos de fotos en blanco y negro. Los cambios en el fondo señalan efectivamente un cambio de contenido y nueva información para los usuarios que exploran este campamento infantil.
3. Usa ilustraciones como la tipografía
Cuando no tengas muchas imágenes geniales con las que trabajar, mezcla las ilustraciones de la misma manera que puedes jugar con la tipografía. Aunque el concepto suena extraño, piénselo por un minuto: una buena ilustración puede agregar énfasis a un video o una foto. Puede resaltar lo que quieres que los usuarios sepan.
Achrival, arriba, hace esto de una manera interesante. El ilustrado, ¿bailando? A sirve como el logotipo de la agencia y atrae más atención al video corto. Sin él, podrías pasar por las imágenes sin parar. Pero es lo suficientemente diferente como para atraerlo de la misma manera que lo haría un potente titular.
4. Considera animaciones ilustradas
Ya sea que las ilustraciones estén dibujadas a mano o por computadora, brindan una gran oportunidad para incorporar animaciones simples. Desde herramientas de navegación hasta divots divertidos que involucran a los usuarios, una ilustración animada puede ser informativa, inesperada y divertida.
No quiero ir por la borda con animaciones. Mantenlos simples y decididos. Cada animación debe tener un objetivo para el usuario: un enlace, una señal direccional o una sorpresa que los mantenga interesados.
Puede que no espere este tratamiento de un grupo de planificación financiera, pero Taylor Made, arriba, utiliza una combinación de animación ilustrada y fotografía a la perfección. Las partes ilustradas de las imágenes hacen que la planificación financiera parezca un poco menos intimidante y ayudan a guiar a los usuarios a través de rutas de clics.
Las ilustraciones también se llenan de color cuando el sitio web se queda corto en otras imágenes y el resultado final es un diseño coherente que es divertido, atractivo y fácil de usar.
5. Contar una historia
Cuando se trata de mezclar imágenes reales e ilustradas, las mejores combinaciones cuentan efectivamente una historia. Lo visual coincide con el estado de ánimo del contenido y se siente como parte de la identidad de la marca.
El uso de esta técnica puede funcionar para aplicaciones únicas, pero a menudo se integra con una estrategia de marca más completa. Mira a Cone Flower Creamery, arriba. El logotipo está ilustrado. El diseño del sitio web utiliza una historia en su mayoría ilustrada para establecer el estado de ánimo adecuado y animar a los usuarios a seguir aprendiendo sobre la marca. Y justo cuando quieres ver más, hay una imagen para completar los espacios en blanco. El diseño es increíblemente simple y se enfoca en la historia en sí, no en las técnicas utilizadas para crearla.
En el otro extremo del espectro está Kuoz, un sitio de portafolio, con una mezcla de imágenes e ilustraciones. De manera similar, la mezcla ayuda a contar una historia de quién y qué es Kuoz mientras se muestran los proyectos. Mire detenidamente las agrupaciones para comprender por qué este diseño funciona sin sentirse abrumador o desordenado. Las imágenes e ilustraciones están vinculadas por esquemas de colores similares para que cada ubicación se sienta intencional y armoniosa.
Esa es realmente la clave para mezclar imágenes e ilustraciones: deben tener un aspecto intencional. Necesitan aparecer en armonía. Nunca deben verse como un montón de elementos atascados en una página.
Conclusión
¿Eres lo suficientemente valiente como para asumir esta tendencia de diseño? Si bien la técnica puede parecer increíble, es intimidante y puede ser difícil de vender a un cliente.
Traiga algunos ejemplos de trabajo que usa bien los efectos para ayudar a mostrar a otros lo que puede hacer. Dibuje algunas de las ilustraciones por adelantado para ayudar a vender aún más el concepto de diseño. ¡Y recuerde contar una historia que involucre al usuario!