Consejos básicos para una buena maquetación web

La maquetación web se basa en transformar el diseño de la misma en un conjunto de archivos (html, css y js) para que los navegadores puedan interpretarlos y reproducirlos en diferentes dispositivos. La maquetación es una fase avanzada del proceso de desarrollo web. Para ello,  es conveniente el uso de  bootstrap para que la página sea responsive.

En la maquetación web hay que estudiar la estructura del boceto, psd o mockups de la web, para comprobar que todos los elementos sean compatibles con las doce columnas de bootstrap. También hay que asegurarse de todas las fuentes y tamaños de letras, así como las imágenes, iconos, vídeos, banners, etc… A continuación, hay que diseñar el repositorio del proyecto con la estructura correcta, donde aparezcan todas las partes integrantes y necesarias del proyecto. No olvidar recopilar todas las imágenes e iconos de la página, aunque sean provisionales. Habrá que escoger fuentes y tamaños para el texto, que no deberán ser ni muy numerosos ni con mucha variedad de tamaños. 

En Somos Sinapsis, agencia de desarrollo de negocios en internet, que entre otros servicios, son especialistas en diseño y maquetación web, dan los consejos fundamentales en los que basar esta tarea.

La maquetación web paso a paso

• Emplear para programar netbeans o notepad++, preferentemente Para ello, no se recomienda usar Dreamweaver, la aplicación informática destinada a la construcción, diseño y edición de sitios y aplicaciones Web basados en estándares.
• Emplear para la creación del proyecto una estructura de carpetas (img, js, css, fonts, etc)
• Usar ficheros index, css, e incluso js (javascript).
• Enlazar en el index todo lo necesario en su justo orden.
• Emplear etiquetas correctas y actualizadas.
• Evitar emplear tablas para maquetar, ni flash, ni iframes ni gifs
• Las fuentes y su tamaño deben ofrecer claridad y buena visibilidad, evitando emplear más de tres fuentes y demasiados tamaños diferentes. Debe haber  equilibrio en este sentido. 
• Prestar especial atención a los colores empleados y cómo contrastan entre sí.
• Es recomendable que las imágenes no sean de gran tamaño ni que abunden los vídeos, para no entorpecer la velocidad de carga de la página.
• Las imágenes o iconos que aparezcan juntos, deben ser del mismo tamaño para que queden perfectamente alineadas.
• Utilizar el validador 3wc.
• Probar la página web en los navegadores más comunes, para comprobar cómo se ve, así como en diferentes dispositivos (móvil, tablet, portátil).

Estos serían los consejos básicos para el diseño y maquetación web, pero si no te ves capaz de aplicarlos correctamente sin correr riesgos, lo más recomendable es que acudas a los profesionales, como Somos Sinapsis.