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.

¿Vulnera este post tus derechos? Pincha aquí.
Creado:
¿Qué te ha parecido esta idea?

Recomendamos

Relacionado

WordPress

Bienvenid@ a un nuevo post de Coach2Coach. 13 Herramientas para analizar tu diseño web en WordPress En estos días he estado buscando herramientas útiles para analizar tu diseño web en WordPress en términos de velocidad, marcadores sociales, programación, SEO, etc. Como he encontrado unas cuantas, he pensado en compartirlas contigo. Este post es algo más corto de lo que acostumbro, pretendo escribi ...

Ayuda o Trucos Diseño Web Diseño Web General consejos diseño web

Bienvenid@ a un nuevo post de Coach2Coach. 8 Herramientas de Diseño Visual para Mejorar tu Página Web Hace ya un tiempo prometí a alguien que escribiría un post como este (ellos saben quiénes son, ¿verdad, Andrés?), en el que enumerar algunas de las herramientas de diseño visual para mejorar una página web. Por fin ha llegado el momento. Cuando diseñamos páginas web, los elementos visuales son muy ...

Internet Diseño web Software

Los profesionales del diseño web tienen a su alcance numerosas herramientas, pero si quieres probar suerte y comenzar a dar tus primeros pasos en el mundo de la creación web, hoy hablaremos de los mejores softwares para crear y llevar adelante tu página. Muchas de estas herramientas son conocidas por los profesionales, así que si aspiras a convertirte en uno de ellos, tienes que ir dominándolas de ...

general artículos blogs herramientas seo ...

Herramientas web Google analytics: con esta herramienta podrás ver todo el tráfico que tiene tú página web. Google webmaster: por medio de esta herramienta podrás corregir los principales errores de tu página web Searchmetrics: Esta herramienta es perfecta para que puedas descubrir que cosas están mal en tu página y en caso de que no lo sepas, porque cosas te debe haber penalizado google. Puedes r ...

DISEÑO WEB iconos

Crear botones web no es una tarea complicada con los tradicionales programas de diseño. Sin embargo se necesita conocer el programa, dedicarle tiempo y por supuesto contar con inspiración. En ocasiones es conveniente utilizar herramientas específicas para crear botones para páginas web. Y si además son gratuitas mejor. Nos ofrecen la oportunidad de obtener estos elementos en muy poco tiempo e incl ...

Diseño Web (cat)

Bienvenid@ a un nuevo post de Coach2Coach. 13 Herramientas para Analizar tu Diseño Web En estos días he estado buscando herramientas útiles para analizar páginas web en términos de velocidad, marcadores sociales, programación, SEO, etc. Como he encontrado unas cuantas, he pensado en compartirlas contigo. Este post es algo más corto de lo que acostumbro, pretendo escribirlo en un par de horas. Tamb ...

tecnología y software

Las herramientas de monitorización de sitios web son esenciales para supervisar un sitio web y detectar posibles problemas. Permiten seguir el rendimiento del sitio web, controlar la disponibilidad del servidor, supervisar la seguridad del sitio, el tiempo de carga y detectar posibles errores para luego poder corregirlos. Entre las muchas herramientas de monitorización de sitios web disponibles, ...

DISEÑO WEB Programación Web Herramientas

Descargar páginas web completas puede tener múltiples usos. Puede servirnos para trabajar en un diseño web sin necesidad de conectarse a Internet. O para realizar una copia de seguridad en nuestro equipo. También puedes guardar una página web para luego leerla sin conexión. Como vemos las utilidades son muchas y variadas- Quizás simplemente queramos ver el código HTML de una página web. Una opción ...

Debes saber

A menudo me preguntan por correo clientes o lectores que herramientas utilizo para diseñar una web. Creo que tener un buen kit de herramientas de confianza puede ahorrarte mucho tiempo y problemas a la hora de trabajar en una web, por ello quiero desvelarte todas y cada una de las herramientas que utilizo y que sé que a ti te pueden ser muy útiles para poder diseñar tu web y mantenerla, así que va ...

general blogs herramientas ...

Comprime las imágenes de tu sitio web y aumenta la velocidad de carga. En notas anteriores, hemos hablado sobre la gran importancia que tiene el manejo de las imágenes en la comunicación de las ideas, a través de nuestro sitio web o blog. El material gráfico es de gran importancia hoy en día y que nos ayuda a crear mensaje más eficientes. Sin embargo el tener muchas imágenes en nuestro sitio web ...