Ir material con Gravit Designer

Comenzar un nuevo proyecto no siempre es una tarea fácil, pero con las herramientas adecuadas en las manos adecuadas, el trabajo se convierte en una alegría y el resultado será muy satisfactorio. Dado que tenemos las manos adecuadas, ahora todo lo que tenemos que hacer ahora es encontrar las herramientas adecuadas. Y si usted es un usuario de Windows como yo, no hay mejor herramienta para el diseño de la interfaz de usuario que Gravit Designer, ya sea que necesite diseñar una aplicación móvil o incluso un sitio web.

Ahora tomemos una aplicación móvil, por ejemplo, más específicamente una Android. Y si eres nuevo en el diseño de aplicaciones de Android, primero debes leer un poco, incluso tomar algunos cursos y, a menudo, terminarás aterrizando en el propio sitio web de Material Design de Google, definido como "un sistema unificado que combina teoría, recursos, y herramientas para elaborar experiencias digitales ”. Aquí hay un breve video explicativo que definitivamente disfrutará:

¿Cansado de toda la teoría? Por supuesto que sí, tuvimos mucho de eso en la escuela. Dado que la práctica no nos hace perfectos, pero mejor aún, querrá pasar directamente al modo de productividad. Bajando por la madriguera del conejo en material.io encontramos la sección "Directrices y recursos" con todas las especificaciones que necesitamos, desde paletas de colores hasta plantillas de diseño e incluso sombras.

¿Y qué mejor manera de comenzar un nuevo proyecto que abriendo la etiqueta de componentes y tomando todos los elementos que necesitamos? Tenemos stickers para Sketch, Adobe XD, After Effects, Photoshop e incluso Illustrator. Pero espera, ¿dónde está la pegatina de los componentes de Gravit? Así es, no hay ninguno, tal vez en el futuro Google lanzará uno, así que mientras tanto seguí adelante y lo hice yo mismo.

Kit de interfaz de usuario de material Gravit

Inspirándose en la hoja de calcomanías oficial de Google Material Design más algunos toques adicionales, nació el Kit de interfaz de usuario de Gravit Material. El kit está disponible como código abierto en GitHub y se puede descargar desde aquí.

Lo bueno de esta hoja es que es más que un kit de interfaz de usuario, porque además de los componentes habituales también tenemos guías de pantalla y tipografía. Así que profundicemos un poco más y echemos un vistazo más de cerca a algunos de los elementos incluidos en este kit.

Tipografía

Debido a que necesitamos mostrar información escrita todo el tiempo en nuestras aplicaciones, vamos a comenzar con las especificaciones de tipografía. Roboto es el tipo de letra predeterminado del sistema Android, pero de ninguna manera es el único tipo de letra que funciona con el diseño de materiales. Dado que la tipografía refuerza el carácter, el mejor tipo de letra es el que dice algo sobre la marca o la aplicación que estamos desarrollando. Incluso si no es mi tipo de letra favorito, Roboto funciona muy bien en muchas situaciones, ya que es una fuente muy versátil con seis pesos de fino a negro.

Por lo tanto, es una fuente excelente para empezar, que podemos cambiar fácilmente más adelante usando una característica ordenada en Gravit llamada Shared Style, pero volveremos a esto en un minuto. Existen todos los estilos y tamaños de fuente básicos en este kit más las opacidades recomendadas para diferentes situaciones.

Guías de pantalla

A continuación, encontramos las Guías de pantalla, que son muy importantes para alinear los elementos de la interfaz de usuario en la pantalla. Aquí tenemos reglas de espaciado vertical y líneas horizontales y márgenes horizontales. Para usarlos, simplemente cree un nuevo documento para Android (la plantilla llamada Nexus 5 funciona bien) y copie / pegue el grupo de guías de pantalla requerido del kit de la interfaz de usuario. Todos los grupos de Guías utilizan el modo de fusión "Multiplicar", para que podamos ver a través de nuestro diseño actual en el que estamos trabajando.

Componentes

