Las herramientas de 25Horas para diseñar web

Cada quien trabaja de diferentes formas, cada quien resuelve y diseña sus procesos de la forma que mejor les parezca, a continuación les mostraré mis herramientas de cabecera para diseñar web. Si quieren conocer cómo trabaja cada quien, hagamos de este post una discusión de herramientas y recursos para diseñadores web.

Después de pasar más de 5 años diseñando web, es agradable ver que tanto los procesos como las herramientas que uso han cambiado para bien. Hay que aprovechar todo lo que la web nos ofrece defintivamente. A continuación les presentaré algunas de las apps y objetos que me ayudan mucho para planear, diseñar, maquetar y probar sitios web.

La poderosa libreta

Processed with VSCOcam with t1 preset

No hay nada mejor para comenzar la planificación y el diseño de un sitio que una libreta con hojas en blanco o de cuadro chico. Un buen lienzo en blanco sin otra distracción o aplicaciones alrededor ayudan a enfocar nuestra atención a las necesidades más básicas que puede tener un sitio web.

Les recomiendo que escriban mucho, hagan notas sobre sus bocetos, rayen. Para hacer bocetos de un sitio web no siempre tienen que dibujar un rectángulo completo para toda la página. Boceten elementos, vayan de lo más específico a lo más general.

La pluma inclemente

03-BICcristal2008-03-26
He leído muchas veces sobre la diferencia de usar pluma o lápiz para bocetar. Francamente coincido con todos en decir que es mejor usar pluma como herramienta de poder.

A diferencia del lápiz, la pluma no se borra, y no hay nada mejor que mantener todos los “errores” en nuestro proceso creativo, es parte del estímulo de crear sin dar vuelta atrás. No hay que ser perfectos, sólo hay que dejarse ir y plasmar las cosas sin temor a equivocarnos.

Sublime Text

Screen Shot 2014-08-25 at 9.47.35 AM

Desde hace varios años, Sublime Text se volvió una maravilla de interfaz para desarrollar. Es cómodo, fácil de manejar, y lo mejor es la integración de plugins como Emmet para autocompletar HTML y CSS. Dreamweaver es historia. Sublime Text es el software que todo diseñador web debería aprender.

Dimensions Toolkit

Screen Shot 2014-08-25 at 10.28.15 AM
A veces andar ajustando el tamaño de tu navegador es una tarea tediosa, sobre todo cuando quieres calcular la dimensión exacta en un móvil o tablet. Para eso existe Dimensions Toolkit, un servicio donde puedes previsualizar un sitio en diversos dispositivos, aunque es sólo una simulación y no muestra el comportamiento real de algún dispositivo, sin duda es muy buena herramienta.

Sketch

tools-elements
Esta app se ha puesto de moda por su comodidad y versatilidad para diseñar sitios web y apps. Sketch tiene muchas herramientas predeterminadas para trabajar todo tipo de interfaces. Quizás el único inconveniente sea que sólo está disponible para Mac, fuera de eso, esta es una app genial para reemplazar a Photoshop o Illustrator (obviamente ambos programas tienen atributos más especializados en edición de imágenes y trazo vectorial, respectivamente).

SASS

logo-235e394c
Desde que SASS llegó a mi vida ha sido como luz en mi desarrollo de CSS. Como dice la portada del sitio, SASS es “CSS con superpoderes”. Este es un pre-procesador de CSS con el que puedes definir variables como colores, medidas y atributos para después aplicarlos y mantener control de todos sus elementos.

Esta herramienta ha sido genial para sostener sitios complejos con elementos modulares que repiten y reutilizan.

Falta mencionar sin duda que hay aplicaciones secundarias que ayudan mi día a día en este proceso de diseño web, como Dropbox para sincronizar archivos entre dispositivos, o Github para el control de mis versiones de archivos de un sitio web.

¿Qué herramientas usan para su día a día en el diseño y/o desarrollo de interfaces? ¡Comenten y compartan cuáles consideran que son mejores aplicaciones o prácticas para un mejor diseño web! 🙂


Te puede interesar

  • Itzel Chi

    En mi caso yo uso screenfly para la simulación de dispositivos, browserstack para checar el sitio en navegadores diferentes desde sistemas operativos virtuales, maneja desde IE 6 en adelante. 🙂 Saludos!!

    • 25Horas

      Si! De hecho he usado Browserstack para probar en Explorer. Aunque últimamente he usado Virtualbox (https://www.virtualbox.org/) para tener un mayor control de cómo se visualiza realmente. Es un poco más tardado instalar este programa con la configuración y el disco de arranque de windows pero ya una vez listo, resutla muy útil 🙂

  • elpollotropical

    Yo utilizo mucho un plugin para photoshop DEVROCKET muy útil para exportar assets 🙂

    • 25Horas

      No lo conocía, pero precisamente exportar assets así resulta muuuy útil!