Tutoriales de croquis

Sistema de diseño de materiales con símbolos de croquis

Aprenda a diseñar de manera más inteligente y rápida utilizando pautas de material integradas en símbolos anidados

Quiero presentarle Plaster, un sistema de diseño móvil hecho para simplificar el trabajo con las pautas de Material mediante la implementación de principios fundamentales y las mejores prácticas de la aplicación Sketch en símbolos anidados, otorgando al usuario un enfoque de diseño rápido y confiable basado en componentes.

Contenido de la guía:

  1. Introducción - Historia de fondo, e idea detrás de la creación.
  2. Descripción general: un vistazo rápido a las secciones principales.
  3. 🎛 Configuración: panel de control para cada detalle.
  4. Componentes: componentes de material con símbolos.
  5. Resumen: casos de uso y preguntas frecuentes

1. Introducción

¿Por qué el mundo necesita otro sistema de diseño Sketch?

Principalmente porque encuentro que el aspecto clásico de Material ha quedado obsoleto, y después de realizar una pequeña investigación, estaba convencido de esto. La mayoría de las personas (* Diseñadores) encontrarían desgastado o "demasiado sombrío" usarlo ciegamente en sus productos, ya que podría conducir a una interfaz de usuario de aplicación no única que puede perderse fácilmente entre todas las otras aplicaciones que ya están en el mercado.

Pero todo el sistema de diseño de Material.io es hermoso. No se trata solo de elementos visuales, sino también de decisiones de diseño precisas y patrones impulsados ​​por humanos que trabajan con los componentes mostrados. La base de todo es una estructura sólida, que consiste principalmente en el enfoque de diseño basado en componentes, cuadrícula dorada de 8 puntos, tipografía limpia y métricas existentes sobre la experiencia móvil del usuario.

Es por eso que creo que es posible implementar estos ingredientes universales en una única biblioteca de interfaz de usuario que le otorgará al maestro grandes ventajas para la personalización del diseño de aplicaciones móviles mediante el uso de la potencia de los símbolos, por ejemplo.

https: //dribbble.com/shots/Material-Design-System-with-Sketch-Symbols

2. Descripción general

Plaster es un kit de herramientas primero para dispositivos móviles diseñado para ayudar a validar y generar ideas más rápido utilizando pautas a prueba de balas incluidas en el ecosistema Sketch. El archivo maestro se divide en 5 páginas separadas, cada una con su propósito y muchos contenidos prediseñados para que sea un patio de recreo perfecto o un punto de control para un nuevo proyecto.

Contenido:

  • Comenzar: el punto de partida y un panel de control para un nuevo proyecto. Ajuste sus colores, estilos y fuentes aquí para propagar los cambios rápidamente en todo el sistema.
  • Guía de estilo: los esquemas de color, la hoja de estilos, los iconos y el tipo de letra, todos juntos, le sirven como la mejor fuente de verdad para su marca o proyecto.
  • Componentes: los bloques de construcción del sistema están hechos en 3 temas de colores diferentes, que muestran amplias opciones de personalización para cada elemento y componente.
  • Pantallas: esta página contiene una colección cada vez mayor de patrones de pantalla prediseñados creados con componentes del sistema, que se pueden personalizar y utilizar libremente como materiales de trabajo.
  • Símbolos: el corazón del sistema, el lugar para todos los símbolos que se clasifican y ordenan manualmente según su tipo. ♥ ️

Todas las páginas se combinan en un poderoso kit de herramientas para cubrir una gran cantidad de casos de uso al diseñar aplicaciones móviles, al dar a cualquiera que esté familiarizado con Sketch la capacidad de crear kits de interfaz de usuario, sistemas de diseño, wireframes y prototipos mucho más rápido y fácil.

3. Configuración

Para configurar Plaster y tener su versión única del sistema, solo requiere sobrescribir las propiedades predeterminadas de Capa y Texto.

Sí, así de fácil. ️

Para hacerlo, vaya a la página Comenzar, seleccione las capas y los estilos que desea ajustar, cámbielos en un grupo o uno por uno, y aplique. El resto se realizará con la ayuda de la magia de Estilos compartidos que sincronizará todos los símbolos existentes con los últimos estilos elegidos, incluidos los símbolos de texto.

Consejo: Recuerde actualizar el color del texto de su marca principal, como se muestra en el video.

Tener esta página bajo su control le permite crear fácilmente nuevos temas y estilos con unos pocos clics, a través del acceso rápido a cada parámetro visual del sistema, incluida una guía de estilo que siempre se mantiene sincronizada.

4. Componentes

