() translation by (you can also view the original English article)
En este tutorial de Sketch aprenderás cómo diseñar una interfaz para una aplicación de condición física.
Para comenzar, veremos cómo crear los componentes iniciales de una interfaz de aplicación para iOS. Aprenderás:
- cómo crear una barra de navegación básica,
- cómo guardar y usar símbolos
- y cómo crear un formato inteligente.
Todas estas características te harán el trabajo más fácil a lo largo de este tutorial gratuito para un prototipo de aplicación de condición física.
- Después, mediante formas simples, trazados y técnicas de creación de formas vectoriales, aprenderás a crear e importar iconos dentro de la interfaz de tu aplicación de condición física.
- Usando técnicas sutiles de sombreado, símbolos o símbolos incrustados y algo de texto, aprenderás cómo añadir color y e intensidad a tu diseño de plantilla para aplicación de condición física.
- Por último, aprenderás cómo multiplicar objetos fácilmente y cómo crear el menú inferior de navegación.
Para obtener más inspiración sobre cómo ajustar o mejorar tu kit de UI para condición física, puedes encontrar muchísimos recursos en GraphicRiver.
Necesitarás:
Deberás tener los siguientes recursos para completar esta interfaz para aplicación de condición física. La mayor parte de ellos está disponible en Envato Elements, en donde puedes obtener descargas ilimitadas por una suscripción. O si lo prefieres, también puedes encontrar alternativas para trabajar:
- Fuente San Francisco
- Paquete de iconos 14 Flame
- Serie de iconos Fitness Glyph Color
- Serie de 20 iconos de deporte (sólidos)
1. Cómo configurar la mesa de trabajo
En la barra de herramientas o desde el menú, ve a Insert > Artboard (o presiona A), y el Inspector mostrará una lista de plantillas de mesa de trabajo. Haz clic en la plantilla de iPhone 11 para crear una mesa de trabajo de 414 x 896 px. Ya que la tengas, presiona Escape para deseleccionar tu mesa de trabajo. Ahora, comencemos a trabajar en el prototipo gratuito de aplicación de condición física.
2. Cómo insertar una barra de navegación en un diseño de plantilla de aplicación de condición física
Paso 1
Desde la barra de herramientas o del menú, ve a Insert > Shape > Rectangle (o presiona R). Haz clic y arrastra para crear una forma de 414 x 70 px, colócala como se muestra en la siguiente imagen; asegúrate de que se quede seleccionada.
Ve al panel de Inspector y ve la sección de Style. Haz clic en las casillas de verificación de Borders para desactivar el borde aplicado a tu rectángulo y deja el color determinado de Fill.
Paso 2
Desde la barra de herramientas o del menú, ve a Insert > Shape > Oval (o presiona O). Mantén presionada la tecla Shift para crear un círculo perfecto de 40 px, asegúrate de que siga seleccionada y concéntrate en el panel de Inspector.
Usa los cuadros de entrada X y Y para colocar numéricamente esta nueva forma. Ingresa 35 en el cuadro X, y 64 en el cuadro Y. Tu forma debería moverse al lado izquierdo de tu rectángulo gris, tal como se muestra en la siguiente imagen.
Continúa en el panel de Inspector y ve la sección de Style. Desactiva el Border existente y cambia el color de Fill a #F5F5FF.
Paso 3
Desde la barra de herramientas o del menú, ve a Insert > Vector (o presiona V). Haz tres clics para crear la forma de flecha que se muestra en la siguiente imagen. Colócala como se muestra a continuación y asegúrate de que se queda seleccionada.
Desde el panel de Inspector ve a la sección de Style, desactiva el Fill existente y cambia el color de Border a #4B4B87.
Paso 4
Desde la barra de herramientas o del menú, ve a Insert > Text (o presiona T). Haz clic una vez en tu mesa de trabajo y concéntrate en la sección de Text del panel de Inspector.
Selecciona la fuente San Francisco Compact Rounded y cambia el estilo a Bold, selecciona el tamaño 24 y el color #4B4B87, después escribe "ESTADÍSTICAS". Coloca el texto como se muestra en la siguiente imagen.
3. Cómo insertar un menú horizontal en una plantilla de diseño para una aplicación de condición física
Paso 1
Ve a View > Canvas > Show Ruler (o presiona Command + R) para activar las Reglas (Rulers). Haz clic derecho en tus reglas y ve a Show All Guides, ya que vamos a añadir algunas guías nuevas.
Concéntrate en las reglas horizontales y mueve tu cursor dentro de ellas. Mueve tu cursor a 20 px y simplemente haz clic para añadir una nueva guía. Las guías pueden moverse y reposicionarse haciendo clic y arrastrando la guía dentro de las reglas. Sigue en las reglas horizontales y usa la misma técnica para añadir una segunda guía a 394. Ahora que las guías están en su lugar, puedes continuar trabajando en tu plantilla de interfaz para aplicación de condición física.
Paso 2
Desde la barra de herramientas o del menú, ve a Insert > Shape Rectangle (o presiona R). Haz clic y arrastra para crear una forma de 374 x 40 px, asegúrate de que sigue seleccionada y concéntrate en el panel de Inspector.
Primero, usa los cuadros de entrada X y Y para colocar numéricamente este nuevo rectángulo. Ingresa 20 en el cuadro X, y 139 en el cuadro Y; tu forma debería moverse a la parte superior de tu mesa de trabajo, tal como se muestra en la siguiente imagen.
Sigue en el panel de Inspector, arrastra el deslizador de Radius a 20 y después ve a la sección de Style. Desactiva el Border existente y cambia el color de Fill a #F5F5FF.
Paso 3
Ve a Insert > Shape > Rectangle (R), crea una forma de 120 x 30 px. Colócala como se muestra en la siguiente imagen, asegúrate de que se quede seleccionada y concéntrate en el panel de Inspector.
Arrastra el deslizador de Radius a 18, después ve a la sección de Style. Cambia el color de Fill a #4B4B87 y borra el Border existente con el botón de Trash.
Paso 4
Asegúrate de que el rectángulo redondeado que hicimos en el paso anterior siga seleccionado y concéntrate en la sección de Style desde el panel de Inspector.
Haz clic en el botón Shadows para añadir el efecto de sombras de tu preferencia. Ingresa los números que aparecen en la siguiente imagen y haz clic en el cuadro cromático. Cambia el color a #4B4B87 y disminuye el Alpha a 80.
Paso 5
Ve a Insert > Text (T), escribe "Día" y coloca el texto como se muestra en la siguiente imagen. Usa la fuente San Francisco Compact Rounded y cambia el estilo a Semibold. Selecciona el tamaño 16 y cambia el color a blanco (#FFFFFF), y no olvides cambiar la alineación (Alignment) a Center.
Paso 6
Selecciona el rectángulo redondeado y el texto resaltados en la siguiente imagen y haz clic en el botón Create Symbol de la barra de herramientas, o elige Layer > Create Symbol en el menú.
Ponle el nombre "Botón Activo" a tu símbolo, selecciona el Layout de Izquierda a Derecha (Left to Right) y haz clic en OK. Esto creará un símbolo maestro independiente de tu mesa de trabajo. Si modificas uno de ellos, los cambios también aparecerán en las otras copias de símbolos maestros en tu documento. El formato de Left to Right te ayudará más adelante para crear un formato inteligente.
Paso 7
Ve a Insert > Shape > Rectangle (R), crea una forma de 120 x 30 px. Colócala como se muestra en la siguiente imagen con ayuda de las Smart Guides. Asegúrate de que se quede seleccionada y concéntrate en el panel de Inspector.
Arrastra el deslizador de Radius a 18 y luego ve a la sección de Style. Cambia el color de Fill a #F5F5FF y desactiva el Border existente.
Paso 8
Ve a Insert > Text (T), escribe "Semana" y coloca el texto como se muestra en la siguiente imagen. Usa la fuente San Francisco Compact Rounded y cambia el estilo a Semibold. Selecciona el tamaño 16 y cambia la alineación (Alignment) a Center, luego da clic en el cuadro cromático. Selecciona el color #4B4B87 y disminuye el Alpha a 50.
Paso 9
Selecciona el rectángulo redondeado y el texto resaltados en la siguiente imagen y crea un nuevo símbolo (con el botón Create Symbol en la barra de herramientas o en Layer > Create Symbol en el menú). Ponle en nombre "Botón Inactivo", selecciona el formato de Left to Right y haz clic en OK.
Paso 10
Asegúrate de que el símbolo creado en el paso anterior todavía esté seleccionado. Mantén presionada la tecla Option, y arrastra tu símbolo seleccionado para duplicarlo. Para restringir el movimiento de tu duplicado en una sola dirección, mantén presionada la tecla Shift mientras lo arrastras. Arrastra este duplicado hasta que las Smart Guides te muestren que hay un espacio de 2 px entre el duplicado y el símbolo original.
Selecciona este duplicado y concéntrate en la sección de Symbol del panel de Inspector. En el cuadro Overrides escribe "Mes" para cambiar el texto de tu duplicado de símbolo.
Paso 11
Selecciona tus tres símbolos junto con el rectángulo redondeado que está detrás y guárdalos como un nuevo símbolo. Ponle el nombre "MenúHorizontal" y no olvides seleccionar el formato de Left to Right.
Aquí es donde el formato de Left to Right te hace el trabajo más fácil. Supongamos que decides eliminar uno de los botones. Todo lo que tienes que hacer es seleccionarlo, ir a la sección de Symbol del panel de Inspector, y seleccionar No Symbol en el menú de Overrides. Esto eliminará de inmediato el botón no deseado y el espacio que ocupa. Tener el formato (Layout) en None en lugar de Left to Right eliminaría el botón, pero el espacio que ocupa se quedaría vacío.
Paso 12
Al usar los mismos menús de Overrides puedes cambiar fácilmente la apariencia de tus botones. Son cambios muy básicos, pero aprenderás técnicas más elaboradas en los siguientes pasos.
4. Cómo crear símbolos para la interfaz de aplicación de estado físico
Paso 1
Ve a Insert > Shape > Rectangle (R), crea un cuadrado de 30 px y colócalo en la parte inferior de la mesa de trabajo. Asegúrate de que se queda seleccionado y ve a Arrange > Make Grid. Ingresa los atributos que se muestran en la siguiente imagen y luego da clic en el botón Make Grid. Esto añadirá cinco duplicados de tu cuadrado en una hilera, espaciados de manera equitativa.
Paso 2
Concéntrate en el cuadrado gris que está más a la izquierda. Ve a Insert > Shape > Oval (O) y crea un círculo de 28 px. Rellénalo de blanco y colócalo como se muestra en la primera imagen. Crea un círculo de 34 px, rellénalo de blanco y colócalo como se muestra en la segunda imagen.
Selecciona ambos círculos y haz clic en el botón Substract de tu barra de herramientas.
Paso 3
Asegúrate de que la forma hecha en el paso anterior todavía está seleccionada y ve a la sección de Style del panel de Inspector. Asegúrate de que el color de Fill sea blanco y después concéntrate en el Border. Cambia el color a blanco, configura el Alignment a Center, aumenta el Ancho (Width) a 2 y no olvides revisar el botón de Round Join.
Paso 4
Ve a Insert > Text (T), escribe "Z" y coloca el texto como se muestra en la primera imagen. Usa la fuente San Francisco Compact Rounded y cambia el estilo a Semibold. Selecciona el tamaño 16 y el color blanco (#FFFFFF).
Duplica el texto (Command + C > Command + V). Selecciona este duplicado y disminuye el tamaño de fuente a 12, luego colócalo como se muestra en la segunda imagen.
Selecciona ambos textos de este paso y ve a Layer > Convert to Outlines para convertir el texto en un trazado de vectores editables.
Paso 5
Importa el icono de flama de este paquete de iconos 14 Flame, y los otros cuatro iconos de esta serie de iconos Fitness Glyph Color. Cambia su color a blanco y ajusta su tamaño para que quepan en los cuadrados grises, tal como se muestra en la siguiente imagen. Asegúrate de que ninguno de esos iconos exceda los 30 px de alto y de ancho.
Paso 6
Para que te sea más fácil comprender los siguientes dos pasos, cambia el color de la mesa de trabajo. Haz clic en el nombre de tu mesa de trabajo para seleccionarla rápidamente, concéntrate en el panel de Inspector y cambia el fondo a negro (#000000).
Paso 7
Concéntrate en el cuadrado que está más a la izquierda. Selecciónalo, sigue trabajando en el panel de Inspector y desactiva el Fill para hacer invisible tu forma seleccionada.
Selecciona esta forma invisible junto con el icono que está arriba de él, crea un símbolo nuevo y ponle el nombre de "Sueño".
Paso 8
Ve al siguiente cuadrado gris y hazlo invisible. Selecciónalo junto con el icono que está arriba de él, crea un símbolo nuevo y ponle el nombre de "Ritmo Cardíaco".
Continúa con los otros cuatro iconos y usa la misma técnica para crear los símbolos de "Calorías quemadas", "Pasos", "Correr" y "Bicicleta".
5. Cómo crear símbolos complejos para tu plantilla de aplicación de condición física
Paso 1
Cambia el color de tu mesa de trabajo de negro a blanco. Ve a Insert > Shape > Rectangle (R) y crea una forma de 177 x 188 px. Colócala como se muestra en la siguiente imagen, asegúrate de que se queda seleccionada y concéntrate en el panel de Inspector.
Arrastra el deslizador de Radius a 20 y luego ve a la sección de Style. Cambia el color de Fill a #FF6967 y elimina el Border existente con el botón de Trash.
Paso 2
Asegúrate de que tu rectángulo redondeado rojo se queda seleccionado, concéntrate en la sección de Style del panel de Inspector y activa Shadow. Ingresa los números que se muestran el la siguiente imagen y luego haz clic en el cuadro cromático. Cambia el color a #FF6863 y disminuye el Alpha a 80.
Paso 3
Añade un duplicado de tu rectángulo redondeado rojo y colócalo como se muestra en la primera imagen. Selecciona este duplicado y concéntrate en la sección de Style del panel de Inspector. Cambia el color de Fill a #7954FF, usa el mismo color para Shadow y mantén el Alpha en 80.
Convierte este nuevo rectángulo redondeado en un símbolo y nómbralo "morado".
Paso 4
Añade otros dos duplicados de tu rectángulo redondeado rojo y colócalos como se muestran en la siguiente imagen. Selecciona el duplicado de la izquierda, cambia el color de Fill a #FF8E61, usa el mismo color para Shadow y mantén el Alpha en 80. Convierte este rectángulo redondeado en un símbolo y nómbralo "naranja".
Selecciona el duplicado de la derecha, cambia el color de Fill a #2AC2FF, usa el mismo color para Shadow y mantén el Alpha en 80. Convierte este nuevo rectángulo redondeado en un símbolo y nómbralo "azul".
Paso 5
Agrega otros dos duplicados de tu rectángulo redondeado rojo y colócalos como se muestra en la siguiente imagen. Selecciona el duplicado de la izquierda, cambia el color de Fill a #5964FF, usa el mismo color para Shadow y mantén el Alpha en 80. Convierte este rectpangulo redondeado en un símbolo y nómbralo "índigo".
Selecciona el duplicado de la derecha, cambia el color de Fill a #95DA45, usa el mismo color para Shadow y mantén el Alpha en 80. Convierte este nuevo rectángulo redondeado en un símbolo y nómbralo "verde".
Paso 6
Selecciona el rectángulo redondeado rojo, conviértelo en un símbolo y nómbralo "rojo".
Paso 7
Concéntrate en la esquina superior derecha de tu rectángulo redondeado rojo. Ve a Insert > Shape > Rectangle (R), crea un cuadrado de 70 px y colócalo como se muestra en la primera imagen. Deja el color de relleno tal y como está, pero desactiva el borde.
Haz doble clic dentro de esta nueva forma para activar el modo de edición de vectores. Selecciona el punto superior derecho, ve al panel de Inspector y arrastra el deslizador de Radius a 20. Selecciona los otros tres puntos, vuelve al panel de Inspector y esta vez arrastra el deslizador de Radius a 35.
Paso 8
Asegúrate de que la forma que hicimos en el paso anterior todavía esté seleccionada y concéntrate en la sección de Style del panel de Inspector. Cambia el color de Fill a blanco, disminuye la Opacidad (Opacity) a 40 % y cambia el Blend Mode a Soft Light.
Paso 9
Ve a Insert > Document > Ritmo Cardíaco y coloca tu símbolo como se muestra en la siguiente imagen. Las Smart Guides serán de apoyo aquí también.
Paso 10
Ve a Insert > Shape > Rectangle (R) y crea una forma de 137 x 140 px. Colcócala como se muestra en la siguiente imagen y asegúrate de que se queda seleccionada.
Concéntrate en la sección de Style del panel de Inspector. Desactiva el Border, cambia el color de Fill a negro y disminuye la Opacity a 30 %. Esta forma no será parte del diseño final, sólo la necesitarás para la alineación perfecta de texto en los siguientes pasos.
Paso 11
Ve a Insert > Text (T), escribe "Ritmo Cardíaco" y colócalo como se muestra en la primera imagen. Usa la fuente San Francisco Compact Rounded y cambia el estilo a Light. Selecciona el tamaño 16 y cambia el color a blanco, no olvides cambiar la alineación del texto hacia la izquierda (left).
Escribe "124 lpm" y colócalo como se muestra en la segunda imagen. Usa la misma fuente y cambia el estilo a Semibold. Selecciona "124" y cambia su tamaño a 30, luego selecciona "lpm" y cambia su tamaño a 20.
Escribe "Saludable", y aparte "80-120", coloca ambos textos como se muestran en las últimas dos imágenes. Usa la misma fuente, pero cambia el estilo a Light y la alineación de texto a la derecha (Right).
Paso 12
Ahora que ya no necesitas el rectángulo negro, selecciónalo y bórralo.
Selecciona tu rectángulo redondeado rojo junto con todos los objetos que están en él, conviértelo en un nuevo símbolo y nómbralo "CUADRO".
Paso 13
Haz clic derecho sobre tu rectángulo redondeado morado y ve a Replace With > CUADRO. Básicamente esto reemplazará tu selección con el símbolo "CUADRO" que creamos en el paso anterior.
Asegúrate de que tu selección está activa y ve a la sección de Style del panel de Inspector. Aquí deberías ver seis posibles overrides. Comencemos en la parte inferior. Abre el override rojo y reemplázalo con el símbolo morado. Esto reemplazará de manera instantánea el fondo rojo por el morado. Ve al siguiente override y reemplaza el icono de ritmo cardíaco con el de sueño. Por último, mueve ls otros cuatro overrides y reemplaza el texto existente con el que se muestra en la siguiente imagen.
Usa las mismas técnicas para editar el resto de tus cuadros de color, tal como se muestra en las siguientes imágenes.
6. Cómo añadir la barra de navegación inferior en una plantilla de interfaz para una aplicación de condición física
Paso 1
Ve a Insert > Shape > Rectangle (R). Crea una forma de 414 x 97 px, colócala como se muestra en la siguiente imagen y desactiva el Border.
Paso 2
Ve a Insert > Shape > Rectangle (R), crea un cuadrado de 28 px y colócalo como se muestra en la siguiente imagen. Asegúrate de que está seleccionado y ve a Arrange > Make Grid. Ingresa las características que se muestran en la siguiente imagen y luego haz clic en el botón Make Grid.
Paso 3
Importa los cuatro iconos de esta Serie 20 Sports Icons (Solid). Cambia su color a #A5A5C3 y #4B4B87, luego ajusta su tamaño para que quepan en los cuadrados blancos, tal como se muestra en la siguiente imagen. Cuando hayas terminado, elimina el cuadrado blanco.
Paso 4
Ve a Insert > Text (T), añade el texto que se muestra abajo e ingresa las siguientes características de la siguiente imagen.
Paso 5
Finalmente, elimina los dos rectángulos grises y tu interfaz de aplicación para iOS está completa. Es un buen comienzo para un kit de UI de condición física. Siéntete libre de crear tus propios recursos y páginas.
¡Felicidades! ¡Tu interfaz para una aplicación de condición física está terminada!
Te mostramos a continuación cómo debería verse. Espero que hayas disfrutado este tutorial de prototipo para aplicación de condición física, y que apliques estas técnicas en futuros proyectos. No dudes en compartir tu resultado final en la sección de comentarios.
Siéntete libre de ajustar la plantilla final de interfaz de condición física y modificarla a tu gusto. Puedes encontrar increíbles recursos para inspirarte en GraphicRiver, que tienen soluciones interesantes para mejorar tu kit UI de condición física.
¿Quieres aprender más?
Tenemos montones de tutoriales de UI con Sketch en Tuts+, en nivel principiante e intermedio, ¡échales un vistazo!
SketchCómo diseñar una UI para una aplicación de administración de dinero en Sketch
SketchCómo diseñar la pantalla de registro de una aplicación de viajes en Sketch
Adobe XDSketch vs. Adobe XD: ¿cuál deberías usar?
SketchGuía de las herramientas de prototipo en Sketch
SketchCómo hacer archivos de Sketch fáciles de usar y reutilizables
Diseño web receptivoTips y trucos para un proceso de diseño receptivo en Sketch
SketchCómo utilizar símbolos de dibujo para crear diagramas de flujo
SketchCómo crear una biblioteca de icono dinámico con Sketch
SketchTip en breve: Recrear los anillos de actividad del Apple Watch en Sketch
TipografíaCómo crear una fuente náutica para tatuajes
