Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Material Design
Webdesign

Diseñar una Aplicación Usando la Hoja de Etiquetas de Componentes de Material Design

by
Difficulty:BeginnerLength:MediumLanguages:

Spanish (Español) translation by Javier Salesi (you can also view the original English article)

Final product image
What You'll Be Creating

Gracias a Material Design, un lenguaje visual desarrollado por Google, diseñar interfaces de usuario para la plataforma Android es más fácil que nunca. Una vez que pasas unos cuántos minutos explorando sus especificaciones, que son actualizadas de vez en cuándo, puedes comenzar a diseñar aplicaciones Android que coincidan con la apariencia y sentido nativo de los recientes lanzamientos Android, incluyendo Marshmallow y Nougat.  Lo que es más, para ayudarte a ahorrar tiempo y esfuerzo, Google ha publicado una hoja de etiquetas de componentes (sticker sheet) para Material Design.

Hoja de etiquetas de componentes

En éste tutorial, te mostraré cómo usar la hoja de etiquetas de componentes para Adobe Photoshop para diseñar rápidamente inferfaces de usuario de aplicaciones Android.

¿Por Qué Usar la Hoja de Etiquetas de Componentes?

Las interfaces de usuario que respetan las especificaciones de Material Design están, la mayoría, compuestas de formas simples, colores uniformes y unas cuántas sombras. Consecuentemente, a diferencia de interfaces de usuario skeumórficas, ellas no varían mucho. De hecho, excepto por sus colores, tamaños y elevaciones, widgets IU lucen igual en casi todas las aplicaciones de Material Design. La hoja de etiquetas de componentes de Material Design contiene imágenes de esos widgets y, usándola, puedes seguir eficazmente un planteamieneto de arrastrar y soltar para diseñar una interfaz de usuario.

Drag and drop sticker sheet
Diseño IU arrastrar y soltar

Aunque estaremos usando Adobe Photoshop en éste tutorial, vale la pena notar que la hoja de etiquetas de componentes está disponible también para Sketch, Adobe Illustrator y After Effects.

Requisitos Previos

Para poder continuar, necesitarás:

1. Abre la Hoja de Etiquetas de Componentes

Abre Adobe Photoshop  ve a Archivo > Abrir... para abrir la hoja de etiquetas de componentes que descargaste. A menos que tengas la fuente Roboto instalada en tu computadora, verás un cuadro de diálogo preguntándote si sincronizarla con Adobe Typekit, o descargarla de otra fuente (como Google Fonts).

Si usas Typekit, presiona el botón Resolver Fuentes para continuar. Claro, debes iniciar sesión en tu cuenta de Creative Cloud  para que se complete la sincronización.

Una vez que se abre la hoja de etiquetas de componentes, verás que es un documento muy grande, sus dimensiones son 5688x6790 px-con varias capas y grupos de capas. Te sugiero que pases unos cuántos minutos viendo todo lo que tiene para ofrecer.

Contents of the Sticker sheet

2. Creando los Elementos Globales

La barra de estado, la barra de navegación, y la barra de aplicación a menudo se les llaman los "elementos globales" de una aplicación. Creándolas primero, definimos el área dentro de la cuál el resto de los widgets IU serán colocados.

En la hoja de etiquetas de componentes, todos los elementos globales están presentes dentro del grupo de capa llamado Global elements. Contiene elementos globales también para interfaces de usuario de teléfonos celulares, tabletas y de computadoras de escritorio. Por ahora, sin embargo, enfoquémonos en el grupo de capa MOBILE seleccionándolo y haciendo Alt-click en el ícono de su ojo.

Contents of the MOBILE layer group

Como puedes ver, el grupo de capa contiene todos los elemento que necesitamos, junto con unas cuántas guías que nos ayudarán a colocar con precisión otros widgets IU. Ve a Capa > Duplicar Grupo... para crear una copia de él en un nuevo documento llamado MyMaterialApp.

Duplicate Group dialog for the MOBILE layer group

En éste tutorial, vamos a crear la interfaz de usuario de una aplicación Android que servirá como un contador de calorías. Por lo tanto, en el documento recientemente creado,expande el grupo de capa App bar y usa la Herramienta Texto Horizontal para cambiar el título de la apliación a "Calories".

App title changed to Calories

Adicionalmente, nuestro diseño tendrá una gráfica en la región de la barra de aplicación. Para hacer espacio para ella, selecciona las capas key shadow y ambient shadow, presiona Ctrl-T, y hazlas de una altura de 250 px. No olvides aplicar la transformación al presionar Enter.

Height of the app bar changed to 250px

3. Agregando una Lista

