Publicado por

Sin título

Publicado por

Sin título

Los wireframes son los primeros estados de los prototipos. En diseño web, a la hora de construir un sitio no podemos pensar…
Los wireframes son los primeros estados de los prototipos. En diseño web, a la hora de construir un sitio…

Los wireframes son los primeros estados de los prototipos. En diseño web, a la hora de construir un sitio no podemos pensar al principio del desarrollo en los últimos detalles, se construirán diferentes modelos, siendo este, el primero, un esquema de la organización de los componentes. Los wireframes pueden variar en fidelidad, ajustándose más o menos al resultado final que hay que obtener, van desde simples sketches hasta documentos más acabados en los que habremos tenido en cuenta el tamaño concreto de los elementos, su posición justa relativa a la rejilla que hayamos creado, la disposición de textos, iconos y espacios en blanco, la alineación de los componentes…

Los wireframes nos ayudan también a la creación de plantillas, ya que el contenido de los elementos no aparece en esta versión de los prototipos independientemente de su fidelidad, desde este podremos crear, en nuestro caso, diferentes apartados de noticias con la misma estructura ayudando a crear así consistencia en el sitio web.

Ilustraremos esto con un ejemplo, el de la web del periódico de la ‘Opinión de Zamora’:

 

 

 

Debate0en Sin título

No hay comentarios.

Publicado por

3ª parte. Wireframe de una página

Publicado por

3ª parte. Wireframe de una página

Para esta parte de la actividad se ha escogido la versión móvil de una noticia concreta del periódico La Voz de Galicia:…
Para esta parte de la actividad se ha escogido la versión móvil de una noticia concreta del periódico La…

Para esta parte de la actividad se ha escogido la versión móvil de una noticia concreta del periódico La Voz de Galicia:

La elaboración del siguiente wireframe se ha realizado con el programa Justinmind. Como se puede apreciar en el prototipo y en la muestra de extensión de la pantalla, la interfaz es simple e intuitiva. Al tratarse de una versión móvil, destaca la distribución del contenido de la noticia en bloques con una alineación del texto a la izquierda, así como el uso de contenido gráfico en imágenes e iconos. Estos tres constituyen los factores principales que caracterizan este diseño digital:

Debate0en 3ª parte. Wireframe de una página

No hay comentarios.

Publicado por

2. Media: Medios tradicionales / Formatos digitales (Wireframe)

2. Media: Medios tradicionales / Formatos digitales (Wireframe)
Publicado por

2. Media: Medios tradicionales / Formatos digitales (Wireframe)

¡Buenas a todos y todas! Para la realización del wireframe he elegido una noticia de la web del Diario de Mallorca. La…
¡Buenas a todos y todas! Para la realización del wireframe he elegido una noticia de la web del Diario…

¡Buenas a todos y todas!

Para la realización del wireframe he elegido una noticia de la web del Diario de Mallorca. La web está compuesta por una retícula de 12 columnas que se va adaptando dependiendo de la medida de la pantalla, así que podemos hablar de una web responsive.

Como se puede ver, los dos márgenes, izquierdo y derecho, están completamente ocupados por publicidad, y a lo largo de la noticia también aparece mucha, sobre todo en la parte de la derecha. Y, a la izquierda, ocupando más espacio, se encuentra la noticia con el texto y las fotografías correspondientes.

Cuando termina la noticia se pueden ver más abajo agrupaciones de noticias en formato más pequeño.

Debate0en 2. Media: Medios tradicionales / Formatos digitales (Wireframe)

No hay comentarios.

Publicado por

Realización de un prototipo de baja fidelidad

Publicado por

Realización de un prototipo de baja fidelidad

Un prototipo es una herramienta que permite diseñar los aspectos funcionales y estructurales y la apariencia que tiene un producto o servicio.…
Un prototipo es una herramienta que permite diseñar los aspectos funcionales y estructurales y la apariencia que tiene un…

Un prototipo es una herramienta que permite diseñar los aspectos funcionales y estructurales y la apariencia que tiene un producto o servicio. En el diseño de interacción de páginas web o aplicaciones móviles, los wireframes nos sirven para representar la estructura de interacción del producto.

Esta entrada tiene como objetivo compartir un ejemplo de prototipo de baja fidelidad. En este caso, he realizado un wireframe de una página del medio de comunicación Il Sole 24 Ore. Más concretamente, se ha escogido la página de noticias en tiempo real para representar su estructura y organización.

Sobre el periódico

Il Sole 24 Ore es un diario milanés fundado en 1865 que adopta una línea liberal y reformista. Es considerado el periódico en circulación más antiguo de Milán y uno de los primeros de los grandes periódicos económicos europeos.

Fue capaz de importar un modelo de información especializada que ya había dado lugar a numerosas publicaciones en el extranjero.

En los últimos años, se ha producido la creación de un sistema multimedia integral que ha contribuido a mejorar la forma de informar y comunicar a través de una amplia gama de elementos de contenido temático de alto perfil.

Prototipado

Para realizar el wireframe he utilizado Figma, por lo que es posible consultarlo en la misma plataforma a través de este link.

Como referencia, he utilizado la página web del periódico. Para ilustrar de una manera sencilla las similitudes entre el wireframe y el producto real, he añadido en esta entrada una captura de pantalla de la página.

Es importante mencionar algunas diferencias principales:

  • El wireframe no tiene en consideración los márgenes utilizados para mostrar publicidad. Esto se debe a que la publicidad no estaba presente cuando se realizó.
  • El wireframe utiliza una tipografía diferente.
  • El wireframe está realizado en castellano. Ya que esta entrada forma parte de una práctica que será evaluada en el Máster universitario de diseño de interacción y UX, se ha utilizado la lengua castellana para facilitar la evaluación del trabajo realizado.
  • La sección de anuncios personalizados es ligeramente diferente. Esto se debe a que es una sección proporcionada por terceras parte que puede contener 4 o 2 anuncios por fila.
Página de noticias en tiempo real del períodico
Página de noticias en tiempo real usada como referencia
Wireframe de la página de noticias en tiempo real
Wireframe de la página de noticias en tiempo real

Debate0en Realización de un prototipo de baja fidelidad

No hay comentarios.

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

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.