En esta clase del Curso de Iniciación al Desarrollo Web vamos a observar cada uno de los pasos del diseño de una web y a comentar acerca de las herramientas que los diseñadores consideran necesarias y útiles para desempeñarlos. Se trata de un recorrido a vista de pájaro que nos permitirá conocer bien cuáles son las herramientas, programas y recursos más relevantes y usados por los diseñadores.

La intención es informar y orientar a los estudiantes, para que sepan qué herramientas se usan en la actualidad para cada tarea. Por la duración de la ponencia y el amplio abanico de recursos comentados, es imposible dedicar gran tiempo a cada una para indicar cómo se manejan, aunque siempre se ofrecerán referencias y ayudas para poder continuar aprendiendo a partir de aquí.

Esta clase está impartida por Joan Leon @nucliweb y se tituló "Brochas y pinceles para pintar la Web", dedicando la presentación a las siguientes clasificaciones de herramientas o fases del diseño: ­

• Wireframes | Prototipos | Mockup
  Es la etapa del prototipado, en la que simplemente tenemos que decidir qué partes contiene el sitio y cómo se organizarán en la web. ­


• Colores
  Buscamos la identidad de una web en base a su color, por medio de la elección de una paleta. ­


• Vectores o bitmap
  En la fase creativa utilizaremos diversos programas para definir el aspecto de una web, las interfaces, guía de estilo o plantilla, según las costumbres de cada diseñador. Para ello, dependiendo de con qué nos sintamos más a gusto, usaremos programas basados en vectores o en bitmaps.

  Entre vectores o bitmap se explicaron las particularidades de cada tipo de herramienta y por qué el diseño con vectorial se conoce a veces como "diseño sin pérdida". Eso no quiere decir que trabajar con vectores sea mejor o peor que con mapas de bits, sino que cada uno tendrá que elegir entre lo que más cómodo le parezca. Existen herramientas ideales para uno u otro tipo de diseño, desde herramientas complejas y a veces caras de adquirir a algunas más sencillas y accesibles, incluso gratuitas y no por ello menos avanzadas.

  Lo que sí tendremos que tener siempre en cuenta es diseñar a 72 píxeles por pulgada, que es lo que soporta la web, ya que los contenidos se ven siempre en monitores.­



• Guías de estilo
  Son documentos gráficos o mixtos entre gráficos y textuales, en los que se define cada uno de los elementos que podremos encontrar en una web y el aspecto que deberá tener. Está definiendo cómo se deben mostrar titulares de diversos niveles, botones de diversos tipos, menús, tooltips y todo aquello que se utilizará en una web, para que los maquetadores sepan cómo maquetar, y con qué estilo, cada parte de la web. ­


• Pasar a HTML5 y CSS3
  Este paso podremos realizarlo simplemente escribiendo nuestros códigos HTML y CSS, pero existen herramientas que nos ayudarán a exportar directamente desde lo que tenemos en Photoshop a los estilos que necesitaríamos con CSS3 para obtener el mismo resultado. ­


• Animación con HTML5 / CSS3
  Si quieres que tu web se mueva, que sea dinámica e interactiva, puedes usar también herramientas interesantes para realizar en web características parecidas a las que podrías hacer en Flash. Adobe ha estado rellenando el hueco que ha dejado Flash, que por diversas razones ya no es aconsejable para la web.

  En general, en esta charla encontrarás una inacabable fuente de recursos, herramientas y consejos para iniciarte en el diseño web profesional. Sobre todo para saber qué tipos de programas debes conocer y cuáles son las diversas alternativas que nos brinda el mercado en función de nuestras necesidades y objetivos.

Diapositivas de la presentación

Joan nos ha facilitado sus diapositivas, que se pueden obtener para descarga en PDF:

PDF presentación de Brochas y Pinceles para pintar la Web

Vídeo grabación de la clase de herramientas para diseñadores

A continuación puedes ver el vídeo con la grabación de esta clase dedicada a las herramientas para diseño web, en cada una de las etapas de su producción.