Encontrar y ajustar icons para tu app

Icons son más que solo elementos decorativos en tu App. Contribuyen a la experiencia del usuario y ayudan a los usuarios a orientarse de manera intuitiva. La personalización de los Icons puede ser decisiva para la impresión general de tu aplicación. En esta guía aprenderás cómo encontrar, crear e integrar de manera efectiva los Icons en tu proyecto.

Principales conclusiones

• Los Icons influyen en la experiencia del usuario y el diseño.
• Hay diversas fuentes para Icons, tanto gratuitas como de pago.
• Los Icons SVG ofrecen una alta flexibilidad en la personalización de color y tamaño.

Guía paso a paso

Paso 1: Preparar el menú

Para comenzar, primero ve a Sketch Runner para crear una TabBar. Esto lo haces utilizando la combinación de teclas Command + Shift + R. Luego, inserta una TabBar y ajústala a la posición deseada.

Paso 2: Nombrar las pestañas

Ahora es importante dar a las pestañas los nombres correctos. Debes insertar "Inicio", "Chat" y "Perfil" en las respectivas pestañas. Esto no solo te ayudará a mantener una visión clara, sino que también mejorará la navegación del usuario.

Paso 3: Seleccionar Icons

Para visualizar tu navegación, necesitarás Icons apropiados. En tu colección de materiales, ya deberías tener los Icons para "Inicio" y "Perfil". Arrastra estos Icons a tu proyecto.

Paso 4: Encontrar Icons

Para el "Icono de Chat", puedes visitar el sitio web "Icon Finder". Este sitio ofrece una amplia selección de Icons en varios estilos y formatos. Busca un Icono de chat adecuado ingresando "Chat" en el campo de búsqueda.

Paso 5: Descargar el Icono

Asegúrate de seleccionar un Icono que esté licenciado para uso comercial si planeas usarlo en una App publicada. Elige el formato SVG y descarga el Icono.

Paso 6: Ajuste de tamaño de los Icons

Ahora que todos los Icons están integrados en el proyecto, es importante ajustarlos a un tamaño uniforme. Esta adaptación asegura que tu diseño se vea ordenado. Puedes escalar los Icons proporcionalmente para que queden bien entre sí.

Paso 7: Cambiar el color en Icons SVG

Una gran ventaja de los Icons SVG es la posibilidad de cambiar los colores fácilmente. Selecciona la capa deseada y ajusta el color. Primero copia el código de color de uno de los Icons existentes para garantizar la consistencia de los colores.

Paso 8: Ajuste de tonos de verde

Si deseas usar diferentes tonos de verde para los Icons, puedes ajustar los valores alfa de los colores. Esto da más profundidad y variación a tu diseño. Experimenta con diferentes valores alfa para lograr el mejor efecto visual.

Paso 9: Insertar los Icons en la TabBar

Ahora es el momento de integrar los Icons en la TabBar. Asegúrate de distribuirlos uniformemente y mantener el espacio a los bordes. Esto conservará la claridad de tu navegación.

Paso 10: Crear y ajustar grupos

Para garantizar una mejor organización, crea grupos para cada Icono en la TabBar. Nómbralos de acuerdo, como "Inicio Seleccionado" y "Perfil No Seleccionado". Estos sistemas te ayudarán a mantener el control en la gestión de eventos de tu aplicación.

Paso 11: Crear símbolos para uso final

El último paso es asegurarte de que tus Icons estén guardados como símbolos en Sketch para que sean fácilmente reutilizables. Extrae los símbolos de tu diseño para que estén disponibles en cualquier momento.

Resumen - Encontrar, crear y ajustar Icons: Una guía estructurada

En esta guía has aprendido cómo integrar Icons de manera efectiva en tu proyecto, desde la selección hasta la personalización y la implementación en la interfaz de usuario. Los Icons son elementos centrales del diseño y contribuyen significativamente a la navegación del usuario.