Publicado por

PEC2 – Wireframe periódico digital EL PAÍS

PEC2 – Wireframe periódico digital EL PAÍS
Publicado por

PEC2 – Wireframe periódico digital EL PAÍS

  PEC 2 – 3ª parte. Wireframe de una página M4.350- Diseño Int: procesos, métodos y técnicas   Para la realización de esta…
  PEC 2 – 3ª parte. Wireframe de una página M4.350- Diseño Int: procesos, métodos y técnicas   Para la…

 

PEC 2 – 3ª parte. Wireframe de una página

M4.350- Diseño Int: procesos, métodos y técnicas

 

Para la realización de esta práctica he decidido escoger el periódico  , del que soy usuaria en sus versiones digital y de aplicación móvil.

El siguiente wireframe, en versión low fidelity, nos sirve para representar la estructura de interacción de este periódico en su versión digital para web. Para esta representación se ha escogido pa pagina o sección principal del periódico visualizado en un escritorio de 23″, aunque a partir de los 1200px de ancho, la estructura es la misma, ya que sigue un diseño responsive de 12 columnas adaptable al visualizador del usuario.

El diseño se ha realizado con la herramienta de edición y generación de prototipos Figma.

Wireframe periódico digital EL PAIS
Wireframe periódico digital EL PAÍS en su versión de escritorio

Añado también una imagen comparativa con la versión real del periódico digital (derecha) , junto al wireframe de la versión de baja fidelidad (izquierda).

Comparación wireframe y versión digital del periódico EL PAÍS
Comparación wireframe y versión digital del periódico EL PAÍS

 

 

Debate0en PEC2 – Wireframe periódico digital EL PAÍS

No hay comentarios.

Publicado por

Wireframe La Voz de Galicia

Wireframe La Voz de Galicia
Publicado por

Wireframe La Voz de Galicia

Hola, Como periódico he escogido La Voz de Galicia, un periódico que llaman «de esos de toda la vida». Su formato original…
Hola, Como periódico he escogido La Voz de Galicia, un periódico que llaman «de esos de toda la vida».…

Hola,

Como periódico he escogido La Voz de Galicia, un periódico que llaman «de esos de toda la vida».

Su formato original era en papel, pero en los últimos años se ha pasado al mundo digital, primero de manera gratuita y ahora intentan ganar suscriptores. Esto último no está saliendo todo lo bien que debería, puesto que una vez que acostumbras al usuario o inter-actor a que algo sea gratuito, es muy difícil que quiera pagarlo después si no le ofreces ninguna ventaja adicional.

¿La falta de suscripciones que provoca? Que nos encontremos una web con bastantes anuncios y que el diseño se tenga que adaptar a ella, lo mismo que pasaba en el papel con la publicidad y los módulos…

Centrándonos en el tema principal y no tanto en los anuncios, para el wireframe he escogido el diseño de la página principal de la web. Como podemos ver, hay elementos que se mantienen fijos, como la cabecera y la publicidad lateral (También existe una publicidad inferior pero esa sí permite cerrarla).

Os adjunto una captura de pantalla del scroll completo, y después el wireframe de los elementos fijos que se mantienen en todas las pantallas a medida que haces scroll, son básicamente la cabecera y la publicidad de los laterales.

Una vez que tenemos localizados los elementos fijos que se mantienen en todo momento en la pantalla, adjunto el wireframe que hice de la página de inicio. No he hecho todas las secciones porque se repiten bastante en cuanto al sistema de columnas, pero sí he realizado todas las variaciones que había.

Como podéis ver el sistema de retículas va variando en las diferentes secciones, cambian los medianiles. En cuanto al diseño mantiene bastante la esencia de uno en papel, si bien es cierto que el sistema de retícula no queda muy claro, juega con los destacados y con los filetes, como un periódico más tradicional.

En cuanto a las tipografías también hacen uso de diferentes tamaños y grosores pero utilizan un palo seco en lugar de una tipografía con serifa, esto lo hacen porque en papel es más sencillo leer las líneas con serifa porque hace de falsa línea y te permite seguir la lectura con mayor fluidez.

