Sebastián Thüer Blog » Diseño Web

Color Thief, obtener paletas de color a partir de una imagen

Sebastián Thüer — Mon, 06 Feb 2012 11:00:00 +0000

La elección y construcción de una paleta de color para el diseño web probablemente sea una de las tareas más delicadas e importantes para determinar el look & fell de una aplicación. Definir el color dominante, sus variaciones tonales y uso de complementarios es una tarea que suele llevar bastante tiempo y donde tenemos el auxilio de varias herramientas como Adobe Kuler y aplicaciones como Website Color Schemer que a pesar del tiempo sigue siendo un de mis favoritas.

Pero la popularización de los móviles con cámara y los smart phones ha hecho que muchos diseñadores comencemos a tomar fotos solamente cuando vemos un paisaje, detalle o ambiente que nos resulte “inspirador”. De estas imágenes casuales suelen derivar composiciones y, como no, paletas de colores que luego utilizamos en nuestras creaciones.

Por eso me ha sorprendido gratamente saber que existe una bibioteca de JavaScript que permite analizar los colores predominantes de una imagen como Color Thief. Esta aplicación, analizar las imágenes y puede obtener con bastante buen criterio una paleta de colores. Pensemos que con esto podemos crear una galería de fotos para buscar por colores. Podemos hacerlo para nuestra propia bibioteca de imágenes o incluso con imágenes de stock que hayamos adquirido.

Otra posibilidad de este librería: hacer que la tonalidad de una interfaz se adapte a una determinada imagen de forma automática. En definitiva, un excelente ejemplo de intersección entre diseño y programación.

Cómo se crea un Doodle

Sebastián Thüer — Thu, 02 Feb 2012 11:00:00 +0000

Google decidió homenajear a Atahualpa Yupanqui con un doodle -una modificación alusiva del logotipo de Google- hace un par de días donde se podía ver una enorme guitarra que atravesaba las letras con el nombre del buscador, unas montañanas en el fondo, vaquitas y un sol: algunos de los elementos más iconónicos en la obra del folclorista argentino.

Lo interesante es que el blog de Google AdWords -realmente no sé qué tiene que ver este contenido aquí- ha entrevistado a Jennifer Hom, la diseñadora que lo creó donde habla sobre su trabajo en Google. Es sabido que Google tiene un extremo celo sobre el trabajo de sus empleados, así que no hay datos reveladores pero si algunas pistas y cuestiones bastantes curiosas.

Aquí van algunos de los puntos, a mi juicio, más interesantes de la entrevista:

Desde hace relataviamente poco tiempo existe un equipo exclusivo para diseñar los doodles.
No son más de 5 diseñadores los que crean los Doodles para todo el mundo.
Parce ser que todos los Doodles, de eventos internacionales y locales, se diseñan desde las oficinas de Google en Mountain View.
Los Doodles más complejos -como el de Gibson Les Paul’s o Freddie Mercury pueden llevar varios meses de trabajo en equipo.
Jennifer consiguió su trabajo en Google de una forma bastante clásica: cuando estaba terminando sus estudios de Bellas Artes mostró su portfolio y la llamaron a una entrevista.

HTML5: Qué herramientas conviene usar ahora y cuáles deben esperar

Sebastián Thüer — Wed, 01 Feb 2012 15:00:00 +0000

Varias veces en este blog hablé sobre la conveniencia de comenzar a utilizar HTML5 en el diseño web. Desde la Guía de HTML5 para diseñadores web, esta presentación sobre HTML5 en 15 minutos hasta el listado de recursos HTML5 para comenzar ya.

De todas maneras, antes de correr a estudiar HTML5 hay que tomar nota que se trata de una versión de HTML en pleno desarrollo y que todavía hay algunas funcionalidades en modo experimental o que se van corrigiendo sobre la marcha. Por eso es interesantes darse una vuelta por HTML5please.us donde hay un buen listado de todas las funcionalidades del lenguaje, su estado de desarrollo y nivel de compatibilidad.

