reading-notes

READ 08: Wireframes

1. ¿Qué es un wireframe y cuál es su función principal en el proceso de diseño de un sitio web?

• EL wireframe vendría a ser el esqueleto o estructura de una web. Así mismo, es una forma de representar de manera sencilla cómo se organizará las diferentes secciones de website. Por lo tanto, su función sería la de permitirnos ver el sitio web antes de empezar el proceso de diseño para que se hagan los cambios respectivos de ser necesario y ahorrarnos trabajar ciegamente.

2. ¿Cuáles son las diferencias entre los wireframes de baja fidelidad y los de alta fidelidad, y en qué situaciones se recomienda usar cada uno?

• Wireframes de baja fidelidad: Suelen ser bocetos sencillos a mano alzada, rápidos hechos a lápiz y papel o con un programa sencillo de maquetación. Carecen de detalles, colores. Sólo formas que nos ayuden a ver una estructura como tal y en el proceso ver qué funciona y qué no sin tener que lidiar con colores, logos, imágenes. etc.

• Wireframes de alta fidelidad: Suelen, por lo general ser bocetos o dibujos más detallados, con mayor información y colores. Suele ser usado cuando ya se tiene una idea más clara de lo que se busca, habiéndo pasado primero por un wireframe de baja calidad como base. Dependiendo del tipo, suelen funcionar como prototipos en algunos casos.

3. ¿Por qué es importante realizar una investigación de usuario antes de crear un wireframe, y qué aspectos se deben considerar durante esta investigación?

Por medio de una investigación de usuario podríamos crear un wireframe que se ajuste a lo que los usuarios clave buscan, sabiéndo qué les gusta, cómo y dónde. De modo que conociendo quiénes son es que tendrremos un wireframe más aterrizado con el fin de tener una web funcional y armónica.

4. ¿Qué elementos clave deben incluirse en un wireframe para asegurar que se comunique efectivamente la estructura y funcionalidad del sitio?

• Elementos de navegación: Menús, botones, enlaces, etc. Estos elementos permiten a los usuarios moverse por el sitio web de manera fácil e intuitiva.
• Contenedor de contenido: Secciones para texto, imágenes, videos, etc. Estos contenedores organizan el contenido del sitio web de forma lógica y atractiva.
• Elementos de interacción: Formularios, botones de acción, etc. Estos elementos permiten a los usuarios interactuar con el sitio web, como realizar una compra, enviar un formulario o suscribirse a un boletín.

5. ¿Cómo contribuye CSS a lograr que el wireframe elaborado pueda ser desarrollado en una página web?

CSS es como el “maquillaje” del sitio web. Te permite cambiar el aspecto de los elementos del wireframe, como los colores, las fuentes y el tamaño de las letras. Con CSS, puedes convertir un wireframe simple en un sitio web bonito y atractivo. Es como darle vida al wireframe y convertirlo en una página web real.