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

Diseñar una aplicación iOS para mantenerse en forma con compatibilidad para Apple Watch

by
Difficulty:BeginnerLength: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 éste tutorial, te enseñaré como diseñar una aplicación iOS sencilla y fácil de usar para mantenerse en forma dando seguimiento a tus entrenamientos de correr o andar en bicicleta. Además de la aplicación iOS, también te daré un ejemplo de diseño para la interfaz de Apple Watch.

Al final de éste tutorial podrás diseñar una aplicación iOS con diferentes pantallas y vistas en Sketch. Estaremos usando algunas técnicas básicas e intermedias en Sketch, ¡Asi que comencemos!

Recursos del Tutorial

Necesitarás éstos recursos para poder continuar:

Rápida Advertencia

Antes de comenzar, debo recalcar que éste concepto es completamente teórico. En el caso de un proyecto del mundo real, requeriría un análisis de mercado y comportamiento de usuario mucho más profundo, antes de que poder convertir ésto en una aplicación móvil utilizable y real. He estado corriendo y andando en bicicleta regularmente durante cuatro años, así que he creado éste concepto para mostrar cómo una aplicación para mantenerse en buena forma se vería desde mi perspectiva.

Configurando las Artboards (Mesas de Trabajo)

Estaremos usando Sketch, una aplicación de diseño originalmente creada para diseñar interfaces y hoy en día la forma más fácil y rápida de diseñar en iOS.

Paso 1

Después de abrir Sketch, seleccionemos la opción Artboard (A) del menú Insert.

Setting up the Artboards

Sketch Mirror

En el lado izquierdo del panel, recomendé elegir las dimensiones del iPhone 6, pero si tienes un iPhone diferente encontrarás que es mejor escoger ese. Ésto es importante, porque con la ayuda de Sketch Mirror podemos inmediatamente ver nuestro trabajo, en tiempo real en nuestro dispositivo iOS, sin exportar o transferir imágenes. Sketch Mirror es una parte crucial de mi flujo de trabajo en diseño, porque me permite ver y sentir el resultado final de mi trabajo en segundos.

Choose iPhone 6 size

Para activar Sketch Mirror, tienes que descargar la app Sketch Mirror de la App Store, luego hacer click en el ícono Mirror dentro de Sketch (asegúrate que tus dispositivos están en la misma red Wi-Fi o conectados vía un cable USB).

Using Sketch Mirror

Creando la Barra de Pestañas

Desde la introucción del iPhone 6 y 6 Plus, es casi imposible usar el botón de navegación oculto en la esquina superior izquierda, porque la mayoría de los usuarios no podrán alcanzarlo con una mano. Por ésta razón he colocado la navegación primaria en la parte inferior de la pantalla, siempre visible y fácilmente alcanzable.

Paso 1

Vamos a crear un rectángulo de 100px de altura, que cubra toda la anchura disponible, en la parte inferior de la pantalla.

Creating the Tab bar

Ahora, dividamos éste rectángulo para que tengamos cinco rectángulos iguales en los que podamos colocar posteriormente los íconos de navegación. Recomiendo que le pongas a cada rectángulo un color ligeramente diferente para ver claramente los bordes de cada uno.

Paso 2

Vamos a crear otro cuadrado de 50x50px para los íconos. Debajo podemos añadir los labels (etiquetas) para las diferentes pantallas: Activities (Actividades), Challenges (Desafíos), GO (Ir), Friends (Amigos) y Profile (Perfil) Para éstos labels, establecí Avenir Next Regular con un font size (tamaño de fuente) de 24px y un line-height (interlineado) de 24px.

Tab bar guidelines

Paso 3

Ahora podemos colocar nuestros íconos en éstos pequeños cuadrados. Asegúrate que cada ícono sea de una altura de 50px o una anchura de 50px. Para nuestro ícono de Profile, vamos a crear un circulo de 50x50px con nuestra herramienta Oval (O) y selecciona image fill (rellenar con imagen) en el panel Fills (Rellenos).

Profile picture

Paso 4

Oculta los rectángulos guías al dar click en el pequeño ícono del ojo ubicado junto a las capas.