Lo que me desconcierta es el uso de las columnas, pero estas se van alternando de cierto modo y además yo supongo que también se hace en función de la publicidad que toque en el día.

Tampoco le encuentro ninguna lógica a nivel diseño el por qué algunos pies de página van en versalitas y otros en caja baja, pensé que podría ser por el tipo de descripción o si es el autor de la foto, pero aparentemente no tiene nada que ver.

Por último, que creo que es un punto positivo para el online, permite el uso de colores, cosa que en las tiradas de periódico no se hace porque elevan los costos.

Espero que os haya servido de ayuda mi wireframe y mi análisis sobre La Voz de Galicia.

Gracias por leerme.

 

Enlace al periódico:

La Voz de Galicia. (n.d.). Retrieved November 15, 2022, from https://www.lavozdegalicia.es/

Debate0en Wireframe La Voz de Galicia

No hay comentarios.

Publicado por

PEC 2 – Wireframe de el Periódico

PEC 2 – Wireframe de el Periódico
Publicado por

PEC 2 – Wireframe de el Periódico

¡Hola a todos/as! Para esta entrega, analizamos los medios de comunicación tradicionales, en este caso un periódico, para ver cómo se integra…
¡Hola a todos/as! Para esta entrega, analizamos los medios de comunicación tradicionales, en este caso un periódico, para ver…

¡Hola a todos/as!

Para esta entrega, analizamos los medios de comunicación tradicionales, en este caso un periódico, para ver cómo se integra y evoluciona su diseño en los entornos digitales. 

Sin duda alguna, la tecnología avanza desenfrenadamente, y con ello, va acompañada de las necesidades de los usuarios que deben ser cubiertas. Es por esto, que los medios de comunicación se han tenido que adaptar a tiempo record para no perder lectores y lectoras. De hecho, es algo que continuamente se debate: ¿tiene una vida limitada el periódico en papel?, ¿será reemplazado estos por el formato digital?, ¿cómo puede repercutir este fenómeno en la economía de los diarios? Recomiendo esta entrada para que le echéis un vistazo y conozcáis más acerca del tema. 

El Periódico de Catalunya o más conocido como, el Periódico, se fundó en 1976 en Barcelona de la mano de Antonio Asensio Pizarro (Wikipedia, s.f). Una de sus señas de identidad es, que se trata de un diario que pública en catalán y en castellano desde 1997 (Enciclopèdia CAT, s.f). Ya desde sus inicios ha sido un medio en el que su línea editorial ha estado estrechamente vinculada al Partit Socialista de Catalunya (PSC) (Lluent, 2015). El Periódico cuenta con una media de 27,5 millones de lectores únicos en su formato digital y en 2021 experimentaron un crecimiento de hasta un 5% de suscriptores (Carbó, 2021). De esta forma, no solo ganan lectores sino que fomentan la suscripción mediante pago de este medio en formato digital. 

Noticia extraída de el formato de papel - 14 noviembre 2022
Noticia extraída de el formato de papel – 14 noviembre 2022

A continuación, os muestro el wireframe de la entrada de una noticia en el Periódico. En este caso, tratamos una noticia de la sección Internacional (Loeb, 2022). La escogí dado que me llamó la atención cómo dicha noticia cambiaba su formato en el periódico físico y cómo se muestra en el formato digital. 
Una de las cosas que más me llamó la atención fue, en cómo el diseño del Periódico está rodeado de estímulos para el lector/a. Es decir, intuimos que hay atajos para regresar a la Home (como hacer click en en logo), a secciones destacadas, a medios de comunicación colaboradores con este medio, etc. Y cómo se organiza el scroll de la página web para que una vez finalices la noticia, no sólo te sugiera entradas similares a la noticia, sino que te regresa inmediatamente al contenido de la Home. Lo cual me resulta redundante y bastante frustrante para la navegación, ya que parece que la lectura de la web no se acabe nunca. 

Sobre las cuestiones técnicas del prototipo, comentar que su estructura consta de un grid de 12 columnas en márgenes de 200 px y un gutter de 20 px. De esa manera, consiguen aprovechar y alinear todos los elementos interactivos en la web.

