Prototipado con Sketch

Sketch es un software de diseño de vectorial para crear interfaces de usuario. Es fácil de obtener y cuesta mucho menos que cualquier otra herramienta de Adobe Creative. Debido a su fácil manejo, cualquier persona puede aprender a trabajar con Sketch, no necesita ser un experto en diseño de interfaces. Es ideal porque permite diseñar para diferentes dispositivos, y a la hora de exportar los archivos para las entregas no es nada complicada.

Sketch lo recoge todo en uno, los estilos más relevantes para el diseño de interfaz de usuario, además de tener integrada una herramienta como Sketch Mirror para previsualizar en el iPhone y el sistema más eficiente de diseñar para múltiples pantallas las Artboards o mesas de trabajo.

Una vez que comienzas a utilizar Sketch cambiará completamente tu flujo de trabajo. Sketch es una aplicación en continuo crecimiento con nuevos recursos casi a diario. Sketch lleva más de 4 años, y sigue subiendo el número de nuevos usuarios gracias a su comunidad donde escucha los comentarios de sus usuarios.

Sketch es la herramienta más utilizada de Wireframing y User Interface Design según una encuesta realizada a más de 4.000 diseñadores, llegando a destronar al mítico Photoshop. Sketch fue premiada como la aplicación del año por NetAwards .

Introducción a Sketch

Sketch es la herramienta para diseño web, iOS y Android. Apenas pesa 41 MB de espacio en disco , en comparación con 1.6GB de Photoshop, es decir, no consume recursos. Cuando se abre, aparece un lienzo infinito. Tiene una interfaz de usuario familiar con una barra de herramientas, Navigator e Inspector, al igual que las aplicaciones OS X nativas. Como resultado, los nuevos usuarios encontrarán a Sketch que desde el inicio le ayudará en la creación de unos diseños muy simples, fáciles de hacer comprender.

Sketch y el diseño para pantallas

Sólo se trabaja con píxeles, no hay que preocuparse por otras unidades de medida como (cm, ml, picas), modos de color, píxeles por pulgada, etc… Al estar centrado en el diseño de la interfaz de usuario sólo te permitirá ser más eficiente y te distraerás menos. Todo lo que aprendas con Sketch será rápidamente aplicable para el diseño de tus aplicaciones.

[BANNER_SUSCRIPCION]

Personalizar la barra de herramientas de Sketch

Siguiendo el estilo del diseño de OS X, la barra de herramientas es personalizable cuando se hace clic con el botón derecho sobre ésta. Podrás configurar todas tus herramientas favoritas con solo arrastrar. Además de los accesos directos de teclado, donde recomiendo mantener los de uso frecuente y difíciles de recordar. Algunas de mis herramientas favoritas son: Colores, hacer cuadrículas, tijeras, convertir a contornos .

Artboards de Sketch

Son las mesas de trabajo o las pantallas de tu aplicación . Cada página representa una pantalla o una interacción dentro de una pantalla. Tener un flujo de trabajo eficiente es crucial para un diseñador. Ya que no podemos gastar todo nuestro tiempo en el diseño visual, a la creación de prototipos, la entrega de archivos y el código hacen que realmente nuestros diseños sean accesibles y queden organizados sin que al final tenga docenas de archivos que administrar.

Con Artboards y las páginas, sólo podrás poner todas tus pantallas una al lado de la otra. Ya no tendrás que estar mostrando u ocultando varias capas. En su lugar, se recomienda mostrar todas sus capas para que puedas previsualizar todo fácilmente en tu ordenador o smartphone. Podrás reorganizarlas, duplicarlas (⌘ D) exportarlas fácilmente. Pulsando A para crear un nuevo Artboard y, a continuación, aparecerá un listado de plantillas (iOS, Android, Web o Imprimir) para comenzar.

Para iOS, recomiendo diseñar en 1x para el iPhone 6 (375 x 667 pt), ya que es la resolución más popular.

Páginas en Sketch