Por ejemplo, ya es hora de comenzar a utilizar border-radius para las esquinas curvas en lugar de emplear imágenes, pero hay que evitar siemprea que sea posible la etiqueta filters porque su sintaxis todavía no está fijada. Para utilizar tipografías online se recomienda @font-face pero asegurando la compatibilidad para navegadores que no soportan esta propiedad.

Captura pantalla sitio html5please.us

Lo mejor de todo es que la información funciona al estilo WIKI pero con un formato mucho más amigable y rápido para la consulta: se puede editar la información publicada, consultar qué navegadores soportan determinadas etiquetas y obtener enlaces para ampliar la información.

Ya estás informado: antes de lanzarte de lleno al HTML5 conviene darte una vuelta por HTML5please.us para verificar que las propiedades y etiquetas a utilizar sean soportadas de un modo estándar por los navegadores más modernos.

5 recursos de diseño que ya pasaron de moda y cómo suplantarlos

Sebastián Thüer — Thu, 19 Jan 2012 10:00:03 +0000

El diseño -ya sea web, gráfico, de modas o industrial- está alcanzado por tendencias o modas que marcan una cierta pauta de los recursos que se están utilizando. De algún modo, los usuarios o consumidores esperan manejarse en un contexto previsible que las aporte seguridad y, a la vez, reconocer rasgos distintivos que doten de personalidad al objeto.

En este sentido, es interesante el aporte que hace DesignShack a través de 5 Former Design Trends That Aren’t Cool Anymore (So Stop Using Them) donde recoge algunos de los principales clichés del diseño que han sido exprimidos hasta el hartazgo y ya no provocan ese toque sofisticado y moderno que tenían antaño.

1. Bevel & Emboss (biseles y relieve)

En algún momento pudo ser original, pero ahora parece un recurso de principiante con el Photoshop. Una imagen así hace que tu diseño automáticamente retroceda 10 años.

Hoy en día se tiende a minimizar el uso de estos recursos y darle a los objetos un aspecto más real sin sombras y brillos artificiosos. En lo personal creo que no hay que obsesionarse con estos efectos iluminación y mejor trabajar con sombras más situales. De todas formas, si la intención es dar sensación de relieve mejor trabajar con sombras y brillo más tenúes y progresivos. Un buen ejemplo es este trabajo de Matt Gentile.

2. Brillos “a la” Web 2.0

Sí, en un momento la web 2.0 se puso de moda y surgieron los colores brillantes y efectos de plástico brillante. Era un lindo momento donde decir redes sociales era estar a la vanguardia y todo el mundo ponía el rótulo de “beta” al lado de su logo.

Esa época ya pasó. Los degradados con efecto vidriado ya tuvieron su hora estelar y si bien son un recurso válido su abuso terminó por homogeneizar muchos sitios web. Hoy en día es preferible apostar por degradados más suaves, bordes ligeramente marcados para despegar el botón del fondo. Como lo hacen en la web de Firefox.

3. Textos en manuscrito

Por alguna razón la utilización de la tipografía manuscrita cada tanto resurge en el diseño. Se trata de un recurso que bien utilizado aporta un toque fresco y casual para quebrar la sucesión de tipografías formales. Pero normalmente se termina recurriendo a fuentes gratuitas que aparecen por todo el sitio con lo cual se pierde su intencionalidad original y el sitio en lugar de lucir “fresco” parece desorganizado y con problemas de legibilidad.

En su lugar, mejor apostar por tipos claros y simples para presentar el texto. Hoy en día, existe muchísimas tipografías con estilo y buena legibilidad. Mejor reservar el estilo manuscrito para lugares donde realmente tenga valor.

4. Promociones estrelladas

Ofertas, descuentos, 2×1 y demás reclamos promocionales solían estar siempre dentro una estrella de colores vibrantes. Un golpe de efecto al que ya le pasó su cuarto de hora y que actualmente se puede reemplazar por una gama mucho más amplia de recursos gráficos para destacar argumentos de venta.

En su lugar, podemos optar por lazos colocados en esquinas, vértices o centrados en la misma página. Otra alternativa son los distintivos o divisas que ayudan a destacar la información pero de un modo mucho más armónica e integrado con el resto de los elementos gráficos de la página

