OmbuShop Crea Tu Tienda Online

Diseño web con Sketch app

  • Facebook
  • Twitter
  • LinkedIn
  • StumbleUpon
  • Email
  • RSS

En la era del prototipado iterativo y el diseño web responsive, las aplicaciones de diseño de Adobe ya no satisfacen las necesidades del diseñador web y de interfaces. Sketch, una aplicación independiente, gana terreno!

El nuevo niño mimado es Sketch: una aplicación realizada por una compañía llamada Bohemian Coding conformada por siete personas! Esta aplicación se está ganando el corazón de los diseñadores, a continuación veremos por qué!

Sketch app icon

¿Quiénes lo están utilizando?

En principio, cada vez más diseñadores web y de UI están utilizando Sketch. Se trata de usuarios que solían trabajar con Photoshop, Illustrator o el discontinuado Fireworks. Lo eligen por la facilidad y originalidad de su interfaz, pero sobre todo debido a su alta productividad en el flujo de trabajo Web.

La aplicación fue pensada desde las necesidades de diseñadores de sitios web y UI. Se nota claramente la atención al detalle y la investigación que el equipo de desarrollo ha hecho sobre nuestras necesidades.

Features sobresalientes

Listaremos a continuación algunos de los features que hacen de este soft el favorito de los diseñadores.

Interfaz

Sketch interface

Interfaz Sketch

La gente de Bohemian Coding no pretende hacer una reedición de las interfaces a las que Adobe nos tiene acostumbrados. Efectivamente plantean un paradigma diferente. No tenemos numerosísimos paneles de herramientas, sino tres zonas bien diferenciadas que permiten trabajar de forma cómoda y rápida: herramientas y acciones rápidas en la parte de arriba, layers a la izquierda y propiedades del objeto seleccionado a la derecha.

Acciones que necesitamos en todo momento como enviar un elemento hacia atrás o adelante, no se encuentran en las profundidades de un submenú, sino claramente a la vista, en la barra de herramientas superior junto con el zoom, la opción para agrupar elementos y otras acciones rápidas.

Vectores

vectors

Vectores

Sketch es básicmante un programa de dibujo vectorial. Todas sus herramientas son vectoriales e independientes de la resolución. Habiendo dicho esto, las medidas se manejan en pixels (para ser consecuentes con las unidades de medida utilizadas en CSS) y existe la posibilidad de ver un preview del diseño de manera pixelar.

Texto nativo

El motor de renderizado de texto es nativo, por lo que se verá exactamente igual que como lo veremos luego en el navegador o en la aplicación de Mac OS o iOS. Esto no es un detalle menor: el motor de renderizado de texto de Adobe suele ser muy distinto al generado por el sistema operativo en navegadores y apps, lo que complica las cosas a la hora de decidir familias, variables y cuerpos tipográficos.

Inspector

Sketch inspector

Sketch inspector

El panel de la derecha, llamado Inspector, cambia su contenido de acuerdo al elemento que esté seleccionado. Es una manera inteligente de optimizar el espacio en pantalla. Todas las propiedades de un objeto: relleno, contorno, sombras, estilos y mucho más, se controlan desde aquí. Todo está a la mano del usuario.

Símbolos

El concepto de símbolos, ya conocido por todos, nos permite repetir elementos de forma tal que se comporten como instancias de un único objeto. Al modificar el símbolo, se verán modificadas todas sus instancias.

Recorte de imágenes

En Sketch no es necesario recortar manualmente cada uno de los sectores que luego necesitaremos como imágenes sueltas para nuestro diseño web o de interfaz. El programa hace el trabajo por nosotros! Podemos hacer que exporte automáticamente cualquier objeto o grupo de nuestro documento, incluso con transparencia, pudiendo indicar qué capas deberán estar incluidas en dicha imagen.

Copiar estilos como código CSS

css-attributes

CSS Attributes

Por último, un feature que será bien apreciado por la comunidad web: podemos copiar el estilo de un elemento (colores, degradés, sombras) como código CSS, listo para ser pegado en nuestra hoja de estilos!

¡Esperamos que prueben muy pronto esta maravillosa aplicación!

Tags: , ,
  • Luis Rossel

    Estimados, no logro contactarme con ustedes, no responden el chat en linea, no responden los correos y como guinda de la torta, el teléfono publicado en su web para Chile no existe!

    • Estimado Luis, Puedes encontrarnos en el chat en línea de 9 a 18hs o escribirnos un email a hola@ombushop.com. Estamos revisando por qué no funciona nuestra línea de teléfonos. Esperamos resolverlo a la brevedad. ¡Saludos!