Share
8 Faces es una revista bianual de 88 páginas, publicada de forma independiente, centrada en entrevistas con ocho diseñadores líderes de los campos de la impresión, la web, la ilustración y el diseño tipográfico. Cada entrevista se basa libremente en la pregunta "si pudiera usar solo ocho tipos de letra, ¿cuál elegiría?"
La página de inicio original de 8 caras diseñada por Kyle Meyer 8 Faces fue lanzado en 2010 por Elliot Jay Stocks, un diseñador web con sede en el Reino Unido y un tipo de nerd confeso. Desde entonces, ha crecido de manera constante y se ha convertido en un negocio en sí mismo con una lista creciente de colaboradores y una comunidad muy activa de Tumblr..
El primer número se agotó en menos de una hora y los lanzamientos posteriores también han tenido éxito. La gama de productos de 8 Faces también ha crecido y ahora incluye una gama de pósters tipo de edición limitada y una función de "lectura en línea" que pronto se lanzará.
A mediados de 2012, Elliot le encargó a Paravel, Inc. que rediseñara la experiencia en línea de 8 caras. Conformado por Trent Walton, Dave Rupert y Reagan Ray, Paravel se ha forjado una sólida reputación de sitios web creativos, de tipo y con capacidad de respuesta que incluyen las conferencias de DO y uno de los sitios más visitados en Internet, microsoft.com.
Elliot explicó por qué eligió Paravel:
Me hubiera encantado diseñar el sitio, pero sabía que el tiempo no lo permitiría, así que elegí Paravel por sus agudos ojos tipográficos y su amplia experiencia en diseño web sensible. También me dejaron trabajar muy amablemente. con ellos, así que todavía pude agregar algunas de mis propias sensibilidades de diseño en la mezcla.
Al mismo tiempo que iniciaba el proceso de rediseño, Elliot también tomó la decisión de pasar de un sistema de comercio electrónico a medida a Shopify, una plataforma alojada basada en un sistema de plantillas fácil de usar y fácil de usar para el diseñador..
Shopify fue una elección lógica ya que la tienda en línea para Viewport Industries (la pequeña empresa basada en proyectos que manejamos juntos) ha estado usando la plataforma por más de un año vendiendo productos físicos y digitales como Insites: The Book.
El trabajo comenzó en el proyecto a finales de 2012 y el primer mensaje de Basecamp se publicó el 12 de octubre. Las ideas iniciales fueron literalmente dibujadas a mano y muy sueltas, como se puede ver en la imagen de abajo..
Un bosquejo temprano para compartir ideas, muchos de ellos fueron compartidos en el proyecto Basecamp. Este enfoque "rápido y sucio" permitió que se tomaran una serie de decisiones iniciales clave antes de que se empujaran los píxeles. Estas incluyen opciones de fuente y la opción de una navegación sin pestañas para pantallas pequeñas. Como explica Trent:
Debido a que era Elliot, no era necesario que Reagan y yo presentáramos PSD de píxeles perfectos. Confió en nosotros, así que una vez que superamos los conceptos básicos y las exploraciones de diseño, llevamos las cosas al navegador. Mientras Dave y yo estábamos programando, solíamos detectar puntos incómodos en el diseño a través de anchos / puntos de interrupción. Dábamos vueltas y vueltas a las cosas iterando en el navegador y en Photoshop, cualquier herramienta que funcionara mejor en ese momento. No hay un camino o método claro para la locura, pero me gusta que sea así. Solo tienes que agitarte, moverte y aplastar hasta que los problemas estén fuera..
A medida que la fase de diseño pasó del boceto al código, Paravel comenzó a compartir ideas de diseño y diseños de página a través de un sitio de almacenamiento basado en PHP simple creado en Heroku.
Como Paravel usa Git como parte de su flujo de trabajo diario, y dada la integración entre Git y Heroku, esto tenía mucho sentido. Las iteraciones se pueden enviar a GitHub y aplicarlas instantáneamente al sitio de ensayo. Como todas las partes estaban separadas geográficamente, esto facilitó mucho las cosas. Como explica Trent, este enfoque se adapta bien a Paravel:
Intentamos mantenernos en nuestra especialidad, que consiste en llevar cosas desde la planificación hasta el diseño y el código de front-end. Nos gusta hacer todo lo posible para que la implementación sea lo más fácil posible para los clientes, por lo que vamos a apagar las páginas de manera que la transferencia se realice sin problemas..
Este proceso también permitió la prueba en múltiples dispositivos. A diferencia del sitio original de 8 Caras, construido en 2010 con un ancho fijo, la nueva versión debía ser plenamente receptiva. Las iteraciones se discutieron en Basecamp, se realizaron cambios y luego se devolvieron al sitio de pruebas para su evaluación. Dicho esto, el proyecto siempre tuvo un proceso suelto como comenta Trent:
Con Elliot, realmente no registramos rondas formales de iteración. Probablemente tengamos algunos compromisos de Github que puedan mostrar la evolución, pero esa parte del proceso fue deliciosamente descuidada con poca consideración para el archivo..
De hecho, mirando atrás en los mensajes de Basecamp, solo hay ocho hilos y 84 comentarios para todo el proceso, que incluye la integración con Shopify y los ajustes posteriores al lanzamiento..
Revista temprana de diseño de página de archivo y diseño 
La página de inicio tomando forma. Gran parte de este diseño es visible en el sitio lanzado. Naturalmente, dado el tema, la tipografía y las cuadrículas estaban a la vanguardia del proceso de diseño. Una vez más, al crear páginas simples en el sitio de ensayo, Paravel pudo compartir cuadrículas, canaletas, puntos de interrupción y opciones de tipografía fácilmente..
Un gran ejemplo de las diversas opciones de diseño se encuentra en la página acerca de.
La página acerca de muestra muchas de las divisiones de columnas en el trabajo Los posibles diseños en la cuadrícula final son los siguientes:
FF Unit Slab se usa en la revista y también fue elegida como la fuente para el nuevo sitio, más de Trent:
La revista da buen uso a FF Unit Slab de Christian Schwartz, Kris Sowersby y Erik Spiekermann, e hicimos lo mismo con el sitio. Amo a toda la unidad superfamilia. Pronto llegará una sección de lectura en línea, y la Unidad realmente brilla allí. No puedo esperar a que la gente lo vea.
Las fuentes se sirven a través de TypeKit y las alternativas son relativamente simples:
body font: 100% / 1.5 "ff-unit-slab-web", "Georgia", "Times New Roman", serif; peso de la fuente: 300; color: # 666666;
Como Trent explicó anteriormente, hay una serie de puntos de interrupción en el archivo CSS, cada uno de ellos para diferentes escenarios. Algunos son ajustes menores para el tipo, mientras que otros tratan con cambios de diseño a gran escala. Construido utilizando un enfoque "móvil primero", los puntos de interrupción son los siguientes:
@media (ancho mínimo: 700px) @media (ancho mínimo: 850px) @media (ancho mínimo: 1100px) @media (ancho mínimo: 1400px) @media (ancho mínimo: 1680px)
Un truco inteligente empleado es el uso de consultas de medios para cambiar el tamaño de la fuente del cuerpo. Como el tamaño de fuente del cuerpo inicial se establece en 100% con un alto de 1.5 líneas, todos los reinicios posteriores aumentarán tanto la fuente como las alturas de las líneas, lo que resultará en una transición suave entre los tamaños de pantalla.
Si bien JavaScript no se usa mucho en el nuevo sitio de 8 caras, se usa con gran efecto en la página de inicio. Dado que el objetivo principal del sitio es mostrar la revista impresa, es necesario que haya una forma de resaltar las portadas y las páginas internas de manera efectiva. Esto se logró con el plugin jQuery "Kinetic"..
El complemento permite al visitante arrastrar la imagen del gran héroe de lado a lado y ver las fotos del último número en su propio momento. En última instancia, esta imagen se controla a través de la página de configuración del tema de Shopify y le permite a Elliot actualizarla fácilmente sin necesidad de modificar las plantillas de Shopify manualmente..
Paravel completó su trabajo a fines de febrero de 2013. En este momento, Elliot y yo asumimos el proceso y comenzamos a trasladar el proyecto desde el sitio de almacenamiento intermedio de PHP a Shopify. Shopify usa el motor de plantillas Liquid para extraer datos de la tienda en plantillas de temas. Mediante el uso de construcciones lógicas y de salida simples, es posible controlar el flujo de datos mientras se conserva el diseño creado por Paravel.
8 Faces está en buena compañía, más de 60,000 tiendas ahora usan Shopify, incluidas varias marcas web destacadas que incluyen United Pixel Workers, A Book Apart y Tattly. Como nota adicional, muchos diseñadores web están obteniendo considerables ingresos al trabajar con Shopify..
Si no ha tenido la oportunidad de aprender sobre el programa gratuito Shopify Experts, vale la pena echarle un vistazo. A lo largo de los últimos 18 meses, se han generado contratos por valor de $ 18 millones a través del programa.!
La pantalla de administración de Shopify permite acceder a todas las plantillas. Gracias al bien organizado y comentado sitio de preparación, el proceso inicial de transferencia de HTML, CSS y JavaScript al tema de Shopify no fue más que unas pocas horas de trabajo. los header.php y footer.php formó la base del archivo de diseño principal de Shopify tema.líquido y varias otras páginas PHP asignadas a otras plantillas básicas de Shopify, como page.liquid y coleccion.liquid.
El progreso se compartió a través de una tienda de desarrollo: un sitio de prueba de Shopify con todas las funciones que estaba protegido por contraseña. Esto facilitó el compartir el progreso, ya que se agregaron fotografías del producto, descripciones y detalles de precios..
La mayoría de las tiendas tienen un flujo distinto. Por ejemplo:
Shopify atiende muy bien este flujo utilizando conceptos como colecciones y productos. De hecho, cada uno de estos se asigna directamente a dos plantillas principales, coleccion.liquid y product.liquid. Para referencia, una colección es Shopify es una agrupación lógica de productos, en este caso, los seis números de la revista 8 Faces.
Sin embargo, dado que actualmente solo hay seis problemas, Elliot tomó la decisión de que una página de detalles por separado para cada problema superaba los requisitos. Para lograr este flujo se necesitaba un replanteamiento sutil y se hicieron cambios a la coleccion.liquid modelo.
% if collection.handle == 'magazines'% % include 'collection-magazines'% % elsif collection.handle == 'posters'% % include 'collection-posters'% % elsif template == 'lista-colecciones'% % include 'colección-listado'% % else% % include 'colección-predeterminado'% % endif%
Usando el principal coleccion.liquid como controlador lógico podemos insertar un fragmento de código específico, una pequeña porción de código reutilizable, dependiendo de la colección que se esté viendo actualmente. Por lo tanto, cuando solicitamos ver la colección de "revistas", Shopify inserta automáticamente el coleccion-magazines.liquid retazo.
% para el producto en la colección.productos% % endfor%
Titulo del producto
product.description % para la variante en product.variants% % if variant.available == true% % endif% % endfor%
Es una práctica habitual recorrer cada producto en una colección, utilizando el código Liquid, y mostrar un enlace a la página de detalles del producto donde el usuario puede agregar el producto a su carrito..
Para hacer posible agregar el producto desde la página de colección a formar se utilizó en lugar de un enlace a la página de detalles del producto. Como verá en el código anterior, el formulario se vuelve único debido al campo de entrada oculto "id", que recibe el valor del producto. variant.id.
Como muchos productos tienen opciones, por ejemplo color y tamaño, cada combinación tiene un diseño único. variant.id - Incluso si solo hay una versión. Vale la pena señalar que las páginas de detalles del producto para la revista han sido diseñadas y están presentes. Si alguna vez alguien los vincula o accede de forma accidental por medio de una URL que funciona correctamente, no aparecerá nada roto.
Dado que el nuevo 8 Faces está diseñado para dispositivos de todos los tamaños, el "problema de la imagen sensible" debía resolverse. Al final, Paravel recomendó el uso de picturefill.js polyfill por Scott Jehl. Trent explica:
Absolutamente tuvimos que minimizar el tamaño del archivo para las imágenes, especialmente con la página de inicio. Hemos utilizado picturefill.js varias veces en el pasado, incluida una versión adaptada para la página de inicio de Microsoft.
Si no está familiarizado con picturefill.js, se describe a sí mismo como "un enfoque de imágenes receptivas que puede utilizar hoy que imita el elemento de imagen propuesto utilizando spans, por razones de seguridad". Funciona muy bien y, cuando se comprime, pesa menos de 0.5kb. Para que funcione picturefill.js, debe definir varias rutas de imagen diferentes para cada "punto de interrupción". Aquí está el marcado renderizado de la página de inicio de 8 caras:
Al crear tres "configuraciones de tema" en el tema Shopify de 8 caras, un administrador puede cargar diferentes imágenes para cada uno de los tres puntos de interrupción diferentes. Una vez subido el index.liquid La plantilla utiliza código líquido para acceder a las imágenes relevantes:
Además, se realiza una comprobación verdadera / falsa simple en la plantilla para garantizar que la configuración del tema "Mostrar imagen del héroe" esté establecida. Si no es el marcado simplemente se salta.
La configuración del tema también se usó para controlar el botón "comprar el último problema" que superpone la imagen del héroe en la página de inicio. Para evitar la codificación rígida del ID de variante del último problema en la plantilla, se ingresan tres cadenas de texto en la página de configuración del tema:
Al utilizar un enlace permanente del carrito, nos aseguramos de que, si el soporte de JavaScript no está presente, el usuario todavía podrá comprar la revista a través del enlace URL. Sin embargo, ir directamente a la página de pago no es el flujo ideal, es preferible que el usuario haga clic en un botón y se dirija a la página del carrito, donde pueden ajustar las cantidades y agregar otros artículos a su pedido. Afortunadamente esto no fue tan difícil de lograr.
Usando la función jQuery envolver La imagen del héroe está envuelta en un elemento de formulario. Luego se agrega un campo oculto al formulario que contiene el settings.home_hero_variant_id sacado de nuestra configuración de tema. Como el nombre de archivo JavaScript contiene .líquido extensión Shopify puede insertar datos de la configuración del tema antes de servir el archivo. Esto nos permite insertar el settings.home_hero_variant_id en nuestro código JavaScript.
Además, si y cuando se cambia esta identificación, no será necesario cambiar el código, lo cual es práctico. Hay muchos usos para este enfoque y este es solo un ejemplo simple:
Accentsconagua
/ * Botón de compra Hijack en la página de inicio para enviar el formulario * / $ ('. Hero-unit'). Wrap (' '); PS') .attr (type:' hidden ', id:' id ', name:' id ', value:' settings.home_hero_variant_id '). appendTo (' # hero-form '); $ ('a.blackflag'). click (función (e) $ ("# hero-form"). submit (); e.preventDefault ();); Finalmente, secuestramos la funcionalidad predeterminada de nuestro ancla y, en su lugar, enviamos el formulario cuando se hace clic.
El sitio se lanzó con éxito el 1 de mayo de 2013 con el lanzamiento del número seis de la revista..
El diseño de la página de inicio relanzado. Una vez completada la fase uno, el desarrollo continúa y, más adelante, en 2012, se agregará la sección 'leer en línea' al sitio, lo que dará como resultado que todos los problemas estén disponibles para leer a través del navegador..
En general, todos los involucrados en el proyecto estaban muy satisfechos con los resultados, como comenta Elliot:
Los chicos de Paravel son profesionales y siguen siendo muy divertidos trabajar con ellos, y el producto final es excepcional. No tenía idea de lo que producirían cuando los encargué, pero sabía que sería algo grandioso, que es.
Gracias a Trent Walton y Elliot Jay Stocks por su ayuda con este artículo.
