Herramientas de diseño que están cambiando el juego en 2015

Toda una nueva generación de herramientas de última generación está llevando la creación de prototipos, la colaboración y el diseño digital en nuevas direcciones, y facilitando a los desarrolladores de WordPress la creación de hermosos sitios web.

La web ha estado evolucionando durante más de dos décadas, pero las herramientas que usamos para diseñarla no siempre han seguido el ritmo del propio medio. A medida que las tendencias de diseño continúan evolucionando rápidamente – con el diseño de movimiento, la capacidad de respuesta y el uso intensivo de imágenes tomando el centro del escenario – la necesidad de una nueva generación de herramientas de diseño verdaderamente multi-propósito nunca ha sido mayor.

Así que en el post de hoy, vamos a ejecutar la regla sobre la última cosecha de contendientes para su diseño de dólares con una mirada introductoria a las herramientas como Sketch, Macaw, Adobe Edge Animate CC y el pronto a ser lanzado Project Comet. También veremos cómo Sketch ha sido usado para proyectos de alto perfil.

Pasado y presente del diseño web

Hemos recorrido un largo camino desde que Tim Berners-Lee puso las cosas en marcha en 1991 con el primer sitio web del mundo – una página puramente de texto con una docena de enlaces. El diseño de la web ha pasado por cambios monumentales desde entonces (mayormente para mejor), y puede ser dividido en cuatro grandes épocas hasta el día de hoy:

Nacimiento

Como todo niño de los 90 sabe, no había tal cosa como el internet de “alta velocidad” en aquel entonces. Era una época en la que las páginas web consistían principalmente en texto con sólo una imagen ocasional. Hipervínculos, párrafos y encabezados dominaban el panorama, y cualquier estilo elegante tenía que ser hackeado junto con tablas y GIFs interminables.

Despertar

Javascript y Flash comenzaron a abrir nuevos mundos de posibilidades a mediados de los 90. La llegada generalizada del CSS en 1998 finalmente comenzó a dar a los diseñadores algunas opciones para poner sus dientes.

Revolución

La llegada de la Web 2.0 trajo el diseño aún más a la vanguardia con el Javascript explotando en popularidad y poder a medida que el contenido verdaderamente interactivo surgió en forma de plataformas sociales y aplicaciones multimedia.

El presente

A finales de 2015 estamos en la era de la web móvil. El diseño sensible es una necesidad y los dispositivos de todas las formas y tamaños pueden manejar confiablemente las tendencias modernas como el diseño de movimiento, el uso intensivo de video y la tipografía fuerte.

Hasta hace poco, las herramientas involucradas en la creación de todas estas etapas de diseño se mantuvieron notablemente consistentes a lo largo del tiempo: editores de texto para el código y el marcado, Photoshop y Fireworks para las imágenes, y Flash para la animación, el vídeo y la interactividad.

Pero impulsados por la revolución móvil, en los últimos años ha surgido por fin una nueva clase de herramientas de diseño para usurpar potencialmente la vieja guardia y hacer frente al desafío de un mundo de múltiples dispositivos y aplicaciones.

Leer
Tutorial: Tesis de integración y BuddyPress - Parte 1

