Home Blog/ Estilo de vida/
Estilo de vida

Descubre qu√© es Sketch y por qu√© es un est√°ndar para el dise√Īo de interfaces de usuario

Hans Baumann - 26 Ene 22

Articulo

7 min.

Hoy conoceremos qu√© es Sketch y por qu√© se ha vuelto el nuevo est√°ndar en la industria del dise√Īo web. En la actualidad, somos conscientes de cu√°nto ha impactado el dise√Īo de las p√°ginas web y de las aplicaciones m√≥viles en nuestro d√≠a a d√≠a. La era digital ha transformado nuestras tareas cotidianas. En ese contexto, Sketch se presenta como una aplicaci√≥n especializada para crear lo que necesitamos.

En el art√≠culo de hoy, aprender√°s todo sobre qu√© es Sketch y sus caracter√≠sticas, as√≠ como sus ventajas. Se trata nada menos que de un programa de dise√Īo de interfaces que ha revolucionado la industria del desarrollo web y del dise√Īo UX & UI.

¬ŅQu√© es Sketch?

Sketch es un software de dise√Īo vectorial para¬† interfaces web y m√≥viles. Esta app se utiliza como una herramienta de desarrollo web y programa de prototipado, adem√°s sirve para hacer logos, elementos de identidad de marca y gr√°ficos.¬†

Es un programa creado por dise√Īadores para dise√Īadores, entonces ser√° perfecto para cubrir todas tus necesidades del dise√Īo de interfaces.¬† Al abrir Sketch, podemos empezar a trabajar en su lienzo infinito, que te permitir√° tener un gran espacio para desarrollar tus ideas como t√ļ quieras y cuantas veces quieras.¬†¬†

os proyectos de dise√Īo UX y UI nos piden que utilicemos Sketch, ya que la herramienta de dise√Īo de interfaces nos ayudar√° a plasmar el entendimiento del usuario en nuestros proyectos digitales y ser√° muy f√°cil demostrarle al cliente el prototipo.¬†

Es imposible definir qu√© es Sketch sin explicar qu√© es el dise√Īo de interfaces. Esta es la construcci√≥n del conjunto gr√°fico para la presentaci√≥n y navegaci√≥n de una p√°gina web o una aplicaci√≥n m√≥vil, el cual permite la funcionalidad de un sistema.

Ahora que ya conoces qué es Sketch, veamos quiénes pueden usar esta aplicación.

dise√Īo de interfaces con SketchImagen: Efecto Apple

¬ŅQui√©nes pueden usar Sketch?

Bueno, en primer lugar Sketch es una aplicación para Mac. Así que, si no tienes un Mac, desafortunadamente no vas a poder usarla. Hay una aplicación para Windows que puede interpretar los archivos de Sketch.

Así que puedes abrir los archivos de Sketch en esa aplicación, pero no puedes editarlos, ya que solo puedes trabajar la aplicación Sketch en un Mac.

Ahora bien, Sketch es un programa realmente muy ligero, as√≠ que no necesitas una s√ļper PC para ejecutarlo. Por ejemplo, puedes trabajar en un MacBook Pro sin que sea el √ļltimo modelo. Si tu equipo guarda especificaciones como 16 GB de RAM de i7, estar√°s bastante bien. Sin embargo, es tan ligera que funciona bien incluso en el Mac m√°s barato disponible, que ahora mismo es un Mac Mini.

En realidad, cualquier persona con conocimientos de dise√Īo puede utilizar Sketch. Como hemos mencionado antes, se puede utilizar para el dise√Īo web, dise√Īo de interfaz de usuario, m√≥vil, dise√Īo de iconos, y casi cualquier cosa que desees, excepto tal vez cosas como renders 3D pesados.

Incluso se puede utilizar Sketch para wireframing, que es un boceto donde se representa visualmente, de una forma muy sencilla y esquemática, la estructura de una página web, o con la ayuda de algunos plugins se puede utilizar para la creación de prototipos. Pero ampliaremos esta función cuando hablemos en la siguiente sección de las características de Sketch.

¬ŅCu√°les son las caracter√≠sticas de Sketch?