5. Sombras exageradas sobre el texto

Hubo un tiempo en que el descubrimiento de las sombras causó furor y se aplicaba a casi cualquier elementos. Como suele ocurrir con las cosas nuevas, se utilizó de una forma abundante y exagerada donde pasada la sorpresa inicial la sombra se convertía en un elementos distractivo. Como ocurre con el efecto “bevel & emboss”, utilizar este recursos de la misma manera significa gritar a los 4 vientos que nuestro criterios estético se ha detenido en el tiempo.

¿Hay que dejar de usar sombras? Seguro que no, pero si emplearlas de un modo diferente. Apostar por la sutileza, los matices y degradados suaves que ayuden a reforzar la comprensión del texto. O líneas definidas que ayuden a marcar el relieve sin utilizar excesivos nivels de degradado.

Conclusión

Un sitio con aspecto anticuado y donde adentrarse en sus página implique un salto en el tiempo es algo que nadie quiere. Una cosa es utilizar la estética retro o vintage como recurso y con cierto sentido y otra cosa es abrir en el navegador un diseño al que simplemente le pasó el tiempo.

Las técnicas y recursos descriptos son propias de un modo dediseñar sitios web que ya está superado. No quiere decir que lo que se utiliza hoy sea mejor -aunque es cierto que ahora hay una mucho mayor preocupación por los pequeños detalles- pero sí que al menos aporta un toque actual al diseño. En definitiva, aggiornare a los tiempos que corren.

BaseKit, en busca de la sencillez y profesionalidad para crear sitios web

Sebastián Thüer — Tue, 17 Jan 2012 10:00:49 +0000

Encontrar una forma fácil de diseñar un sitio web y, a la vez, obtener resultados profesionales, es el sueño de muchos. BaseKit es una plataforma online que persigue este objetivo y está ampliando sus operaciones hacia el mercado lationamericano donde ” el espíritu empresarial y la gran cantidad de negocios familiares existentes llevan a que mucha gente quiera crear su propia página web”, dice Jaime Jiménez, Head of Search de BaseKit para mercados de habla hispana.

BaseKit apunta a diferentes públicos: desde el emprendedor entusiasta que necesita rápidamente un sitio web hasta el diseñador profesional que quiere escribir su propio código HTML y CSS. Además, acaba de lanzar una red de diseñadores web donde poder mostrar tus trabajos, intercambiar experiencias y, lo más interesante, conseguir clientes.

De todo esto hablamos en esta entrevista a Jaime Jiménez.

En pocas palabras, ¿Qué es BaseKit?

BaseKit es una plataforma 100% online, con la que, sin tener que descargar ningún software en tu ordenador, podrás crear páginas web, sin necesidad de programar y con un resultado absolutamente profesional.

Jaime Jiménez - Head of Search BaseKit Mercados habla hispana

¿Qué ventajas ofrece BaseKit frente a otras herramientas de diseño web?

Las características avanzadas de diseño y edición del editor web BaseKit, lo hacen único en el mercado, ya que permite al usuario tener un control absoluto sobre la creación de su sitio web.

Por un lado, permite a usuarios sin experiencia técnica previa, diseñar su propia web de una forma rápida y sencilla a partir de una de las más de 100 plantillas web prediseñadas que la plataforma ofrece.

Pero si en cambio, eres un diseñador profesional, con BaseKit, podrás sacarle mucho más partido a tus diseños web, pudiendo acceder a características avanzadas e incluso al código HTML5/CSS3, y tener un mayor control sobre el desarrollo de tu proyecto.

Además con la solución ‘todo incluido’ de BaseKit, tendrás todo lo que necesitas para hacer una página web, sin sorpresas posteriores: alojamiento, dominio y acceso ilimitado al editor. Y si necesitas ayuda, tienes a tu disposición un equipo profesional de soporte que estará encantado de atenderte siempre que lo necesites (también incluido).

¿Cómo puede esta plataforma ayudar a los diseñadores web?