Regresa a la pestaña sticker sheet (hoja de etiquetas de componentes) y busca el grupo de capa LISTS. Hay ocho diferentes tipos de listas disponibles dentro de ella. Sin embargo, nosotros, estaremos usando únicamente el séptimo tipo. Por lo tanto, selecciona el grupo de capa llamado List7 y ve a Capa > Duplicar Grupo... para crear su duplicado en el documento MyMaterialApp.

Duplicate Group dialog for List7

Regresa a la pestaña MyMaterialApp, asegúrate de que coloques la capa List7 justo debajo de la capa App bar. Una vez que hagas eso, verás que las guías y el contenido de la lista se alinean perfectamente.

List7 layer group positioned below the app bar

Siempre es una buena idea dar nombres significativos a tus grupos de capa. Por lo tanto, renombra el grupo de capa de la lista a "Foods list" (Lista de Alimentos).

4. Modificando la Lista

Déjanos ahora cambiar la lista para que despliegue elementos de alimentos junto con sus tamaños de porción. Hacer eso es fácil. Selecciona las capas de texto apropiadas y usa la Herramienta Texto Horizontal (T) para cambiar su contenido. Te sugiero también cambiar el grosor de la fuente de los elementos de comida a "Negrita".

List items displaying foods and portion sizes

Una aplicación de contador de calorías no sería muy útil si no motrara las calorías. Sin embargo, nuestra lista, actualmente no tiene espacio para más texto. Por lo tanto, elimina las capas llamadas "square" de los grupos de capa llamados list_01, list_02, y list_03.

List items with the squares removed

Ahora puede usar la Herramienta Texto Horizontal (T) para agregar nuevas capas de texto que muestren las calorías. Cambia el tamaño de la fuente de las capas a 24px, su nombre de fuente a Roboto Regular, y su color a #333333.

Calories added to each list item

5. Agregando Íconos de Material Design

Podemos hacer nuestra interfaz de usuario mucho más atractiva agregando a ella íconos de Material Design. Por ahora, descarguemos tres íconos diferentes para las tres listas de elementos de nuestra interfaz.

Ve a la página de Material Icons y primero elige el ícono llamado local pizza. En la parte inferior de la hoja que surge, cambia su tamaño a 36dp y haz click en el botón PNGS para descargr un archivo ZIP que contiene el ícono.

Material Icons page

Extrae el archivo ZIP y ve al directorio android/drawable-mdpi para encontrar el archivo de la imagen. Arrástralo y suéltalo dentro de la pestaña MyMaterialApp de la ventana de Adobe Photoshop.

Repite los mismos pasos para íconos etiquetados como local cafe y local dining.

Ahora podemos remplazar los círculos en los elementos de la lista con los íconos. Comencemos con el ícono de local pizza. Selecciona su capa y la capa llamada circle, la que está adentro del grupo de capa list_01. Ve a Capa > Alinear > Centros Verticales para alinear sus centros verticalmente. Similarmente, ve a Capa > Alinear > Centros Horizontales para alinear sus centrros horizontalmente.

Aligning the icons with the circles

En éste punto, puedes eliminar la capa "circle" en list_01.

Repite los mismos pasos para los otros dos íconos.

All icons in their final positions

6. Agregando Color

Agreguemos algunos colores ahora, porque las interfaces de usuario de Material Design tienden a ser brillantes y coloridas.

Selecciona la capa llamada "ic_local_pizza_black_36dp", click-derecho en ella, y selecciona Opciones de Fusión... En el cuadro de diálogo que aparece, ve a la sección Superposición de  Colores y elige el color #ffc107, que es referido como Amber 500 en la paleta de colores de Material Design.

Color overlay for the pizza icon

Repite los mismos pasos para las capas llamadas "ic_local_cafe_black_36dp" y "ic_local_dining_black_36dp". Asegúrate de elegir un color diferente cada vez.

All icons colored

Vamos a colorear los elementos globales ahora. Para cambiar el color del fondo, selecciona la capa llamada "Background", presiona A para seleccionar el rectángulo dentro de ella, y cambia el color de Relleno a blanco.

The Fill field set to white

Para cambiar el color de la barra de estado, abre el grupo de capa "Status bar", selecciona la capa llamada "bar", presiona A, y cambia el color de Relleno a Red 900, cuyo valor hexadecimal es #b71c1c.

Similarmente, cambia el color de la barra de aplicación, abre el grupo de capa "App bar", selecciona la capa llamada "key shadow", presiona A, y establece el color de Relleno en Red 500, o #f44336.

The colored global elements

7. Añadiendo un Botón de Acción Flotante

Un botón de acción flotante es uno de los widgets más prominentes en una interfaz de usuario de Material Design. Puedes obtenerlo al duplicar el grupo de capa "Floating action button" de la hoja de etiquetas de componentes. Si tienes problemas para encontrarlo, busca dentro del grupo de capa "METRIC AND KEYLINES"

