Con estas dos premisas, comencé el diseño. Sabíamos que se debía incluir la figura de un témpano lo suficientemente icónica para ser reconocida en pequeños tamaños pero que fuese distinguible de una montaña blanca. Se trazaron 3 figuras y perfiles diferentes de témpanos y se eligió el más simple, que aunque mostraba la parte oculta del témpano, se destacaba mucho más la parte superior.

En diferentes estadíos del diseño se decidió encerrar el dibujo en una figura geométrica para que, en caso de ser necesario, se pudiese prescindir del fondo. Se probó con cuadrados, círculos y rombos. La figura que mejor enmarcaba la geometría general de un témpano estilizado era la última, pero se decidió agregarle puntas curvas para suavizar la figura y acortar el espacio que ocupa. La reminiscencia a los carteles de tránsito también ayuda a fijar la vista y notar el diseño enmarcado en su interior.

El logotipo, que es la parte escrita de la marca o nombre, se planteó en un principio en letras mayúsculas y muy comprimidas, para acompañar al símbolo por debajo o a la derecha del mismo. El resultado, además de ser demasiado formal, ocupaba demasiado ancho cuando estaban puestos uno al lado del otro y no quedaba bien proporcionado cuando se ubicaba por debajo del dibujo.

Se decantó por utilizar una letra con cuerpo, secciones curvas y rectas y completamente escrito en letra minúscula, para darle un aire más relajado. Las ascendentes y descendentes de la letra “t” y “p”, en ángulo, ayudan a reforzar las diagonales del rombo y los lados angulosos del témpano, mientras que las letras redondas “e”, “a” y “o” acompañan los vértices curvos de la figura.

El slogan, enmarcado en una cinta, se apoya sobre el doble borde del rombo y proyecta una sombra forzada.

En la versión a todo color se trabajó con tonos degradados para darle profundidad a la parte sumergida del témpano y a las aristas oscuras de la parte superior, pero en las versiones a 2 y 1 tinta y la variante negativa se prescindió de los degradados. En las versiones a 1 tinta y negativo, por la imposibilidad de separar el cielo del mar y la parte sumergida del témpano, se decidió trazar el horizonte con líneas de color, simulando un sombreado básico.

En la aplicación de las etiquetas se utilizó el isologotipo en la parte central, ocupando el mayor tamaño posible y se usó una imagen real de un témpano como fondo. El resto de los elementos se escribieron en blanco sobre los celestes y azules del fondo, excepto la tabla de propiedades químicas, que se le dio un fondo blanco para su mejor lectura. Por último, se realizó una simulación de la etiqueta aplicada a los bidones de 8 y 20 litros, las dos primeras presentaciones del agua envasada TÉMPANO.

Con una cocina tan refinada, su carta debía brindar el mismo estilo. Hasta el momento, se había elegido un estilo rústico, inspirado en colores terrosos y texturas acordes.

Con la gran renovación anual, en la que se actualizan las publicidades de los spónsors y contando con el apoyo de una vinoteca local, que provee las cartas con tapa de cuero, decidimos junto a 720 Comunicaciones y Medios, renovar no sólo la diagramación y nuevos tamaños de publicidades, sino apostar por un diseño más refinado y actualizar el logotipo.

Como en todo rediseño de imagen, se intenta conservar la esencia de la marca, aquello que lo hace característico y que lleva al cliente a distinguirla aunque sus elementos sean alterados. El rasgo distintivo del logotipo es la cresta que corona la letra G y remite a la cresta de un gallo.

Teniendo eso presente, se decidió unir dos conceptos relacionados con el nombre: la cresta del gallo y la letra caligráfica escrita con pluma. Se eligió una tipografía que simula la caligrafía con pluma natural, con tramos gruesos cargados de tinta y secciones delgadas con bellos adornos. La tipografía fue modificada para establecer la diferencia de ambas letras “l”, ya que esta fuente no posee ligaduras especiales y ambas letras se veían idénticas, algo que raramente sucede en la escritura manual. También se eliminaron adornos innecesarios, se corrigieron curvaturas y terminaciones y se agregó la cresta copiando el mismo sello caligráfico que posee la palabra escrita. Se le dio cierta curvatura a la composición para imitar la forma natural en que se escribe a mano.

