Primera experiencia con Sketch

Enrique Moreno
2 min readSep 14, 2020

--

Vengo a compartir mi primera experiencia con Sketch, herramienta para Mac especializada en diseño de interfaces. A priori la herramienta parece ofrecer soluciones mucho más fáciles y rápidas que otras herramientas similares. Si vienes de utilizar otros programas como Photoshop o Illustrator, la interfaz de Sketch quizá te parezca sencilla.

El ejercicio: clonar dos pantallas de un e-commerce ficticio.

Original: pantalla de inicio de sesión y pantalla de feed de producto.

Mi objetivo fue clonar este diseño desde cero, aquí el resultado:

Mi copia: pantalla de inicio de sesión y pantalla de feed de producto.

Los primeros pasos me han llevado su tiempo. Tener claro cómo funcionan todos sus elementos y familiarizarme con el programa es a lo que más tiempo he dedicado.

Todo lo que ves en estos diseños se puede lograr con herramientas de Formas, de Edición, de Rellenos, de Alineación, de Sombras, de Máscaras, de Opacidad, etc.

Lo mejor que se puede hacer para aprender es practicar, ya lo sabéis ¡Learning by doing!

La importancia del orden en Sketch

Barra de capas y grupos.

El proceso de trabajo ha sido más sencillo en la pantalla de login y más complejo en la pantalla de home. Si de algo me he dado cuenta durante el proceso, ha sido de la importancia del orden en Sketch: es muy importante ir agrupando capas y renombrándolas para no generar lio y confusión. Mi premisa ha sido trabajar como si lo hiciera en un equipo, renombrando cada capa y cada grupo de capas, de forma fácil, por si otra persona fuera a trabajar o inspeccionar mi diseño.

Espero que os guste, yo he disfrutado mucho con esta práctica, y estoy desando aprender practicando Sketch y nuevas herramientas de UI.

¡Hasta la próxima!

📐 Recursos adicionales obtenidos de flaticon (iconos carrito, lupa y logo de sketch para cabecera), WhatTheFont (averiguar la font) y pexels (fotografías).

--

--