Herramientas diseño web ese el tema que hemos elegido para esta post ya que cualquiera que quiera realizar webs va a necesitar un mínimo de herramientas para esa tarea. Algunas son más imprescindibles que otras pero nosotros hemos realizado una selección de las que creemos pueden resultar más útiles en esta tarea.

Herramientas diseño web

La primera reflexión que debemos hacer gira en torno a una pregunta:

¿Cuales son las mejores herramientas de diseño web?

Actualmente no hay mejores ni peores herramientas, lo que si hay es una variedad de herramientas abrumadoras. Lo más recomendable es seleccionar aquellas que se adapten a nuestras necesidades, circunstancias y conocimientos para que el tiempo que invirtamos lo podamos amortizar con el desarrollo de aplicaciones o paginas web lo más rápidamente posible.

23-herramientas-diseño-web 23 HERRAMIENTAS DISEÑO WEB

¿Cómo usar las herramientas de diseño web?

Cada una de las herramientas que se detallan a continuación requieren de un aprendizaje y sobre todo de una practica. La mayoría de ellas son muy intuitivas y no necesitan de muchas explicaciones aun así siempre puedes recurrir a Google o las especificaciones de los desarrolladores que son los que mejor te pueden resolver tus dudas.

Clasificación herramientas diseño web

Podemos dividir las herramientas en muchas clasificaciones pero creemos que una posible clasificación que nos permitirá hacernos una idea de lo que vamos a necesitar es en base a donde están alojadas.

Herramientas de diseño web en el navegador

Una de las herramientas que más se usa en el diseño web y que es imprescindible para los usuarios es el navegador web.

No hace falta señalar que deberemos tener instalados los navegadores que más se utilizan en la actualidad para que nuestros diseños o desarrollos sean lo más sables posibles.

Podemos encontrar los datos de uso de los navegadores web en el siguiente enlace.

23-herramientas-diseño-web 23 HERRAMIENTAS DISEÑO WEB

Además de la instalación de estos navegadores es bueno tener una serie de complementos que nos ayudan a que nuestro diseño sea más fácil y más ágil. Así destacamos algunas de ellas:

Extensiones

  • color-pick eyedropper. Es una herramienta que no se permite seleccionar el color de una imagen o de un texto ,incluso de cualquier elemento de la web.

Solo hay que pasar el puntero por encima del elemento en cuestión nos dará el código de ese color. Muy ´tuit para cualquier tipo de diseño.

23-herramientas-diseño-web 23 HERRAMIENTAS DISEÑO WEB

  • firebug. Uno de los complementos imprescindibles de cualquier diseño y desarrollador web, nos permite visualizar cada una de las cuestiones que pasan detrás de la visualización de una web. El código, las conexiones, el JS, etc. Necesitaría solo de un post para explicar todas las utilidades de este complemento
  • inspector web

Todos los navegadores web cuentan con un inspector web que podemos habilitar en cualquier momento. Algunos ejemplos los tenemos en:

  • Mozilla —> no solo nos brinda un inspector web con maravillosas posibilidades si no que además cuenta con un navegador específico para desarrolladores llamado Firefox Developer Edition.
  • Safari –> el  navegador predeterminado para Mac
  • Chrome –> Imprescindible para cualquier desarrollador y diseñador web que se precie. Como has visto más arriba el más usado en el mundo.
  • Web developer

Complemento ideal para un montón de funcionalidades de nuestra web a golpe de click.

23-herramientas-diseño-web 23 HERRAMIENTAS DISEÑO WEB

Un complemento muy útil para comprobar nuestros desarrollos Responsive. Gracias a  este complemento podemos ver con nuestro navegador como se vería en las diferentes pantallas de todos los dispositivos que hay en el mercado.

Herramientas de diseño web: software. Instalamos en nuestro ordenador

  • Sketch, una herramienta solo disponible para Mac pero impresionante en cuanto a su facilidad de uso y los buenos resultados que ofrece a la hora de trabajare diseños web.

Los complementos de sketch la convierten en una gran herramienta.

23-herramientas-diseño-web 23 HERRAMIENTAS DISEÑO WEB

  • Adobe Photoshop — un a herramienta que no necesita presentación lo que si necesitas es un curso a fondo para conocer todas las posibilidades que ofrece.
  • Illustrator junto con Photoshop han sido las herramientas que dominan el mercado del diseño y desarrollo web.

Herramientas diseño web: Editores de código

23-herramientas-diseño-web 23 HERRAMIENTAS DISEÑO WEB

Herramientas de diseño web online: Editores de código online

23-herramientas-diseño-web 23 HERRAMIENTAS DISEÑO WEB

Herramientas de diseño web online: color, letras, iconos, …

Para el color:

Necesitamos utilizar los colores en nuestros diseños por eso resulta imprescindible tener referencia de los colores que vamos a usar. Una herramienta completamente gratuita de adobe es su paleta de colores que podemos ver en el enlace: https://color.adobe.com/es/create/color-wheel/

Otra tarea importante a la hora de trabajar los colores es su combinación para ello podemos usar dos herramientas para diseño web que nos facilitan mucho esta tarea: http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF y colors.co  para crear tablas de colores

Iconos

Desde luego que cualquier página web necesita de unos iconos y nada mejor que este recurso para encontrarlos: flaticons

Bancos de imágenes

Los bancos de imágenes son mas que necesarios para ello dos buenos enlaces son Pixabay y Unplash: pixabay y unplash.

Prototipo y bocetos
  • Mockflow: para nuestro mockups y completamente online.
  • Invision. Una herramienta para el principio de nuestro diseños, muy buen opción.
Letras y sus variaciones:

Google Fonts Imprescinfible para nuestras letras y como no, otro recurso de Google gratis.

 

Reader Interactions

Deja un comentario

Tu dirección de correo electrónico no será publicada.

Share This