Hideunhide layers

Para el fondo de nuestra barra de pestañas elegi un color blanco #FFFFFF con una opacidad de 70% y un desenfoque de fondo de 8px. También añadí una línea de un pixel con el color #B4B4B4 con la herramienta Line (L) (Línea) como un separador visual en la parte superior de la barra de pestañas.

Tab bar background

Para los íconos y labels de la pestaña inactiva, recomiendo un tono de gris #666666 en lugar de un simple negro, y para la parte activa, establezcamos un rojo vivo como el #FF3B30.

Active and inactive icons

Diseñando la Pantalla GO.

La mayoría de nuestros usuarios abrirían la aplicación justo antes de que estén listos para correr o andar en bicicleta, así que lo primero que querrán hacer con la app es comenzar a dar seguimiento a sus entrenamientos. Ésta es la razón por la que comenzamos a diseñar primero la pantalla GO, permitiendo al usuario comenzar inmediatamente su entrenamiento.

Antes de cualquier actividad al aire libre, siempre checo por anticipado las condiciones meteorológicas, para saber que debo esperar, incluyendo la fuerza del viento y la hora de la puesta del sol. En mi opinión, éstos detalles son verdaderamente esenciales si estás al aire libre, así que he diseñado una sección del clima integrada en la pantalla GO. De ésta forma los usuarios no tienen que revisar una aplicación del clima cada vez antes de que abran nuestra aplicación para mantenerse en forma.

Paso 1

Primero, necesitaremos un estado iOS blanco y una barra de navegación de la plantilla iOS UI Design de Sketch, que puedes encontrar bajo File > New From Template > iOS UI Design.

Using iOS UI Design template
Copying the Navigation bar

Consejo: debido a que la plantilla iOS UI Design de Sketch nos proporciona recursos 1x necesitamos convertirlos a una resolución de 2x. Ésto se puede hacer fácilmente con la herramienta Scale (Escalar).

Using Scale in Sketch

Paso 2

Para el color de fondo de nuestra barra de navegación quise elegir un color vivo y vital, que inspire a los usuarios a moverse y actuar inmediatamete. Así que elegí un rojo liso y vivo, #FF3B30, que tiene como objetivo llamar tu atención la primera vez que lo ves.

GPS indicator

Para el indicador de fuerza GPS utilicé un simple gradiente desde #15FF00 a #15FF00 en un rectángulo con esquinas redondeadas.

En el lado opuesto, coloqué un ícono de bicicleta, para cambiar fácilmente entre modo correr y andar en bicicleta.

Paso 3

Ahora, crearemos nuestro pronóstico del tiempo en la parte superior de la pantalla. Debido a que la mayoría de nuestros entrenamientos generalmente no durarán más de tres horas, proporcionaremos una pronóstico para tres horas con información adicional sobre la fuerza del viento y la hora de la puesta del sol. Recomiendo un gris claro como #ACACAC para éste tipo de información, porque no queremos enfatizar de más el pronóstico del tiempo.

Weather section

Paso 4

Como un separador visual entre diferentes clases de secciones de la interfaz, dibujemos un rectángulo con un color #ECECEC, con una altura de 54px y una anchura de 100%.

Designing the weather section

Paso 5

Antes de iniciar el entrenamiento, puede ser motivante establecer una meta. Ésta puede ser en la forma de distancia, tiempo o un nuevo récord de promedio de velocidad. Para mostrar éstas metas vamos a crear dos círculos separados con las siguientes dimensiones 270x270px y 230x230px.

Creating the goal circle

Después de colocar los círculos, arrastra el primero y suéltalo en el segundo en el panel de capas. Para crear una forma de anillo selecciona la opción 'Subtract'.

Subtract option

Para el color de fondo de éste anillo vamos a crear un gradiente lineal desde #AAFFA9 hasta #11FBD y establecer la opacidad en 20%. Éste será el estado inactivo de nuestro anillo.

Inactive background

Para la parte activa, dupliquemos nuestra forma al seleccionar la forma en el layer panel > Right click > Duplicate (panel de capas > Click derecho > Duplicar) (alternativamente también podemos duplicar con ⌘-C y ⌘-V)