Sabemos qu√© es Sketch pero, ¬Ņqu√© la hace tan especial? La aplicaci√≥n tiene muchos atributos que la hizo una de las favoritas de los profesionales dedicados al dise√Īo de interfaces y desarrollo web. A continuaci√≥n, te dejaremos las caracter√≠sticas de Sketch seg√ļn la lista en su sitio web.

Cuenta con todas las herramientas b√°sicas

Sketch cuenta con todo lo necesario para dise√Īo de interfaces. En la barra de herramientas, en la parte superior de la pantalla, puedes encontrar todo lo esencial para dise√Īar iconos hasta crear conceptos completos para un nuevo producto digital.¬†

Asimismo, ¬°sirven tanto para principiantes como para expertos! Las herramientas de dise√Īo web funcionan de forma intuitiva y te permiten tener una precisi√≥n al nivel de p√≠xeles. De la misma forma, ahora sabes que es Sketch la √ļnica app de dise√Īo de interfaces con la tienes un flujo de trabajo no destructivo, es decir, los cambios se pueden hacer sin modificar el archivo original y son muy f√°ciles de revertir sin arruinar todo el trabajo.¬†¬†

herramientas b√°sicas de Sketch

Se enfoca en el dise√Īo

El layout de la plataforma y sus funciones est√°n enfocadas en proporcionar los mejores features para presentar el mejor trabajo de dise√Īo web y prototipado posible.¬†

De la misma forma, Sketch te brinda cuadrículas y una interfaz para poder mantener tu trabajo muy organizado y limpio, así como opciones para customizar la pantalla principal para que se te acomode mejor.

Entre otras herramientas para crear un dise√Īo web en Sketch, te permite cambiar el tama√Īo de las restricciones de los elementos para facilitar su escala, te proporciona atajos para reorganizar y cambiar de tama√Īo las capas y te da un control infinito sobre la tipograf√≠a.¬†¬†

Sketch es un software enfocado en el dise√Īo

Inserta componentes y sistema de dise√Īo¬†

Sketch est√° dise√Īado dentro de un sistema que te da acceso a bibliotecas compartidas con s√≠mbolos, texto y estilos, as√≠ como a componentes reusables que puedes enviar a tus colaboradores y, al mismo tiempo, funciona mantener a tu equipo al d√≠a con las actualizaciones del sistema de tu dise√Īo.¬†

A su vez, existe una funci√≥n para crear una paleta de colores para usar en todos tus dise√Īos y, despu√©s, compartirla con otros. Por medio de esto, podemos uniformizar la est√©tica de nuestros productos digitales como interfaces web y de aplicativos.¬†

Tambi√©n, la aplicaci√≥n de dise√Īo de interfaces contiene la opci√≥n de Smart Layout. A trav√©s de esta, los s√≠mbolos o texto que utilices se adaptar√°n autom√°ticamente al espacio disponible, ahorr√°ndote mucho tiempo.¬†

Finalmente, el dise√Īo de la interfaz de Sketch te permitir√° visualizar en una ventana a parte los componentes guardados en tu biblioteca compartida para que sea sencillo encontrarlos. Solo necesitas abrir ‚ÄúInsert Window‚ÄĚ, escribir el nombre en el buscador y arrastrar el elemento al lienzo en tan solo unos segundos.¬†

Inserción de componentes en Sketch

Crea el prototipado en Sketch

Si queremos hablar sobre qué es Sketch, debemos mencionar que es una opción genial para realizar el prototipo de un producto digital, como una página web o una aplicación de Smartphone. Nunca fue más fácil compartir tus proyectos y recibir feedback de tus clientes. 

A trav√©s de Sketch puedes vincular las partes de tu dise√Īo de interfaz con mucha facilidad y crear prototipos para probar todas tus ideas en el software para Mac o en tu propio dispositivo digital iOS en aplicaci√≥n Sketch Mirror. Los cambios aparecen autom√°ticamente, lo que te permite trabajar con mejor visibilidad y m√°s r√°pidamente.¬†

Prototipado en Sketch

Colabora en tiempo real

Como mencionamos previamente, el software Sketch te brinda la oportunidad de crear una biblioteca compartida con todos los s√≠mbolos, texto y paletas de colores para tener un dise√Īo de interfaz cohesivo. ¬°Todo esto es posible por medio de Sketch Cloud!