BaseKit se presenta como la mejor opción para todos aquellos diseñadores que buscan una herramienta profesional y flexible para desarrollar su trabajo. Sin duda, la mayor ventaja para ellos es, que sin necesidad de tener que crear el código, los resultados son páginas web absolutamente profesionales que funcionan y pueden ser vistas desde cualquier dispositivo, incluidos teléfonos móviles y iPads. El editor incluye funcionalidades SEO, con las que podrás responder a los requerimientos más exigentes de tus clientes.
La plataforma puede ser aprovechada también por todos esos diseñadores gráficos que todavía no se han atrevido a dar el salto al diseño web.

¿Qué es la red profesional BaseKit?

La red profesional de BaseKit nace con el propósito de ofrecer a todos aquellos profesionales del diseño que utilizan BaseKit o que les gustaría empezar a utilizarlo, un punto de encuentro en el que compartir experiencias con otros diseñadores, formarse (gracias a los seminarios y webinars que se realizarán a menudo), y en definitiva convertirse en una plataforma de promoción para ellos y sus trabajos.

Una de las ventajas importantes de pertenecer a esta Red Profesional es que podrás ganar dinero utilizando BaseKit para crear páginas webs para nuestros clientes.

¿Qué costo tiene usar BaseKit?

Un plan anual Business en BaseKit, que incluye todo lo que necesitas para crear una web profesional: dominio, alojamiento, editor web, número ilimitado de páginas en el site, tienda online… tiene un costo de AR$ 53/mes.

¿Qué importancia tiene para ustedes el mercado hispano / Latinoamericano?

Basekit es un aliado perfecto para los mercados latinoamericanos, en los que el espíritu empresarial y la gran cantidad de negocios familiares existentes llevan a que mucha gente quiera crear su propia página web. Es por esto que desde Julio de 2011 BaseKit viene operando en Argentina, Chile, México, Perú y Colombia.

Cómo crear el favicon perfecto

Sebastián Thüer — Wed, 28 Dec 2011 15:30:43 +0000

El icono que acompaña a nuestro sitio web suele ser una pequeña pieza a lo que se le presta gran valor. En parte, porque se minimiza su importancia y en parte por el gran desconocimiento que existe entre los diseñadores web sobre cómo crear buenos iconos que logren transmitir la identidad de la página.

Comencemos por el principio. El icono que acompaña a las páginas web fue introducido por Internet Explorer 5. Para ello bastaba con copiar en la raíz del sitio web un archivo “favicon.ico” que consistía una imagen de 16×16 píxeles. Hoy en día todos los navegadores modernos utilizan los iconos. Es más, algunos navegadores como Firefox suelen dejan un soso recuadro blanco si no hay imagen asociada para mostrar.

Jon Hicks acaba de editar The Icon Handbook, un libro que contiene un capítulo entero dedicado a los faviconos o iconos para páginas webs. En .netMagazine publican un extracto del capítulo con algunos interesantes consejos. Veamos:

El icono no es un logotipo. Cumple una función similar a la bandera, una firma o una señal de tráfico: sirve para identificar de manera rápida y fácilmente reconocible.
Hay que tener en cuenta el contexto donde el icono se va a reproducir. La imagen de 16×16 ya no es el único tamaño, los smartphone y tablets y nuevos navegadores utilizan sus propias resoluciones que llegan hasta las 195 pixeles en el caso de las ventanas iniciales de Opera.
Las imágenes de mayor tamaño pierden nitidez al redimensionarse a otro tamaño y crean pixeles intermedios que dificultan la interpretación del gráfico. Por eso, lo mejor es incluir varias versiones del mismo icono
El formato ICO y el PNG son los más adecuados. Ambos soportan transparencias y pueden ser reproducidos sin problemas por la mayor parte de dispositivos y navegadores.
Una vez que tenemos la imagen de base en formato vectorial, el diseño tiene que partir del tamaño más pequeño y es fundamental borrar los píxeles intermedios que crean automáticamente los editores de imágenes.
El formato ICO permite agregar múltiples resoluciones a un mismo archivo.
Hay que considerar el formato tamaño para los dispositivos táctiles de Apple que trabajan en resoluciones diferentes (72×72). Los dispositivos con Android también lo soportan.

WordPress vs. Drupal

