25 Herramientas para diseño web que no pueden faltarte

Llevo mas de cien artículos en este blog, por lo que me costaría especificar cuantas fueron las veces que usé esta frase: «En la actualidad cada vez es mas sencillo diseñar un sitio web».  Es tan cierta que hoy la escribo nuevamente. 😉 Un poco es esa frase la que me hace escribir este post, ya que muchas de las herramientas de diseño web que te listaré en los párrafos que siguen son las grandes culpables de la sencillez.

He decidido dividir los recursos por rubros:

1- Códigos de programación.

2- Colores.

3- Imágenes.

4- Iconos.

5- Fuentes y tipografías.

6- Diseño responsive.

Podrás ver que en muchos casos cada rubro tiene mas de un sub-rubro, algo que te simplificará mucho más la lectura. 🙂 Por otro lado vas a encontrar herramientas de diseño web de varios tipos, hay softwares para instalar en tu pc, plataformas online, plugins WordPress, extensiones de Chrome. El precio también es variado, ya que si bien la mayoría son gratuitas, también las hay premium y freemium.

En resumidas cuentas, y para no alargar mas esta introducción, te dejo 25 recursos tan variados como útiles para cualquier experto en diseño web. 😉

25 Herramientas para diseño web

1. Códigos de programación

Todo está muy facilito a la hora de crear un sitio web, pero si lo que quieres es un diseño original no podrás prescindir herramientas orientadas a los códigos como Html, CSS, Java.

1.1 Editores de texto

1.1.1 Sublime Text.:

En la actualidad mi editor de texto favorito. Liviano, de fácil uso y super completo, personalmente cumple todo lo que busco de un editor de texto.

1.1.2 Atom

Herramienta con prestaciones similares a Sublime Text, que no deja de ser una buena alternativa si la primeara no te convence.

1.2 Inspector de elementos

1.2.1 Inspector de Google Chrome

Muchas son las veces en las que necesitas editar un elemento en tu web, pero desconoces que códigos Html y/o Css lo gobiernan. Es por ello que el inspector que nos brinda Google Chrome es indispensable para todo diseñador web.

Con solo un click derecho sobre el elemento en cuestión, y seleccionando la opción inspeccionar, Chrome despliega una pantalla en la cual se te muestran los códigos Html y Css de la web.  Y no solo eso, sino que te permite hacer ediciones en el Css que se reflejan al instante en el sitio (cambios que obviamente son solo de lado del usuario).

No se quien creo esta herramienta, pero es mi heroe. jejej

1.3 Editor en vivo

1.3.1 Stylebot

Stylebot te permite manipular la apariencia de cualquier sitio web con CSS.

No tienes mas que seleccionar un elemento y los cambios que quieres realizarle desde el editor. Los cambios pueden ser fuente, color, márgenes, visibilidad y todo lo que permita el CSS. Cada cambio se ve reflejado al instante en el sitio web.

1.3.2 JsFiddle

JSFiddle es una comunidad en línea para probar y mostrar fragmentos de códigos HTML, CSS y JavaScript.

Puedes cargar elementos en HTML e ir editando su apariencia desde el CSS, viendo reflejados  los cambios a cada momento.

1.4 Framework

1.4.1 Twitter Bootstrap

El paquete de códigos que brinda Twitter en este proyecto que llamo Bootstrap le facilita la vida a millones de desarrolladores web. Útil tanto para montar Webs desde cero, como también para complementarlo con otras plataformas como WordPress.

El sistema de rejillas con el que trabaja hace posible adaptar una web, de manera rápida y fácil, a cualquier resolución de pantalla. Logrando así diseños web aptos para móviles sin rompernos la cabeza.

La gran cantidad de modulos disponibles, su gratuidad y fácil uso, hacen de este framework uno de los más populares. O como indica en su página web “the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web”.

1.4.2 Fundation 

Una opción que cuenta con menor popularidad que Bootstrap es Fundation, pero que sea menos popular no la hace menos útil.

Si el proyecto de Twitter no te deja satisfecho puedes darle una oportunidad a este framework. 🙂

2. Colores

No importa si lo que estas diseñando es un sitio web, una casa, vestimenta o lo que se te ocurra, siempre el color será fundamental. 

2.1 Paletas

2.1.1 Htmlcolorcodes

Este es el clásico sitio web en el que se te muestra la paleta de colores, y al seleccionar el color te da su código en HTML y RPG.

De estos sitios hay muchos, pero al ser el que me he acostumbrado a usar, lo recomiendo. 😉

2.1.2 Color Hailpixel

Esta es otra web donde obtener los códigos de colores. Una vez dentro de ella te encontrarás con una pantalla en la cual a medida que muevas el cursor la misma cambia de color.

Haciendo movimientos en horizontal se van cambiando las diferentes gamas, miemtras que si lo mueves en vertical varían los tonos. Lo mas útil es que por cada click que hagas se habré una ventana gurdando dicho color, pudiendo así comparar diferentes combinaciones y contrastes.

2.2 Extractores

2.2.1 Colorzilla

Una extensión de Google Chrome que al ser instalada y activada, te permite obtener el código HTML de cada color por el que pases el cursor.

Una vez ubicado el cursor sobre el color de tu interés, solo basta un click para que el código quede copiado.

2.2.2 Degraeve

Dentro de este sitio web podrás extraer la gama de colores que hay en una imagen. Al cargar la misma en el sistema, y una vez procesada tendrás disponibles los colores de la misma.

3. Imágenes

Dicen que una imagen dice más que mil palabras, no se si literalmente sea cierto, pero no se puede negar que son de suma importancia.

