Diseño y maquetación

Hay dos fases en la construcción de las webs que realizamos y entiendo que para nuestros clientes es interesante conocerlas. Estas dos partes son: el Diseño y la Maquetación.

Hay muchos diseñadores que maquetan al mismo tiempo que diseñan o viceversa. Yo creo que es un error. Creo que diseñas mejor cuando solo diseñas y creo que maquetas mejor cuando solo maquetas. Pero ¿qué diferencia hay? Te explico que es cada cosa:

Un boceto o wireframe no es más que un dibujo donde se representa visualmente, de una forma muy sencilla y esquemática la estructura de una página web. El objetivo de estos es definir el contenido y la posición de los diversos bloques de tu web.

Tengas ya la imagen de marca, logotipo, colores… o tengas que crearla lo siguiente es convertir esas ideas en un prototipo gráfico de lo que sería la web. Para esta tarea uso una impresionante herramienta que es Adobe XD.

Adobe XD permite diseñar interfaces digitales para webs y aplicaciones móviles. Se pueden crear propotipos que incluso simulan la navegación real de una web.

Para los diseñadores web es importante contar con una herramienta que les permita comprobar el buen funcionamiento de la web que están diseñando antes de maquetarla. Adobe XD es la herramienta perfecta: permite presentar prototipos online y simular la interacción real del usuario antes de maquetar el diseño para la web.

Una vez tienes el diseño terminado y aceptado por tu cliente pasamos a la fase de maquetación.

La maquetación es el proceso en el que el prototipo gráfico creado en nuestro caso con Adobe XD pasa a transformarse en código html, css y js para que los navegadores puedan leerlo correctamente siguiendo los estándares web.

Para maquetar nosotros utilizamos Divi. Divi es un maquetador Premium que permite colocar y dar estilo a los elementos previamente  creados con XD.

En nuestro caso, también usamos cada vez más la propiedad flexbox dentro de Divi. Esta propiedad CSS3 nos permite mejorar mucho la colocación de los elementos para que se comporten de forma predeterminada y se ajusten correctamente a los diferentes tamaños de pantalla y dispositivos.

El proceso de maquetación termina cuando el cliente puede ver su web terminada desde cualquier navegador. Las dos fases, diseño y maquetación, son imprescindibles para obtener una web atractiva para tus clientes.