Cada página representa una plataforma o una resolución completamente diferente . Para la mayoría de los proyectos, tendrás unos veinte Artboard para una plataforma como iOS. Entonces, se recomienda crear diferentes páginas para Android, Web, Apple Watch, tvOS, etc. De esta manera, podrá tener todo un proyecto dentro de un solo archivo de Sketch, ahorrándote mucho tiempo cambiando entre pantallas y plataformas.

Puedes abrir las Páginas haciendo clic en la flecha junto al nombre de la página. Además, puedes cambiar rápidamente entre las páginas mediante el menú desplegable. El atajo de teclado es Fn ↑ y ↓.

Plantillas de interfaz de usuario UI en Sketch

Sketch tiene varias plantillas de interfaz de usuario para iOS, Material Design y Responsive Web . Para acceder a estas, tienes que ir a Archivo ➤ Nueva plantilla ➤ Diseño de interfaz de usuario de iOS.

Las plantillas iOS y Material Design son muy completas. Estas serán un gran punto de partida para cualquier diseñador, tanto principiantes como expertos.

Kit de interfaz de usuario de iOS en Sketch

Sketch tiene un Kit de UI de materiales de diseño. Puedes descargar estas plantillas desde la Web, como iOS 11 GUI o los recursos de Facebook . Para guardarlos en la lista de Plantillas, tienes que abrir el archivo, luego pulsar en Archivo ➤ Guardar como plantilla.

Gestionar los colores en Sketch

La herramienta Color de Sketch te permite almacenar colores de manera global o bien en un documento específico. Con la herramienta Cuentagotas puedes seleccionar cualquier color dentro o fuera de Sketch. Con esta técnica, puedes rápidamente crear tu propia paleta. Recomiendo como inicio las paletas de: iOS , Material Design y Flat UI .

Las paletas de colores pueden ser compartidas igual que un archivo. Para ello necesitas descargar un plugin Sketch Palettes y así podrás importar paletas de colores cómodamente. Para instalar este nuevo plugin, solo tienes que hacer doble clic en el .plugin file.

Degradados o gradientes en Sketch

Estos no se pueden importar fácilmente, pero puedes agregarlos manualmente. Podrás descargarlo el archivo Gradients Sketch .

Trabajar con texto en Sketch

Si eres nuevo en la tipografía, sugiero que vayas a la sección de Tipografía y empieces a descargar algunas de las fuentes más utilizadas y actuales. Verás que vienen de OS X otras gratis de Google Fonts como: San Francisco , Avenir Next, Open Sans y Roboto. Si te suscribes a la web llamada Typekit , podrás descargarte muchas más, entre estas: Museo y Proxima Nova.

Para crear una nueva capa de texto, debes pulsar T . En el inspector, puedes elegir la fuente y editar los estilos. Es más, puedes utilizar estilos de texto para volver a utilizar el mismo estilo en varias capas de texto. Funciona de forma similar a CSS, que te permite tener un estilo global para h1, h2, h3, etc.

Trabajar con iconos en Sketch

Por último, pero no menos importante, necesitarás crearte una buena biblioteca de iconos vectoriales. Los de PixelLove y Streamline son buenos para iOS. Sketch está completamente basado en vectores para que puedas importar fácilmente iconos SVG (un formato vectorial universal) y editarlos como mejor te parezca. Si te sientes incómodo trabajando con estas familias de iconos vectoriales, puedes personalizarlos cambiándoles el color y el tamaño para que encajen en tu proyecto.

Crear Símbolos en Sketch

Los símbolos hacen que sea más fácil compartir los mismos elementos en varias Artboard o mesas de trabajo . Esto es especialmente útil cuando reutilizas los mismos elementos varias veces como en el caso de la barra de estado, la barra de navegación o una barra con pestañas. No necesitarás volver a editar esos elementos uno por uno. Al actualizar uno, se sincronizará con todos los demás que compartan el mismo símbolo.

Crear Símbolos anidados en Sketch