Finalmente, el logotipo fue aplicado en la tapa del menú, en blanco sobre un rojo profundo, decorado con guirnaldas verticales de hojas entrelazadas. Este mismo motivo se aplicó en las hojas internas, que son interceptadas por un círculo que corta el patrón y aloja el logotipo en un tono de negro translúcido.

Los títulos de las secciones de la carta están escritos en la misma tipografía que el logotipo, en color negro y un tamaño de letra considerable. El resto del texto se realizó en una tipografía sans-serif para bajar un poco la carga dramática y facilitar la lectura, sobre todo en situaciones de baja luz y donde el alcohol quizás ya haya creado un clima proclive al disfrute.

Puede que haya surgido algún inconveniente o que deba esperar a que su transacción sea aprobada.

MercadoPago se comunicará con usted vía e-mail y le indicará qué es lo que sucede y cómo puede solucionarse. Tenga paciencia.

Lo siguiente es ponerse en contacto con nosotros para coordinar la liberación del pago y completar el proceso de diseño.

Recuerde que deberá liberar los fondos para que el pago sea procesado y de esa forma pueda ser cobrado como pago anticipado. El pago anticipado le brinda prioridad absoluta para su trabajo. Tenga en cuenta que el proceso de diseño y desarrollo estás sujeto a diversas variables y que, en gran medida, depende de su colaboración.

Para comenzar deberá contar con toda la información requerida en la entrevista y proveerla en tiempo y forma. También deberá responder a los envíos de muestras y coordinar reuniones con el fin de llegar a buen puerto con lo planificado.

Lo invitamos a seguir recorriendo el sitio.

Esta entrada está protegida. Para verla escribe la contraseña:

Contraseña:

Aún cuando se actualizaron los estilos, se alivianaron los auxiliares gráficos usados en los pies y cabeceras de cada página y se reformuló el esquema utilizado en la tapa, se mantuvo la diagramación a 5 columnas y el mismo tamaño de avisos.

Este diagrama, de 5 columnas, resultaba práctico en un principio, pero al aumentar la cantidad de publicidad, acomodar publicidades de 2 columnas de ancho en un esquema de 5, dejaba un espacio que debía ser llenado por auxiliares o por el propio texto de los avisos clasificados, dejando un aspecto desbalanceado en las páginas.

Otro tema resultaba la diferencia de alturas de las publicidades. Si bien acordamos manejarnos con un sistema modular en altura, había publicidades que ocupaban todo el ancho de la revista pero eran un centímetro más baja que el resto. Esto también proporcionaba desbalance y espacios muertos en la parte superior cuando la página debía ser llenada hasta arriba.

Le propuse al titular dividir la página en una grilla de 6 columnas de ancho por 5 filas de alto. De este modo, se podrían acomodar publicidades de 1, 2, 3, 4 y 6 columnas de ancho y 1, 2, 3, 4 o 5 columnas de alto. Al fijar este sistema de grillas, nos asegurábamos que las publicidades se acomodaran más facilmente, como si fuera un gran juego de Tetris.

Aún cuando no resulte la solución más elegante, es la más práctica, pues brinda más flexibilidad para acomodar la mayor variedad de publicidades que, después de todo, son las que hacen posible la edición de una revista de avisos clasificados gratuitos.

Habiendo cumplido con esta gran deuda que planteaba un reto en cada edición, donde se debían mover anuncios de una página a otra para poder acomodar los espacios vacíos, se procedió a reformular los avisos clasificados en sí. Primero que nada, se escogió una nueva fuente tipográfica, más clara aún que Helvetica Neue y que, por sus conjunción de líneas rectas y curvas ocupaba menos ancho en tamaños levemente mayores al texto actual. Esto permitió aumentar el tamaño del texto ocupando el mismo espacio o, incluso, mucho menos.

