🖌️ Diseña tu sitio web antes de programarlo. Hazlo así...

Es muy difícil programar un sitio web (y en general, cualquier aplicación), sin tener ninguna referencia visual de cómo podría ser. Aún teniendo una gran imaginación, hacerlo así, es como lanzarse de un avión en vuelo, sin paracaídas. No empieces a programar sin tener un buen diseño. Porfas.

Antes de comenzar a teclear código, necesitas tener en cuenta todo lo que quieres que contenga aquello que vas a programar. Lo más común, es hacer dibujos en papel o sobre un pizarrón, como guía visual y estructural de los elementos del proyecto. Pero, no es lo mejor que puedes hacer. De veras.

Usa Illustrator: Una herramienta que te permitirá hacer rápida y fácilmente el diseño de un proyecto digital, con varios beneficios…

BENEFICIOS DE MAQUETAR CON ILLUSTRATOR

Cuando yo empecé a programar en web (Hace poco, de hecho), intenté migrar mis burdos diseños del papel, a un editor gráfico. Me vino bien que en días pasados había estado aprendiendo a usar Illustrator, sobre todo porque terminé dándome cuenta de lo bien que resuelve esta tarea.

Creí haber descubierto una idea única y revolucionaria. Hasta que me dí cuenta que a esto se le llama Maquetación. Y que es, de hecho, la forma más popular de coordinar el trabajo del diseñador con el del programador en un mismo proyecto.

En fín, terminé dándome cuenta de que, con Illustrator…

• Puedes exportar tu diseño en PDF y abrirlo en un navegador para ver, cómo se vería un sitio web, en tamaño real, como si ya estuviese programado.

• Te facilita aprender los conceptos básicos de CSS, como: dimensiones, bordes, rellenos, etc. Illustrator trabaja estas y más características, del mismo modo que CSS. Ya lo descubrirás.

• Permite exportar los recursos individuales del proyecto (Assets), individualmente. Como imágenes o iconos, y en formatos como svg o png. Esto para usarlos directamente al programar el sitio. Más información, aquí.

• Te permite entender de forma clara, toda la estructura de tu sitio web / aplicación, tanto las dimensiones, como la posición de cada elemento que lo compone. Al programarlo, podrás aprovechar todos estos datos, para agilizar el proceso de desarrollo.

¿QUÉ DEBO APRENDER PARA USAR MAQUETAR CON ILLUSTRATOR?

Para comenzar a maquetar, las herramientas de Illustrator que mejor te ayudarán, son las siguientes:

1. Creador de rectángulos y círculos.
2. Inspector de dimensiones.
3. Inspector de coordenadas.
4. Colores de relleno.
5. Colores de borde.
6. Creador de texto.

Ya te darás cuenta de cómo estas herramientas son extremadamente fáciles de usar, y te permitirán empezar a ver tu idea antes de programarla.

Consulta el Curso de Illustrator de Platzi, si quieres aprender rápidamente a manejar esta herramienta.

Un tip personal: Cuando hagas la maqueta de un sitio web, al crear el documento en Illustrator, usa 1400px de ancho. para la mesa de trabajo. Esto en base al tamaño promedio de un sitio web.

Las medidas del largo, dependen de qué tanto contenido agregues a tu diseño, este lo puedes ir ajustando. En promedio un monitor deja ver entre 680 y 700 px a lo alto de un sitio web, con zoom normal.

En conclusión, Illustrator es una herramienta que facilita hacer maquetas de un sitio web o cualquier otra aplicación, rápido y fácil. Para que antes de programar, sepas, qué vas a programar.

Te invito a compartir en los comentarios, el diseño del proyecto en el que estás trabajando exportado en pdf o png, así como alguna duda que tengas con respecto a mi propuesta. Yo compartiré el boceto que hice para mi portafolio de proyectos personales. Por favor, dime qué te parece. ¿Qué mejora le harías?

Si te ha servido de ayuda este pequeño artículo, estaré más que satisfecho.

.