Nuevo diseño de Apuntes al Margen

por Natalia Ventre el ・ podés leerlo en 6 minutos ・

La semana pasada empecé a trabajar en el diseño de Apuntes al Margen y ahora que está online decidí compartir las motivaciones y el proceso porque hace mucho que tengo ganas de escribir un detrás de cámaras.

Un poco de historia

Empecé Apuntes al Margen en el 2008, pero el enfoque actual en diseño web y desarrollo front-end es más reciente. A fines del 2011, leí el artículo How To Use Calepin, the Easiest Blog Tool in the World y gracias al descubrimiento de los generadores estáticos de blog me dieron ganas de volver a escribir (hoy uso Jekyll).

Un año después, a fines del 2012, empecé a participar en las comunidades de Google+ y eso fue lo que terminó de darle forma al proyecto porque encontré un canal para promocionar a AAM y una fuente de inspiración. Algunos artículos son de hecho respuestas largas a preguntas vistas en comunidades de Google+.

Nuevo diseño

¿Por qué un nuevo diseño? Básicamente porque AAM no tenía diseño. 6 meses atrás no sabía exactamente qué dirección iba a tomar el blog, no tenía los objetivos definidos y el contenido actual era sólo una lista de ideas.

Uno de los objetivos de AAM es promover buenas herramientas para diseño web y desarrollo front-end. No pasa sólo por escribir reseñas y/o tutoriales, quiero ser coherente con lo que recomiendo y que el blog sea un ejemplo de lo que se puede hacer con dichas herramientas.

Para el diseño usé Sketch1 porque tiene todo lo necesario para diseño web, ni más ni menos:

  • La calidad del texto es impresionante, ¡el renderizado es idéntico al navegador!
  • Es una aplicación vectorial, así que es súper fácil crear elementos, seleccionarlos y modificarlos. Inclusive las operaciones booleanas son no destructivas. Podés hacer zoom usando una grilla de pixeles para asegurarte que al exportar como mapa de bits va a quedar perfecto.
  • Podés crear estilos (por ej. para botones ó texto) y re-utilizarlos.
  • Tiene una grilla en columnas totalmente configurable.
  • El lienzo es infinito, pero podés sub-dividir en múltiples mesas de trabajo con medidas fijas. También podés crear páginas.
  • Podés exportar slices (¿tajadas?) como JPG, PNG, etc. para web y en alta resolución.
  • Soporta múltiples rellenos y sombras (igual que en CSS).

Contenido primero

En AAM publico textos largos que incluyen:

Basándome en los tipos de contenido mencionados más arriba, diseñé algunos “módulos” en Sketch. Con módulos me refiero a elementos que se repiten, por ej. título + metadata + introducción, no son tan literales como las comps ni tan libres como las styles tiles.

Captura de pantalla de Sketch
Diseño de AAM en Sketch.

Actualmente el 10% de las visitas son de móviles (incluyendo tabletas). El nuevo diseño sigue siendo adaptable, pero hice una interpretación más libre del concepto de “móvil primero”. Podés leer AAM desde un celular sin pellizcar y hacer zoom, pero a pantalla completa en un monitor grande (por ej. 21 pulgadas) también se aprovecha el espacio.

Captura de pantalla de Apuntes al Margen
AAM en escritorio a pantalla completa y en un iPhone.

En una versión anterior había una foto de la costa montevideana a la que un par de lectores le tomaron cariño, en esta versión, cada artículo va a tener una imagen ilustrativa editada en Pixelmator. Pixelmator es un excelente editor de imágenes que no tiene nada que envidiarle a Photoshop. Por ej. en Herramientas de desarrollo front-end hay una imagen de un jabalí2 que hace referencia a Grunt. El punto de partida son fotos encontradas en Flickr con licencia de Creative Commons para modificar, adaptar o usarlo como base y para unificarlas usé la paleta de colores de Flat UI.

Captura de pantalla de una versión anterior de AAM
Una versión anterior de AAM con un cabezal decorativo.

Siempre diseño de adentro hacia afuera3, en la homepage incluí el último artículo publicado para los lectores frecuentes y una lista de artículos populares e información acerca del blog para los nuevos.

Código

Apuntes al Margen es un blog dirigido a diseñadores web y desarrolladores front-end. Asumo que los lectores usan un navegador moderno y de hecho las estadísticas de Google Analytics lo confirman, así que no usé Modernizr para ofrecer alternativas a navegadores que no soporten ciertas características.

Hace mucho que quería probar Compass o Bourbon, en esta versión usé Bourbon, una librería de mixins para Sass bien documentada y sencilla de implementar:

  • Flex-grid: con el mixin flex-grid resolví las columnas (el contenido principal es una única columna, pero el diseño es en realidad a 12 columnas) y no tuve necesidad de agregar un sistema específico de grilla.
  • Pixels to Ems: para mí es más sencillo pensar en pixeles que en ems, así que usé este mixin para convertir algunas medidas a ems.
  • Position y Size: son dos mixins para definir la posición (que generalmente requiere coordenadas) y el tamaño, no es imprescindible, pero el código quedó más sencillo de leer y por lo tanto de mantener.
  • Prefixer: de Bourbon también usé los mixins para agregar los prefijos para cada navegador de las propiedades CSS3.

Me encantan los demos de Codrops y para el menú principal usé el blueprint Slide and push menus con algunas modificaciones. Usé iconos de FontAwesome.

Planes futuros

  • Más contenido: En Wunderlist tengo más de 50 ideas para nuevos artículos, así que el plan es regularizar la frecuencia y publicar idealmente 1 artículo nuevo por semana.
  • Multimedia: Actualmente los artículos son texto porque me gusta escribir, pero me gustaría publicar también algunos videos. Los videos serían un complemento del texto y no un sustituto. La motivación es para mejorar la calidad del contenido y atraer potenciales lectores, a través de resultados de búsquedas y sitios como YouTube, etc.

¿Comentarios? ¿Sugerencias?

Si tenés algún comentario o sugerencia sobre el diseño y/o contenido de Apuntes al Margen, te agradezco que te comuniques por email, mencionando a @nataliav en Twitter o +Natalia Ventre en Google+.


  1. Apoyo el concepto de diseñar en el navegador, o más bien, tomar decisiones en el navegador, pero no quiere decir que haya que tirar todas las aplicaciones de diseño a la papelera.

  2. No sé qué animal exacto es el logo de Grunt y tampoco estoy segura de que el bicho de la foto sea un jabalí.

  3. En 37 Signals lo llaman Epicenter Design