8 maneras de usar iconos y elementos dibujados a mano

Si bien a menudo se enfoca en elementos de diseño de píxeles perfectos, no son adecuados para todo. ¿A veces quieres algo con un poco más? capricho. ¡Algo un poco más auténtico!

Los iconos o elementos dibujados a mano pueden ser la técnica de diseño adecuada para agregar algo especial a un proyecto. Si bien la mayoría de los diseñadores no se volverán locos con los elementos que parecen estar dibujados a mano, algunos toques pueden agregar una sensación personal que los usuarios se sienten atraídos.

Es algo que también es tendencia en el diseño web. Desde un garabato en un ícono hasta una experiencia completa que es igual de usabilidad y arte, los elementos dibujados a mano son una opción de diseño popular. ¡Aquí hay ocho nuevas formas de usar esta tendencia!

Crear separación

Los elementos de diseño dibujados a mano se pueden mezclar y combinar con casi cualquier otro tipo de visualización. Pueden trabajar junto con fotos o videos, en un mar de espacios en blanco o cerca de elementos de texto. No elimine el concepto de usar este tipo de elemento porque tiene miedo de cómo podría encajar en el patrón de diseño general.

Intentalo; nunca sabes.

Digital Visitor utiliza estos elementos en todo el diseño para crear una separación entre elementos y bits en el contenido. Si bien los elementos en la página de inicio son simplemente puntos, hay ejemplos en varios lugares debajo del pergamino e incluso el favicon tiene ese estilo dibujado a mano.

La ubicación de cada elemento está diseñada para garantizar que el usuario esté buscando el contenido correcto. En el ejemplo anterior, el elemento está en el centro de la pantalla, utilizado para crear la separación entre dos áreas de contenido. Más abajo en el diseño, se utilizan elementos similares al estilo de ícono en pequeños cuadros de texto para mostrar lo que hace la empresa.

Garabatos interactivos

Los elementos dibujados a mano pueden hacer divertidas piezas interactivas en el diseño. Desde la carga de animaciones, muchos de los ejemplos de sitios web en este post usan este estilo, hasta una experiencia totalmente interactiva, esta técnica de diseño es lo suficientemente interesante como para despertar el interés de los usuarios.

Real Estate Stained Glass es un hermoso ejemplo de juego interactivo que combina una tendencia de diseño de sitios web y elementos creativos, lo que permite a los usuarios colorear dibujos en la pantalla. Lo que une esto es mientras que el aspecto es dibujado a mano, los elementos son precisos y funcionan a la perfección. Colorear funciona como debería, y no garabateas fuera de las líneas, para una experiencia que mantendrá a los usuarios enganchados.

Tipografía Casi Dibujada

A veces, los mejores elementos dibujados a mano no están realmente escritos. Los estilos de tipografía que imitan la escritura a mano son particularmente populares, especialmente para fines de visualización.

Este estilo de tipo tiene una sensación más ligera y personal con la que los usuarios pueden relacionarse. (El truco es asegurar que las letras sean altamente legibles.)

Tradewinds Hotel hace un gran trabajo con una tipografía de estilo cursiva simple que es lo suficientemente grande y lo suficientemente legible para leer de un vistazo. La tipografía de soporte se encuentra en un estilo simple sans serif, que ayuda a agregar énfasis al tipo de letra de la pantalla y también hace que todo sea fácil de digerir para el usuario.

Divots de diseño

Algunos elementos dibujados a mano tienen un propósito puramente visual. Existen para crear un flujo o percepción del diseño que podría ser difícil de establecer de otras maneras. Estos divots pueden ser especialmente divertidos cuando se usan en lugares pequeños a lo largo del diseño.

Mother's Brewing hace justamente esto. Hay un gran corazón en la página de inicio, es obvio. Pero también hay elementos diminutos en casi todas las demás páginas, algunas obvias y otras bastante ocultas. Cada botón tiene toques dibujados a mano con el diseño de la cinta, los elementos aparecen en el fondo y se superponen en los elementos deslizantes para llenar el espacio muerto en el diseño. El efecto general es inteligente y visualmente interesante.

Para establecer el estado de ánimo

Los elementos de diseño dibujados a mano adquieren un tono más ligero y juguetón. Pueden brindar este tipo de ambiente a casi cualquier proyecto y, cuanto más elementos dibuje a mano, más claro será el proyecto.

Signs for Science es un gran ejemplo de cómo empacar un diseño con elementos dibujados a mano para una estética divertida y casi infantil (el color también contribuye). Desde la tipografía hasta los iconos para subrayar, el concepto completo tiene un ambiente muy específico. Es creativo, ligero y fomenta la interacción del usuario.

Creatividad de escaparate

Un concepto de diseño dibujado a mano puede ser una gran oportunidad para el diseño de un sitio web de cartera porque puede enfatizar la creatividad. Estos elementos ponen más énfasis en el proceso de diseño y en la forma en que el pensamiento y el trabajo pueden integrarse en un proyecto.

(Además, es una forma divertida de estirar esos músculos creativos).

El modelo Feebles utiliza elementos dibujados a mano para la imagen principal de la manera anterior y se combina con el logotipo dibujado a mano en la parte superior izquierda. (Puede que te lo pierdas si no miras de cerca).

Para iconos o logotipos

Debido a que este es uno de los usos más populares de los elementos dibujados a mano, no estaba en la parte superior de la lista. (Principalmente para ayudarte a pensar en otras ideas antes de saltar a algo más común).

Los toques dibujados a mano pueden ser una gran adición a un icono o logotipo. Desde garabatos hasta formas descentradas o círculos que no son muy redondos, la imperfección agrega carácter y encanto donde los estilos perfectos de formas de computadora no pueden.

Higher Ground utiliza el garabato para separar las letras en el logotipo de estilo de icono. El estilo minimalista es sorprendente y efectivo, y el elemento dibujado a mano le da cierta personalidad que una línea recta no transmitiría.

Como efectos animados

Dale vida a un elemento dibujado a mano con animación.

Las imágenes dibujadas en la pantalla pueden ser divertidas de mirar y mirar. Si bien el beneficio obvio para el usuario es el entretenimiento al ver que algo cobra vida, también hay beneficios para el propietario del sitio web: mayor tiempo en el sitio y posibilidad de más conversiones.

Long Story Short utiliza este concepto en la página de inicio.Primero, dibujar el logotipo, que utiliza un estilo de tipografía dibujada a mano. Y luego animándolo en un paquete de proyectos de diseño, que se mueven rápidamente e incluyen varios dibujos a mano en el proceso. Todo el bucle solo dura un par de segundos.

Conclusión

Incluso si no puede dibujar, simular elementos dibujados a mano en proyectos de diseño puede agregar un toque personal que los usuarios aprecian. Desde la tipografía hasta los juegos y la carga de animaciones, estos elementos pueden mostrar creatividad y personalidad.

Si bien un elemento dibujado a mano no es para cada proyecto, piénselo la próxima vez que necesite aclarar el estado de ánimo o agregar algo para que los usuarios se aferren. Mantenga la idea simple y conéctela a un tema que se transmita a lo largo del diseño. ¡Y divertirse! De eso se tratan estos elementos.