Sebastián Thüer — Thu, 22 Dec 2011 15:00:51 +0000

Probablemente WordPress, Drupal y Joomla son los gestores de contenido (CMS) más utilizados por desarrolladores, diseñadores y administradores de sitios web. La versatilidad que ofrecen, junto con la experiencia de varios años y la robustes propia de las aplicaciones de software libre los han ubicado en un lugar destacado.
Personalmente, trabajo con WordPress y -algo menos- con Drupal y por eso me resulta interesante leer esta comparativa publicada en Smashing Magazine. Antes de ponerse a discutir “cuál es mejor” conviene detenerse en cuáles son sus principales fortalezas a la hora de tener que optar por uno.

WordPress posee una enorme comunidad de usuarios y es debería ser la primera opción cuando se trata de llegar a usuarios que no está muy familiarizados con el HTML. Para los diseñadores, la personalización resulta bastante más sencilla y para los expertos en SEO el manejo de las redirecciones y URL es tan sencillo como eficaz.

Drupal tiene su fortaleza en un completo sistema de manejo de permisos por usuarios con lo cual podemos crear un entorno donde existas múltiples roles y funciones. Puede gestionar mejor picos de mucho tráfico y posee un sólido manejador de base de datos.

¿WordPress o Drupal? La respuesta depende de para qué. La Casa Blanca, por ejemplo, gestiona bastante de sus sitio a través de Drupal por la solidez que le ofrece la herramienta. Por contrapartida, la curva de aprendizaje para un administrador es más lenta y no siempre resulta fácil introducir modificaciones a la estructura predeterinada.

Pero si lo que importa es un diseño creativo y la posibilidad de personalizar el sitio WordPress saca unos cuerpos de ventaja. Hay cientos de themes de muy buena calidad que permiten modificar radicalemente el aspecto del sitio sin necesidad de tocar el corazón del sistema.

El diseño web en 2011: Las principales tendencias del año que se va

Sebastián Thüer — Wed, 14 Dec 2011 19:15:49 +0000

Con la llegada del final de año comienza la sistemática publicación de artículos que recogen lo mejor (o peor) de la temporada que se está yendo. Con el diseño web ocurre algo similar así que me gustaría hacer mi aporte personal al género “lo mejor de 2011” con una mirada un poco más general sobre aquellos puntos que han marcado el año en el diseño para la web.

HTML5 y CSS3

Los diseñadores tomaron la delantera y está utilizando CSS3 de manera cada vez más fluida para simplificar procesos que antes requerían de trucos y “hacks” para que funcionacen corramente. Bordes redondeados, sombras, incluso animaciones y menús interactivos: con CSS3 definitivamente la vida es más fácil.
HTML5 viene algo más demor ado. Muchos ya estamos utilizando las etiquetas semánticas específicas como

Llega WordPress 3.3 con muchas novedades

Sebastián Thüer — Tue, 13 Dec 2011 16:41:16 +0000

La nueva versión de WordPress 3.3 ya está disponible y esta actualización tiene muchas novedades. Por empezar, hay un rediseño de los menús laterales donde ya no hace falta hacer clic en cada opción para acceder al submenú.

También han mejorado bastante la subida de archivos que ahora se puede hacer con drag & drop (arrastrar & soltar), tal como por ejemplo tienen los adjuntos de Gmail. Además, ahora el sistema puede reconocer los tipos de archivos más habituales y es campaz de procesar archivos comprimidos en RAR y 7z (de 7-Zip).

Hay bastantes más cosas por descubrir por lo que te recomiendo que te tomes un momento para ver todos los cambios: importación desde Tumblr, mejor manejo de enlaces permanentes, nuevas versione de jQuery, nueva API y bastante más. Además de los visual, han trabajado bastante para mejorar y optimizar funcionalidades que ya estaban presentes.

Por el momento la actualización funciona bien, hay alguna mejora en el rendimiento y los cambios de interfaz ayudan a mejorar bastante la productividad. Eso sí, con Google Chrome hay un problema a la hora de incrustar enlaces desde la vista de diseño. Esperemos se arregle pronto.

