Exercise 2 — Design Practice
Ironhack’s Prework, Exercise 2
Llegamos al segundo ejercicio del prework de Ironhack. En él me piden que copie el diseño de cinco pantallas de una app ya existente utilizando el programa de prototipado llamado Sketch.
La primera aplicación que me viene a la cabeza al leer el objetivo de este ejercicio es Spotify, y no porque haya un vídeo tutorial en la lección del prework, sino por la enorme cantidad de horas que paso al día escuchando música a través de esta app, ya sea en el ordenador o en el móvil. Además, su interfaz oscura me parece muy bonita y adecuada, puesto que así se consigue resaltar la parte visual y su contenido, que en este caso son las canciones, los artistas y las playlists.
Ya había utilizado Sketch con anterioridad, así que duplicar las pantallas no me ha parecido una tarea muy complicada, pero sí que me ha servido para aprender algunos de los shortcuts del teclado y ganar más agilidad en el proceso de diseño, y también para acostumbrarme a agrupar y renombrar cada una de las capas, ya que confieso que a veces peco un poco de desordenada en ese sentido 😅.
A continuación os muestro las cinco pantallas que he usado de referencia (arriba) y sus clones (abajo):
Lo primero de todo fue identificar la tipografía que utiliza Spotify: Proxima Nova. Al ser una tipografía de pago, únicamente he podido conseguir algunas de las fuentes del catálogo, por lo tanto no todo el texto es exacto al original. Lo segundo fue crear los artboards en Sketch con el tamaño de mi móvil, un iPhone 6s. Una vez hecho esto ya pude ponerme con el proceso de clonación para cada una de las pantallas. El icono de la rueda de configuración y el de la nota musical los he conseguido en The Noun Project, el resto los he construido mediante las operaciones booleanas de Sketch.
En el siguiente desafío de Ironhack os mostraré la creación de los wireframes de esta aplicación, así como sus interacciones.