Esta nueva fuente nos permitió ahorrar, en promedio, una columna de texto por página, algo asombroso que jamás creímos posible. El texto era más fácil de leer y ocupaba menos espacio. Otro pequeño truco que nos permitió ganar centímetros, fue la eliminación de las líneas horizontales que marcaban las columnas. Al prescindir de ellas, no había que dejar doble espacio a una y otro lado, por lo que el medianil (separación entre columnas) se redujo apenas unos milímetros.

También se ajustaron márgenes internos, superiores y externos. Se sustituyó la fuente tipográfica de todo elemento gráfico por la misma que se utilizó en el texto, en diferentes cuerpos y tamaños, para unificar. Se eliminaron fondos, degradés y todo elemento superfluo, dejando lo mínimo indispensable.

La tapa se reestructuró para brindar mayor importancia al texto, enmarcando lo que era más importante pero no podía ocupar mucho espacio, con líneas horizontales muy delgadas. Esto brindó destaque sin recargar. Se utilizó la misma fuente que en el resto de la publicación, en sus versiones light, médium y bold. Además de decidió que todos los elementos estuvieran alineados por una guía externa que delimita el alcance del texto dentro del área de la tapa.

Como se recuperó bastante espacio, se pudieron ajustar algunas secciones que, ahora, incluían una nota relacionada al rubro en el que se incluía. En el primer número del 2012 tuve el agrado de escribir dos de esas notas, las relacionadas a automotores y tecnología y existe la posibilidad de agregar más notas ajustando pequeñas variables.

En definitiva, para la mayoría de la gente el rediseño puede pasar desapercibido, pero a la larga recompensará en mayor facilidad de lectura y más contenido al alcance del lector. Y menor tiempo de diagramación, porqué no decirlo…

CZ#58 – 01/2012

CZ#57 – 12/2011

El primer y más importante indicador de que tu sitio web necesita un replanteamiento, son los gráficos que comienzan a decaer. Claro que podría haber otras razones para este síntoma (como por ejemplo que tu producto o servicio no encuentre su mercado) pero una vez que se eliminaron o mitigaron esos factores, una baja constante de conversiones, ventas, actividades y participación general del usuario indican que la eficacia del diseño actual de tu sitio ha llegado a su punto más bajo. Mucha gente lo llama “fatiga creativa” pero lo que realmente indica es una desconexión con tu audiencia. La clave para resolver esto en el rediseño  es descifrar en qué parte de todo el recorrido del sitio el diseño “se rompe” y entonces establecer esas áreas como principales prioridades.

Tus usuarios dicen que ya es tiempo

Los gráficos analíticos te dicen de inmediato que algo está mal, pero para llegar al corazón de lo que es realmente necesario para resolver en un rediseño, lo que precisas es hablar con tus clientes. Las encuestas funcionan, pero los tests de usabilidad son más efectivos. La fluidez de la conversación cara a cara te permite explorar la dinámica de un ida y vuelta que las encuestas no tienen. Si a lo largo de estas conversaciones lográs vislumbrar un patrón común que arrojen luz sobre lo que está haciendo que los gráficos vayan en caída (y seguramente surja), entonces es tiempo de pensar en un rediseño.

Puede ser que en estas conversaciones también se revelen actitudes prevalentes hacia tu marca, que también pueden ser resueltas en el rediseño. En algunos casos, la percepción negativa sobre una marca debería ser suficiente para disparar un rediseño, pero quizás nunca lo sepas hasta que hables con tus clientes.

El feedback con tus clientes te aportará no solamente qué partes de tu sitio web rediseñar sino a qué debería extenderse. Usualmente, las conversaciones con clientes se focalizan en elementos específicos del recorrido del sitio. Estas áreas son las que el rediseño debería tener más en cuenta. En muchos casos, no es necesario que sea todo el sitio, pero si el feedback es amplio y más allá de lo que específico, quizás repensar la experiencia por completo sea una prioridad.

La “deuda” de una nueva experiencia