Vuelve BundleHunt con un pack de recursos para diseñadores

Sebastián Thüer — Sat, 03 Dec 2011 13:00:09 +0000

BundleHunt, el un paquete de recursos para diseñadores, está de vuelta. Si en el comercio generalista reinan los sitios con cupones de descuento, en el ámbito del diseño estos packs llenos de programas, pantillas, libros, iconos y otros recursos se están consolidando como un modo de ofrecer productos a precio promocional.

Por casi 50 dólares tenés programas de diseño, libros de Smashing Magazine, varios themes para WordPress, colecciones de vectores e iconos. Como en la anterior oferta, la mayoría del software corre sólo sobre Mac. La oferta termina el 16 de diciembre.

Por qué los usuarios abandonan tu carrito de compras [infografía]

Sebastián Thüer — Fri, 25 Nov 2011 14:33:27 +0000

Una cuestión clave que conocen los vendedores de toda la vida es la habilidad para cerrar una compra. Una vez que llega el comprador, se interesa por un producto y comienza el proceso de decisión de compra hay una serie de elementos clave que ayudan al usuario a tomar la decisión de proseguir.

Esta infografía muestra algunos de los problemas más comunes en las ventas online y lo que se conoce como “shopping cart abandonment”, un problema no menor que afecta al 75% de las transacciones online. La clave está en una buen diseño de todo el proceso con indicaciones claras de los pasos a seguir, mostrar imágenes de los productos, permitir editar la compra para agregar o quitar productos, ofrecer protocolos seguros, ofrecer formas de contacto alternativas (el télefono todavía importa) y diversificar las opciones de pago.

También conviene recordar que NO hay que hacer: forzar el registro de usuarios, esconder costos finales (envío, gastos de procesamiento y otros galimatías) y uno que me parece muy importante: no ofrecer un cupón de descuento de forma innecesaria. Si lo haces, lo más probable es que el usaurio abandonde tu página para buscar algún cupón por ahí con el posible riesgo de que se pierda y no retorne.

Vía SearchEngineLand

Del hipertexto a los hiperdispositivos

Sebastián Thüer — Mon, 21 Nov 2011 16:51:34 +0000

Hace 20 años atrás la web nació como una plataforma para la distribución de textos e incorporó una nueva dimensión los enlaces. Su flexibilidad distributiva, la capacidad para conectar unidades de información y la facilidad con lo cual podía realizarse lo convirtió en uno de los aspectos fundamentales que revolucionó la web.

Del hipertexto pasamos al hipermedia. La información ya no se transmitía a través del texto escrito sino que se sumaron los lenguajes visuales y audiovisuales. En este punto, el desarrollo de las empresas privdas fue bastante por delante de las propuestas de la W3C y tecnologías como Flash le dieron una nueva vida a la web gracias a la incorporación de gráficos vectoriales, animaciones, sonidos y, algo más tarde, una forma sencilla y eficaz para la transmisión de video.

En el blog del W3C Dominique Hazaël-Massieux plantea una interesante propuesta: estamos ingresando en la era de los hiperdispositivos (hiperdevices). Ya no es solamente que una web se vea desde un teléfono móvil, una tablet o la TV, sino que estos dispositivos vienen equipados con nuevas capacidades que modificarán radicalmente la experiencia en la web.

Por ejemplo, tabletas con acelerómetros que rotan gráficos en 3D de acuerdo a la velocidad a la que se desplaza la persona. O móviles con geolocalización que pueden mostrar información específica del área en la cual está el usuario. O pantallas táctiles en las cuales se puede dibujar a la distancia. O televisores inteligentes que pueden descargar información de nuestros programas favoritos de forma automática.

En definitiva, se está abriendo un nuevo escenario donde va tomando cuerpo la idea de que no existe un contenido o mensaje único sino que se va construyendo de acuerdo con el contexto. En este sentido, el dispositivo de acceso es fundamental. El medio es el mensaje ¿Te suena?

Por qué amamos los bordes curvos

Sebastián Thüer — Wed, 16 Nov 2011 20:04:13 +0000

