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.