La especificación de Material Design de Google originalmente estaba dirigida a la plataforma Android como una forma de sugerir consistencia de diseño en la plataforma.
01 de 06Cómo crear una tarjeta de diseño de materiales en Adobe Experience Design CC
Una vez que los diseñadores comenzaron a hojearlo y entender el pensamiento detrás de él, Material Design se ha convertido silenciosamente en una de las filosofías visuales más influyentes en diseño web y móvil. Todo lo que necesita hacer para ver a qué nos dirigimos es hacer una búsqueda de Material Design en Pinterest y verá cientos de ejemplos y experimentos en dispositivos, tabletas e incluso sitios web.
El aspecto fascinante de Material Design es que Google está pensando en cómo deberían aparecer y funcionar las aplicaciones en dispositivos móviles, pero los conceptos se aplican a cualquier pantalla de cualquier tamaño en cualquier plataforma. Como lo establece Google en el párrafo inicial de la especificación, “Nos desafiamos a crear un lenguaje visual para nuestros usuarios que sintetice los principios clásicos del buen diseño con la innovación y la posibilidad de la tecnología y la ciencia. Este es el diseño material. Esta especificación es un documento vivo que se actualizará a medida que continuemos desarrollando los principios y detalles específicos del diseño de materiales ".
El material del que se habla, en términos muy generales, es papel y un sello distintivo de Material Design es la tarjeta. Piense en una tarjeta de índice en una superficie y está en el camino correcto. Una tarjeta es un elemento que contiene fotos, videos, enlaces de texto, etc. pero donde se diferencian de la mayoría de los diseños interactivos es que están diseñados para enfocarse en un solo tema. Las tarjetas tienen esquinas redondeadas, contienen sombras tenues que indican que están sobre una superficie y si están todas en el mismo plano, se las denomina "colección".
En este "Cómo" vamos a crear una tarjeta basada en la especificación. En lugar de crear la tarjeta con una variedad de herramientas de imagen y dibujo, vamos a llegar a ella desde una dirección diferente. Vamos a utilizar las herramientas en Experience Design de Adobe, que actualmente se encuentra en una vista previa pública solo para Macintosh y es gratuita. Puedes descargarlo aquí.
Empecemos.
02 de 06Creando el Prototype Artboard en Adobe Experience Design CC
No hay una forma evidente de crear una pantalla de Android desde la pantalla de inicio en Experience Design CC (XD). Lo que solíamos hacer cuando abrimos XD, es seleccionar la opción de iPhone 6 y, cuando se abre la interfaz, seleccionamos la herramienta Artboard en la parte inferior de la barra de herramientas y seleccionamos Android Mobile de las selecciones en el panel de Propiedades a la derecha. Luego cambiamos a la herramienta de selección, hacemos clic una vez en el nombre de la mesa de trabajo del iPhone y borramos la mesa de trabajo. No más.
En la versión actual de XD, hay una pequeña flecha al lado del iPhone 6 que, al hacer clic, abre un menú desplegable. Desde allí, selecciona la versión de Android Mobile y la mesa de trabajo de Android Mobile seleccionada se abre en la interfaz.
Para garantizar que tengamos abierto el espacio de pantalla adecuado para la tarjeta, normalmente nos dirigimos a Sketch 3 y copiamos y pegamos una Barra de estado, Barra de navegación y Barra de aplicación de la Plantilla de diseño de materiales en la mesa de trabajo. Sketch 3.2 contiene una plantilla de diseño de materiales (Archivo> Nuevo desde plantilla> Diseño de materiales) y otra muy buena gratis es de Kyle Ledbetter que puede obtener aquí. Si no tiene Sketch, puede copiarlos y pegarlos de las etiquetas XD que se encuentran en Archivo> Abrir kit de interfaz de usuario> Google Material. También puede descargarlos de Google para usarlos en Photoshop, Illustrator, After Effects y Sketch.
03 de 06Adición de una tarjeta de diseño de materiales a una mesa de trabajo Adobe XD CC
Una de las características más útiles de XD es la inclusión de Kits de IU para Apple iOS, Google Material y Microsoft Windows. En muchos aspectos, agregan la palabra "Rápido" al término "Prototipado rápido". Además, hacen que el trabajo del diseñador sea más fácil, ya que los elementos comunes de la interfaz de usuario no tienen que ser recreados constantemente en una aplicación de diseño como Photoshop, Illustrator o Bosquejo.
El elemento de la interfaz de usuario que necesitábamos era una tarjeta. Para ello seleccionamos Archivo> Abrir kit de interfaz de usuario> Google Material y el kit se abrió como un nuevo documento. El elemento que necesitábamos se encontraba en la categoría Tarjetas.
Lo que nos encanta de estos es que se adhieren a la especificación de Diseño de materiales según lo establecido en las especificaciones de Bloques de contenido, así como a las especificaciones de formato y espaciado del texto establecidas en las especificaciones de Tipografía.
El estilo de tarjeta que queríamos era el de la parte inferior izquierda. Simplemente lo colocamos en un marco con nuestro mouse y lo copiamos en el portapapeles. Desafortunadamente, XD no contiene una interfaz con pestañas para documentos abiertos. Lo que hacemos es mover la ventana abierta del documento hacia abajo un poco para revelar la que estamos trabajando, seleccionarlo y pegarlo. Otra forma de cambiar rápidamente entre documentos XD abiertos es presiona Comando- '.
04 de 06Cómo editar un elemento de diseño de material en Adobe Experience Design CC
Cuando la tarjeta en XD llega desde el portapapeles, no comience a trabajar con ella alegremente. Lo primero que debes hacer. es desagrupar la tarjeta Porque necesitas acceso a los bits y piezas que componen la tarjeta. Para ello, seleccione la tarjeta y seleccione Objeto> Desagrupar o presiona Shift-Command-G.
Su tarjeta ahora se compone de tres piezas:
- Caja gris claro para la imagen.
- Cuadro gris medio para el texto.
- La caja trasera utilizada como fondo.
El primer paso es eliminar el cuadro gris claro. Su único propósito es actuar como un marcador de posición para la imagen que la hace, si lo desea, opcional.
El cuadro con el texto es en realidad un gris oscuro con un 50% de opacidad. Este cuadro se puede utilizar como fondo del texto y puede cambiar el color y la opacidad del cuadro.
Aunque no es evidente de inmediato, el cuadro gris claro sigue la especificación de Diseño de materiales en el sentido de que sus esquinas superiores están redondeadas en 2 píxeles. Tenga esto en cuenta si está agregando una imagen. También necesitará las esquinas redondeadas que se pueden agregar a una aplicación de imágenes o en XD.
Viendo que este es el estado de reposo de la carta, también necesita una sombra. La especificación deja claro que hay una elevación en reposo de la tarjeta de 2 píxeles. Para agregar esto, seleccione la forma de fondo negro y establezca los valores de Y y B (Desenfoque) en 2 en el panel de propiedades.
05 de 06Cómo agregar una imagen a la tarjeta de diseño de materiales en Adobe XD CC
Sabiendo que la tarjeta tiene 344 píxeles de ancho y el área de la imagen tiene 150 píxeles de alto ( la mitad de la altura de la caja gris claro ) Abrimos la imagen en Photoshop, la recortamos al tamaño y la guardamos usando la opción @ 2x en Photoshop Exportar cómo caja de diálogo. La imagen fue importada a Adobe XD.
Luego arrastramos el cuadro gris claro sobre la imagen en el portapapeles y seleccionamos Objeto> Máscara Con Forma. El resultado fue la imagen que recogía las esquinas redondeadas de la forma. Luego movimos la imagen a su posición final.
Con la imagen en su lugar, luego cambiamos el color de fondo del cuadro gris Medio, cambiamos el texto y el color del texto del enlace.
06 de 06Usando la característica Grid de Adobe XD CC
Con la tarjeta completa, ahora se debe colocar correctamente de acuerdo con las especificaciones del Material Design. Esto significa que hay 8 píxeles a cada lado de la tarjeta y la tarjeta debe estar 8 píxeles debajo de la barra de la aplicación. Para ello, haga clic una vez en el nombre de la mesa de trabajo y, en el Panel de propiedades, seleccione Cuadrícula. La cuadrícula aparece sobre la mesa de trabajo.
El tamaño de cuadrícula predeterminado es 8 píxeles, que es el mismo tamaño de cuadrícula para el Diseño de materiales. Si necesita un tamaño diferente, cambie el valor en el área de Cuadrícula. Si desea cambiar el color de la cuadrícula, haga clic en la ficha de color y elija un color en el Selector de color resultante.
Con la cuadrícula visible, haga clic en la tarjeta y muévala a su posición final.
Para finalizar, seleccionamos la tarjeta, hicimos clic en el botón Repetir cuadrícula y cambiamos el espacio entre las tarjetas a 8 píxeles también.
