2.3. Wireframe de una página

En la tercera parte de esta actividad, se nos solicita crear un wireframe de una página web. Decidí elegir el sitio web de National Geographic por su calidad y relevancia en el mundo de la ciencia y la exploración.

Después de analizar y comparar los principios de diseño de interacción en diferentes páginas web, opté por prototipar una de las páginas más visitadas en el sitio de National Geographic: el artículo de una expedición reciente. Para ello, estudié varias entradas y analicé su estructura, manteniendo un patrón común que se representa a continuación mediante un wireframe.

Aquí puedes ver mi wireframe en alta calidad

Para el diseño del wireframe, he utilizado una retícula de 12 columnas. En la cabecera superior, se incluyen la barra de navegación y debajo el menú principal con la barra de búsqueda y el menú en formato hamburguesa.

El cuerpo de la noticia se encuentra en la parte izquierda, y ocupa 9 de las 12 columnas de la retícula. En la parte derecha, se incluyen anuncios en color y debajo noticias relacionadas que ocupa 3 columnas de la retícula.

En general, el diseño del wireframe es muy claro y legible, con una distribución de elementos muy coherente que hace que la noticia sea fácilmente accesible para el usuario. Además, se destaca la importancia que se le da a las imágenes, ya que ocupan una parte significativa del wireframe.

Para realizar esta práctica he utilizado la herramienta Figma, ya que es la que suelo usar en mi trabajo de forma habitual.

Deja una respuesta