En el transcurso del desarrollo de un producto o sitio web, la organización comienza a acumular deudas en lo referido a tecnología y experiencia de usuario (UX en adelante). Esta deuda está compuesta de todas esas cosas que deberías haber hecho durante el inicio del proyecto pero que no pudiste resolver o tuviste que sacrificar en pos de que el producto fuese entregado a tiempo. Cada iteración subsecuente inevitablemente agrega más deuda a esa lista, hasta que se convierte tan larga que es prácticamente imposible de cumplir. Mientras que hay ciertas formas de abordar esta deuda de tecnología y UX en niveles incrementales, llega un punto en que el sitio web, en esencia, se satura. Como un auto que suma más valor en arreglos por daño que su valor real, tu sitio web llega al punto en que comenzar de nuevo sería más barato que arreglar todos los ítems en tu lista de deudas. Este es el tiempo perfecto para un rediseño.

Cuando la lista de deudas es tan larga, tomar el camino de “rediseños incrementales” es fácil, donde se abarcan varios de esos ítems pero no la mayoría. Esto puede ser desastroso, porque a medida que arreglas ítems de esa lista, se comienza a añadir más deuda en torno a otras características del sitio. Si la lista realmente es más larga que tu brazo, entonces replantea el sitio web, si es posible.

Con el nuevo sitio de Algo Amarillo quería que el usuario descubra todo de una vez y enfocarme en lo que era realmente necesario. Por ello separé esta sección del blog, con una estética similar pero un funcionamiento diferente y el resto del sitio mantiene una interfaz coherente, más directa. Más parecido a un sitio web y menos a un blog. Eso es lo que quería lograr…

Simplemente luce viejo

La estética del sitio web refleja directamente la percepción y confianza de tu marca. Aún si tu diseño era lo más vanguardista cuando recién fue lanzado, la estética evoluciona. Un diseño viejo va en detrimento de tu producto, liderando el factor de declive de los gráficos ya mencionados. ¿Cómo puedes saber si la estética de tu sitio web está desactualizada? Mira a tu competencia. Chequea servicios súper modernos y lanzados recientemente, aunque sea de otro rubro. Compara la estética de tu sitio con esas otras marcas que son exitosas. Estos factores proveen una excelente forma de medir la actualidad de tu diseño.

El desafío es revisar esos otros sitio web objetivamente. Si todos los días, todo el día, estás mirando tu sitio web, esto puede amplificar la idea de que ya no es algo fresco y actual. Para asegurar la eficacia de estas revisiones, asegurate de tomar una muestra de empleados de tu compañía para que hagan sus aportes. O amigos. O parientes. O incluso clientes de confianza.

En este caso el rediseño, básicamente, sería una refrescada, una actualización superficial de la capa de presentación que no se enfoca en mejorar el recorrido del sitio o la navegación, aunque estos aspectos, sin duda, se verán afectados por esta actualización estética.

Pasaron más de doce meses desde el último retoque

Incluso si ninguno de los indicadores anteriores se aplican a tu sitio, la vida útil de un diseño estético en la vida actual, altamente interactiva e hiperconectada que es internet, es raramente mayor que doce meses. Si hace más de un año que tu sitio fue rediseñado por última vez, quizás sea tiempo de pensarlo. No sólo refrescará la experiencia de tus clientes más leales, sino que atraerá a los nuevos. Además, reavivará tu marca y mostrará a tus usuarios, la prensa, los inversores y al staff que sigues comprometido por mantener la experiencia fresca y muy presente en la mente de todos.

De nuevo, el foco aquí está en las mejoras estéticas que mantienen a tu marca actual, pero no es necesariamente un replantemiento completo.

En conclusión

