Publicado por

WIRED: Wireframe

Publicado por

WIRED: Wireframe

“The best way to predict the future is to invent it” frase de Alan Kay (Murray, 2011), y primera frase que invita a…
“The best way to predict the future is to invent it” frase de Alan Kay (Murray, 2011), y primera frase…

The best way to predict the future is to invent it” frase de Alan Kay (Murray, 2011), y primera frase que invita a reflexionar sobre cómo queremos inventar el futuro.

He seleccionado el medio de comunicación informativo Wired. El nombre de la revista significa en castellano “conectado”, y el objetivo central de su contenido es presentar cómo la tecnología puede afectar a la cultura, la educación, la economía y la política. (Wikipedia)

Mensualmente se publican artículos en inglés que apoyan la creencia de cómo los avances de la ciencia y tecnología ayudarán a cumplir un ideal utópico. La revista cuenta con los diferentes formatos requerido (físico, sitio web y aplicación) y la edición que se estudió es la de junio 2022.

Wired Magazine
Wired Magazine

Se ha realizado un wireframe en el programa Figma, de la página de inicio del sitio web de wired.com. con el objetivo de entender la estructura general del sitio web. Gracias a este ejercicio se ha determinado una grilla de 12 columnas, con un espaciado de 24px y un margen de 104px entre todo el sitio web, con excepción al menu de navegación.

Mi reflexión sobre este ejercicio, es la capacidad que tienen los medios de comunicaciones, es cómo el capitalismo de la vigilancia se aplica en este tipo de formatos, dando la percepción al usuario de un servicio «freemium» pero en realidad dos módulos recuerdan al usuario el registrarse para ver el contenido completo desde la página de inicio. Luego al ir a segundas y terceras páginas, la opción de pagar la membresía se vuelva más insistente.

 

Wireframe
Wireframe

 

Referencias

Murray, Janet H. 2011. Inventing the Medium : Principles of Interaction Design As a Cultural Practice. s.l. : MIT Press, 2011. 9780262298308.

Wikipedia. Wired. Wikipedia. [En línea] [Citado el: 14 de noviembre de 2022.] https://es.wikipedia.org/wiki/Wired.

[Online] [Cited: 11 17, 2022.] http://design-toolkit.recursos.uoc.edu/es/el-capitalismo-de-la-vigilancia/.

 

Debate0en WIRED: Wireframe

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.