Similar a la nube de Google o Apple, Sketch cuenta con su propio sistema para compartir archivos y hacer m√°s sencillo trabajar con otros colaboradores. Las herramientas multiplataforma te permiten a√Īadir feedback, uso de √≠tems compartidos y la capacidad de mantener a todos los miembros del equipo de una misma p√°gina.¬†

Asimismo, te da la opci√≥n de Smart Sharing, es decir, puedes gestionar tus archivos en la nube y asignar a qui√©n compartirlos, cu√°les documentos son privados y colocarlos en el espacio compartido. ¬°Puedes customizar las carpetas seg√ļn tus necesidades!

Colaboración en Sketch

Dise√Īado para macOS

El dise√Īo de la interfaz de Sketch le ser√° muy familiar a las personas que est√°n acostumbradas al sistema macOS. El software se ha adaptado perfectamente al sistema operativo, presentando features caracter√≠sticas de los computadores marca Apple. Por ejemplo:

  • Interfaces de usuario oscuras y claras
  • Soporte completo para pantallas Retina y no Retina
  • Soporte de Touch Bar
  • Control de versiones de documentos locales
  • Rendimiento superr√°pido en Apple silicone¬†
  • Trabaja localmente y sin conexi√≥n
  • Corrector ortogr√°fico integrado y compatibilidad con RTL
  • Barra de herramientas y atajos personalizables

Sketch es una app nativa de Mac

Cuenta con extensiones para mejorar la experiencia

Sketch te permite personalizar la aplicaci√≥n a trav√©s de extensiones, plugins, asistentes digitales y otras integraciones para adicionar funciones y optimizar tus tareas. Inclusive, las principales herramientas de dise√Īo de prototipos tienen sus propios complementos para usarse en Sketch.¬†

‚ě§ Asistentes digitales

¬°Todos necesitamos una mano de vez en cuando! Obt√©n ayuda para identificar problemas en el dise√Īo de interfaces, mantenerse coherente con el sistema, entre otras tareas. Por ejemplo, existen Sketch2React Conventions, Accesibility y Organizer.¬†

‚ě§ Plugins

Seg√ļn IONOS, plataforma especializada en soluciones de hosting y cloud para las pymes, los plugins se definen como ‚Äúpeque√Īos programas complementarios que ampl√≠an las funciones de aplicaciones web y programas de escritorio‚ÄĚ. Es decir, los plugins para Sketch te ayudar√°n a agilizar tu trabajo con herramientas adicionales. Por ejemplo, existen Stark, Chart, Overflow y Vectary.¬†

‚ě§ Integraciones

Agrega nuevos elementos a tu flujo de trabajo con otras aplicaciones que se integran con Sketch para llevar los dise√Īos de interfaces al siguiente nivel. Por ejemplo, existen Lokalise, Maze, Flinto y Abstract.¬†

¬°Listo!, ya conoces qu√© es Sketch y sus caracter√≠sticas. Ahora, te toca conocer sus ventajas y por qu√© necesitas empezar a utilizar este software de dise√Īo vectorial.

¬ŅCu√°les son los requisitos del sistema para instalar Sketch?

Ahora que ya sabes qué es Sketch y seguiste leyendo, es porque ya te decidiste a usarla. La pregunta del millón es si tu equipo soporta el programa Sketch. Sketch 82.1 y superior requiere macOS Catalina (10.15.0) o una versión más reciente, y una conexión a Internet que funcione, para poder instalar el software y recibir las actualizaciones y mejoras.

Si estás trabajando con una versión anterior de macOS, entonces debes consultar la página de actualizaciones de Sketch para obtener enlaces que te permitan descargar las versiones anteriores.

Pero si lo que quieres quieres es actualizar tu versi√≥n de macOS para poder utilizar la √ļltima versi√≥n de Sketch, sigue las instrucciones del sitio web de Apple para actualizar tu sistema operativo.

Para registrarte con una cuenta de Sketch como editor, tendr√°s que utilizar la versi√≥n 56 o posterior de la aplicaci√≥n para Mac. Para utilizar la colaboraci√≥n en tiempo real que te explicamos en la secci√≥n de caracter√≠sticas de Sketch tendr√°s que usar la versi√≥n 71 o posterior de la app para Mac. Puedes descargar la √ļltima versi√≥n en sketch.com/updates.