Estos son cinco sencillos indicadores de que es tiempo de rediseñar tu sitio web, pero la lista no es, ciertamente, tan exhaustiva. Dependiendo de la cantidad de estos ítems que se apliquen a tu situación, determinarán si el rediseño es necesario urgentemente o no. Pero cada indicador de por sí ya es una razón lo suficientemente fuerte para pasar a la siguiente etapa en la vida de tu sitio web. Mantener una cara actual y fresca en el mundo online ayudará a incrementar tus dividendos en adquisición de nuevos usuarios, conversiones y retención de los mismos. También, tu staff estará embebido en las últimas tecnologías, tendencias de diseño y capacidad de presentación de interfaz si saben que pronto, muy pronto, estarán sumergidos en el ejercicio de un rediseño.

¿Qué indicadores has encontrado que se aplican mejor a tu organización para llevar a cabo un rediseño de tu sitio web?

• Traducción libre del post ‘Clear Indications That It’s Time To Redesign‘ del sitio web SmashingMagazine

Desde su nacimiento, Posta Cultural se manejó con una comunicación sencilla y clara, basada en un blog gratuito. En 2011 decidieron que debían profesionalizar su sitio web para acompañar el crecimiento que tuvieron a lo largo de su primer año de vida como consultora.

Teniendo la identidad visual resuelta, con colores planos  -dos tonos de naranja y blanco- y una tipografía recta, con aristas curvas y un aire despojado y moderno, se decidió que todo el sitio girara en torno a esos elementos: el color y cajas de colores planos que anidaran los diversos elementos del sitio.

A medida que el proyecto fue madurando, resultó que, en líneas generales, resultaba demasiado plano. Les propuse incorporar elementos dibujados como fondo y decoración del pie de página, que tuvieran un cierto aire infantil, dibujado a mano suelta y que contrastara con las líneas rectas del resto del sitio.

El resultado quedó bastante bien. El dibujo fue realizado por quien escribe, sobre papel y escaneado para poder ser manipulado digitalmente. En el dibujo se incluyen elementos comunes a la cultura popular, como libros, cuadernos, cubiertas de discos, instrumentos musicales, juguetes, pelotas, notas musicales, etc.

Una barra lateral, de color gris claro, contiene algunos de los elementos que se encontraban en el blog, pero de modo más organizado. Allí se pueden leer notificaciones de emergencia o muy importantes, las participaciones de Posta Cultural en eventos o actividades que exceden a las gestionadas, acceso a la página de Facebook y al canal de Youtube. En un futuro se podrán ir agregando mayores funcionalidades.

Debido a la naturaleza libre del blog, en el que se van agregando posts que se organizan en el tiempo, el resultado puede ser bastante caótico. Es por esto que les propuse reducir la cantidad de información disponible apenas uno entra al sitio web.

En la página de inicio se pueden ver los eventos futuros, con una imagen ilustrativa y los datos más importantes. Por debajo, un listado de los 10 eventos más recientes. Haciendo clic en cualquiera de ellos, se abre una ficha del mismo, donde se amplia la información y se complementa con imágenes, audios, etc.

Las típicas secciones de todo sitio – Acerca de, Contacto, Enlaces, etc.- también se encuentran, anidadas en una barra de menús ubicada en la parte superior. Allí, escondida, se halla también la barra de búsqueda.

Todas las páginas del sitio pueden ser compartidas a través de Twitter, Facebook y Google+, sólo con hacer clic en los íconos adecuados. Una sección llamada Galerías anida, de forma organizada, galerías de fotos, videos, audios y la reseña de eventos que ya acontecieron.

El sitio fue lanzado a mediados de Noviembre y se encuentra en continuo desarrollo y crecimiento, por lo que es posible que esta reseña reciba actualizaciones muy pronto.

Los medios, como casi siempre que sucede un hecho de esta naturaleza y escala, lograron sobrepasarnos. Y es entendible que a algunas personas, en especial aquellos que no usan productos de la marca o simplemente la odian, se hayan sentido agobiados de tantos homenajes de bajo presupuesto. Incluso se llega a entender los mensajes ofensivos, pretensiosos de cinismo, sarcasmo y brillo mental. Lo entiendo. Es parte del juego. Sobre todo cuando se vive en una sociedad dominada por la teoría del blanco o negro. A veces duele, porque se recurre a la mentira, la falsedad o la crudeza por contraste con tal de darle cierto aire de razón a las expresiones propias. Incluso se entiende el uso del humor negro. Yo mismo lo uso habitualmente. La mayoría de las veces sirve para descomprimir una situación incómoda, pero últimamente se usa para herir, para marcar la diferencia, para demostrar descontento con algo o alguien.

