En esta clase la idea principal es cubrir las etapas del diseño de una web y analizar cuál es el modo de proceder al acometer un proyecto en el momento actual de la web, caracterizado por la afluencia de dispositivos, algo que todavía se acentuará en el futuro. Además, se trata de comentar las herramientas que un diseñador debe utilizar para mejorar la calidad de su trabajo y su productividad.

Este recorrido por el trabajo del diseñador, sus herramientas y etapas, que podrás aplicar a la mayoría de los proyectos web, forma la tercera clase del Curso de Introducción al Desarrollo Web y está impartida por Daniel Martínez @Wakkos, diseñador profesional en CoolVillage, creador de los webcast #designIO y profesor en EscuelaIT, entre otras ocupaciones.

Daniel comienza formulando una pregunta interesante, que para muchos aún tiene la misma obsoleta respuesta, ¿quien usa Photoshop para producir el diseño de una web?

La mayoría de las personas que responden usan Photoshop o alguna herramienta similar, pero la realidad del diseño web hoy la ha dejado poco aconsejable. Entre otras muchas razones que @Wakkos nos comenta en su clase, cuando diseñas con Photoshop estás dejando de lado los móviles y lo que vas a producir es un diseño que nunca vas a poder cumplir, porque en el panorama actual existen muchos tamaños de pantallas y la experiencia de usuario no será la misma desde un ordenador de Escritorio que desde un móvil.

Esta clase te ayudará tanto si tienes un proceso de trabajo definido, pues encontrarás que quizás tengas que modernizarlo, para ajustarlo a la realidad actual y aprovechar las herramientas más útiles para cubrir tus necesidades y ser más productivo.lo Si no tienes claro cuáles podrían ser los pasos para acometer un diseño web de la mejor manera, este vídeo te dará un buen punto de partida.

Encontrarás que durante el trabajo como profesional desarrollas unas costumbres y cada cual define unas etapas para la producción de un diseño propias. En este sentido debes intentar que tu proceso sean tan dinámico como puedas, o necesites. Haz de ese proceso de diseño y del dominio de las herramientas "tu propio framework", que podrás aplicar de una u otra medida en cada proyecto. Pero atención, esto no quiere decir que debas pasar por todos los pasos del proceso, tienes que ir aplicando los que cada trabajo requiera realizar, pero ten siempre en cuenta una cosa: el diseño lo vas a hacer directamente en HTML y CSS.

Esta es la introducción y declaración de intenciones de esta clase, "El proceso de diseño web", en la que Daniel expone, documenta y aporta herramientas para cada una de las etapas que él implementa en los proyectos de diseño. Según su experiencia son las siguientes.

• Inventario de contenido
• Wireframings
• Estructurar contenido
• StyleGuides & Pattern Libraries
• Diseño linear, comenzando por el móvil., para jerarquizar y estructurar descartando lo superfluo y definiendo los espacios.
• Gráfico de los breakpoints.
  En este punto es especialmente destacable la afirmación "o es responsive o no es una web", puesto que según @Wakkos, "el diseño web es diseño responsive".
• Prototipo en HTML.
  Es una tarea técnica, en el que te guias por lo que has definido en los pasos anteriores. El espacio para la creatividad lo has cubierto antes. por lo que no debería ahora hacerse demasiado larga o demasiado incierta esta fase. Tardarás un tiempo que dependerá sobre todo de tu habilidad y rapidez. Para eso están las herramientas, como editores o los programas y librerías que te ayudan en el proceso de producción para poder aumentar la productividad como los Preprocesadores CSS o para ver la web en todos los dispositivos a la vez que la estás editando con Gostlab.
• Presentar screenshots del prototípo
• Revisar y volver a producir, presentar screentshots
• Documento para producción

"Sobretodo debemos de tener en cuenta al usuario", debes ser amigable con el futuro y utilizar los lenguajes y tecnologías al alcance de los diseñadores para crear respaldos (fallback) de modo que diseñes un sitio para hacerlo "a prueba de futuro".

En esta clase debe quedarte claro que Desarrolladores y diseñadores deben conocer y dominar el "front" (el frontend, todas las tecnologías para maquetación web y programación del lado del cliente). Ese el punto de unión y el idioma en común de estos colectivos. Si tanto diseñadores como desarrolladores conocen el "front" los dos se pueden coordinar y colaborar mejor en los proyectos. "Equipos de trabajo son buenos cuando diseñadores y desarrolladores dominan el Front".

Video de la clase El Proceso de Diseño

A continuación puedes ver esta tercera clase del curso de Iniciación al Desarrollo Web.