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 y Maquetar Correctamente un Sitio Web en 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.

organizar-areas-de-una-web

  • 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

Analisis y dise�o de un sitio web antes de hacerlo

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.

Subir