Publicado por

WIREFRAME

Publicado por

WIREFRAME

Para la realización de la tercera parte de la práctica Media: Medios tradicionales/Medios digitales, he elegido la versión web del periódico El…
Para la realización de la tercera parte de la práctica Media: Medios tradicionales/Medios digitales, he elegido la versión web…

Para la realización de la tercera parte de la práctica Media: Medios tradicionales/Medios digitales, he elegido la versión web del periódico El País. Se ha realizado un wireframe de la primera parte de su portada.

Tiene un ancho de 1200 px. y una estructura de 12 columnas, dejando los márgenes para el emplazamiento de publicidad.

 

Debate0en WIREFRAME

No hay comentarios.

Publicado por

Wireframe 20 minutos pantalla de inicio

Publicado por

Wireframe 20 minutos pantalla de inicio

Para esta parte de la PAC he escogido la pantalla de Inicio del portal online web del canal 20 minutos. He escogido…
Para esta parte de la PAC he escogido la pantalla de Inicio del portal online web del canal 20…

Para esta parte de la PAC he escogido la pantalla de Inicio del portal online web del canal 20 minutos.

He escogido este ya que además de ser la entrada del medio, disponía de varios recursos digitales que podían ser interesantes a la hora de realizar la práctica, íconos, menús desplegables, submenús, publicidad, noticias principales, secundarias. Y fotografías y vídeo.

Debate0en Wireframe 20 minutos pantalla de inicio

No hay comentarios.

Publicado por

Wireframe: Medios tradicionales / Formatos digitales

Publicado por

Wireframe: Medios tradicionales / Formatos digitales

Hola a tod@s! Para esta PEC realicé el Wireframe de la web (desktop) del diario Extra. Es un diario a nivel nacional con el segundo tiraje mas grande del Ecuador. Escogí este medio a pesar de ser amarillista y no estar de acuerdo con sus prácticas. Pienso que se puede ser más crítico, cuando no eres lector del diario y no estas acostumbrado a la forma de hacer periodismo de ese medio. Analizando los 3 formatos de este medio, cabe…
Hola a tod@s! Para esta PEC realicé el Wireframe de la web (desktop) del diario Extra. Es un diario…

Hola a tod@s!

Para esta PEC realicé el Wireframe de la web (desktop) del diario Extra.
Es un diario a nivel nacional con el segundo tiraje mas grande del Ecuador.

Escogí este medio a pesar de ser amarillista y no estar de acuerdo con sus prácticas. Pienso que se puede ser más crítico, cuando no eres lector del diario y no estas acostumbrado a la forma de hacer periodismo de ese medio.

Analizando los 3 formatos de este medio, cabe recalcar que la versión Mobile es la más acertada y la que más se acerca a los principios visuales del diseño.

El Layout del Wireframe tiene una disposición de 12 columnas y márgenes amplios para publicidad.

Debate0en Wireframe: Medios tradicionales / Formatos digitales

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

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.