17 herramientas que todo diseñador web o programador debería conocer

En la actualidad existen multitud de herramientas de diseño web profesional que son capaces de facilitar muchas tareas. Por eso hemos intentado realizar una selección de esas herramientas para diseñadores web profesionales que merece tenerlas a mano.

Puede que algunas no las utilices en meses, pero pueden sacarte de más de un apuro o simplemene agilizarte el trabajo.

Herramientas de diseño web y programación

Hemos seleccionado herramientas diferentes para tener siempre solución a diferenes situaciones:

Animatron

Se trata de una web para crear animaciones y presentaciones interactivas basadas en HTML5. Muchas páginas web optan por inicar sus páginas con una animación para explicar los servicios y trabajos que ofrece. Destacamos esta herramienta de diseño web porque permite colocar animaciones en lenguaje HTML5 en cualquier lugar.

Dash

Si eres de los que trabajas con APIs y archivos docsets Dash ofrece toda una colección actualizada de 200 APIs. Y disponibles en diferentes lenguajes de programación. Si sabes sacarle partido puedes ahorrarte horas y horas de trabajo.

Flat UI Colors

El uso de los colores siempre ha supuesto siempre un problema para los diseñadores gráficos.  Los diseñadores web no se han librado de este problema por lo que acertar en los colores es todo una odisea. Este sitio web trata de facilitar la tarea en la elección de los colores. Se trata de un espacio donde podremos seleccionar colores de uso habitual en el diseño web además del formato de inclusión como HEX o RGB entre otros.

Flaticon

Los iconos se han convertido en unos recursos muy habituales en cualquier página web. Tener a mano una de las mejores web con todo tipo de iconos te resultará muy útil.

FontDragr

Las tipografías son un componente muy importante de cualquier diseño. Esta herramienta dirigida a diseñadores web permite probar la visualización de cualquier tipografía en una web. Simplemente requiere arrastrar y soltar los archivos font.ttf en la barra de herramientas que se ubica en la parte superior. La forma mas rápida de probar tipos de letras online.

Froont

Un portal dinámico desarrollado para diseñar themes o plantillas con diseño Responsive. Dispone de una panel interactivo que permite arrastrar y soltar elementos aplicando los cambios en tiempo real. Incluso, al estilo de otros conocidos programas de diseño, se puede volver atrás en cualquier momento para anular las modificaciones. Esta herramienta también permite importar hojas de estilo CSS desde Photoshop, exportar códigos para importar en otras herramientas e importar layouts y muchas otras funciones.

GistBox

Una aplicación para guardar y gestionar código. Ideal para tener tu propia biblioteca de recursos web e ir utilizándolos cuando consideres oportuno.

IXD Check List

Contar con una lista de comprobación puede ayudar al desarrollador web a mantener un registro de todo lo que se ha hecho y todo lo que se hará en un futuro. Si eres un diseñador de interfaces puede resultar interesante agregar esta herramienta ya que contiene una colección de tareas comunes a realizar que se pueden comprobar fácilmente. Es una especie de herramienta para evaluar la calidad de un trabajo.

Nibbler

Otra herramienta para programadores web que nos permite evaluar factores como la calidad del código HTML, la compatibilidad del sitio con la plataforma móvil, así como su accesibilidad. Un recurso online realmente útil. Una de las mejores herramientas de la lista.

Niice

Es un banco o biblioteca de diseños que podemos obtener como fuente de inspiración de diseños cuando necesitemos un modelo de algún elemento de nuestro proyecto, como por ejemplo, un formulario de contacto, pues sólo tendremos que localizarlo en el sitio para obtener varios formatos disponibles sobre los que nos podamos basar para crear los propios.

Patternizer

Una herramienta para encontrar justo el patrón que busca para su página, los encabezados o incluso los fondos. Una vez tengas el fondo o la imagen creada en la parte izquierda de la pantalla tienes el código HTML listo para utilizar en cualquier diseño web.

Seti UI

Un Sublime Text Theme (no confundir con Sublime Text Color Scheme) que permite activar la interfaz de usuario del tema y esquema de color de manera que se puedan modificar las preferencias de archivo. Puede ser una excelente elección de tema sobre todo para aquellos usuarios que están usando Sublime Text en Windows 8 o incluso en Mac OX Yosemite. Se trata de un software de código abierto para facilitar el engorroso trabajo de programación.

Slides

Un portal especializado en la implementación de presentaciones para páginas web y diapositivas online compatible con dispositivos portátiles que admite muchos parámetros de configuración para ajustarlas al estilo de tu sitio. Si estás pensando en crear un slider pen HTML5 o para un WordPress y que sea único aquí tienes una opción más.

SpriteBox

Una herramienta WYSIWYG para ayudar a diseñadores web a crear CSS a partir de imágenes. De esta forma se pueden optimizar las imágenes y reducir su peso. Ideal para mejorar los tiempos de carga de una web.

Typecast

Una opción para trabajar con miles de tipografías desde servicios como Google Fonts, Fontdeck, Typekit y Fonts.com. La forma mas rápida de elegir una tipografía para tu página web o blog. Incluso trabaja con código CSS para utilizar las tipografías elegidas.

WP Text

¿Trabajas habitualmente con WordPress? La lástima es que lleva sin actualizar desde 2014 pero es una herramienta tremendamene útil y que todavía sigue funcionando. WP Text es un sistema especial para encontrar errores en el código fuente de una plantilla de WordPress o en cualquier web desarrollada en este gestor.

123apps

Si necesitas subir, cortar, montar o realizar cualquier trabajo con archivos de video o audio 123apps ofrece la opción. En realidad son múltiples utilidades online para trabajar con este tipo de achivos. Podrás convertir videos en diferentes formatos.

Con todas estas herramientas dirigidas a programadores y diseñadores web seguro que el trabajo se hace más fácil.

* Artículo actualizado y ampliado.