MiMoriarty

Trucos de diseño para diseñar como locos

Página digital para iPad. Una página, dos vidas

La técnica. Definir el tamaño y ajustes de página vertical y horizontal

NOTA: Siempre voy a referirme al tamaño que tiene la pantalla del iPad (1024 x 768 px). Cuando publiquemos para otra tablet sólo tenemos que cambiar las medidas al tamaño de pantalla que nos indiquen en las características técnicas del fabricante. Utilizaremos las herramientas de la DPS (Digital Publishing Suite) de Adobe, que se encuentra en fase beta, excepto para algunos editores que ya publican con ella como por ejemplo Wired, iMag o el diario The Daily por citar algunos. El software utilizado es el Indesign versión 7 o más conocido como CS 5. En el primer artículo de esta sección (publicaciones digitales) puedes encontrar toda la información que necesitas para esta apasionante aventura.

Una de las características de estos nuevos dispositivos es el giro que podemos darles y mostrar cualquier elemento gráfico en posición horizontal o vertical. Tenemos que crear para cada página de nuestra publicación dos versiones de página. Una de ellas con orientación horizontal y otra vertical.

El doble de trabajo que para impresión pero cientos de posibilidades de comunicar más

En cuatro sencillos pasos lo entenderás:

1. Creamos un nuevo documento en Indesign para la posición horizontal.

2. Procedemos de igual forma para la página vertical.

Nunca trabajaremos con páginas opuestas para nuestra revista digital. El número de columnas, medianil y márgenes dependerán del diseño que realicemos en cada ocasión.

3. Creamos una configuración de página, para la orientación vertical y otra para la horizontal, ya que utilizaremos constantemente estos ajustes al maquetar.

4. Es muy importante el nombre que damos a cada artículo para que al empaquetarlos con el Digital Content Bundler (hablaré sobre esta aplicación air con más detalle en próximos artículos) reconozca que se trata de la versión horizontal o vertical de cada página.
Procedemos de la siguiente manera:

  • Nombre del artículo_h → (para la versión horizontal)
  • Nombre del artículo_v → (para la versión vertical)

Veamos unos ejemplos de las revistas iMag, Muy interesante y la de la marca de coches BMW. En iMag han aprovechado las ventajas de página horizontal vs vertical con un juego gráfico de forma muy expresiva con el tema principal de portada. Mientras que las otras dos utilizan los mismos recursos en ambas posiciones. Si bien en el caso de BMW puede que utilice un vídeo en la orientación apaisada, cosa que no puedo comprobar, pero sospecho por la posición del vehículo. La posición apaisada favorece a la fotografía (o vídeo) del coche, ya que en su forma predomina lo ancho frente a lo alto; sólo tienes que acordarte de la cantidad de veces que tienes que ampliar fondos en Photoshop para mostrar una composición apaisada en vertical.

 

Utiliza tu imaginación para comunicar más y mejor, ya que las herramientas lo permiten

Si encuentras ejemplos puedes hacer un comentario y construiremos entre todos una galería. Así aprenderemos unos de otros que es el fin de este blog.

Para concluir, algunas ventajas y desventajas de la página vertical frente a la horizontal:

  • En posición vertical, la información está mejor dispuesta que en horizontal. Se accede más rápidamente al contenido realizando una lectura en forma de Z.
  • La disposición vertical permite componer líneas de texto con una extensión idónea para su lectura.
  • Para mostrar vídeos, fotos o jugar, la forma horizontal es mejor, ya que su amplitud hacia los laterales ofrece una mayor visión de campo.
  • Lo vertical nos es familiar tras varios siglos de entrenamiento: libros, revistas, carteles, documentos, el cuaderno donde tomas apuntes…
  • Posiblemente se asemeje más a nuestro cuerpo más alto que ancho.

Cómo lee nuestro cerebro una página

Nuestros ojos recorren de forma natural una página o imagen para localizar la información fijándose en áreas activas y pasivas según la naturaleza de su contenido.

La manera que tenemos de explorar los objetos gráficos implica que algunas de las zonas de la página sean más activas que otras. Podemos encontrar dentro de una composición zonas más calientes y otras más frías o periféricas. La zona más activa se posiciona en el extremo superior izquierdo y decrece en dirección diagonal hacia la esquina inferior derecha.

La lectura de un texto dentro de la sociedad occidental comienza en la parte superior izquierda de la página y se desplaza hacia la derecha y verticalmente hacia abajo. El ojo describe un movimiento en “Z”.
Ten en cuenta que cuando diseñes para otras culturas como la árabe la escritura se realiza en el sentido de derecha a izquierda. Es decir, sus puntos de atracción más activos se sitúan en el margen derecho de una página, totalmente al contrario que nosotros.

