Cómo diseñar tu propia web paso a paso


Si deseas convertirte en diseñador web esta entrada está hecha para ti, pues hoy vengo a explicarte cómo diseñar una web paso a paso. Y como se trata de comenzar no lo haremos de modo difícil, sino con un sencillo portfolio a página única en el que, una vez implementado, podrás mostrar tu trabajo y aptitudes.

Para ello utilizaremos Adobe Illustrator CC como herramienta, y lo que aprendas aquí te servirá de base para poco a poco comenzar a diseñar páginas cada vez más complicadas. Así que no nos demoremos más y comencemos:

1. Crea tu mesa de trabajo

Una vez abierto Illustrator, ve al menú Archivo y selecciona Nuevo, cuando aparezca el panel de Nuevo Documento establece el ancho en 1200 píxeles y el alto en 2000:

![01][1]

Acepta. Este será el fondo de toda nuestra web.

2. Crea el encabezado

Ahora es el turno del encabezado o header de tu página, para lo cual utilizaremos la herramienta Rectángulo en el Panel Herramientas:

![02][2]

Desplazando el ratón crea un rectángulo a todo lo ancho de la página y con una altura de 600px. Los datos de alto y ancho puedes verlos a medida que deslizas el ratón, pero si necesitas corregir alguna medida puedes ir a la opción Transformar que verás arriba, en el panel de Trazado. Luego selecciona el color de relleno que más te guste, en mi caso he elegido el #0099FF.

Además he preferido utilizar una imagen con las mismas dimensiones del rectángulo para emplearla como fondo, lo cual le dará un atractivo extra a la página. Para ello selecciona el rectángulo que hiciste antes, ve al panel Transparencia que se encuentra en el menú Ventana y sitúa la Opacidad en un 70%. Luego coloca la imagen encima del rectángulo y presiona Clic derecho > Organizar > Enviar detrás. Te quedará así:

![03][3]

Ahora es el momento de insertar los menús que tendrá la página, para lo cual emplearemos la herramienta Texto:

![04][4]

Con sólo dar clic utilizando esta herramienta ya estarás creando un campo de texto, y en este caso crearemos tres: NOSOTROS, TRABAJOS y CONTÁCTENOS. Como fuente en este ejemplo he empleado Myriad Pro de tipo Regular con un puntaje de 18 píxeles, pero tú puedes utilizar la que más te guste.

Quizás te preguntes porqué incluir menús en una web de página única, pero lo cierto es que los menús, además de servir como herramienta principal para la navegación, le dicen al usuarios los contenidos que podrá encontrar en el sitio. También puedes incluir otros elementos como slogans o botones de acuerdo a las características de la página que desees crear. El resultado final se vería de esta forma:

![05][5]

##3. Crea el cuerpo de la página

Para el cuerpo de la página lo que haremos será crear las secciones que se especifican en los menús:

3.1 Sección NOSOTROS

Esta es nuestra primera sección, y para ella comienza creando el título con una fuente igual a la anterior, sólo que esta vez tendrá un puntaje de 28px y será de un color oscuro, en este caso el #003399.

Ahora crea el contenido utilizando dos áreas de texto de 500px de ancho por 350px de alto en las cuales insertarás tu texto. Colócalas de forma tal que las separe un espacio de 48px. Para medir espacios, alturas o lo que prefieras apóyate en la herramienta Medición que encontrarás si presionas durante unos segundos la herramienta Cuentagotas:

![06][6]

Para terminar esta sección, crea un botón utilizando la herramienta Rectángulo Redondeado. Las medidas serán de 218×44 píxeles, y para el color emplearemos el mismo #0099FF que empleamos en el rectángulo del encabezado. Luego escribe el texto que prefieras como información del botón, y ya terminaste:

![07][7]

3.2 Sección TRABAJOS

Aquí volveremos a utilizar un color de fondo para diferenciarla del resto. Para ello crea un rectángulo como el del encabezado, sólo que esta vez con una altura de 516px y con el color #86E3FC. Luego crea ocho rectángulos de 225x140px con una separación de 48px entre ellos, los cuales nos servirán de marco para incluir las imágenes que deseemos, como pueden ser los ejemplos de trabajos que hemos realizado. El resultado sería más o menos este:

![08][8]

No obstante, si lo prefieres, puedes incluir títulos encima, debajo o sobre las imágenes para brindar más información sobre su contenido.

3.3 Sección CONTACTO

Esta sección será muy simple y básica para mantener la sencillez de la página. Para ello crea el título con el mismo tipo de letra de los anteriores y luego incluye dos cuadros de texto debajo con un tamaño menor, uno para el correo electrónico y otro para el teléfono, aunque en realidad eres libre de agregar toda la información que prefieras. Te quedará así:

![09][9]

4. Crea el pie de página

Ya casi terminamos, sólo nos resta diseñar el footer o pie de página para nuestra web, y para ello crea un rectángulo de 60px de alto con el mismo color que utilizaste en el encabezado. Luego agrega el copyright de tu web y los íconos de redes sociales para que puedan contactarte también a través de ellos:

![10][10]

Estos íconos puedes encontrarlos en diferentes paquetes de logos sociales, y asegúrate de que sean de color blanco para que hagan un buen contraste con tu fondo.

5. Da los toques finales

Sí, ya hemos terminado nuestra web, así que es momento de revisar colores, posiciones, tamaños, formas, etc., para asegurarnos de que todo ha quedado a nuestro gusto. El resultado final debería ser similar a este:

![11][11]

Conclusiones

Como ves, diseñar una web puede ser muy fácil si sabemos exactamente lo que deseamos hacer y las funcionalidades que debe tener, así que te exhorto a probar lo que viste aquí para comenzar a estudiar y diseñar otras páginas más complejas. ¿Te he servido de ayuda? Si fue así déjamelo saber con un comentario.