Diseño de interfaz de la revista iPad

Una gran revista es más que una colección de artículos sobre un tema o idea, es una experiencia editorial curada. A través del diseño y la copia, puede llevarlo a diferentes lugares y enseñarle cosas nuevas. El lanzamiento del iPad ha iniciado el último capítulo en la historia del diseño de revistas. He estado trabajando con una startup, Sideways.com, para crear nuestra propia plataforma de publicación de revistas y esto es lo que hemos hecho..

Esta publicación es el día 10 de nuestra sesión de diseño de interfaz. Sesiones creativas

Donde empezamos

Antes del lanzamiento del iPad, trabajamos en una revista para iPhone llamada TapTilt, donde podríamos probar algunas de nuestras ideas. El objetivo a largo plazo no era solo publicar una revista, sino construir una plataforma de publicación que otros pudieran usar para llevar fácilmente sus libros y revistas a la tienda de iTunes como una aplicación..

De forma aproximada, iTunes ya tiene un formato de libro (ePub) y hay una aplicación Kindle en el iPhone y el iPad que también utiliza el formato ePub. Los EPubs funcionan bien para texto pero no para experiencias más interactivas. Las revistas, los libros infantiles, las novelas gráficas y otras publicaciones que dependen en gran medida de las ilustraciones o las interacciones no se sirven bien en un documento ePub.

Mirando a otras revistas

Las revistas impresas dependen en gran medida de los anuncios de página completa para cubrir sus costos de producción. Al portar su contenido en el iPad, permanecer con el formato de página completa era una manera fácil de mantener esos anuncios intactos. También son reacios a cambiar drásticamente sus formatos y contenido o las ediciones digitales no contarán para sus números de circulación general. Para asegurarse de que los lectores vean esos anuncios, la mayoría de las revistas se apegan a la idea de deslizar a la izquierda y la derecha a través de las páginas como lo harían con sus contrapartes impresas. Además de navegar deslizando hacia adelante y hacia atrás muchas de las primeras revistas de iPad que comienzan a experimentar con nuevos tipos de navegación.

Al mirar las revistas disponibles para el dispositivo, queríamos ver qué estaban haciendo bien y dónde podrían mejorar. La mayoría introdujo el video en sus publicaciones y trató de lidiar con las dos orientaciones de pantalla diferentes del iPad. Pero estas primeras aplicaciones de la revista no aprovecharon algunas de las características básicas de la web, como el hipervínculo, muchas ni siquiera tienen texto en vivo (el texto se representa como una imagen o formato ilegible), lo que significa que no puede buscarlo. , copie y pegue, o cambie el tamaño del texto para mejorar la legibilidad.

El más alto perfil (y la exitosa aplicación de revista) hasta la fecha en el iPad ha sido el número de junio de Wired. Una mirada detrás de la escena de cómo se construyó la aplicación nos da una buena idea de algunos de los desafíos que enfrentan muchos editores de revistas cuando portan su contenido..

Comenzando una plataforma (Construyendo con HTML y CSS)

Muchas de las debilidades que encontramos en otras revistas provienen de nuestras experiencias en la construcción de la web. Son editores de revistas que intentan entender la web y nosotros éramos diseñadores web que intentaban entender la publicación de una revista. Podríamos aprovechar el compartir y discutir a través de las redes sociales como Twitter y Facebook. Podríamos publicar nuestras reseñas de música el día en que se lanzó la música en lugar de esperar un mes completo para publicarla. También podríamos integrarnos con la tienda de iTunes para que los usuarios puedan previsualizar canciones directamente en la aplicación. Y esto es solo rascar la superficie de lo que puede hacer dentro de una aplicación de revista.

Para aprovechar todo esto, parecía una obviedad utilizar HTML y CSS como nuestra principal forma de entregar contenido. También tuvimos el beneficio adicional de tener el webkit (Mobile Safari) que representa nuestros diseños. Eso nos permite jugar con HTML5 y CSS3 sin tener que preocuparnos por la compatibilidad hacia atrás con los navegadores más antiguos. Esto redujo considerablemente el tiempo de desarrollo del extremo frontal..

Dado que la navegación era una inconsistencia en algunas de las otras aplicaciones de revistas que utilizamos, desde el principio se convirtió en una prioridad para experimentar con algo más universal. Ver la revista en modo vertical le dio una vista de página completa con la navegación accesible en la parte superior izquierda de la pantalla, girando hacia el paisaje más una navegación estática en el lado izquierdo de la pantalla. En la próxima edición, vamos a intentar quitar la navegación de la orientación horizontal y moverla a un botón en la parte superior, dejando más espacio para usar en el diseño del diseño..

Descarga la aplicación Sideways

La publicación en el iPad acaba de empezar. Los estudios sobre usabilidad (como este de Jakob Nielsen) continuarán configurando la forma en que diseñamos para dispositivos móviles. Una cosa es segura, sin embargo, es un medio convincente para diseñar.


Esta publicación es el día 10 de nuestra sesión de diseño de interfaz. Sesiones creativas