Cómo diseñar una UI para una aplicación de diseño de autos en Sketch

() translation by (you can also view the original English article)

Final product image — What You'll Be Creating

En este tutorial de Sketch aprenderás cómo diseñar una UI para una aplicación de autos.

Para comenzar, veremos cómo crear los componentes iniciales de cualquier diseño de aplicación de autos. Aprenderás:

cómo crear una barra de navegación básica,
cómo guardar y usar símbolos,
cómo insertar imágenes, iconos y texto en una aplicación de autos

Todas esas características te harán el trabajo más fácil en esta aplicación de iOS.

Al usar figuras básicas, trazados y técnicas de creación de imágenes vectoriales, aprenderás cómo crear iconos y botones planos.
Al usar técnicas de sombreado sutil y poco texto, aprenderás cómo hacer que cualquier diseño de aplicación de autos destaque.
Finalmente, aprenderás cómo insertar una imagen de archivo en esta aplicación de iOS.

Para obtener más inspiración sobre cómo ajustar o mejorar tu diseño final de aplicación de autos, puedes encontrar muchos recursos en GraphicRiver.

Necesitarás:

Deberás tener los siguientes recursos para diseñar la aplicación de autos. La mayoría de ellos están disponibles en Envato Elements, en donde puedes obtener descargas ilimitadas por una suscripción. O si lo prefieres, también puedes encontrar alternativas para trabajar:

1. Cómo configurar la mesa de trabajo

En la barra de herramientas o desde el menú, ve a Insertar (Insert) > Mesa de Trabajo (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 la aplicación de autos.

2. Cómo insertar una barra de navegación en un diseño de aplicación de autos

Paso 1

Desde la barra de herramientas o del menú, ve a Insertar (Insert) > Rectángulo (Shape Rectangle) (o presiona R). Haz clic y arrastra para crear una forma de 414 x 70 px, asegúrate de que sigue seleccionada y concéntrate en el panel de Inspector.

Usa los cuadros de entrada X y Y para colocar numéricamente esta nueva forma, tal como se muestra en la siguiente imagen. Pon 0 en el cuadro X, y 49 en el cuadro Y, y tu forma se moverá a la parte superior de la mesa de trabajo, tal como se muestra a continuación.

Sigue en el panel de Inspector, ve a la sección de Estilo (Style) y sólo desactiva el Borde (Border) existente.

Paso 2

Desde la barra de herramientas o del menú, ve a Insertar (Insert) > Forma (Shape) > Óvalo (Oval) (o presiona O). Mantén presionada la tecla Shift para crear un círculo perfecto de 12 px, asegúrate de que siga seleccionada y concéntrate en el panel de Inspector.

Usa los cuadros de entrada X y Y para mover tu selección numéricamente al lado izquierdo del rectángulo gris, tal como se muestra en la siguiente imagen.

Continúa en el panel de Inspector y ve la sección de Estilo.(Style). Desactiva el Borde (Border) existente y cambia el color de Relleno (Fill) a #2C2E43.

Paso 3

Asegúrate de que tu círculo aún esté seleccionado y haz doble clic sobre él para activar el modo Edición (Edit). Selecciona el punto inferior y haz doble clic en él para convertirlo en un punto recto, luego arrástralo 4 px hacia abajo, tal como se muestra en la tercera imagen.

Paso 4

Ve a Insertar (Insert) > Forma (Shape) > Óvalo (Oval) (O), crea un círculo perfecto de 12 px y colócalo como se muestra en la siguiente imagen.

Selecciona esta nueva forma junto con la que está en el fondo, y haz clic en el botón Sustraer (Subtract) en tu barra de herramientas.

Paso 5

Concéntrate en el lado derecho de tu rectángulo gris. Ve a Insertar (Insert) > Forma (Shape) > Rectángulo (Rectangle) (R), y crea una forma de 12 x 2 px. Usa los cuadros de entrada X y Y para colocar este rectángulo numéricamente, tal como se muestra en la siguiente imagen.

Asegúrate de que esta forma se quede seleccionada y concéntrate en la sección de Estilo (Style) desde el panel de Inspector. Desactiva el Borde (Border) y cambia el color de Relleno (Fill) a #2C2E43.

Paso 6

Asegúrate de que el rectángulo pequeño que hiciste en el paso anterior todavía está seleccionado. Mantén presionada la tecla Opción (Option) y sólo arrastra la forma seleccionada para duplicarla. Mantén presionada la tecla Shift mientras arrastras el duplicado para restringir su movimiento a una sola dirección (horizontal o vertical). Arrastra el duplicado hacia abajo y deja un espacio de 3 px entre las dos figuras. Repite las mismas técnicas con el rectángulo que acabas de añadir.

Paso 7

Desde la barra de herramientas o del menú, ve a Insertar (Insert) > Texto (Text) (o presiona T). Haz clic una vez en tu mesa de trabajo y concéntrate en la sección de Texto (Text) del panel de Inspector.

Selecciona la fuente San Francisco Compact Display y asegúrate de que el estilo sea Regular. Selecciona el tamaño 20 y el color #2C2E43, cambia la alineación del texto a Centrado (Center) y después escribe "Auto Disponible". Colócalo como se muestra en la siguiente imagen.