Foto del wireframe aplicando el grid

¡Gracias por leerme!

Nos vemos en una próxima entrega.

Patricia Rubio

 

Bibliografía consultada:

Debate0en PEC 2 – Wireframe de el Periódico

No hay comentarios.

Publicado por

PEC 2: Wireframe La Vanguardia

Publicado por

PEC 2: Wireframe La Vanguardia

He realizado el Wireframe de la pagina principal de la web del diario » La Vanguardia «. Aunque los medios digitales superan…
He realizado el Wireframe de la pagina principal de la web del diario » La Vanguardia «. Aunque los…

He realizado el Wireframe de la pagina principal de la web del diario » La Vanguardia «. Aunque los medios digitales superan con creces a los físicos hoy en día, creo que todos los formatos tienen sus pros y sus contras. En el caso de la web de » La Vanguardia «, está muy saturada de publicidad, la cual no puedes desactivar ni evitar de ninguna forma, y te obliga a pagar para acceder a algunas funciones. Por otro lado, es verdad que resulta mucho mas cómodo y accesible consultar la web o la app que comprar un periódico cada día.

En el wireframe podemos observar como han utilizado la clásica disposición de 12 columnas para colocar iconos, botones y banners, pero han dejado unos márgenes muy amplios para conservar la verticalidad y a veces mostrar publicidad en ese espacio.

Debate0en PEC 2: Wireframe La Vanguardia

No hay comentarios.

Publicado por

PEC 2 . Wireframe portada 20minutos

Publicado por

PEC 2 . Wireframe portada 20minutos

Para el wireframe, he escogido la portada del periódico 20minutos edición papel. Los medios digitales tienen muchas ventajas en cuanto a actualización…
Para el wireframe, he escogido la portada del periódico 20minutos edición papel. Los medios digitales tienen muchas ventajas en…

Para el wireframe, he escogido la portada del periódico 20minutos edición papel. Los medios digitales tienen muchas ventajas en cuanto a actualización de la info, disponibilidad, contenido ilimitado… pero a mí personalmente me resulta mucho más atractivo a nivel lector como se estructura el formato tradicional.

El diseño utilizado ha sido mediante una retícula de 12 columnas, tratando de mantener los mismos gutters y márgenes que el formato físico.

Los titulares de las noticias juegan con distintos alineamientos a la izquierda, derecha y centro. La mayoría mantienen el formato estándard de alineamiento a la izquierda.

El software utilizado ha estado el de wireframe.cc.

Portada original 20minutos:

Wireframe del periódico:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Debate0en PEC 2 . Wireframe portada 20minutos

No hay comentarios.

Publicado por

PEC 2 . Wireframe La Vanguardia

Publicado por

PEC 2 . Wireframe La Vanguardia

Para realizar el wireframe, he escogido la página de la sección La Contra de La Vanguardia en edición papel,  porque es la…
Para realizar el wireframe, he escogido la página de la sección La Contra de La Vanguardia en edición papel, …

Para realizar el wireframe, he escogido la página de la sección La Contra de La Vanguardia en edición papel,  porque es la sección que más me gustaba leer con un buen café cuando los diarios digitales apenas se utilizaban. Tanto en la web como en la app se encuentra también esta sección, pero he optado por el formato papel por motivos nostálgicos. 

Es una sección, en mi opinión, muy emblemática y conocida de la Vanguardia. La escribe siempre uno de los tres periodistas habituales, y contiene entrevistas a personajes relevantes y muy diversos. 

Su formato en papel es muy estable y reconocible: entrevista a una página, mismo esquema y como su nombre indica, situado en la contraportada. 

 

Para realizar el wireframe he utilizado wireframe.cc, y he aplicado el diseño a una retícula de 12 columnas.

 

 

Debate0en PEC 2 . Wireframe La Vanguardia

No hay comentarios.

Publicado por

PEC 2: Wireframe. Heraldo de Aragón.

PEC 2: Wireframe. Heraldo de Aragón.
Publicado por

PEC 2: Wireframe. Heraldo de Aragón.