Ahora necesitaremos la herramienta Vector (V) para crear una máscara en nuestro círculo activo.

Using the vector tool

Consejo: manteniendo presionada la tecla Shift (Mayúsculas) mientras se usa la herramienta Vector nos ayuda a crear líneas perfectamente derechas.

Movámos ésta capa bajo el círculo activo, luego la establecemos como una máscara de capa. No olvides quitar el relleno de borde de nuestra forma vectorizada.

Masking layers

Para los detalles finos, agreguemos otros dos círculos de 20x20px a nuestra forma máscara, dándonos un agradable extremo redondeado al final del anillo activo.

Fine details

Consejo Profesional: Para el texto en el centro del anillo, establezcamos una pequeña cantidad de sombre interior.

Text shadow

Ahora, lo único que le falta a nuestra pantalla GO es el botón GO, que será un rectángulo de 120px de altura con un color rojo #FF3B30.

Designing the GO button

Creando las Activities View (Vista Actividades)

En la pantalla Activities podemos rápidamente navegar por los entrenamientos de nuestros amigos o los de nosotros mismos. Después de pulsar uno de éstos entrenamientos, podemos tener una vista más detallada, incluyendo una gráfica interactiva.

En la parte inferior de ésta vista detallada, mostraremos los resultados generales del entrenamiento seleccionado, mientras en la parte superior, puedes ver los resultados específicos dependiendo donde pulsemos la gráfica (indicado con una barra vertical clara).

Paso 1

Como antes, comenzaremos con nuestra barra de navegación, añadiendo otro ícono "más" para permitir al usuario agregar manualmente entrenamientos.

Creating the Activities screen

Paso 2

Para cambiar entre los entrenamientos de nuestros amigos y los nuestros, necesitamos crear una barra de navegación secundaria. Seleccionemos la herramienta Rectangle (R) (Rectángulo) y vamos a crear un rectángulo de 90px con un color de relleno azul oscuro #1F2033.

Designing the secondary navigation bar

Ahora creamos otro cuadrado de 22x22px y lo rotamos 45 grados.

Secondary navigation bar details

Podemos agrupar éstas dos capas como lo hicimos con nuestros anillos de metas. Asegúrate que estés usando la opción Subtract en lugar de Union.

Using the Subtract option

Consejo: nota el ligero cambio en términos de opacidad entre el elemento de navegación secundaria activo e inactivo.

Paso 3

Para la vista detallada, crearemos otro rectángulo con el mismo fondo azul oscuro. Pero ésta vez, la altura será de 387px. Para las guías utilicemos la herramienta Line (L) (Línea).

Activities details

Paso 4

Para mostrar visualmente el diferencia de altitud durante el entrenamiento, necesitaremos crear una forma personalizada con la herramienta Vector (V). No hay una técnica específica para crear ésta gráfica, así que modifiquemos la curva Bézier hasta quedar satisfechos.

Displaying the altitude difference

Paso 5

Además de la diferencia de nivel, podemos también mostrar los cambios en la velocidad durante el entrenamiento con una curva de color, donde las áreas de rojo y verde indican el paso o ritmo.

Displaying the pace difference

El método es el mismo de antes con la herramienta Vector y las curvas Bézier. Para el color de relleno usé #FF3B30 para el rojo y #22EA05 para el verde (verde significa más rápido que el paso o ritmo promedio, rojo significa más lento.)

Pace curve colors

Paso 6

Con la ayuda del plugin Content Generator para Sketch, podemos fácilmente agregar diferentes fotos de perfil a nuestros avatares circulares.

Using Content Generator Sketch plugin

¡Ahora también estamos listos con la pantalla Activities!

Final Activities screen

Diseñando la Pantalla Challenges (Desafios)

En la pantalla Challenges podemos ver los desafíos particulares en los que participamos. Durante el diseño de ésta pantalla, combiné un diseño circular inspirado en el Apple Watch con un diseño tipo tarjeta, para que el usuario puede volver a arreglar los desafíos basados en su importancia.

