Consejos para una buena maquetación web
Para una buena maquetación, lo primero que necesitamos es una herramienta imprescindible, lápiz y papel. Os preguntaréis para qué, pues muy fácil, para ahorrar tiempo que a la larga es dinero. Con esta herramienta podemos dibujar cómo queremos que quede nuestra página web y dónde se va a ubicar cada elemento (cabecera, barra de navegación, contenido, etc).
Una vez creada la web, ya podemos pasar a hacer un boceto de nuestra web utilizando la herramienta que más nos convenga, dónde aquí, ya le daremos diseño y estilos al contenido de la web. Es muy importante, en este paso, que el diseño sea factible para que no tengamos ningún inconveniente a la hora de pasarlo a html, sobre todo, si utilizamos bootstrap, que más tarde hablaremos de él.
5 Consejos imprescindibles ANTES de maquetar una web
- Se recomienda el uso de bootstrap para que la página sea responsive.
- Estudiar la estructura del boceto, psd o mockups de la página web, sobre todo, si usamos bootstrap, es decir, es necesario verificar que todos los elementos sean compatibles con las doce columnas de bootstrap. Además, hay que comprobar todas las fuentes y tamaños de letras y, por último, es conveniente estudiar el resto de elementos como imágenes, iconos, vídeos, banners, etc…
- Crear repositorio del proyecto con las estructura correcta, dónde irá todo lo necesario para la ejecución del proyecto.
- Disponer de todas las imágenes e iconos de la pagina aunque no sean las definitivas.
- Decidir fuentes y tamaños para el texto. No se aconseja tener muchas fuentes ni demasiados tamaños diferentes.
5 Consejos fundamentales A LA HORA de maquetar una web
- Utilizar netbeans o notepad++. Para ello, no se recomienda usar dreamweaver.
- Crear el proyecto con estructura de carpetas (img, js, css, fonts, etc)
- Facilitar un fichero index, css, y si es necesario js (javascript).
- En el index, enlazaremos todo lo necesario (link a bootstrap, jquery,awesome,fonts google y a nuestro js y css) en el orden correcto.
- Al usar bootstrap es necesario empezar siempre con la clase container o container-fluid. Dentro del container utilizaremos la clase row (filas). Dentro del row utilizaremos la clase col-xx-xx (columnas), esto es la base de trabajar con bootstrap y sus rejillas.
Consejos a la hora de maquetar bien
- Usar etiquetas correctas y no obsoletas
- No utilizar tablas para maquetar
- No emplear flash y evitar usar iframes y gifs
- Las fuentes y el tamaño de ellas, deben ser claras y que se vean bien, no utilizar, más de tres fuentes ni muchos tamaños diferentes.
- Mucho ojo con los colores que se utilizan y sus contrastes
- No utilizar imágenes muy grandes, ni muchos vídeos ya que tardará más en cargar la página. Es necesario siempre controlar la velocidad de carga de la página.
- MUY IMPORTANTE, las imágenes o iconos que vaya juntos tienen que tener el mismo tamaño, sino no se podrán alinear bien.
- Pasar el validador 3wc.
- Instalarse los navegadores más comunes y probar la página web en todos ellos que se vea bien, igualmente ver la página en diferentes dispositivos (móvil, tablet, pc)