Si trabajas con documentos m√°s complejos, con varias p√°ginas y muchas mesas de trabajo, un Mac con una cantidad decente de RAM, una CPU potente y una buena GPU te dar√° los mejores resultados.

La aplicación Sketch Mac utiliza tecnologías de hardware específicas de Mac y, por lo tanto, no es posible ejecutarla en una máquina virtual (VM). Si no estás seguro de la compatibilidad, puedes hacer uso de la prueba gratuita de 30 días para comprobar el rendimiento de tu equipo.

 

Aspectos b√°sicos de Sketch

Al igual que las aplicaciones nativas de Mac, Sketch te proporciona una interfaz de usuario amigable con una barra de herramientas, un navegador y un inspector. Como resultado, los nuevos usuarios que desean explorar qu√© es Sketch les dar√° una experiencia mucho m√°s accesible porque no se interpone en el camino de la producci√≥n de dise√Īos simples.

Personalización de la barra de herramientas

En consonancia con el lenguaje de dise√Īo de MacOS, la barra de herramientas de Sketch es personalizable cuando haces clic derecho. Puedes configurar todas tus herramientas favoritas arrastrando las que quieras. Si te gustan los atajos de teclado, es recomendable guardar los que son dif√≠ciles de recordar, pero que se utilizan con frecuencia.¬†

Algunos de ellos solo se activan cuando es posible utilizarlos, por lo que tenerlos en la barra de herramientas es √ļtil. Algunas de las herramientas favoritas que puedes usar en Sketch son: S√≠mbolos, Tijeras, Contornos, Redondear a P√≠xel.¬†

Personalización de la barra de herramientas de SketchImagen: elegantthemes.com

Artboards, las mesas de trabajo

Las mesas de trabajo son las pantallas de tu aplicaci√≥n Sketch. Cada Artboard representa una pantalla o una interacci√≥n dentro de una pantalla. Tener un flujo de trabajo eficiente es crucial para los dise√Īadores modernos.¬†

Ahora puedes evitar invertir todo tu tiempo en el dise√Īo visual, porque la creaci√≥n de prototipos, la entrega de activos y la codificaci√≥n pueden realmente hacer que tus dise√Īos cobren vida en lugar de estar atrapados en el vac√≠o.

Antes, los dise√Īadores sol√≠an guardar un archivo por cada pantalla que dise√Īaban, lo que daba lugar a docenas de archivos que gestionar. Ahora, gracias a Artboards de Sketch, puedes tener toda tu aplicaci√≥n, con docenas de pantallas, dentro de un √ļnico archivo de Sketch.

Artboards Mesas de trabajo de SketchImagen: designcode.io

P√°ginas

En la aplicación Sketch, cada página representa una plataforma o una resolución completamente diferente. Para la mayoría de los proyectos, tendrás más de veinte Artboards para una plataforma como iOS. 

Luego, debes crear otra p√°gina para Android, Web, Apple Watch, tvOS, etc. De esta manera, puedes tener un proyecto completo dentro de un solo archivo de Sketch. Esto te permite el ahorro de mucho tiempo al cambiar 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 utilizando el men√ļ desplegable. El atajo de teclado es Fn ‚ÜĎ y ‚Üď.

P√°ginas de SketchImagen: designcode.io

Plantillas de interfaz de usuario

El programa Sketch viene con contenido precargado con una serie de plantillas de interfaz de usuario para iOS, Material Design y Responsive Web. Para acceder a ellas, solo tienes que ir a Archivo, Nuevo de Plantilla. Las plantillas de iOS y Material Design son especialmente muy completas y ser√°n un gran punto de partida para cualquier dise√Īador, tanto principiantes como expertos.

Plantillas de interfaz de usuario de SketchImagen: designcode.io

Ventajas de Sketch

¬°No podemos seguir cont√°ndote qu√© es Sketch sin mencionar sus ventajas! Esta es una aplicaci√≥n de dise√Īo de interfaces que ha transformado el juego de la creaci√≥n de productos digitales. Seg√ļn Jos√© Aljovin, dise√Īador UX & UI y profesor del curso online de Sketch de cero a experto: Dise√Īando interfaces, estas son algunas de las principales ventajas de Sketch.

