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

Cómo crear un diseño de interfaz de usuario de aplicación de reproductor de música en Adobe XD

by
Difficulty:IntermediateLength:LongLanguages:

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

Final product image
What You'll Be Creating

En este tutorial de Adobe XD aprenderás cómo crear un diseño de interfaz de usuario de reproductor de música.

Lo que aprenderás en este tutorial de interfaz de usuario de Adobe XD

  • Cómo crear un mockup de aplicación de música en Adobe XD
  • Cómo crear íconos en Adobe XD
  • Cómo configurar una cuadrícula en Adobe XD
  • Cómo guardar componentes en Adobe XD
  • Cómo utilizar repetir cuadrícula en Adobe XD

Para más inspiración sobre cómo ajustar o mejorar tu kit final de interfaz de usuario de aplicación para Adobe XD puedes encontrar muchísimos recursos en GraphicRiver.

Lo que necesitarás

Necesitarás el siguiente recurso para completar este kit de interfaz de usuario de reproductor de música para Adobe XD:

Music Player Icons
Íconos de reproductor de música

1. Cómo añadir los patrones de interfaz de usuario al mockup de aplicación de música

Siempre es una buena idea comenzar la interfaz de tu aplicación de música con un bosquejo básico en papel. Puedes establecer fácilmente los componentes principales del diseño de interfaz de usuario de tu reproductor de música y las ubicaciones y proporciones sin que sea de una manera perfecta.

Un bosquejo en papel es el inicio perfecto para el esquema de página o wireframe. Ten en cuenta que el aspecto general de tu interfaz de música facilita mucho las cosas una vez que pasas al diseño de proceso en Adobe XD.

music app mockup

Paso 2

Vamos a abrir Adobe XD y seleccionar la plantilla iPhone XR/XS Max/11 (414 x 986) para crear una mesa de trabajo de 414 x 896.

create artboard

Paso 3

Ahora, vamos a crear el mockup de aplicación de música digital. Mirando el bosquejo en papel notarás que habrá tres secciones principales (o patrones) del diseño de interfaz de usuario del reproductor de música. Comencemos con estas.

Toma la Herramienta rectángulo (R) y crea una forma de 414 x 70 px. Usa las guías inteligentes para colocar fácilmente tu forma como se muestra en la siguiente imagen y luego ve al inspector de Propiedades. Deshabilita el Borde existente usando esa casilla de verificación y luego haz clic en el color de Relleno y cambia el color a #646E83.

Mientras estás trabajando en el esquema de página asegúrate de no desperdiciar tiempo aplicando estilo a objetos o añadiendo demasiado contenido de texto. Tu única preocupación debería ser la estructura del diseño.

rectangle tool navigation bar

Paso 4

Asegúrate de que la herramienta Rectángulo (R) esté todavía activa y crea una forma de 414 x 204 px. Colócala como se muestra en la siguiente imagen.

rectangle tool player bar

Paso 5

Usando la misma herramienta, crea una forma de 374 x 50 px y colócala como se muestra en la siguiente imagen.

rectangle tool song bar

Paso 6

Selecciona el rectángulo hecho en el paso previo. Mantén presionada la tecla Opción y la tecla Mayúsculas y solo arrastra una copia de tu selección debajo de la forma original, como se muestra en la primera imagen. Asegúrate de que estés dejando un espacio de 10 px entre la forma original y la copia.

Repite esta técnica hasta que tengas una columna de nueve rectángulos, como se muestra en la tercera imagen.

song bars

Paso 7

Estos serán los principales componentes de tu kit de interfaz de usuario de reproductor de música.

Arriba, tienes la clásica barra de navegación donde añadirás los botones de control para tu aplicación. En la parte inferior está la barra del reproductor donde integrarás todos los controles básicos para un reproductor de música. Entre las dos barras tienes la lista de canciones donde añadirás la información de la canción y los botones de control para cada canción.

music app mockup

2. Cómo añadir los controles al mockup de aplicación de música.

Paso 1

Basándonos en el bosquejo en papel, vamos a agregar los controles a este mockup de aplicación de música. Comencemos con la barra de navegación. Toma la herramienta Rectángulo (R) y mantén presionada la tecla Mayúsculas para crear fácilmente un cuadrado de 40 px. Colócalo como se muestra en la siguiente imagen, deshabilita el Borde y establece el color de Relleno a blanco #FFFFFF).

