10 herramientas indispensables para todo diseñador web

10 herramientas indispensables para todo diseñador web

Existen varias herramientas de diseño, algunas ya consolidadas que tuvieron que afilar sus armas, se les puso dura la competencia con algunas herramientas que llegaron para competir, pero el ganador de esta lucha definitivamente seremos nosotros los diseñadores ya que ahora tenemos un gran surtido de juguetes nuevos.

A continuación te a describir 10 de las herramientas de diseño web más útiles que en lo que va del 2016 me han sido bastante útiles, si aún no las manejas te invito a que les des una oportunidad por qué vale la pena echarles un ojo.

1. Affinity Designer

affinity designer

Esta herramienta fue diseñada específicamente para destronar a Illustrator.

No se debe de de confundirse con Affinity Photo que es el competidor de Photoshop, este software de diseño exclusivo para Mac ofrece exclusivas características que lo hacen destacar en contra de sus rivales como la capacidad de hacer un mayor zoom, su interfaz de usuario está diseñada para hacer los diseños de una manera más eficaz con respecto a sus competidores y lo mejor de todo es que solo cuesta $749 pesos, no mensuales si no un solo pago único y listo, el programa es tuyo.

Affinity Designer es de es uno de los nuevos jugadores que le vienen a hacer competencia a los viejos, esta ganando rápidamente terreno y se le esta poniendo al tu por tu a los viejos gigantes, que ya les está empezando a pesar la edad.

2. Adobe Photoshop

photoshop

Photoshop sigue siendo uno de los gigantes, y si bien no es solamente para el diseño web, sus capacidades visuales lo convierten todavía en un poderoso oponente. este software de edición de fotos ha recorrido un largo camino ya recorrido desde hacer modelos de pasarela aun mas flacas hasta hacer diseños de interfaces de usuario para una app o un sitio web.

Para su uso como herramienta de diseño web, Photoshop ofrece un sistema de retículas, objetos inteligentes, y imágenes vectoriales (vector inteligente en objetos). Estas características complementas sus populares capacidades de edición de fotos: opciones de color fotografía enriquecida y opciones de la herramienta pluma que le dan ventaja artística.

3. UXPIn

uxpin

Es una app colaborativa donde se cubre el proceso entero de diseño web, desde unos simples wireframes estáticos hasta prototipos de alta calidad con animaciones. UXPin ofrece muchos escenarios de diseño con igual consideración, esta es otra herramienta que llegó para quedarse, esta en casi todos los listados como este.

Una de las características importantes de UXPin es que permite importar archivos tanto de Photoshop como de Sketch, dejándonos trabajar con cada una de las capas originales del archivo para la creación de prototipos. Esto permite a los diseñadores crear prototipos de una manera bastante fácil de una manera más gráfica, se puede cambiar a diseño interactivo sin perder el trabajo.

4. Coolors

coolors

Cualquier persona que ha usado una navaja suiza sabe que a veces las herramientas más pequeñas son las que mas utilidad tienen.

La teoría del color es muy utilizada en el diseño web (y en todos los canales visuales), pero es una disciplina distinta, en lugar de memorizar todo, los diseñadores web puedemos contar con herramientas como Coolors para completar los detalles de color.

Con la herramienta de generar colores random un sin fin de opciones de esquemas de color que funcionan de manera efectiva.

Tú puedes personalizar las opciones de tu proyecto cómo escoger y modificar selecciones por saturación, brillo o temperatura. puedes ingresar valores precisos en Hexadecimal, RGB, CMYK, PSM o COPIC. Este es compatible con iOS, Android, Photoshop e Illustrator.

5. Pop

Pop

POP, es una aplicación disponible para iOS, Android y Windows Phone, y la nube desde cualquier navegador que nos permite capturar wireframes dibujados a mano (podemos fotografiarlos con la misma cámara del smartphone) y crear nuestro prototipo a partir de de esos wireframes. Este prototipo se puede compartir de forma sencilla ya que crea una URL que le podemos enviar a las personas interesadas en el proyecto, clientes, jefes o otros colaboradores del proyecto.

De forma gratuita solo te permite tener dos proyectos y si quieres tener más ya tendrías que pagar de 10 a 30 dólares al mes dependiendo que tantos proyectos necesites.

6. Sketch

sketch
El mejor programa de diseño de interfaces para Mac. Crea wireframes, mockups, prototipos y mejora el proceso de llevar una idea interactiva a su desarrollo.

