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

Cómo diseñar una UI para una aplicación de diseño de autos en Sketch

by
Difficulty:IntermediateLength:LongLanguages:

Spanish (Español) translation by Itzel Alvarez (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.

set up artboard

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.

rectangle

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.

oval

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.

point straight

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.

subtract

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.

tiny rectangle

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.

menu button

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.

text

3. Cómo insertar una imagen en tu aplicación de iOS

Paso 1

Descarga esta fotografía de un Sedán naranja con fondo blanco. Arrástrala dentro de tu documento de Sketch, asegúrate de que se queda seleccionada y concéntrate en el panel de Inspector. Disminuye su Ancho (Width) a 350 px y usa los cuadros de entrada X y Y para posicionar la foto numéricamente, tal como se muestra en la siguiente imagen.

Siéntete libre de reemplazar la imagen con una estructura de auto, el boceto de un auto u otra imagen que tengas. Si te interesa aprender cómo dibujar un auto, esto te puede servir: Cómo dibujar un coche desde cero.

sketch a car

Paso 2

Desde la barra de herramientas o del menú, ve a Insertar (Insert) > Forma (Shape) > Rectángulo (Rectangle) (o presiona R). Crea una forma de 120 x 30 px y colócala como se muestra en la siguiente imagen (X:148 Y:256).

Sigue en el panel de Inspector, arrastra el deslizador de Radio (Radius) a 15 y después ve a la sección de Estilo (Style). Desactiva el Borde (Border) existente y quítalo con el pequeño icono de bote de basura, luego cambia el color de Relleno (Fill) #373737.

rounded rectangle

Paso 3

Asegúrate de que tu rectángulo redondeado todavía esté seleccionado y sigue en la sección de Estilo (Style) del panel de Inspector.

Haz clic en la sección Sombras (Shadows) para activar el efecto de sombras. Ingresa los números que aparecen en la siguiente imagen y haz clic en el cuadro cromático de este efecto. Cambia el color a #373737 y disminuye el Alpha a 30.

shadow

Paso 4

Ve a Insertar (Insert) > Texto (Text) (T) y escribe "NISSAN LEAF", coloca el texto como se muestra en la imagen.

Usa la fuente San Francisco Compact Display y cambia su estilo a Seminegrita (Semibold). Selecciona el tamaño 12, el espacio entre caracteres de 1.2 y el color blanco (#FFFFFF); asegúrate de que la alineación del texto sea Center.

text

4. Cómo agregar el cuadro de menú deslizante en un diseño de aplicación para autos

Paso 1

Ve a Insertar (Insert) > Forma (Shape) > Rectángulo (Rectangle) (R), crea una forma de 414 x 555 px y colócala como se muestra en la siguiente imagen (X:0 Y:341).

Arrastra el deslizador de Radio (Radius) a 45 y luego ve a la sección de Estilo (Style). Desactiva el Borde (Border) existente y cambia el color de Relleno (Fill) a #99EB99.

rounded rectangle

Paso 2

Con la misma herramienta, crea una forma de 50 x 3 px y colócala como se muestra en la siguiente imagen (X:182 Y:350).

Arrastra el deslizador de Radio (Radius) a 1.5, luego ve a la sección de Estilo (Style). Desactiva el Borde (Border) existente y cambia el color de Relleno (Fill) a blanco.

slider bar

5. Cómo guardar y usar un símbolo en un diseño de aplicación de auto

Paso 1

Con la misma herramienta, crea una forma de 120 x 50 px y colócala como se muestra en la siguiente imagen (X:20 Y:391).

Arrastra el deslizador de Radio (Radius) a 25 y ve a la sección de Estilo (Style). Desactiva el Borde (Border) existente y cambia el color de Relleno (Fill) a blanco.

rounded rectangle white

Paso 2

Con la misma herramienta, crea una forma de 188 x 51 px y colócala como se muestra en la siguiente imagen (X:20 Y:391)

Arrastra el deslizador de Radio (Radius) a 25 y ve a la sección de Estilo (Style). Desactiva el Borde (Border) existente y cambia el color de Relleno (Fill) a #4CDC4C.

rounded rectangle green

Paso 3

Ve a Insertar (Insert) > Texto (Text) (T), escribe "6TRJ244" y colócalo como se muestra en la siguiente imagen.

Usa la fuente San Francisco Compact Display y cambia su estilo a Ligero (Light). Selecciona el tamaño 18 y el color blanco; asegúrate de que la alineación del texto sea Centrado (Center).

text

Paso 4

Ve a Insertar (Insert) > Texto (Text) (T), escribe "Placa" y colócalo como se muestra en la siguiente imagen.

Usa la fuente San Francisco Compact Display y cambia su estilo a Delgado (Thin). Selecciona el tamaño 14 y el color blanco #005000, y luego cambia la alineación del texto a la Izquierda (Left).

text

Paso 5

Selecciona los dos rectángulos y los dos cuadros de texto resaltados en la siguiente imagen y haz clic en el botón Crear Símbolo (Create Symbol) de la barra de herramientas, o elige Capa (Layer) > Crear Símbolo (Create Symbol) en el menú.

Ponle el nombre "Info del auto" a tu símbolo y haz clic en Crear (Create). Esto creará un símbolo maestro independiente de tu mesa de trabajo. Si haces un cambio a un símbolo maestro, también esto se mostrará en los todos los símbolos maestros que insertaste en tu documento.

save symbol

Paso 6

Para activar las guías inteligentes, ve a Vista (View) > Lienzo (Canvas) > Mostrar Todas las Guías (Show All Guides). Esto hará que alinear las figuras sea más fácil en Sketch. Mantén presionadas las teclas de Opción (Option) y Shift, haz clic dentro del símbolo y arrastra hacia abajo para crear una copia de éste. Deja un espacio de 20 px entre los dos símbolos. Aquí es donde las Guías Inteligentes te harán el trabajo más fácil.

Selecciona el símbolo recién creado y concéntrate en la sección de Símbolo (Symbol) en el panel de Inspector. Editar esos Overrides cambiará el contenido y la apariencia del símbolo seleccionado sin afectar al símbolo maestro u otros símbolos iguales. Escribe "87 %" en el cuadro de entrada superior, y "Estado de Carga" en el segundo cuadro de entrada. Al final, tu símbolo deberá verse como se muestra en la segunda imagen.

duplicate symbol

Paso 7

Duplica el símbolo creado en el paso anterior. Coloca el duplicado como se muestra a continuación y edita los Overrides como se muestra en la siguiente imagen.

duplicate symbol

Paso 8

Ve a Insert > Shape > Rectangle (R). Crea una forma de 414 x 1 px y colócala como se muestra en la siguiente imagen (X:0 Y:600).

Ve a la sección de Style en el panel de Inspector, desactiva el Border existente, cambia el color de Fill a blanco y disminuye su Opacidad a 30 %.

thin separator

Paso 9

Ve a Insert > Shape > Rectangle (R). Crea una forma de 374 x 50 px y colócala como se muestra en la siguiente imagen (X:20 Y:621).

Arrastra el deslizador de Radius a 25, después ve a la sección de Style. Desactiva el Border existente y cambia el color de Fill a #24B424.

rounded rectangle

Paso 10

Asegúrate de que tu rectángulo redondeado verde todavía está seleccionado, y continúa trabajando en la sección de Style del panel de Inspector.

Haz clic en esa sección de Borders para reactivar el borde. Asegúrate de que el ancho (Width) sea de 1, cambia la alineación a Outside, y después haz clic en el cuadro cromático de este borde. Cambia el color a blanco y disminuye el Alpha a 30.

border

Paso 11

Asegúrate de que tu rectángulo redondeado verde todavía esté seleccionado, y sigue trabajando en la sección de Style del panel de Inspector.

Haz clic en esa sección de Shadows para activar el efecto de sombras. Ingresa los números que se muestran en la siguiente imagen y luego haz clic en el cuadro cromático de este efecto. Cambia el color a #069606 y asegúrate de que el Alpha sea de 100.

inner shadow

Paso 12

Ve a Insert > Shape > Rectangle (R). Crea una forma de 100 x 40 px y colócala como se muestra en la siguiente imagen (X:289 Y:626).

Arrastra el deslizador de Radius a 25 y luego ve a la sección de Style. Desactiva el Border existente y cambia el color de Fill a blanco.

rounded rectangle

Paso 13

Asegúrate de que tu rectángulo redondeado blanco siga seleccionado, y sigue trabajando en la sección de Style del panel de Inspector.

Activa el efecto de sombras (shadow), ingresa los números que se muestran en la siguiente imagen y después da clic en el cuadro cromático de este efecto. Cambia el color a #006E00 y disminuye el Alpha a 50.

shadow

Paso 14

Ve a Insert > Text (T), escribe "Tarjeta" y coloca el texto como se muestra en la imagen.

Usa la fuente San Francisco Compact Display y cambia su estilo a Light. Selecciona el tamaño 18 y cambia el color a #005000, asegúrate de que la alineación del texto todavía esté en Center.

text

Paso 15

Ve a Insert > Text (T), escribe "Pagar con" y coloca el texto como se muestra en la siguiente imagen.

Usa la fuente San Francisco Compact Display y cambia su estilo a Thin. Selecciona el tamaño 14 y cambia el color a blanco, después cambia la alineación del texto a Left.

text

Paso 16

Selecciona los dos rectángulos y los dos textos que se resaltan en la siguiente imagen y haz clic en el botón Create Symbol de la barra de herramientas, o desde el menú ve a Layer > Create Symbol. Nombra este nuevo símbolo como "Info de pago" y haz clic en Create.

new symbol

Paso 17

Duplica el símbolo agregado en el paso anterior. Coloca el duplicado como se muestra a continuación y edita los Overrides como se muestra en la siguiente imagen.

duplicate symbol

Paso 18

Ve a Insert > Text (T), escribe el texto y colócalo tal como se muestra en la imagen.

Usa la fuente San Francisco Compact Display y cambia su estilo a Light. Selecciona el tamaño 14 y cambia el color a #006E00; asegúrate de que la alineación del texto todavía sea Center.

text

6. Cómo insertar botones simples en tu aplicación de autos

Paso 1

Ve a Insert > Shape > Rectangle (R). Crea una forma de 177 x 57 px y colócala como se muestra en la siguiente imagen (X:20 Y:799).

Arrastra el deslizador de Radius a 28.5 y luego ve a la sección de Style. Desactiva el Border existente y cambia el color de Fill a #004C28.

button

Paso 2

Ve a Insert > Text (T), escribe "LIBRO" y coloca el texto como se muestra en la imagen.

Usa la fuente San Francisco Compact Display y cambia su estilo a Semibold. Selecciona el tamaño 20, ajusta el espacio entre caracteres a 2 y cambia el color a blanco; asegúrate de que la alineación del texto todavía sea Center.

button text

Paso 3

Duplica el rectángulo redondeado verde oscuro. Selecciona el duplicado, colócalo como se muestra en la siguiente imagen (X:217 Y:799) y cambia el color de Fill a #FAFF00.

button

Paso 4

Duplica el texto "LIBRO". Selecciona el duplicado, reemplaza el texto por "DESBLOQUEAR", colócalo como se muestra en la siguiente imagen y cambia el color a #004C28.

button text

7. Cómo insertar un icono miniatura

Paso 1

Ve a Insert > Shape > Rectangle (R). Crea una forma de 11 x 8 px y colócala como se muestra en la siguiente imagen (X:360 Y:826).

Arrastra el deslizador de Radius a 2 y luego ve a la sección de Style. Desactiva el Border existente y cambia el color de Fill a #004C28.

rounded rectangle

Paso 2

Usando la misma herramienta, crea una forma de 7 x 8 px y colócala como se muestra en la siguiente imagen (X:362 Y:821).

Arrastra el deslizador de Radius a 3 y luego ve a la sección de Style. Desactiva el Fill existente y concéntrate en el Border. Cambia el Width a 2 y la alineación a Inside, después cambia el color a #004C28.

border

Paso 3

Con la misma herramienta, crea una forma de 1 x 2 px y colócala como se muestra en la siguiente imagen (X:365 Y:829).

Arrastra el deslizador de Radius a 0.5 y luego ve a la sección de Style. Desactiva el Border existente y cambia el color de Fill a #004C28.

icon

¡Felicidades! ¡Tu diseño de aplicación de autos está terminado!

El trabajo final debería verse como en la siguiente imagen. Espero que hayas disfrutado esta aplicación de iOS y puedas aplicar estas técnicas en tus futuros proyectos. No dudes en compartir tu resultado final en la sección de comentarios.

Siéntete libre de ajustar la aplicación final y hacerla como tú prefieras. Puedes encontrar inspiración para diseño de aplicaciones en GraphicRiver, que te ofrece soluciones interesantes para que mejores cualquier diseño de aplicación.

tesla iOS app

¿Quieres aprender más?

Tenemos muchos tutoriales de UI en Sketch en Tuts+, desde el nivel de principiantes hasta intermedio, ¡échales un vistazo!

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.