Cómo estructurar un sitio web: ejemplos y herramientas

La explosión de Internet

Internet es un activo vital en casi todas las partes del mundo. Sería difícil encontrar a alguien que no haya oído hablar de él, por lo menos. Internet tuvo comienzos más humildes, comenzando como una red de comunicaciones militares (patrocinada por DARPA). Originalmente utilizado por unos pocos elegidos, ha crecido hasta el punto en que ahora llega a la mayoría de las personas en el planeta. Gran parte de ese crecimiento se puede atribuir a los deseos de personas de todo el mundo que desean conectarse con otras personas de mentalidad similar, en una amplia gama de temas. Ese crecimiento ha sido impulsado por muchas tecnologías habilitadoras. En particular, el sitio web.

¿Qué es un sitio web?

Un sitio web es una colección de texto, imágenes, películas y enlaces centrados en un tema en particular. La mayoría de nosotros estamos familiarizados con ellos, al menos hasta cierto punto, ya que Internet juega un papel importante en las comunicaciones globales. Cuando ingresa por primera vez a un sitio web, se le presenta una pantalla inicial de información y un conjunto de enlaces que le permiten recorrer lo que el sitio web tiene para ofrecer. Esto puede ser información directa, puede ser entretenimiento o pueden ser productos o servicios para la venta. Los sitios web suelen ser el primer punto de contacto que una empresa tiene con un cliente potencial.

¿Qué es un Wireframe de sitio web?

Una estructura alámbrica de sitio web es una plantilla de cómo se verá y hará un sitio web. Constituye la base para cualquier trabajo que se realice en el sitio web y permite que el equipo de diseño tenga una idea del sitio web antes de que todos los elementos estén en su lugar. También actúa como punto de partida para la discusión sobre el contenido y el recorrido. Muchas otras disciplinas usan una idea similar. Los fabricantes de automóviles, por ejemplo, utilizan esculturas de arcilla al crear nuevos diseños de carrocería. Los artistas digitales utilizan bocetos para planificar su próxima representación. Y los arquitectos usan modelos de cartón para planificar su último edificio. Cada uno busca suavizar las asperezas antes de invertir mucho tiempo y esfuerzo en el resultado final.

¿Qué aspecto tiene el wireframe de un sitio web?

La estructura alámbrica de un sitio web puede tomar muchas formas. El más simple se hace en una hoja u hojas de papel utilizando un lápiz o un instrumento de escritura similar. Contienen varias piezas de información útil, como se muestra en la imagen a continuación:

Ejemplo de estructura alámbrica

Se pueden crear ejemplos similares en la computadora usando un software que le permita dibujar y renderizar la estructura alámbrica. El resultado final proporciona la misma información: contenido, elementos incluidos y ubicaciones. Pero la versión generada por computadora generalmente tendrá un aspecto más profesional.

¿Cuáles son algunas herramientas utilizadas para estructurar un sitio web?

Hay muchas herramientas de wireframe de sitios web disponibles, cada una de las cuales ofrece un conjunto único de características. Algunos de los más notables son:

• Balsamiq: un paquete independiente disponible para Mac, Linux y Windows. Mantiene las cosas simples para fomentar una rápida respuesta y retroalimentación.
• Axure: Otro paquete independiente disponible para Mac y Windows. Es compatible con wireframes de sitios web y aplicaciones.
• Picodo: Otro paquete independiente similar a Axure. La principal diferencia es que está basado en la web.
• Visio: una aplicación disponible de Microsoft. Su interfaz de usuario es similar a la de todos los productos de Microsoft y proporciona uno de los conjuntos de características más grandes disponibles. Es compatible con Windows.
• InDesign: una aplicación disponible de Adobe que es compatible con Mac y Windows. Es compatible con estructuras alámbricas de sitios web y aplicaciones, y tiene la capacidad de crear bibliotecas de elementos que se pueden usar en todos los proyectos.

Resumen de la lección

Un sitio web es un conjunto de texto, imágenes, películas y enlaces centrados en un tema específico. La estructura metálica de un sitio web es una maqueta o una hoja de ruta de cómo se verá y hará un sitio web. Los wireframes de sitios web pueden ser simples imágenes dibujadas a mano creadas en papel o salidas generadas por computadora que tienen un aspecto profesional. Hay una serie de paquetes de software de estructura alámbrica de sitios web disponibles, cada uno de los cuales ofrece algo único.