Asegúrate de que este cuadrado siga seleccionado. Mantén presionada la tecla Opción y la tecla Mayúsculas y simplemente arrastra una copia de tu selección hacia la derecha, como se muestra en la segunda imagen. Usa las guías inteligentes para alinear perfectamente esta nueva forma.

white squares

Paso 2

Toma la herramienta Texto (T), haz clic dentro de tu mesa de trabajo y añade el texto Title (título). Colócalo como se muestra en la siguiente imagen, pero por ahora no te molestes en editar la fuente y sus atributos.

text tool

Paso 3

Dirígete hacia abajo hasta el rectángulo superior de tu lista de canciones. Toma la herramienta Rectángulo (R) y mantén presionada la tecla Mayúsculas para crear fácilmente un cuadrado de 30 px. Colócalo como se muestra en la primera imagen. Añade una copia de esta forma y colócala como se muestra en la segunda imagen.

white squares

Paso 4

Toma la herramienta Rectángulo (R), crea una forma de 38 x 24 px y colócala como se muestra en la primera imagen.

Cambia a la herramienta Texto (T) y añade los textos Artist Name (nombre del artista) y Song Name (nombre de la canción), como se muestra en la segunda imagen.

white shapes and text

Paso 5

Enfócate en la barra del reproductor. Toma la herramienta Rectángulo (R) y crea una forma de 374 x 20 px. Rellénala de blanco y colócala como se muestra en la primera imagen.

Usando la misma herramienta, crea un cuadrado de 80 px y colócalo como se muestra en la segunda imagen.

player bar buttons

Paso 6

Toma la herramienta Rectángulo (R) y crea un cuadrado de 50 px. Rellénalo de blanco y colócalo como se muestra en la primera imagen. Duplica esta nueva forma y arrastra la copia hacia la izquierda, como se muestra en la segunda imagen.

Usando la misma herramienta, crea dos formas de 20 x 16 px. Rellena ambos rectángulos de blanco y colócalos como se muestra en la tercera imagen.

ABCD

Paso 7

El mockup de aplicación de música está completo. Algunas de estas formas serán estilizadas y usadas en el kit de interfaz de usuario de reproductor de música, algunas solo servirán como guías para botones e íconos que estás a punto de agregar y pocas se eliminarán.

music app mockup

3. Cómo aplicar estilo a la barra de navegación de este diseño de interfaz de usuario de reproductor de música

Paso 1

Nos decantaremos por un estilo oscuro y limpio para el kit de interfaz de usuario del reproductor de música en Adobe XD. Los principales componentes tendrán diferentes tonos de negro para separar visualmente cada sección sin ser demasiado estridente. No usaremos un color diferente para la barra de navegación, pero nos aseguraremos de resaltar los dos botones principales que se encuentran en ella. Solo utilizaremos el blanco para todos los íconos y el texto para crear un agradable contraste y hacer cada elemento tan legible como sea posible. Por último, usaremos un color más brillante para dirigir la atención hacia los elementos más importantes del kit de interfaz de usuario de la aplicación en Adobe XD

Primero, cambiemos el color de la mesa de trabajo. Simplemente haz clic en el nombre ubicado arriba de tu mesa de trabajo y dirígete al inspector de Propiedades. Haz clic en el color de Relleno y cambia el color a #191A1F.

artboard color

Paso 2

Selecciona el rectángulo que conforma tu barra de navegación y elimínalo. Fue importante tenerlo cuando estábamos alineando y estableciendo el espaciado entre los componentes y los botones, pero en este momento ya no es útil. Esto llevará más atención a los botones y el texto de la barra de navegación.

Selecciona el cuadrado izquierdo de tu barra de navegación y dirígete al inspector de Propiedades. Cambia el Modo de fusión a Superponer, establece el radio del vértice en 15 y luego haz clic en el color de Relleno y disminuye la Opacidad a 50%.

Asegúrate de que esta forma esté todavía seleccionada y pulsa Comando-C. Selecciona el otro cuadrado de tu barra de navegación y pulsa Opción-Comando-V para añadir fácilmente con copiar y pegar los atributos de apariencia de una forma a la otra.

navigation bar

Paso 3

Vamos a crear un sencillo ícono de lupa. Primero, necesitas configurar la cuadrícula para crear y alinear las formas necesarias mucho más fácil y rápido. Haz clic en el nombre de tu mesa de trabajo y dirígete al inspector de Propiedades.

Enfócate en la sección Cuadrícula y haz clic en la casilla de verificación para habilitar la cuadrícula. Selecciona Cuadrado del menú desplegable, introduce 1 en la casilla de ingreso de datos y luego haz clic en el color. Cambia el color a #C7C7C7 y no olvides disminuir la Opacidad a 50%.

Toma la herramienta Elipse (E) y crea un círculo de 10 px. Deshabilita el Relleno, cambia el color de Borde a blanco, incrementa el Tamaño a 2 y marca el botón Trazo interior.

search icon

Paso 4

Toma la herramienta Línea (L), crea un pequeño trazado oblicuo y colócalo como se muestra en la primera imagen. Deshabilita el Relleno, cambia el color de Borde a blanco y asegúrate de que el Tamaño esté establecido en 2.

Selecciona este nuevo trazado junto con el círculo y Agrúpalos (Comando-G) para seleccionar fácilmente y mover ambas formas a la vez.

search icon

Paso 5

Ahora que el ícono de lupa está completo, vamos a crear un clásico ícono de menú. Toma la herramienta Rectángulo (R), crea una forma de 12 x 12 px y rellénalo de blanco. Añade dos copias de este rectángulo y arrástralas debajo de la original, como se muestra en la segunda imagen.

Selecciona los tres rectángulos hechos en este paso, dirígete al inspector de Propiedades y haz clic en el botón Añadir.

menu icon

Paso 6

Selecciona los dos íconos hechos en los pasos anteriores y colócalos como se muestra en la siguiente imagen. Estos serán tus botones de la barra de navegación.

navigation bar icons

Paso 7

Para el estilo del texto usaremos la fuente San Francisco Compact Display de Apple. Ofrece una extensa gama de estilos y lenguajes que te brindan la posibilidad de lograr óptima legibilidad en el tamaño de cada punto o para ajustar fácilmente contenido de texto cuando sea necesario.

Selecciona el texto Title (título) y remplázalo con 90's Hip Hop. Dirígete al inspector de Propiedades, selecciona la fuente San Francisco Compact Display, cambia el Estilo a Semibold y establece el Tamaño en 20.

navigation bar text

4. Cómo aplicar estilo a los controles de la canción del diseño de la interfaz de usuario de tu reproductor de música

Paso 1

Enfócate en los textos. Selecciona el superior y dirígete al inspector de Propiedades. Selecciona la fuente San Francisco Compact Display, cambia el Estilo a Semibold y disminuye el Tamaño a 16.

Selecciona el otro texto, usa la misma fuente, pero cambia el Estilo a Light y disminuye el Tamaño en 12.

song text

Paso 2

Selecciona el cuadrado izquierdo de la barra de canciones, dirígete al inspector de Propiedades y establece el radio del vértice en 10.

song photo box

Paso 3

Selecciona el rectángulo blanco de la barra de canciones y dirígete al inspector de Propiedades. Cambia el Modo de fusión a Superponer, establece el radio del vértice en 8 y luego haz clic en el color de Relleno y disminuye la Opacidad en 35%.

song time

Paso 4

Toma la herramienta Texto (T), añade el texto 4:08, establece el color en blanco y colócalo como se muestra en la siguiente imagen. Usa la fuente San Francisco Compact Display, cambia el Estilo a Light y disminuye el Tamaño a 12.

song time text

Paso 5

Concéntrate en el cuadrado derecho de la barra de canciones. Toma la herramienta Rectángulo (R), crea un cuadrado de 4 px, rellénalo de negro y colócalo como se muestra en la primer imagen. Añade dos copias de esta diminuta forma y colócalas como se muestran en las siguientes imágenes.

Una vez que termines, selecciona los tres cuadrados y haz clic en el botón Añadir del inspector de Propiedades. Cambia el color de Relleno de esta forma de negro a blanco y luego selecciona el cuadrado blanco ubicado atrás y elimínalo.

song menu button

Paso 6

Selecciona el rectángulo que conforma la barra superior de canciones y dirígete al inspector de Propiedades. Establece el radio del vértice en 10 y cambia el color de Relleno en #232429.

song bar

Paso 7

Selecciona las formas y el texto que conforman la barra superior de las canciones y Agrúpalas (Comando-G).

Asegúrate de que tu grupo siga seleccionado, cambia al panel Activos (Shift-Comando-Y) y haz clic en el botón del signo de más de la sección Componentes. De manera alternativa, puedes usar el atajo de teclado Comando-K.

song component

Paso 8

Asegúrate de que tu componente esté todavía seleccionado y haz clic en el botón Repetir cuadrícula del inspector de Propiedades o pulsa el atajo de teclado Control-R. Haz clic en el manejador inferior y arrástralo hacia abajo par añadir ocho copias de tu componente, como se muestra en la segunda imagen.

Mueve el cursor a cualquier lado entre tus componentes y haz clic y arrastra para reducir el espaciado general entre componentes a 10 px, como se muestra en la tercera imagen.

Adobe XD repeat grid

Paso 9

Haz doble clic en el cuarto componente para seleccionarlo y luego haz doble clic de nuevo para seleccionar el rectángulo redondeado dentro de él. Dirígete al inspector de Propiedades y remplaza el color de Relleno con #785BFC. Usaremos este púrpura para resaltar los elementos más importantes del diseño. Los primeros que deberían llamar la atención del usuario cuando usen la aplicación.

song bar active

Paso 10

Enfócate en los componentes uno a uno. Haz doble clic en cada componente para seleccionarlo de la cuadrícula y luego haz doble clic de nuevo para seleccionar los textos. Remplaza la información existente con la mostrada en la siguiente imagen.

songs text

5. Cómo aplicar estilo a los controles del reproductor de la Interfaz.

Paso 1

Enfócate en el lado superior de la barra del reproductor. Toma la herramienta Rectángulo (R), crea una forma de 280 x 4 px y colócala como se muestra en la siguiente imagen. Establece el radio del vértice en 2 y cambia el color de Relleno a #232429.

player bar

Paso 2

Asegúrate de que la herramienta Rectángulo (R) esté todavía activa, crea una forma de 98 x 4 px y colócala como se muestra en la siguiente imagen. Establece el radio del vértice en 2 y cambia el color de Relleno a púrpura (#785BFC).

player bar playing

Paso 3

Usando la herramienta Rectángulo (R), crea un cuadrado de 20 px y colócalo como se muestra en la siguiente imagen. Establece el radio del vértice en 7 y cambia el color de Relleno en blanco.

player bar button

Paso 4

Selecciona la forma principal que conforma la barra del reproductor y cambia su color a #0F0F0F.

Toma la herramienta Texto (T) y añade el texto blanco mostrado en la segunda imagen. Usa la misma fuente San Francisco Compact Display, cambia el Estilo a Light y establece el Tamaño en 12.

player bar

Paso 5

Selecciona el cuadrado blanco más grande de la barra del reproductor y enfócate en el inspector de Propiedades. Cambia el color de Relleno a púrpura (#785BFC) y establece el radio del vértice a 25.

player bar button

Paso 6

Asegúrate de que tu botón púrpura esté todavía seleccionado, mantente enfocado en el inspector de Propiedades y habilita el efecto Sombra. Introduce los atributos mostrados en la siguiente imagen y luego haz clic en el color de la Sombra. Cambia el color a #785BFE y disminuye la Opacidad a 50%.

button shadow

Paso 7

Selecciona los cuadrados blancos a la izquierda y a la derecha del botón púrpura. Establece el radio del vértice en 15 y cambia el color de Relleno en #232429. Considerando que este botón reproducir/pausa es el elemento más importante de esta barra debería tener el mayor peso visual.

player buttons

Paso 8

Descarga estos Íconos del reproductor de música y arrástralos dentro del documento del diseño de la interfaz de usuario de tu reproductor de música. Escala estas formas y colócalas como se muestra en la siguiente imagen.

music player icons

¡Felicidades! ¡Tu interfaz de aplicación de música está terminada!

Así debería lucir. Espero que hayas disfrutado este tutorial y puedas aplicar estas técnicas en tus futuros proyectos de kit de interfaz de usuario de aplicaciones en Adobe XD. No dudes en compartir tu interfaz final de aplicación de música en la sección de comentarios.

music player UI design

Siéntete libre de ajustar el diseño final y hacerlo tuyo, añadir movimiento y transiciones será un sensacional próximo paso. Puedes encontrar fabulosa inspiración en GraphicRiver, con interesantes soluciones para crear tu sorprendente kit de interfaz de usuario de reproductor de música en Adobe XD.

Aprende más sobre diseño de interfaz de usuario en Adobe XD

Tenemos un montón de tutoriales en Tuts+, desde nivel principiante hasta avanzado, ¡échales un vistazo!

Advertisement
Advertisement
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.