Parte 3 de PEC 2: Wireframe de una página.  En mi caso he escogido un medio autonómico como es el periódico Heraldo…
Parte 3 de PEC 2: Wireframe de una página.  En mi caso he escogido un medio autonómico como es…

Parte 3 de PEC 2: Wireframe de una página. 

En mi caso he escogido un medio autonómico como es el periódico Heraldo de Aragón. Fundado en Zaragoza en 1895 por Luis Montestruc Rubio. Según los datos del estudio general de medios o EGM sobre e consumo de los medios de comunicación españoles, se sitúa en el décimo lugar del ranking de medios nacionales, con una tirada promedio de 38.656 ejemplares, un promedio de difusión diaria de 38.656 y un promedio de lectores diarios de 287.000.

Mi elección para realizar este ejercicio, ya que nací, vivo y trabajo en esta ciudad, y a pesar de que no comparto su línea editorial, ya que la información me parece completamente sesgada, además, por todo esto le tengo un poco de acritud, y muy a mi pesar, es el periódico de referencia desde siempre de Zaragoza capital y Aragón. Expuestos los siguientes datos y mi mas que meditada decisión de elección de este medio.. tras realizar los análisis pertinentes que se corresponden en el ejercicio 2, me reafirmo en que el diseño del mismo es demasiado mejorable, hacer este ejercicio ha sido caótico, al igual que la organización de sus páginas, la acritud ha ido en aumento.

La home es demasiado larga, y desorganizada, es dificil poder establecer un patrón con repetición de las secciones, así que después de hacer una captura de pantalla porque a una resolución de 1200 px de ancho el total de largo era de 8818 px. Dejando de un lado el tema de la publicidad.

Ante tal monstruosidad y mi desconcierto sobre como abordar «esto», decidí imprimirlo (en total 11 din a4 en formato vertical) y sentarme fuera de la pantalla para intentar encontrar algún patrón de repetición en los elementos. ¿Lo conseguí? más o menos… Las secciones se suelen repetir pero sin orden concreto.

Y bueno este es mi resultado final, lo que realmente me parece «pura fantasía» usar ahí en medio casi al final una iconografía con las secciones. No entiendo nada.

He desarrollado un Wireframe Low fidelity (Lo-Fi) en el que no represento las unidades textuales de ningún tipo para que pueda servir como prototipo para el diario en general, con poco detalle,, de esta manera se crea una propuesta viva para que se pueda iterar avanzando hacia modelos que requieran mas detalle, en concreto más avanzados del proyecto.

heraldo-wire-01

Debate4en PEC 2: Wireframe. Heraldo de Aragón.

  1. Virginia Méndez Blanco says:

    Sí, menudo trabajazo! creo además que no somos conscientes de lo largas que son las páginas digitales, vista así impresa me he quedado alucinada!

     

Publicado por

Wireframe de El Tiempo

Publicado por

Wireframe de El Tiempo

Para la actividad de la tabla de interacción seleccioné el periódico El Tiempo. Lo hice porque es el único medio en mi…
Para la actividad de la tabla de interacción seleccioné el periódico El Tiempo. Lo hice porque es el único…

Para la actividad de la tabla de interacción seleccioné el periódico El Tiempo. Lo hice porque es el único medio en mi país que cumplía con los requisitos de la actividad (Versión impresa, Aplicación móvil y Sitio web). Sin embargo, seleccionarlo también me sirvió para entender en contexto varios aspectos sobre la economía de la atención.

Para realizar el wireframe, escogí la página de una noticia de actualidad. Concretamente esta:

 

Y el Wireframe que realicé fue este:

 

En el wireframe apliqué un sistema de 12 columnas, con gutters y márgenes muy similares a la página de referencia del sitio web de El Tiempo :)

Debate0en Wireframe de El Tiempo

No hay comentarios.

Publicado por

PEC.02 Diseño de Interacción

Publicado por

PEC.02 Diseño de Interacción