El diario estadounidense The Daily estrenó a principios de Febrero de 2011 un nuevo diseño para su edición digital en soporte ipad. Arriba puedes observar una de sus páginas y a su derecha una figura que muestra los puntos de atracción visual. Las zonas con color más intenso son las que hacen atraer la mirada y marcan el recorrido visual que hace el ojo. Fíjate en el icono de la parte inferior derecha de la página. Constituye un punto de atracción visual fuerte puesto que es una llamada para pasar página. El juego de transparencias junto con el color azul corporativo le convierten en el icono más sutil y refinado de todas las nuevas publicaciones digitales que he visto.

Cómo se mira una web

Las investigaciones realizadas han permitido averiguar que las personas leen las páginas web intentando obtener información rápidamente y siguiendo una estructura en forma de F.

En la imagen inferior, que corresponde a la web de la revista Visual, puedes verlo gráficamente. Inicialmente se dirige la mirada a la parte superior izquierda explorando en dos líneas hacia la derecha de la página, primero en todo su ancho. Una segunda exploración más breve forma el otro trazo horizontal de la F.

A continuación se encamina la vista en sentido vertical hacia abajo en busca de algún elemento importante. Es lo que dibuja la línea vertical de la F.

Para los diseñadores significa que debemos situar la información clave y las entradas en la estructura de esta F imaginaria, aumentando las oportunidades de comunicar al captar la atención del lector.

About miguel monge

Experiencia visual de lo que miras pero no ves, de lo que imaginas y te gustaría enseñar.

8 comments on “Página digital para iPad. Una página, dos vidas

  1. Pingback: Organizar archivos para empaquetar con el Digital Content Bundler « MiMoriarty's Blog

  2. Luigipop
    March 9, 2011

    Hola,
    Tengo una pequeña duda, a ver si me podeis ayudar.
    Estoy empezando con el diseño digital para iPad.
    Tengo instalado InDesign CS5, Adobe Content Bundler, Adobe Overlay Creator y el plugin para Indesign CS5 de Digital Publishing.
    Cuando voy a empaquetar unas páginas con el Content Bundler, presionando el botón New en la ventana de la aplicación, me aparece una ventana de diálogo con el siguiente mensaje:
    “Warning: no valid article directories could be found”
    ¿A qué se debe y cómo puedo solucionar este problema?

    Saludos y Gracias

    • miguel monge
      March 9, 2011

      Hola Luigipop,
      Asegúrate de tener todo las carpetas y archivos bien nombrados. Procede con cada página en su versión vertical y horizontal a empaquetarlos desde Indesign (menú archivo / Empaquetar). Los situamos dentro de la carpeta empaquetados, creando una carpeta con el nombre del artículo terminado con guión bajo stack (_stack). La carpeta del artículo, contiene a su vez, dos carpetas que obtenemos al empaquetar desde indesign las dos versiones, vertical y horizontal, de la página. Se denominan con el nombre del artículo seguido de un guión bajo con la letra h o v, según corresponda y terminados de la palabra Folder. Todo esto está explicado en el artículo “Organizar archivos para empaquetar con el Digital Content Bundler” concretamente en carpeta empaquetados.

      Ahora, crea una imagen (no hace falta que sea muy grande un trocito es suficiente) en formato .png a 72 dpi de alguna foto que tengas montada en la página horizontal o vertical y la llamas toc_nombre artículo.png. La colocas dentro de la carpeta del artículo. Así tendrás tres elementos la imagen .png y las dos carpetas de página vertical y horizontal. Ahora prueba desde el Content Bundler, presionas New y elijes la carpeta del artículo a empaquetar. Deberá realizar el empaquetado correctamente y obtendrás un archivo .issue. Posteriormente observarás que el programa crea una imagen .png, que suele ser la página completa que diseñaste. Espero que se solucione. Esto lo pensaba explicar en el próximo artículo para no hacer este demasiado largo.
      Un saludo,
      Miguel

  3. Pingback: Hipervínculos entre páginas en un iPad « MiMoriarty's Blog

  4. Pingback: Botones interactivos en iPad « MiMoriarty's Blog

  5. Pingback: Scrollable Content. Marco de texto y objetos desplazables « MiMoriarty's Blog

  6. Pingback: Fotografía panorámica interactiva en iPad « MiMoriarty's Blog

  7. Pingback: Web en una revista para iPad « MiMoriarty's Blog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Information

This entry was posted on February 25, 2011 by in Publicaciones digitales and tagged , , .

Top Rated

February 2011
M T W T F S S
« Jan   Mar »
 123456
78910111213
14151617181920
21222324252627
28  
%d bloggers like this: