Spanish (Español) translation by Javier Salesi (you can also view the original English article)
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:
- Fuente San Francisco Compact Display
- Í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.
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.
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.
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.
Paso 5
Usando la misma herramienta, crea una forma de 374 x 50 px y colócala como se muestra en la siguiente imagen.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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%.
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.
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.
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.
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.
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.
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.
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.
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.
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).
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.
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.
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.
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%.
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.
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.
¡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.
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!
Adobe XDCómo crear un diseño de interfaz de usuario de reservación de hotel en Adobe XD
Adobe XDTu primer esquema de página con Adobe XD
Adobe XDNuevo curso: 15 atajos de teclado para Adobe XD que ahorran tiempo
Adobe XDCómo crear un prototipo de interfaz de usuario usando Adobe XD
SketchCómo crear bordes de un solo lado en Sketch y Adobe XD
Adobe XDConsejo rápido: Diseña un gráfico de flecha en formado SVG en Adobe XD
Adobe XDCómo usar el redimensionado inteligente y restricciones en Adobe XD
Adobe XDDomina Adobe XD con estos 4 cursos