Sketch, se centra en ofrecer una solución de diseño mucho más ligera y rápida que alternativas como Photoshop o Illustrator, al mismo tiempo que se especializa en tener todas las opciones para crear de cero desde un simple símbolo o icono hasta toda la interfaz de una aplicación móvil o una página web, es bastante económico ya que solo vale 99 dólares.

7. Invision

invision
Invision, es una una de las más famosas plataformas para el desarrollo de prototipos entre los diseñadores web y empresas de proyectos digitales como Evernote, Netflix, Hubspot entre otras. Es una herramienta muy intuitiva y poderosa, si usas Adobe CC lo puedes integrar muy facilmente, solo arrastras el archivo PSD a Invision y listo. Puedes subir y actualizar tus diseños por medio de Dropbox y Sync, puedes añadir a tus clientes y partes interesadas en el proyecto para que comenten directamente sobre el diseño en tiempo real, Invision, mantiene un historial de versiones, para comprobar lo que se necesite, ademas cuenta con versión gratuita.

8. Codekit

codekit
Codekit es un programa que te permite compilar tu preprocesador favorito (Less, Saas, Stylus) con muchas opciones para el trabajo con CSS y HTML.

Permite las opciones básicas como elegir archivo y ruta de destino, imprimir líneas de depuración de código en nuestro CSS para detectar posibles errores, revisar la sintaxis de JavaScript por medio de JSlint, JSHint o CoffeLint, importar un framework CSS (Vendors frameworks como Susy, Foundation, Compass, etc.. o el nuestro propio) e incluso una opción para instalar componentes por medio de Bower en nuestro proyecto.

Pero hay dos razones principales que hacen que no pueda separarme de Codekit:

Preview es la opción que me permite cargar mi proyecto por medio de una URL virtual (http://usuario.local:5757/) y poder acceder a ella desde cualquier dispositivo conectado a la misma red. Es genial si trabajamos mobile first y maquetamos mientras vemos el resultado en el móvil, o para probar en diferentes dispositivos/OS.

Siempre es mejor probar y testear en el propio dispositivo y no en un emulador online que no nos emulará el bug de cambio de orientación de iOS, el uso de flexbox en Android o muchísimas características de CSS/JS que varían según el Sistema Operativo.

La segunda opción es el lenguaje kit que implementa Codekit y que me permite hacer imports de archivos y usar variables dentro del mismo HTML o archivo .kit. Similar al include de PHP.

Esto me permite gestionar mi proyecto de un punto de vista Atómico y crear archivos muy pequeños (Átomos) con elementos independientes que luego puedo incluir en Moléculas e ir creando de esta manera la guía de patrones/estilos de la web con imports sin tener que usar otro lenguaje más que el de Codekit.

Lamentablemente Codekit está solo para Mac OS, es bastante accesible ya que solo cuesta 32 dólares.

9. Github

github
GitHub es un repositorio para proyectos de código abierto basado en el sistema de control de versiones Git, y su función es hacer que sea fácil compartir código y colaborar en proyectos.

Git es uno de los sistemas de control de versiones más populares entre los desarrolladores, y parte de esa culpa de su popularidad la tiene GitHub, No en vano, es el servicio elegido por proyectos de software libre como jQuery, reddit, Sparkle, Curl, Ruby on Rails, node.js, ClickToFlash, Erlang/OTP, CakePHP, Redis, y otros muchos. Además, algunas de las grandes empresas de Internet, como Facebook, alojan ahí sus desarrollos públicos, tales como el SDK, librerías, ejemplos, etc.

GitHub es totalmente gratuito para alojar código open source, siendo estos repositorios de visibilidad pública forzosamente. Sin embargo, su plan de precios para los repositorios privados y con colaboradores externos es más que razonable, abarcando desde 5 repositorios privados y hasta un colaborador por 7 dólares al mes, hasta 125 repositorios privados y equipos de personas ilimitados por 200 dólares al mes.

10. Brackets

brackets
Aun que pareciera mentira Adobe ha lanzado Brackets, un nuevo editor de código abierto “gratis” con dos características base: es liviano y potente. (y en mi opinión personal mucho mejor que Dreamwever que es de paga) Una aplicación pensada para todos aquellos que necesitan editar código de forma rápida que incluye ayuda para facilitar el trabajo.

Además, tendremos algunas características que ellos definen como únicas como la edición rápida o la vista previa dinámica entre otras. La aplicación permite hacer uso de extensiones para mejorar la eficiencia mientras trabajamos.

¿Necesitas un diseñador web frelancer?

Vamos trabajando juntos

Contáctame