+52 (81) 8359-7600
servicios@vital.com.mx

Maquetación Web

Abr

29

Maquetación Web

Diseño WebA la hora de diseñar una página web, uno de los puntos mas importantes a tener en cuenta es cómo queremos que se vea nuestra página hacia el usuario o cliente final. Para ello, una buena práctica es realizar la maquetación de nuestro sitio web.

Pero, ¿Qué es la maquetación web?  la maquetación es organizar o distribuir los elementos visuales que compondrán nuestra página web. Así, podemos diferenciar elementos como columnas, títulos, pie de página, etc.

Es aconsejable saber como vamos a distribuir nuestra página, saber donde queremos cada objeto. Para ello, podemos usar un papel y un lápiz (o cualquier otro programa como Firework, Photoshop, etc) y empezar a dibujar nuestro diseño de una forma sencilla, simplemente colocando cuadros y definiendo cual será su función.

Más tarde, programando en HTML y CSS, lograremos convertir nuestro diseño en una verdadera página web

Cabe destacar que, en la actualidad, las páginas web pueden ser vista desde muchos dispositivos tales como celulares, tablets… así que también es una buena opción preparar nuestra maquetación para esos dispositivos.

Más tarde, nuestro diseño lo podremos transformar en algo mas complejo definiendo cuales serán sus colores, si éstos serán sólidos o con degradados, que imágenes contendrá y dónde irán esas imágenes,  etc.

Como ayuda, les dejo 2 enlaces. El primero, nos ayuda a maquetar nuestro diseño de una forma sencilla y online, mientras que en el segundo podremos ver cientos de combinaciones de colores que podremos usar en nuestros diseños:

Luzmy
Kuler

Una vez que tenemos toda la estructura y las imagenes preparadas, podemos comenzar a escribir el código de nuestra página para transformar nuestro dibujo en una autentica web funcional.

Si decidiste que tu página se podrá ver en los diferentes dispositivos de forma que se adapte a la pantalla, te interesa hacer un desarrollo de forma responsiva, ya explicado anteriormente aquí.

Ismael Garrido Collantes – Departamento de desarrollo web.