Y dado que no hay diseño de interfaz de usuario sin elementos de interfaz de usuario, el kit incluye todos los componentes de material más importantes como listas, cuadrículas, notificaciones, teclados, tarjetas, información sobre herramientas y más. Todos los componentes están bien agrupados y organizados, proporcionando al usuario un flujo de trabajo rápido y una forma fácil de personalizarlos.

Ahora que tenemos los "materiales" adecuados para trabajar, volvamos a nuestra herramienta y veamos cómo Gravit Designer puede facilitarnos la vida al diseñar la interfaz de usuario y hacer que todo el proceso sea una experiencia agradable.

Usando la herramienta

Como cualquier gran herramienta digital nueva, Gravit se adapta muy bien al software establecido, pero agrega suficientes características únicas para que se destaque entre la multitud. De esta forma, es muy fácil hacer el cambio desde una herramienta anterior, especialmente cuando todos los atajos, herramientas y paneles comunes ya están allí. Pero, con mucho, la mejor característica es ... multiplataforma. Esto significa que puede usar su herramienta de interfaz de usuario favorita, ya sea en una Mac o en una PC con Windows o Linux, y si no le gusta instalar un nuevo software, incluso puede usarla directamente desde el navegador. Bastante ordenado, ¿ja? Además, todo el trabajo que cree puede guardarlo en Gravit Cloud de forma gratuita. Ahora déjame mostrarte algunos trucos donde Gravit puede hacerte la vida más fácil como diseñador de UI.

Estilos compartidos. La mayoría de las aplicaciones de IU usan algún tipo de lista para mostrar información repetitiva. Aquí es donde los estilos compartidos son útiles. Supongamos que tenemos la pantalla de la bandeja de entrada de una aplicación de correo electrónico en la que queremos cambiar fácilmente el estilo del asunto de todos los mensajes. Simplemente seleccione el primer tema, configure la fuente correctamente y cree un nuevo estilo compartido. Ahora seleccionamos los otros temas y aplicamos el estilo compartido recién creado. Cambiar un tema los cambiará a todos. Podemos usar esta función para crear estilos compartidos para cualquier tipo de objeto, ya que pueden recordar el estilo, relleno, borde, efectos o texto del objeto.

Panel de transformación. Mover y duplicar objetos es algo que hacemos todo el tiempo como diseñadores de interfaz de usuario, y para ayudarnos con estas tareas, Gravit proporciona un buen panel con muchas opciones. Supongamos que necesita duplicar y colocar rápidamente un objeto después de otro. Muy fácil ... simplemente ingrese las coordenadas y el número de copias y presione "Aplicar", y ya está.

Sombra paralela El problema con el software de diseño gráfico más antiguo es que todavía usan efectos heredados, que no se pueden convertir fácilmente a CSS. Esto puede ser un problema al trabajar con desarrolladores web y de aplicaciones. En este caso, tenemos una implementación inteligente de los efectos, incluida nuestra amada Drop Shadow. Todo lo que necesitamos son 4 parámetros y un color, y allí tenemos una bonita sombra. Y si una sombra no es suficiente, ya que necesitamos agregar una pizca de realismo a nuestro diseño, por supuesto, podemos agregar un montón más hasta que lo hagamos bien.

Un último truco con el que quiero dejarte. Supongamos que hemos creado un estilo de botón atractivo y queremos ver cómo podría verse en una forma diferente. Nada puede ser más fácil. Seleccione nuestra forma con estilo y presione Ctrl + C (Cmd + C en una Mac) simplemente dibuje una forma diferente, un círculo tal vez, presione F4 y listo.

Y una última cosa, prometo que es la última: tutoriales oficiales. Loco, ¿verdad? Para ayudar a los nuevos usuarios a adaptarse a la nueva herramienta, tenemos videos que comienzan desde lo más básico hasta temas más avanzados.

Espero que hayas disfrutado la lectura y asegúrate de estar atento a la última versión, ya que cada nueva versión trae nuevas características increíbles, mejoras y, por supuesto, correcciones de errores.

Sitio web | Facebook | Twitter | Foro