Si ya estás dentro de un símbolo no se puede hacer clic para crear otro símbolo. Sin embargo, aunque no se admite oficialmente, hay una manera de lograr el mismo resultado que es utilizando un Estilo compartido existente en el mismo Inspector.

Exportar a varias resoluciones en Sketch

Esto es lo mejor de Sketch, la capacidad de exportar fácilmente en múltiples resoluciones de pantalla. Simplemente dándole a Exportar en la parte inferior derecha de la pantalla, puedes exportar a cualquier escala (1x, 2x, 3x) y 6 formatos de archivo (JPG, PNG, SVG, PDF, TIFF y EPS). Y en particular PDF, formato muy útil para los recursos de iOS, y SVG otro formato que viene genial para el diseño Web. Para muchos usuarios, esta funcionalidad es la que hace que Sketch destaque sobre otras aplicaciones.

Exportar para configurar tus pantallas. Por defecto, se fijará la escala en 1x, pero al hacer clic otra vez, conseguirás rápidamente 2x, entonces 3x. También puedes ajustar la escala a una anchura (w) width o a una altura (h) height . Por ejemplo, si deseas que tu archivo para exportar mida un máximo de 800 px de ancho, estableces 800 w.

Controlar las versiones, Autoguardar e iCloud en Sketch

Cuando se te olvidó guardar tu documento y se cierra por accidente tu ordenador, puedes perder los últimos cambios. Ahí es donde entra en juego Autoguardar, guarda regularmente varias versiones de tu archivo, para que no tengas que pensar en ello. Incluso puedes volver a una versión anterior. Esto además puede es muy útil cuando, por ejemplo, tus compañeros de equipo no tienen los archivos de fuentes que utilizaste, cambiando así todas las capas de texto a una fuente predeterminada. Autoguardar es como tener una copia de seguridad.

Sugerencia:

Si trabajas con archivos realmente grandes, autoguardar puede ocupar mucho espacio en el disco. Es mejor utilizar ICloud que además funciona muy bien con Sketch. Cada guardar no sólo almacena el archivo en tu disco duro, sino también en los servidores de Apple. Si tu equipo deja de funcionar, siempre se puedes recuperar una copia de seguridad de la misma.

Previsualizar en tu iPhone desde Sketch

Un buen diseño requiere pruebas constantes. Lo que se ve muy bien en la pantalla de tu ordenador no puede ser exactactament lo mismo en tu iPhone. Gracias a Sketch Mirror , puedes obtener una vista previa de tus diseños simplemente conectándote a través de Wi-Fi o dirección IP.

Las Artboards se pueden desplazar de izquierda a derecha en tu móvil, o bien hacia arriba y hacia abajo para cambiar entre las páginas, solo deslizando el dedo. Y para acercar o ajustar la pantalla, tocando dos veces.

Importar desde Photoshop o Illustrator a Sketch

Verás que como diseñador o diseñadora de interfaz de usuario, echarás en falta sus bibliotecas de iconos y logotipos. Hay una solución para eso. Siempre y cuando sepas cómo exportarlos a SVG, el proceso de importación a Sketch es fácil.

Formas PSD para dibujar en Sketch

Si tienes un conjunto de iconos exclusivos de Photoshop, sólo tienes que escoger los de formato SVG. Este proceso requiere Photoshop e Illustrator.

¿Qué pasa con mis archivos PSD?

Considere: 1) debes trabajar con vectores, y 2) siempre trabajar desde cero, excepto con las bibliotecas, si se quiere. Reciclar un trabajo antiguo es un mal hábito para cualquier diseñador. En lugar de saltar a Sketch en medio de un proyecto, considere reunir al equipo y experimentar con Sketch desde el principio en un proyecto más pequeño.

Clientes y Proyectos

La mayor razón por qué los diseñadores son reacios a cambiar a Sketch es debido a las expectativas de sus compañeros de trabajo. Es una evaluación justa. No hay una solución directa a eso, pero voy a decir algunas cosas. He trabajado con Sketch en diferentes compañías y clientes de todo tipo. El truco para convencerles es ser convincente. El presupuesto de permanecer en Photoshop es mucho mayor que el supone cambiar a una herramienta hecha a medida para tu trabajo diario. Si el legado era un problema, nunca habría cambiado a la Mac hace 10 años. Como Steve Jobs lo dijo perfectamente: "Why join the navy if you can be a pirate?". Become the change you want to see.

