Cómo armar y maquetar correctamente un sitio web en Illustrator
No esta de más crear una imagen visual de la apariencia que quieres que tenga tu web. Maquetar tu sitio web antes de construirlo, te puede dar una idea de cómo se verán los elementos y qué necesitas. Es un proceso sencillo que puedes hacer desde Illustrator.
Cómo armar un sitio web en Illustrator
Cualquier versión de Illustrator puede ser útil, ya que solo utilizaremos herramientas básicas de la aplicación. Antes de comenzar ten en cuenta que todos los elementos de un sitio web deben estar a un clic de distancia y menos siempre, es más.
Configurar el documento
- Abre la aplicación de Illustrator.
- Crea un nuevo documento, utiliza el comando de acceso rápido Ctrl + N.
- Escribe el nombre del archivo.
- Coloca las dimensiones de la hoja. Estas medidas corresponden a una imagen en un monitor grande.
- Anchura 1024 px.
- Altura 1479 px. Este valor puede variar de acuerdo con los elementos que necesitas agregar a tu web.
- Elige orientación vertical.
- Como se trata de un diseño enfocado en un resultado digital elige el modo de color RGB.
Organiza las áreas de la página web
En este punto ya debes tener claro cuáles son los elementos que quieres agregar a tu página web. Agrega rectángulos de color para dividir las áreas de una página, como la cabecera, cuerpo y pie de página.
- Al finalizar bloquea la capa para no mover estos elementos.
- Crea una nueva capa para colocar los elementos de la web.
Dentro de cada área haz una subdivisión para cada contenido. Por ejemplo, un cuadro para señalar el lugar donde va una imagen o rectángulos para demarcar el lugar de un texto.
- Bloquea esta nueva capa y crea otra para el contenido como los botones, imágenes y texto.
Agrega líneas guías
Usa las líneas guías como referencia para que cada elemento de la web se coloque de forma adecuada. Las imágenes, el texto, el logo y los botones se tienes que mostrar bien estructurada.
- Haz un clic simple sobre la regla de la mesa de trabajo y arrastra el cursor hasta un punto de la hoja.
- Puedes desactivar las guías en cualquier momento presionando las teclas Ctrl + punto y coma.
Inserta los elementos de la web
Ahora agrega todos los elementos que tiene tu web. Agrega el logotipo en la cabecera junto con el título o un banner. Las imágenes y lo gráficos son importantes para darle un acabado real, así como los iconos de redes sociales.
Agrega el texto de la página teniendo en cuenta el estilo de la fuente que vas a utilizar, al igual que los botones. A medida que avanzas puedes ver con más claridad cuáles elementos necesitas y de cuáles puedes prescindir.
Agrega colores
Para finalizar desbloquea las dos capas anteriores y elimina los bloques grises en cada área del sitio web. A cada área como la cabecera, el cuerpo y el pie de página asígnale el color que tendrán.
A los demás elementos como figuras o textos dentro del sitio también debes asignarle un color. Cuando todo esté listo guarda el documento con la opción Archivo/ Guardar para web, para guardarlo en un formato ligero.
Razones para maquetar un sitio web
En el desarrollo profesional de cualquier sitio web, el proceso de análisis es fundamental para que el proyecto tenga éxito. La idea es poder interpretar gráficamente la apariencia de un sitio y ahorras muchas horas de programación.
Al maquetar un sitio puedes entender cómo funciona y si el planteamiento inicial cumple con los requisitos para ser una solución viable. Mostrar una imagen gráfica del sitio al cliente antes de comenzar ahorra mucho tiempo en rediseño.
El diseño inicial te da una idea del comportamiento de la página y la distribución del contenido. Mientras más sencillo se muestre está imagen inicial, es más fácil de interpretar.