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

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.

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.