El concepto de Plaster tiene como objetivo brindar beneficios de gran alcance tanto a corto como a largo plazo, al dividir la interfaz de usuario en bloques de construcción compactos que son fáciles de adaptar, escalar y reutilizar para plataformas Android e iOS.

Componentes: con ellos, puede diseñar rápidamente muchas pantallas en una sola iteración simplemente colocándolas en el lugar correcto en la mesa de trabajo. Pero, lo que es más importante es el hecho de que puede actualizarlos con nuevos detalles cuando llegue el momento de obtener una nueva función, y difundir los cambios a través de su aplicación sin problemas sin esfuerzos adicionales.

Para explicar el flujo de trabajo con símbolos, aquí hay un breve video de mí usando componentes de yeso para construir una pantalla de perfil de usuario.

Consejo: Al usar los mismos componentes, es posible realizar cambios en varios símbolos a la vez.

Nota: Todos los componentes de Yeso tienen la misma estructura de símbolos unificada que comparte propiedades de anulación idénticas con todos los componentes del sistema sin excepción, lo que hace que sea muy fácil de entender y trabajar con el panel de anulaciones.

Aquí hay un vistazo más de cerca a la estructura típica del componente Lista.

Sugerencia: Puede bloquear símbolos individuales para ocultar que aparezcan en el panel de anulaciones.

En este ejemplo, los 4 símbolos están anidados en un solo componente, representando propiedades visuales que son posibles de ajustar o intercambiar, como texto de forma, color o sombra (Material) (elemento de lista), separadores (divisor), un icono (R Icono).

Nota: puede agregar Plaster como una biblioteca para tener todos los componentes siempre listos para ser utilizados en todos sus documentos, en cualquier momento del día, utilizando el menú Símbolo o un complemento de Sketch Runner.

Para mostrarle de manera más detallada cómo se usan los componentes, he preparado un archivo de demostración con una pantalla de interfaz de usuario simple, no dude en descargarlo y verlos en acción para tener una idea de las capacidades del sistema.

Descargue el archivo de demostración

5. Resumen

El yeso es una herramienta hecha para probar y resolver los objetivos del producto en el menor tiempo posible. Una vez configurado, ahorrará muchas horas en cada próximo proyecto de diseño móvil gracias a la diversidad de casos de uso que este kit puede ofrecer.

Casos de uso

  • Validar ideas más rápido. Tener componentes prediseñados en su inventario ahorra mucho tiempo a la creación de prototipos desde cero tanto para diseñadores como para desarrolladores, al reutilizar las soluciones probadas y existentes.
  • Genere una hermosa guía de estilo y úsela como una fuente de verdad para su proyecto, cree nuevos temas y estilos basados ​​en ella.
  • Cree animaciones y flujos de usuarios utilizando las características nativas de Sketch o exporte componentes a cualquier otra aplicación que elija.
  • Aprenda las pautas de Material.io y las mejores prácticas de la aplicación Sketch, de una manera divertida e interactiva, conviértase en un experto en estos campos de diseño.
  • Sincronice y comparta la biblioteca con sus compañeros de equipo para colaborar y mantenerse actualizado con cada cambio utilizando numerosos complementos y aplicaciones.

Haga más en menos tiempo, cree aplicaciones audaces y hermosas.

Visite el sitio web de Plaster Design System para obtener la versión completa del producto, o descargue el archivo de demostración y explore más de cerca.

Preguntas más frecuentes

¿Cómo obtener la última versión?
Enviamos notificaciones por correo electrónico a través de Gumroad y twitteamos cuando se lance la nueva versión, así que asegúrese de seguirnos, y si ya compró Plaster, vaya a la página del Producto y descargue la última versión.

¿Significa esto que los marcos ya no se actualizarán?
No. Ambos sistemas se actualizarán por separado, nuestro objetivo es crear las mejores bibliotecas de interfaz de usuario posibles para la aplicación Sketch, y no tenemos la intención de dejar de innovar nuestros productos.

¿Quiere sugerir una característica o un componente?
¡Excelente! No dude en comunicarse con nosotros y discutirlo a través de hello@robowolf.net.

¿Qué diferencia a su producto de otros kits de interfaz de usuario?
El yeso está integrado en un sistema a través de mejoras constantes y se basa en los patrones de diseño móvil existentes, lo que le otorga al usuario la capacidad de controlar y escalar sistemas de diseño móvil para clientes medianos / grandes de una manera rápida y segura.

Antes de que te vayas:

  • Siga en Twitter y Dribbble para obtener más noticias y actualizaciones.
  • Descubra más artículos y regalos relacionados con el diseño: