EL MUNDO ESPAÑA

Wireframe El Mundo

El periódico elegido para este práctico es El Mundo España, un reconocido diario español con sede en Madrid. Actualmente, cuenta con presencial digital de escritorio, aplicación para móvil y también formato impreso.

Se toma como referencia este medio ya que presenta gran versatilidad en distintos formatos, además de poseer una estructura compleja en cuanto a estructura y diagramación.

Nota de referencia: Sánchez eleva en 43.000 viviendas más su promesa de alquileres asequibles y el PP lo tacha de «plato recalentado» (19 de Abril 2023), Marisa Cruz en El Mundo España. Ver nota completa

 

Grilla actual

Se determina una grilla a 12 columnas centradas, con un ancho de 70px y una separación de 16px entre sí

 

 

Formato base

1440x1024px

 

Plataforma

Desktop

 

Columnas

12

 

Ancho

70px

 

Espaciado

16px

 

 

Detalle técnico de la grilla utilizada

 

Mockup baja fidelidad

Tomando como referencia una página con el detalle de una noticia, se genera el wireframe para identificar los distintos elementos que componen la diagramación de la página. Se identifican los siguientes elementos:

 

 

Encabezado

• Header principal. Con el logo del periódico, las categorías principales de noticias, el menú hamburguesa, botón de suscripción e inicio de sesión
• Header secundario superior. Con categorías dinámicas en función a las noticias del día
• Header secundario inferior. Con categorías según la región de España y un botón de Más +

 

Información de la nota

• Categoría. A la cual pertenece la nota. En este caso, Congreso
• Título principal
• Bajada o descripción inicial
• Autor/a con link a perfil y redes sociales. Además de botón para ver Comentarios
• Caja con Suscripción al newsletter
• Imagen principal con pie de foto
• Cuerpo del mensaje
• Sección lateral con citas destacadas
• Notas relacionadas
• Publicidades y enlaces patrocinados
• Comentarios

Detalle del wireframe en relación a la grilla

En el siguiente videos, se puede visualizar todo el proceso en forma progresiva:

▶️ Ver video del prototipo

 

 

Este trabajo fue realizado en Figma

 

Para ingresar al prototipo completo, ingresa aquí