Accesos directos de teclado Sketch

El diseño es fácil de aprender pero difícil de dominar. Aunque es menos obvio, los atajos de teclado son lo que hace que Sketch sea tan eficiente en el diseño de la interfaz de usuario. Tener que hacer clic demasiadas veces es una de las razones por las que la mayoría se marcha de Photoshop.

Sugerencia:

Aprender los atajos más esenciales. Porque se hacen estas acciones cientos de veces al día, es importante recordarlas de memoria como Copiar (Comando C), Pegar (Comando V), Zoom (Comando +/-) y Guardar (Comando S). Hay más de 100 métodos abreviados de teclado en Sketch. Si deseas aprender todos ellos, aquí tiene una imagen.

Plugins esenciales Sketch

Casi cada semana, hay un nuevo plugin creado por la comunidad que ayuda a solucionar problemas en el diseño de interfaz. Como diseñadores, hay una larga lista de problemas a la que enfrentarnos. Estar al día en esta comunidad es una tarea a tener en cuenta.

Restringir en Sketch

Con Fluid podrás ajustar el diseño según el tamaño de la mesa de trabajo. Esto realmente une el trabajo entre diseño y desarrollo. Cuando trabajas con tantas resoluciones (iPhone 5, 6, 6 Plus, Android, Web), podrás guardar una gran cantidad de ediciones configurando restricciones, de manera similar a cómo se usa Auto Layout en Xcode . Trabajar con diseños adaptativos o response ha sido una gran necesidad para los diseñadores y esta es la solución.

Paletas de bosquejo en Sketch

Nunca han sido tan importante en el diseño los colores como ahora. Por eso es crucial tener una paleta bien trabajada para empezar. Sketch Palettes te permite guardar e importar paletas fácilmente tanto para colores globales como para documentos. Empiece con una paleta iOS , Material Design , o Flat UI color .

Magic Mirror Sketch

Magic Mirror La presentación siempre juega un papel importante en el flujo de trabajo . Al igual que un icono bonito, es una muestra del cuidado de un detalle en una aplicación. Apple es famoso por presentar la fotografía más hermosa y los mockups en 3D. Algunos continúan con Photoshop para hacer ese tipo de edición de imágenes, pero con Magic Mirror en Sketch puedes obtener los mismos resultados.

Generar de contenido en Sketch

Trabajar con grandes conjuntos de contenido requiere mucho tiempo. Tradicionalmente, recopilamos avatares e imágenes de fondo, de modo que podemos rellenarlas en nuestras interfaces de usuario usando patrones de relleno o máscaras. Es un proceso arduo cuando se trata de cientos de ítems. Con Content Generator , todas esas horas se reducen efectivamente a minutos, ya que este costoso trabajo estará hecho. Solo tendrás que aplicar el contenido.

Recursos Sketch

La mejor manera de aprender Sketch es descargar el trabajo de otras personas y analizarlas. La comunidad crece a un ritmo muy rápido y cada día aparecen nuevos recursos. SketchAppSources y Sketch Repo son algunos de los mejores lugares para descargar archivos de Sketch. Comunidad con más más de 2.000 usuarios, todos diseñadores de Sketch.

Dispositivos Vectoriales y Mockups para Sketch

En Angle es una enorme biblioteca gratuita con más de 140 mockups. Encontrarás los dispositivos para iPhone, iPad, Mac y Apple Watch completamente vectoriales lo que significa que podrás editarlos.

Plantillas para Sketch en App Store

Para generar rápidamente las vistas previas para App Store para iPhone 5, 6 y 6 Plus utiliza plantillas App Store sketch . También podrás descargar los wallpapers Polygon que podrás utilizar en tus presentaciones.