Según cuenta la biografía, un ingeniero le mostraba entusiasmado a Steve Jobs un nuevo método para generar figuras geométricas en pantalla cuando este lo interrumpió para preguntarle si se podían crear rectángulos con bordes curvos. Ante la respuesta negativa, Jobs despachó al ingeniero y le dijo que solo volviera con una solución que los considerara.

La anécdota pretenece al proceso de desarrollo la primera Macintosh y muestra la obsesión de Jobs por esos pequeños detalles que la mayoría pasaba por alto. Sin embargo, el instinto de Jobs estaba en lo cierto: las figuras de bordes curvos son más fáciles de procesar e interpretar para las personas.

Un estudio del Barrow Neurological Institute (PDF aquí) sugiere que la percepción de las esquinas varía según sea su angulación. Los bordes rectos generan tensión porque suponen cambios bruscos en el recorrido visual. Por el contrario, las esquina curvas ayudan a focalizar la atención hacia el interior de los recuadros. El ojo prefiere las transiciones suaves y los cambios de sentido graduales -como lo sugieren las curvas- a los cortes abruptos que presenta un ángulo recto.

Mirando el siguiente gráfico, ¿cuál diagrama es más fácil de seguir?

El primero casi que invita a recorrer el sentido de las flechas, mientras que el segundo nos obliga a tomar una decisión y casi que miramos el final antes de saber por qué lado seguir.

Otro artículo (PDF) que analiza el fracaso en el rediseño del logo de GAP, señala que las líneas curvas están presentes en los niños cuando comienzan a dibujar. Trazar ángulos rectos requiere de un aprendizaje y tendemos a evitarl bordes afilados porque en la realidad representan una amenaza.

Keith Lang tiene un interesante post sobre el tema donde plantea que entre un cuadrado y un círculo del mismo tamaño nos resulta más fácil de comprender este último.

El cuadrado de bordes curvos se situa, entonces, en un punto intermedio. Las guías de estilo de Apple alientan su uso porque representan una metáfora más cercana para la interfa de usuario: en el mundo real, los botones para tocar suelen ser curvos. Inclusive si vemos el hardware de Apple podemos reconocer bordes curvos en casi todos sus productos.

En tu caso, ¿utilizás bordes curvos en tus diseños? ¿Por qué? Tus comentarios son bienvenidos.

Por qué los usuarios dejan tu sitio web [infografía]

Sebastián Thüer — Fri, 11 Nov 2011 15:00:48 +0000

Una buena campaña de marketing no sirve para nada si no podés retener los usuarios dentro de tu sitio web. Sea cual sea el sector, no hay nada peor que un usuario frustrado que abandona una página sin llegar a cumplir su objetivo: buscar información, descargar algo, buscar un dato de contacto o utilizar un servicio online.

Hay varias razones por las cuales un usuario puede abandonar tu sitio: una estructura de navegación deficiente, saturación de publicidad, mala organización de la información, audio o video intrusivo, necesidad de registro, contenido o diseño aburrido, mala legibilidad de los textos o falta de actualización.

Esta infografía resume las principales causas de abondono de un sitio y propone mejoras para evitarlo.

Vía KissMetrics

Emailology, buen recurso para el diseño de newsletters

Sebastián Thüer — Thu, 10 Nov 2011 15:30:38 +0000

Varias veces he planteado que el diseño de newsletters o correos electrónicos es un áreas específica del diseño web con su propia lógica, recursos y técnicas. Emailology
es un sitio con interesantes aportes porque planea reunir una serie de recursos vinculados con el diseño de e-mail.

En primer lugar, presenta Email Boilerplate, una plantilla con la configuración básica de un correo que incluye una serie de etiquetas y estilos por defecto que funciona en cualquier navegador. Además, tiene una sección de guías con las etiquetas de HTML y CSS admitidas por los diferentes clientes de correo. No solo considera los webmails o aplicaciones de escritorio más populares, sino que también incluye a los clientes de los teléfono inteligentes.

Finalmente, hay una sección con trucos y consejos que recopila información en formato de pregunta y respuesta. En definitiva, un lugar interesante para poner en tu lista de recursos si te dedicás a diseñar newsletters.