Pasemos ahora a nuestra lista de las principales soluciones de diseño de próxima generación.

  • Boceto

    Miramos Sketch en profundidad la semana pasada, pero es tan bueno que lo cubriremos brevemente aquí también.

    Bohemian Coding’s Sketch ofrece a los diseñadores poder, flexibilidad y velocidad en un paquete vectorial ligero y fácil de usar. Comparado con encender a un monstruo como Illustrator, hacer volar las rondas de diseño en Sketch es una delicia. La única desventaja potencial es que está desarrollado exclusivamente para el Mac, por lo que los usuarios de PC se quedan un poco al margen en este caso.

    ¿Por qué usar Sketch?

    Sketch fue desarrollado para el diseñador gráfico moderno desde cero. Ofrece soporte para múltiples páginas y tableros de dibujo e integra poderosas características como símbolos y estilos compartidos para facilitar la reutilización de elementos.

    Objetos de precisión con Sketch.

    La promesa de Sketch para los usuarios se resume claramente en la página principal del producto: “Por fin puedes concentrarte en lo que mejor sabes hacer: El diseño.”

    Es una gran afirmación, pero el flujo de trabajo totalmente basado en vectores que permite el software contribuye en gran medida a su realización y encaja perfectamente en términos de diseño tanto para el escritorio como para el móvil.

    Aquí hay una lista rápida de algunas de las posibilidades que Sketch trae a la mesa:

    • Formas vectoriales escalables que se adaptan a los cambios de tamaño, estilos y diseños.
    • Formas vectoriales complejas fácilmente editables.
    • La capacidad de redondear formas y capas hasta el pixel más cercano.
    • Una función de zoom de píxeles para alternar entre las vistas.
    • Una representación de texto nativo que muestra con precisión cómo aparecerá realmente el texto.
    • La capacidad de crear fácilmente múltiples elementos gráficos reutilizables.
    • Opciones sencillas para exportar, cortar y redimensionar los activos.
    • La capacidad de previsualizar los diseños en los dispositivos iOS.

    Con sólo 99 dólares por una licencia, Sketch está muy por debajo del valor que proporciona. Bohemian Coding también proporciona un excelente apoyo en caso de que se encuentre con alguna dificultad y un número de animadas comunidades con las que involucrarse.

    Considerando todo, no es difícil ver por qué Sketch se ha disparado a la cima de la lista de las herramientas de diseño moderno más utilizadas. Es simplemente una herramienta imprescindible.

    ¿Interesado en Sketch?

    Detalles

  • Guacamayo

    El eslogan de Macaw “Deja de escribir código, empieza a dibujarlo” resume acertadamente lo que esta herramienta de diseño de próxima generación es. Proporciona a los diseñadores el conjunto de herramientas con el que están familiarizados, pero también produce HTML y CSS en el backend. Piensa en ello como si tuvieras a tu programador personal trabajando entre bastidores mientras diseñas.

    La salsa secreta detrás de Macaw es Stream, un motor de diseño en tiempo real que permite a los usuarios manipular suavemente los elementos de la pantalla de una manera similar a Photoshop, mientras que por arte de magia se encarga de las matemáticas necesarias en el fondo.

    El verdadero trabajo pesado en términos de convertir todo esto en HTML y CSS es realizado por el acertadamente llamado motor de diseño a código Alchemy. El marcado de las salidas de Macaw está orientado a la respuesta, y es semánticamente correcto y notablemente apretado para algo que no está enrollado a mano.

    Para cualquiera que haya perdido incontables horas preciosas luchando con el diseño una vez que los diseños pasan la fase de maqueta en el pasado, esta combinación es un absoluto regalo del cielo.

    Los estilos globales y los componentes reutilizables son simples de usar y el grosor general del paquete ha ganado el aplauso de diseñadores prominentes como Mike Finch:

    “No sé qué brujería están usando para hacer el código, pero es asombroso y hermoso”. – Mike Finch, diseñador de productos en Facebook.

    Aquí hay una lista rápida de algunas de las características más destacadas de Macaw:

    • Se pueden establecer fácilmente puntos de ruptura para múltiples dispositivos.
    • Las rejillas sensibles y flexibles vienen como estándar.
    • Los sofisticados controles de tipografía te permiten introducir fuentes web en un instante.
    • Fácil acceso visual a toda la gama de funciones modernas de CSS.
    • Capacidad de utilizar componentes para almacenar elementos de biblioteca reutilizables.
    • Píxeles de espaciado perfecto y controles de posicionamiento.

    Puedes ver una gama completa de videos que exploran en profundidad aspectos específicos de la funcionalidad de Macaw en su sitio.

    Macaw está disponible tanto para Mac como para PC y es un robo absoluto a sólo $79. Con la capacidad de generar automáticamente un marcado eminentemente utilizable, recuperarás esa cantidad en términos de tiempo ahorrado en un par de horas de uso.

    ¿Interesado en el guacamayo?

    Detalles

  • Adobe Edge Animate CC

    Adobe Edge Animate CC permite a los diseñadores web crear animaciones HTML interactivas para la web, publicidad con medios sofisticados y entornos de publicación digital. Originalmente planteado como una alternativa a Flash, el software ofrece un conjunto intuitivo de herramientas de diseño para crear contenido receptivo para todos los dispositivos, mientras se encarga de la CSS, HTML y JavaScript necesarios bajo el capó.

    Adobe Edge Animate CC.

    Los usuarios habituales de Adobe no tendrán problemas para familiarizarse con la interfaz general y hay un mundo de recursos útiles para explorar más a fondo en el sitio de Adobe, incluyendo tutoriales, manuales de usuario y las mejores prácticas para los gráficos.

    Aquí hay una lista rápida de algunas características clave que ofrece Adobe Edge:

    • No hay dependencia de las bibliotecas de terceros.
    • Una lista recortada de los archivos de salida del proyecto para administrar.
    • Carpetas personalizadas para guardar tus medios, imágenes y guiones.
    • Soporte integrado para video HTML5.
    • La función de copiar y pegar permite mover fácilmente el arte de SVG desde Adobe Illustrator.
    • Una línea de tiempo intuitiva para la creación de secuencias animadas de fotogramas clave.

    Adobe Edge está disponible como parte de la suite de Nube Creativa, ya sea como una sola aplicación o como parte de un paquete con precios que varían según el territorio.

    No es de ninguna manera una aplicación de diseño multiuso, pero es una opción muy útil para reunir rápidamente el contenido animado, una tarea que puede ser infernal si se intenta hacer a mano.

    ¿Interesado en Adobe Edge Animate CC?

    Detalles

  • Proyecto Cometa

    Project Comet no ha salido a la calle todavía, pero es el nuevo intento de Adobe de proporcionar una herramienta de diseño genuinamente todo-en-uno que combina el diseño visual, la estructura, el prototipo y la previsualización en un paquete ingenioso.

    El Proyecto Cometa fue anunciado recientemente en la conferencia anual de Adobe Max, pero no se espera que se envíe hasta principios de 2016, así que el jurado está muy ocupado con esto hasta ahora.

    Khoi Vin tiene una primicia sobre lo que se puede esperar con el eventual lanzamiento, y una entrevista con la Directora de Marketing de Productos de Adobe, Jane Brady, sugiere que la aplicación fue diseñada al menos parcialmente en respuesta a la creciente popularidad de Sketch:

    “Comet” realmente comenzó con la mirada a nuestra base de clientes y notó que había algunos clientes que se alejaban del Photoshop – estaban usando Sketch en algunos casos – y parece haber dos áreas diferentes para eso. La primera era la gente que diseñaba aplicaciones pesadas, porque es muy repetitivo crear todos esos botones y elementos para diferentes dispositivos y tamaños, y se dieron cuenta de que el Photoshop no funcionaba lo suficiente y había demasiado en él que no necesitaban – Sketch estaba mucho más enfocado.” Jane Brady – Directora de Marketing de Productos de Adobe.

    Sólo el tiempo dirá si Adobe puede recuperar parte de la ventaja que se le ha escapado con el lanzamiento de 2016, pero definitivamente es algo que vale la pena vigilar.

    ¿Interesado en el Proyecto Cometa?

    Detalles