Paso 1

Después de diseñar las pantallas previas, será mucho más fácil crear ésta, porque ya hemos diseñado la mayor parte de ella. Primero, vamos a crear un nuevo Artboard (A) y copiar la barra de navegación y la barra de navegación secundaria de la pantalla Activities.

Paso 2

Para crear las tarjetas, necesitaremos un rectángulo de 355x400px.

Challenges cards

Paso 3

Como color de fondo, utilicé un blanco, pero para separar visualmente las tarjetas del fondo agregué un poco de sombra negra con una opacidad de 20%.

Card details

Paso 4

Para ser consistente y coherente a través de toda la aplicación es importante mostrar a los usuarios la misma clase de información de la misma manera. Como recordarás, ya hemos diseñado un pequeño anillo para indicar las metas en la pantalla GO, así que ahora podemos usar la misma técnica aquí.

Displaying our goals

Consejo: Si quisieras tener más inspiración para unos gradientes atractivos, recomiendo checar uigradients.com.

Paso 5

El último elemento que falta es la barra de pestañas en la parte inferior de la pantalla, así que vamos a copiar eso de la pantalla previa y asegurarnos de modificar el estado activo de la pestaña.

Final Challenges screen

Creando la Sección Browse Challenges (Navegar Desafíos)

En la pantalla de Browse Challenges, podemos rápidamente recorrer los más recientes y populares desafíos, donde podemos ver cuántos días quedan para completar un desafío particular y cuántos miembros están participando en él.

Paso 1

Como siempre, podemos duplicar los elementos de diseño familiares desde las pantallas previas, pero no olvidemos modificar la barra de navegación secundaria.

Paso 2

Vamos a crear la información básica sobre un desafío y agreguemos una insignia personalizada como motivación. Ésto será recompensante cuando alguien termina el desafío.

Nota: Para éste tutorial, sólo he creado una simple insignia, pero en un proyecto real pasaría más tiempo diseñando insignias diferentes, y muy prolijas.

Designing the Browse Challenges screen

Consejo: Nota las pequeñas diferencias en tamaño y colores del texto, ayudándonos a crear un jerarquía clara.

Paso 3

Para mostrar visualmente el tiempo restante vamos a crear una línea de tiempo. Ésta barra tendrá esquinas redondeadas de 40px y un color de fondo de #F5F5F5.

Designing the timeline

Paso 4

Para la parte activa de ésta barra, copiemos nuestro rectángulo previo, haciéndolo un poco más corto y establezcamos un gradiente lineal desde #44FF30 hasta #FFDA30.

Timeline colors

Paso 5

Después de duplicar ésta sección y copiar la barra de pestañas de la pantalla previa ¡estamos listos con la sección de Browse Challenges!

Browse Challenges final

Una cosa más: Apple Watch

Al último, pero no menos importante, he creado una intefaz Apple Watch para nuestra aplicación. Éste concepto de diseño se basa en Apple Watch Human Interface Guidelines (Guía Interfaz Humana Apple Watch). Éstas pautas son proporcionadas por Apple para que los desarrolladores y diseñadores tengan una mejor comprensión de las posibilidades de ésta nueva plataforma.

He creado cuatro diferentes interfaces watch para nuestra aplicación de mantenerse en forma. En el caso del primer concepto he realizado una pantalla altamente personalizable, donde puedes volver a arreglar la información basada en tus intereses. Es más, el color de los datos más importantes está siempre cambiando dependiendo de que tan lejos estás de tu meta inicial. En éste caso el color verde significa que has logrado tu meta de distancia.

Apple Watch interface design

¡Felicitaciones!

Hemos completado nuestro diseño de aplicación iOS para mantenerse en forma. Habiendo seguido éste tutorial, espero que tengas más confianza en usar Sketch para el diseño de aplicaciones móviles.

Con toda confianza descarga el archivo completo de Sketch, para tener una visión más detallada en las técnicas de diseño que usamos. Tengo curiosidad de escuchar que te pareció el proyecto, así que no dudes en dejar una retroalimentación y preguntas en la sección de comentarios.

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

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.