Curva de aprendizaje corta

Esto quiere decir que aprender c√≥mo usar Sketch es muy f√°cil. El programa de dise√Īo web es muy intuitivo. Despu√©s de algunas horas familiariz√°ndose con la plataforma, te ser√° una opci√≥n natural trabajar en este para el dise√Īo de interfaces web y m√≥viles. Tambi√©n, si lo necesitas, tiene un departamento de soporte t√©cnico muy eficiente.¬†

Inclusive, para proyectos que involucran trabajo en equipo, como el dise√Īo ux, el layout es muy accesible y ser√° f√°cil de entender para las personas que no tienen expertise en esta disciplina; como, por ejemplo, el √°rea de desarrollo e investigaci√≥n de mercado.

¬°Sketch es s√ļper ligero!¬†

El software Sketch pesa tan solo entre 40 y 60 MB. Este funcionará prácticamente en cualquier procesador. Por otro, trabajarás en un entorno vectorizado; por ello, los archivos y las entregas para los clientes también son muy ligeras. Sin embargo, debemos mencionar que, por el momento, Sketch está disponible solo para computadores Mac.

No pierdes tu progreso

Sketch es un programa de dise√Īo interfaces muy estable, pero, si se llegara a cerrar, ¬°no te asustes! Este se encarga de guardar continuamente los avances de tu trabajo y evitar√° que pierdas lo que realizaste con tanto esfuerzo. Adem√°s, funciona como timecapsule, entonces no tendr√°s que guardar miles de versiones finales.

Muy económico

A diferencia de otros programas de dise√Īo web, Sketch tiene un precio muy accesible para las personas que se dedican a esta disciplina. Seg√ļn la p√°gina web de Sketch, por s√≥lo 99 d√≥lares tendr√°s el software disponible por un a√Īo. Tambi√©n existe la posibilidad de adquirir el programa mensualmente por 9 d√≥lares. Finalmente, si no estas 100% seguro de tu compra, la plataforma te ofrece un trial de 30 d√≠as gratis.

¬ŅCu√°les son las ventajas de Sketch?

Imagen: ICHI.PRO

Facilidad de uso

Cuando sabes qué es Sketch, te das cuenta de que es mucho más fácil de usar que una aplicación como Photoshop. Apenas pesa 45 MB de espacio en disco, frente a los 2,17 GB de Photoshop.

Desde el punto de vista de un dise√Īador web, algo muy bueno del programa Sketch es la calidad del renderizado, lo que significa que los dise√Īos que puedes crear est√°n muy cerca de los resultados que obtienes de lenguajes de programaci√≥n como HTML/CSS o una p√°gina web terminada. Por eso, puedes perfeccionar un dise√Īo, incluso en la versi√≥n codificada.

Aplicación basada en vectores

El programa Sketch, como dijimos, est√° basado en vectores, lo cual significa que cada forma que dibujes puede ser redimensionada a cualquier tama√Īo sin perder nitidez. As√≠ que tus dise√Īos se ver√°n muy bien, incluso en una pantalla de retina o de muy alta DPI (puntos por pulgada).

Esperamos que el art√≠culo de hoy te haya sido √ļtil para conocer qu√© es Sketch y por qu√© ha sido una aplicaci√≥n que ha sido adoptada como est√°ndar entre los expertos del dise√Īo de interfaces.¬†

No solo hemos aprendido qu√© es Sketch, sino sus caracter√≠sticas principales y sus ventajas m√°s importantes. Ahora, ¬Ņest√°s listo para comenzar una aventura con esta herramienta de dise√Īo web?

¬ŅO qu√© si echas un vistazo a los cursos de Dise√Īo gr√°fico que tenemos para ti? Elige el que m√°s te guste y comienza a desarrollar tus habilidades. Por √ļltimo, si necesitas realizar una propuesta de desarrollo web con todos los detalles necesarios, descarga gratis la plantilla para propuesta de dise√Īo web.

Esto ha sido todo por el momento. Te deseamos mucho √©xito en tu carrera como dise√Īador. Recuerda siempre aprender algo nuevo todos los d√≠as. ¬°Hasta otra oportunidad! ¬°Nos vemos en el pr√≥ximo contenido!