En estos mismos tiempos turbulentos de la Argentina, en la que todo el tiempo se cuestiona el discurso de los medios, políticos, empresas, artistas, dirigente, personas destacadas, incluso del vecino, y en los que se resguarda a la libertad de expresión como si fuese el tesoro sagrado, confiado a una orden reducida de sacerdotes como únicos protectores, se dice cualquier cosa. De cualquiera. Sin temor a equivocarse y sin tiempo a corregirlo. No hay costo. Y sin embargo tampoco hay premio.

Steve Jobs fue una personalidad polémica desde el momento en que comenzó Apple. Su socio fundador, Steve Wozniak, es Ingeniero y fue él quien realmente dio vida a la Apple I. Otro socio puso el capital (enorme para esa época) para hacer despegar el negocio de una vez por toda y salir del garaje de los padres de Jobs. Y entonces, ¿qué aportó el propio Steve Jobs a Apple?

Pues nada más y nada menos su facilidad para convencer al resto que vendían el mejor producto que se podía comprar. El más fácil de usar. El mejor diseñado. El apropiado para sus necesidades.

El carisma de Jobs era tan grande que, aún en sus peores épocas, lograba hipnotizar. Quizás era aquel maravilloso juego de palabras que destacaban los logros de sus productos. La descripción, a veces exagerada, de las posibilidad del software o el hardware que estaba presentando al mundo. Quizás se debía a las diapositivas con increíbles fotos, videos y gráficos que disponía en cada evento. Pero aún en una ocasión como la de la graduación de 2005 en Stanford, donde sólo era él ante los alumnos, Steve logró cautivar a todos.

Claro, en aquella oportunidad contó cuestiones de su vida privada (incluso aquellas que sucedieron antes que él naciera) que muy pocos conocían. También se valió, en esa oportunidad, de un recuento muy somero de los sucesos, pues en realidad no fue echado de Apple sólo porque sí, sino porque el fomento a la rivalidad interna entre equipos dentro de Apple se le estaba yendo de las manos a su CEO. Lo que se hizo, según se sabe, fue quitarle el poder de decisión dentro de Apple, pasando a ser, meramente, un empleado más. Luego de aguantar unos 4 o 5 meses en esa situación, decide renunciar.

Steve nunca nos contó todo lo que sabía de algunos hechos. Mucho menos de sus productos, pues se sabe que toda cosa en el mundo tiene sus pro y tiene sus contra. Pero él era un eximio vendedor, marketinero de la primera escuela. Sabía qué decir, cómo decirlo y sobre todo, sabía elegir muy bien a sus enemigos.

El aporte de Jobs, o de Apple en general, a la industria informática y electrónica es más amplio de que lo que muchos suponen y no quieren reconocer. Si Apple no hubiese portado la idea de la interfaz gráfica y el uso del ratón a una computadora hogareña, el desarrollo de Windows hubiese tomado años en ser lo que hoy es. Y quizás sería muy diferente.

Los reproductores portátil de música serían, quizás, de mala calidad, caros y diseño horrible. Los teléfonos inteligentes seguirían teniendo si o sí teclados QWERTY como tienen sólo algunos modelos de Blackberry y las PC seguirían siendo cajas de color beige. Quizás no. Nunca lo sabremos. Pero Apple ha logrado empujar los límites de la técnica, tecnología, concepto y diseño un poco más allá de los que nadie pensaba.

De ahora en más veremos si sólo Jobs era el impulsor de ese adelanto antológico o era sólo una pieza más del engranaje, reemplazable al fin. No veremos más a ese vendedor que, con palabras mágicas y mucho show nos presentaban esos productos que, a los que usamos Apple, nos sería imprescindible poseer. Pero su legado seguirá.