Cómo los proyectos del mundo real utilizan el Sketch

Ahora que hemos cubierto algunas de las herramientas de diseño de última generación a disposición de los diseñadores, terminemos con algunos ejemplos del mundo real de Sketch en uso.

Sketch encabezó las encuestas de una reciente encuesta sobre herramientas de diseño y ha encontrado el favor de algunos equipos de diseño de muy alto perfil.

Sketch en Google

Boceto en acción con los equipos de Google.

Sebastián Gabriel de Google está usando Sketch para trabajar en la aplicación de interacción móvil Pixate.

Le gusta “la facilidad con la que se puede exportar una tonelada de activos, su flexibilidad y la simplicidad de su UI. Además, el hecho de que la propia aplicación sea ligera (junto con los archivos que crea) es un gran plus.”

Bosquejo en HackingUI

HackingUI usando la función de tablero de arte de Sketch.

Sagi Shrieber, el cofundador de HackingUI, usa Sketch para su trabajo diario en SimilarWeb.

La función de múltiples tableros de dibujo de Sketch es increíblemente útil cuando se trata de crear imágenes destacadas para HackingUI y también utiliza la aplicación para iterar rápidamente a través de las rondas de diseño.

Uso de Sketch para agilizar las subidas al App Store

La aplicación Sketch to App Store.

Brendan Mulligan de Launchkit utilizó Sketch para crear una herramienta para ayudar a generar imágenes de la App Store en todos los tamaños de iPhone.

La aplicación Sketch to App Store utiliza símbolos y estilos de texto de Sketch para crear fácilmente capturas de pantalla, por lo que no es “un gran dolor crear capturas de pantalla para iTunes Connect.”

Elegir la herramienta de diseño adecuada para ti

El diseño digital es un campo que evoluciona rápidamente, pero la nueva generación de herramientas de diseño que hemos introducido, sobre todo, le ayuda a crear con confianza obras maestras para múltiples dispositivos de forma rápida y sencilla.

Recapitulemos brevemente nuestras selecciones:

  • Boceto: Sketch ha capturado el corazón de los diseñadores de todo el mundo en los últimos años con su hermoso y simple flujo de trabajo basado en vectores.
  • Guacamayo: Si estás cansado de agitarte con el marcado personalizado, Macaw te dejará seguir creando mientras el software se encarga del trabajo gruñón en términos de código.
  • Adobe Edge Animate CC: Armar animaciones convincentes para mostrarlas en cada dispositivo es una tarea difícil con Adobe Edge.
  • Proyecto Cometa: Uno para el futuro. Será fascinante ver si Adobe puede recuperar su corona de diseño en 2016.

¿Ya estás a bordo con alguna de estas herramientas de diseño de nueva generación? Comparte tus pensamientos y experiencias con ellos en los comentarios de abajo.

1,6 millones de superhéroes de WordPress leen y confían en nuestro blog. Únete a ellos y recibe entradas diarias en tu bandeja de entrada – ¡gratis!

Etiquetas:

  • diseño

Deja una respuesta