3.1 Bancos de imágenes

3.1.1 Freepik

No hay mucho que decir de este banco de imágenes, basta con remarcar que en la actualidad es el que más uso a la hora de buscar imágenes para usar en mi blog. 🙂

3.1.2 Pixabay

Si en primer lugar coloque el banco que más utilizo, podrás deducir cual es el segundo al cual acudo en busca de imágenes. Si si es Pixabay. 😉

Si ninguno de estos dos te gustó puedes pasarte por este post, en el que dejó los que para mí son los 10 mejores bancos de imágenes.

3.2 Editores

3.2.1 Photoshop

Este es sin dudas el mejor y más popular editor fotográfico de la actualidad. Es el que uso, y no podía faltar en este listado de herramientas para el diseño web.

3.2.2 Canva

Si Photoshop es el mejor software de edición fotográfica, Canva no está lejos de ser la mejor plataforma online en el mismo rubro.

De uso muy intuitivo y con cientos de plantillas preestablecidas (algunas free y otras premium), hacen de este un recurso que no puede faltar en tu colección.

3.3 Compresores

3.3.1 Tinypng

Plataforma online que te permite optimizar imágenes para web, reduciendo su tamaño sin perdidas de calidad. Soporta los formatos comunes como son Jpg y Png.

Es de destacar que permite subir hasta 20 imágenes a la vez, con un máximo de 5 Mb total. Es una muy buena opción para comprimir imágenes antes de subirla a tu servidor.

3.3.2 WP Smush

WP Smush es uno de los más populares plugins para WordPress que te ayudarán a comprimir cada imagen que subas a tu web.

Si bien es una herramienta freemium, las prestaciones que brinda gratuitamente bastan y sobran para un simple blog como el mío. He usado este plugin por bastante tiempo y sin dudas se merece estar en este post. 🙂

3.3.3 Optimizador.io

Cuando dije que he usado por bastante tiempo WP Smush, de seguro notaste que lo dije en pasado. Esto fue por que ahora uso Optimizador.io, un plugin que ofrece gratuitamente Webempresa, y con el que note mucho mejores resultados.

Mayores porcentajes de compresión, y una gratuidad del 100% han provocado la total desinstalación del popular WP Smush.

4. Iconos

Un icono es capaz de resumir gráficamente cualquier cosa que los usuarios quieran, cualquier comando, proceso o indicador de funciones, de ahí su importancia en el diseño web.

4.1 Galerías de iconos

4.1.1 Font Awesome

Font Awesom es un framework de iconos vectoriales y estilos css. Con él puedes reemplazar imágenes de iconos comunes por gráficos vectoriales convertidos en fuentes. Su librería cuenta un enorme cantidad de iconos, y crece día a día. Si bien en principio fue creada para Bootstrap, puede ser aprovechada por separado de dicho framework CSS.

4.1.2 IconFinder

Sin dudas este es uno de los repositorios de iconos mas completos, habiendo tanto gratuitos como de pago. Los formatos en los que se encuentran son SVG y PNG, pudiendo descargarlos sin siquiera registrarte.

5. Fuentes y tipografías

Leer en una pantalla es difícil, así que asegúrate que no se lo hagas todavía más difícil a tus usuarios. Por otro lado ten en cuenta que el mensaje que quieres transmitir es acorde con la tipografía que usas. 

5.1 Repositorio

5.1.1 Font Squirrel

Font Squirrel es una página web que recopila una amplia variedad de tipografías gratuitas y libres para uso comercial. Recurso muy importante a la hora de seleccionar fuentes cuando diseñamos un sitio web.

5.1.2 Palettab

Palettab es una extensión de Chrome que te ayuda a descubrir nuevas fuentes y asombrosas combinaciones de colores cada vez que abres una nueva pestaña en el navegador. Si así de sencillo, con esta extensión instalada cada nueva pestaña abierta se te mostrará un juego de varias combinaciones de fuentes y colores, si te gusta una no tienes mas que guardártela. 🙂

5.2 Extractor

5.2.1 WhatFont

Sin dudas WhatFont es la forma más fácil de identificar fuentes en páginas web. Esta extensión de Chrome permite inspeccionar las fuentes web simplemente colocando el cursor sobre ellas. Tan útil como sencilla. 😉

6. Diseño responsive

La navegación desde móviles va tomando mas importancia día tras día, por lo que el diseño web responsive es indispensable.

6.1 Responsive Testers

6.1.1 Test Mobile Friendly Search Console

Si hablamos de buscadores es obvio que toda web quiere caerle bien a Google, por lo que si brinda una herramienta para analizar el comportamiento de una web en móviles, esta debe ser tu cabecera en cuanto a diseño responsive se refiere.

Esta herramienta brinda un análisis a fondo del comportamiento de paginas web frente a móviles, otorgando una clasificación final de buena (verde), media (naranja) o mala (rojo). Dicha puntuación viene acompañada de consejos/instrucciones que te ayudarán a mejorar los resultados.

6.1.2 Responsive Website Tool

Si eres de los que necesitan segundas opiniones, ya que no te convence lo que opina Goolge, Responsive Website Tool puede servirte. Tiene exactamente la misma función, aunque con parámetros algo menos exigentes.

La dejo como segunda opción para consultar, aunque por razones obvias quien manda es Google.

Bueno hasta aquí llegamos con el listado de herramientas útiles a la hora de diseñar sitios webs. Espero que haya sido de tu utilidad y que te estés llevando algunas para tu colección de recursos.

Imagen destacada diseñada por Freepik