MEDIOS TRADICIONALES / FORMATOS DIGITALES WIREFRAME Para la segunda actividad de la asignatura de diseño de interacción, nos hemos familiarizado con el diseño de interacción en un contexto socio cultural. También hemos aprendido acerca de la historia del diseño, como afecta a los usuarios y su poder de transformación e influencia sobre ellos. El diseño, al fin y al cabo, conlleva una gran responsabilidad y es nuestro deber como diseñadores la realización de buenos diseños para futuros usuarios e interactores.…
MEDIOS TRADICIONALES / FORMATOS DIGITALES WIREFRAME Para la segunda actividad de la asignatura de diseño de interacción, nos hemos…

MEDIOS TRADICIONALES / FORMATOS DIGITALES

WIREFRAME

Para la segunda actividad de la asignatura de diseño de interacción, nos hemos familiarizado con el diseño de interacción en un contexto socio cultural. También hemos aprendido acerca de la historia del diseño, como afecta a los usuarios y su poder de transformación e influencia sobre ellos. El diseño, al fin y al cabo, conlleva una gran responsabilidad y es nuestro deber como diseñadores la realización de buenos diseños para futuros usuarios e interactores.

Después de analizar los tres formatos disponibles de un medio de comunicación (periódico «El País» en mi caso), se ha llevado a cabo un análisis tanto de los elementos de organización visual como de los principios relacionados con el diseño de interacción. Una vez analizada la información se ha clasificado en forma de tabla, evaluando los dos formatos digitales (web y app) y el formato físico en papel, y se han obtenido determinadas conclusiones.

La tercera parte de esta actividad consistía en la construcción de wireframe de baja fidelidad de una de estas páginas o pantallas. En mi caso, he escogido la pantalla principal o home de la versión de escritorio del periódico digital. En ella, se distinguen las diferentes noticias destacadas del cada día, estructuradas y alineadas de manera minimalista y clara. A continuación, se puede visualizar mi boceto del wireframe de la página principal:

Debate0en PEC.02 Diseño de Interacción

No hay comentarios.

Publicado por

Interacciones: Mapa de experiencia

Publicado por

Interacciones: Mapa de experiencia

Para obtener la información del campo recorrido, he elegido un trayecto que realizo todos los días que consiste en ir de mi…
Para obtener la información del campo recorrido, he elegido un trayecto que realizo todos los días que consiste en…

Para obtener la información del campo recorrido, he elegido un trayecto que realizo todos los días que consiste en ir de mi casa a la parada del autobús.

Para ello interactúo con mi ascensor en un primer momento. Lo primero que hago es llamarlo, me indica mediante una luz que lo he llamado correctamente y de alguna manera, me sorprende que con ese simple gesto yo sepa que va a llegar en algún momento.

Tras esto entro en el ascensor y vuelvo a pulsar el botón que me llevará a la planta baja. El sistema es el mismo, pulso, se ilumina y así entiendo perfectamente que él entendió mi orden.

Tras esto lo que hago es mirar a la pantalla que me indica en qué piso estoy todavía, parece una tontería pero esta información me dice mucho del tiempo disponible. Además me indica si estoy bajando o subiendo.

Una vez en la calle, abro la aplicación del autobús, quiero saber de cuánto tiempo dispongo para llegar a la parada antes que el autobús.

Te abre directamente la pantalla de líneas, pudiendo acceder desde ahí a la línea que sea necesaria.

En mi caso me es más cómodo acceder a la pantalla de favoritos donde previamente he guardado las paradas a las que más recurro.

Y una vez allí le doy a la parada que necesito para obtener la información y así saber del tiempo que dispongo

Cuando llega mi autobús, lo que tengo que hacer es pagar, he grabado (muerta de vergüenza) como interactúo con la máquina de pago. Me indica que he pagado correctamente de dos maneras, por un lado hace un sonido y por otro lo muestra en la pantalla. En este caso había dinero en la tarjeta así que no ha habido ningún sonido de error.

como veis en el vídeo se puede escuchar el sonido y en la pantalla el saldo disponible.

Como conclusión puedo sacar que me sorprende que elementos tan simples como un ascensor o un autobús puedan llegar a interactuar con las personas y a hacer que estas reciban el mensaje de una manera supersimple y que prácticamente todo el mundo lo entienda.

Debate0en Interacciones: Mapa de experiencia

No hay comentarios.