En tu documento, coloca el grupo de capa "Floating action button" arriba del grupo de capa "Foods list".

A continuación, usa la Herramienta Mover (V) y coloca el botón de acción flotante en la esquina inferior derecha de la interfaz de usuario.

The floating action button placed at the bottom right corner

El botón de acción flotante debe tener un color acento. Porlo tanto, selecciona la capa "key shadow" dentro del grupo de su grupo de capa, presiona A para seleccionar el círculo dentro de él, y cambia el color de Relleno a Red Accent 700, o #d50000.

Similarmente, cambia el color de la capa "ic_add", que contiene el símbolo más, a blanco. Además, abre sus Opciones de Fusión... y cambia el valor de su Opacidad a 100%.

The colored floating action button

8. Cortando el Documento

Podrías haber notado que nuestro documento es muy largo, y el diseño ocupa únicamente una pequeña región dentro de él. Para cambiar el tamaño del documento para que coincida con el tamaño del diseño, ve a Imagen > Cortar. En el cuadro de diálogo que surge, deja los valores predeterminados y presiona OK.

The Trim dialog

9. Agregando un Gráfico

Como lo mencioné antes, la región de la barra de aplicación en nuestra interfaz de usuario tendrá un gráfico. Debido a que la hoja de etiquetas de componentes no tiene ninguna etiqueta para gráficos, tendremos que crearlo manualmente.

Comienza co habilitar la cuadrícula. Para hacerlo, ve a Vista > Mostrar > Cuadrícula.

Presiona Mayúsculas+Ctrl+N para crear una nueva capa dentro del grupo de capa App bar, y usa la Herramienta Lápiz (B) para dibujar cuatro líneas horizontales, que son blancas y de 1 px de grosor, debajo del título de la aplicación.

The four lines drawn using the Pencil tool

Usa la Herramienta Texto Horizontal (T) para agregar tres fechas debajo de la última línea horizontal. El tamaño de la fuente de las fechas puede ser de 13 px.

3 dates added below the last line

Ahora puedes deshabilitar la cuadrícula al ir de nuevo  a Vista > Mostrar > Cuadrícula.

Selecciona todas las capas que creaste en éste paso y presiona Ctrl+G para crear un nuevo grupo de capa para ellas. Nombre el grupo de capa "Chart".

A continuación, dentro del grupo de capa "Chart", crea una nueva capa y llámala "Data". Dentro de la capa, dibuja un trazo cerrado usando la Herramienta Pluma (P). La forma del trazado no es muy importante, mientras parezca una curva suave.

The path drawn using the Pen tool

Para rellenar el trazado con el color de frente, ve al panel Trazados, haz click derecho en Trazado de Trabajo y elige Rellenar Trazado... En el cuadro de diálogo que aparece, elige los valores predeterminados y presiona OK.

The Fill Path dialog

Para hacer que el gráfico se bea menos dominante, reduce la Opacidad del grupo de capa "Chart" a 75%.

Finalmente, usa la Herramienta Texto Horizontal (T) para mostrar el número total de calorías consumidas debajo del gráfico. Deja que el tamaño de la fuente del número sea de 24px, y que el de la etiqueta sea de 14px.

Nuestro diseño ahora está completo. Continua y oculta el grupo de capa "Guides" porque no lo necesitaremos más.

The completed design

10. Generando Material Gráfico para Dispositivos

Terminando nuestro diseño en un marco de dispositivo real y agregando un brillo de pantalla para que tienda a ser más pulcro y realista. Aunque puedes usar Adobe Photoshop para hacerlo, es mucho más fácil usar mejor el Generador de Material Gráfico para Dispositivos de Google.

Primero, exporta tu diseño como un archivo PNG al ir a Archivo > Guardar como...

Ahora puedes arrastrar el archivo PNG a cualquiera de los dispositivos que veas en el generador de material gráfico para dipositivos. Nota que tendrás que escalar tu imagen a al menos 1080x1920px para usar los marcos de los dispositivos más recientes.

Una vez que el arte del dispositivo ha sido generado, puedes arratrarlo a cualquier directorio de tu computadora para guardarlo.

Conclusión

En éste tutorial, aprendiste cómo usar la hoja de etiquetas de componentes de Material Design y Adobe Photoshop para diseñar una interfaz de usuario de una aplicación Android. Con toda confianza agrega más widgets a ella, cambia sus colores y experimenta con su maquetado.

También me gustaría recordarte que las especificaciones de Material Design son meramente una colección de pautas recomendadas. No tienes que apegarte a ellas todo el tiempo, mientras estés seguro de que el resultado final sea consistente e intuitivo.

Para aprender más sobre diseño de aplicaciones para Android, y encontrar más recursos de diseño, puedes visitar Google Design.


Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.