No hay un único flujo de trabajo correcto para construir un sitio web. Pero sí maneras de mejorarlo y hacerlo más eficiente.

Ya sea en diseño o en desarrollo de código siempre hay oportunidad de racionalizar el proceso, esto se hace de diferente forma dependiendo de si se trabaja solo o en un equipo, de cualquier manera si se conoce como ajustar el proceso se puede hacer un proyecto ahorrando tiempo y dejando de lado algunas tareas manuales

En este caso nos centraremos en compartir estrategias comunes que optimizan el flujo de trabajo de la parte de diseño y desarrollo de un proyecto web, en otras palabras veremos consejos y recursos útiles para el proceso creativo así como procedimientos que ayudan a los diseñadores y desarrolladores web a ser lo más precisos posible.

Partir de un Esquema de Página (Wireframe)

Comenzar con un «esquema de página» en cada proyecto web ayuda a dar cuerpo a las ideas para el contenido, el estilo de diseño y la organización de los elementos de la página como el logotipo, la barra de navegación y los botones de Llamada a la Acción (Call to Action – CTA)

El objetivo inicial debe ser la construcción de bocetos de diseño con esquemas de página de baja fidelidad. Hacerlos rápido y de manera simple. Con esto se identificarán rápidamente las malas ideas y se enfocará en las buenas.

Si se quiere partir de un wireframe existente aquí hay una buena muestra de esquemas gratuitos.

Sin embargo, trabajar con papel y lápiz es bastante mejor para hacer bocetos, se pueden modificar las posiciones rápidamente y transformar las ideas usando el borrador.

No temas tener 10 o más bocetos diferentes al inicio de cada proyecto esto es sumamente útil para definir junto con el usuario la disposición y funcionalidad de los elementos que se quieren manejar en cada pantalla y no necesariamente todos estarán de acuerdo con el primer boceto.

De ser posible define con el cliente el boceto definitivo completo antes de pasar a una maqueta de alta fidelidad. De esta forma tienes menos dudas al concebir la arquitectura del sitio y cada etapa del desarrollo aclarará los conceptos originales que ya estén contemplados en el papel.

Mientras más fácil sea crear el boceto más útil será en cuanto a plasmar la experiencia del usuario (UX) en el diseño y posterior desarrollo.

Planificar el contenido y los comportamientos

Cuando ya se tiene una idea de como se verá el sitio se puede empezar con los detalles, muchos equipos de desarrollo o freelancers inician en este punto un boceto digital de alta fidelidad.

Este boceto deberá tener una mínima programación de eventos y el contenido más ajustado posible a la versión final. La estructura se debe ver bien ordenada y los elementos de navegación deben en lo posible guiar al usuario de una manera natural a través del sitio web.

Esta es una tarea difícil que es diferente para cada caso pero que definitivamente ayudará a conocer en las pruebas, como se comportan los usuarios en nuestra estructura propuesta y si es mejor que cambiemos algo para facilitar la experiencia de nuestro visitante.

Este boceto también traerá marcadores de posición de imágenes y ejemplos de títulos y listas que nos darán una idea de conjunto de como se verá el contenido definitivo.

Pero lo que es más importante, tendremos la oportunidad de empezar a escribir textos y definir elementos que llamen la atención del visitante en los pocos segundos que tenemos mientras el usuario «escanea» el sitio.

En cuanto a la disposición, es importante trabajar sobre 2 conceptos. Un buen contraste y el manejo del espacio en blanco.

Si tenemos elementos apilados y sin «aire» se volverán rápidamente aburridos, los grandes párrafos de texto en letra pequeña sin espacio suficiente entre líneas son por lo general motivo de cansancio.

El contenido bien distribuido con espacios suficientes, con párrafos cortos que inviten a lecturas más extensas que se muestren bien acondicionadas, con imágenes alusivas y con detalles de alineación de texto que brinden un toque elegante harán la diferencia entre sí la visita se va inmediatamente o se queda a mirar el contenido.

El tipo de letra y el color del texto no son importantes en este paso.

Con este boceto de alta fidelidad podremos movernos de manera mucho más ágil en los pasos siguientes.

Usar Frameworks

Hay una cantidad cada vez mayor de frameworks que pueden ahorrar tiempo en la construcción de un nuevo sitio web, algunos incluyen librerías javascript muy populares como React, Angular y Ember. El objetivo no es solamente racionalizar el desarrollo sino crear fácilmente la arquitectura del sitio web completo.

La función del framework es separar las funciones de desarrollo complejas y ayudar a construir todo con el menor código posible.

Una de las características fundamentales de los frameworks es su capacidad de ser modulares lo que permite «armar» un nuevo proyecto con los módulos que mejor convienen al propósito del sitio web.

Hacer Pruebas y Depuración del Código

Para estar seguros de que nuestro sitio web se verá de manera similar en la mayoría de los navegadores conocidos, tenemos que correr pruebas para cada sección en los tamaños en los que hemos definido el usuario podrá ver el sitio.

La manera más rápida de hacer pruebas es tener los navegadores populares instalados en nuestro equipo y correr pruebas de nuestro proyecto en cada uno de ellos utilizando además las herramientas para desarrolladores que nos permiten probar distintas configuraciones de tamaño.

Cuando las pantallas a probar superan un número importante, puede ser mejor que utilicemos servicios de depuración y pruebas como:

Para probar la versión responsiva de nuestros sitios se puede utilizar:

Para verificar los errores Javascript los navegadores más conocidos traen una consola preparada para depurar los comportamientos que estén fallando.

No hay una única manera para crear un flujo de trabajo correcto en la web. Pero las mejores prácticas y técnicas que se pueden adoptar pueden hacer el proceso más suave y más fácil de manejar.

Actualmente es mucho más fácil construir y poner en marcha un nuevo sitio web, de lo que era hasta hace pocos años, sin embargo algunos pequeños consejos de cómo encarar la tarea pueden hacer un mundo de diferencia en el largo plazo.