No hay nada más triste que lo tuyo es un divertido sitio que sirve para que todos los diseñadores que tuvieron que olvidarse de sus ideas y entregar algo completamente diferente compartan su experiencia y se consuelen leyendo las de otros; o, como ellos cuentan, un lugar para hacer terapia de grupo para reírnos un poco de nosotros mismos, olvidar nuestras frustraciones y volver a disfrutar con nuestro trabajo.

Me parece una idea genial para tomarnos el tema con humor y recordar que esto es y siempre será parte de nuestra profesión. Después de todo, lo mejor es intentar encontrar el lado positivo y aprender de la experiencia, intentando entender cada vez mejor que es lo que el cliente realmente quiere, aunque no siempre coincida con lo que queremos nosotros.

Azul

Uno de los colores que más abunda es el azul. Esto se debe a que el azul es uno de los colores más aceptados en el mundo por diferentes culturas. El azul puede representar estabilidad, confianza, tranquilidad, lealtad, seriedad o incluso tristeza. Es uno de los colores más utilizados en la web por sitios reconocidos como Facebook y LInkedIn y Twitter. Otros sitios como Google, Vimeo, MySpace, y Delicious también usan el azul como recurso en su diseño.

Verde

Se dice que el color verde es calmante al ojo y tiene efectos curativos o puede aliviar el dolor. Lo cierto es que verde es el color que se asocia tanto al dinero como a la naturaleza. El verde representa seguridad y vitalidad. No solo vemos este color en sitios que hacen referencia a la ecología, sino en aquéllos que quieren representar frescura y novedad. Sitios famosos como Technorati, Ning y deviantArt usan estos colores.

Blanco y Negro (y la combinación de ambos)

Los sitios monocromáticos están cada vez siendo más populares. El blanco en combinación con el negro puede dar una sensación de limpieza y elegancia al mismo tiempo. Los colores resaltan mucho mas sobre el blanco, negro y gris. Es por estos motivos que sitios como Apple, Brands of the World y ColourLovers se manejan con una gama monocromática.

Aunque cada uno de nosotros tiene un background y afinidades distintas, lo que genera distintos enfoques sobre como resolver las cosas, al trabajar en equipo desde hace un par de años, en Nicestream fuimos llegando a una filosofía de diseño web en común. Y, a pesar de que muchas veces charlamos o discutimos algunas ideas al respecto, ya no necesitamos hablar de los principios básicos de un diseño cuando empezamos un proyecto nuevo.

Mockup en papel higiénico: A veces hacemos bocetos en lo primero que tenemos a mano…

Alguna vez comentamos internamente que sería interesante compartir nuestra experiencia y comentar cuál es nuestra visión corporativa con respecto al diseño web, más allá de las visiones de cada uno. En estos días la empresa está creciendo, lo que hace indispensable que tengamos definidos claramente nuestros procesos internos, que facilitemos la comunicación y, claro, que incorporemos nuevas personas al equipo. Por eso nos pareció interesante e incluso un buen desafío sentarnos a crear una lista de los puntos indispensables que tenemos en cuenta en la empresa cuando encaramos el diseño para internet.

Es importante aclarar que cuando hablamos de “diseño web” estamos incluyendo tanto el diseño de la parte visual como la maquetación, integración y arquitectura de la información; o dicho de otra forma, y excluyendo más que nada a la programación pura y dura, todas las áreas involucradas en la creación de un sitio web.

Después de comentarlo y revisarlo bastante, esto es a lo que llegamos…

Si no funciona, es culpa del diseñador

El diseñador es el responsable de que los usuarios puedan tener la mejor experiencia posible en un sitio. Si un usuario no consigue del sitio lo que necesita la culpa es del diseñador, que ignoró las necesidades de sus usuarios o al menos no logró un diseño con el que satisfacerlas. Lo primero es identificar a quién apunta el sitio y enfocarnos en que nuestro usuario objetivo pueda usar el sitio sin ningún problema.

No hagas pensar al usuario

El diseño debe ser claro e intuitivo: no debería generar dudas en el usuario. La navegación fácil, cómoda y fluida existe cuando el diseño se explica a sí mismo. Ante una duda, los usuarios tienden a probar la primera opción posible y a frustrarse rápido si no consiguen una solución… y nunca hay que olvidarnos que si algo sobra en Internet es la competencia y así como alguien puede llegar a nuestro sitio buscando algo en concreto, puede irse y probar el siguiente resultado si no lo consigue rápido. Steve Krug detalla muy bien este punto en su libro “Don’t make me think“. Si no lo has leído, te recomendamos lo agregues a tu biblioteca.

No reinventes la rueda

Hay reglas que ya están escritas, sirven, y todos las conocen y entienden. Las llamadas “convenciones” se logran cuando las cosas funcionan de la misma forma para muchos. Por ejemplo: Colocar el logotipo de la empresa en la esquina superior izquierda (o derecha si lees de derecha a izquierda) el cual al hacer click sobre él te redirige a la página inicial es una convención ya adoptada en la mayoría de los sitios y es algo esperable por un usuario.

Simplifica

Los usuarios, salvo contadas excepciones, no entran a un sitio para apreciar su diseño. Lo que buscan es encontrar información rápido y sin tener que complicarse. En este punto es donde hay que hacer más foco en un diseño más usable (y no por eso menos lindo), evitando todos los elementos que descubramos que no son necesarios e intentando integrar de la forma menos molesta los elementos innecesarios para el usuario que tienen que aparecer sí o sí (por ejemplo, la publicidad). También este punto es donde mejor podemos aprovechar las convenciones, que nos permiten que los usuarios identifiquen rápidamente y sin tener que entender los elementos principales del sitio: La navegación, el encabezado, el contenido, el buscador, etc.

Optimiza

Hay muchísimas formas de optimizar en diseño web: reusando elementos, simplificando el código, usando estándares, organizando mejor los archivos, organizando mejor el código, evitando usar más archivos de lo indispensable, evitando hacer con imágenes cosas que se pueden hacer con CSS… La optimización puede encararse en varios aspectos diferentes y, según el tipo de proyecto, hay que enfocarse más en algunas áreas que en otras. Lo importante es que siempre optimicemos todo lo posible para lograr que nuestro sitio sea más liviano, más rápido y más fácil de mantener con el tiempo.

Estandariza

Una de las cosas que más facilita el diseño a largo plazo es estandarizar tanto los procesos como los lenguajes, componentes y herramientas involucrados. Estandarizar el diseño facilita tanto la labor individual, al agilizar y mantener un orden, como la labor grupal, al mejorar la comunicación cuando los demás ya saben que pueden recibir (y cómo) de nuestra parte y cuando se llega a un estándar corporativo al que es más fácil incorporar a una persona nueva.

Deja que tu diseño “respire” para que se vea limpio.

El buen uso de los espacios es fundamental. Ocurre muy frecuentemente que los clientes quieren “llenar” todos los espacios posibles en un diseño. Esto sucede mucho con los diarios online. Pocos hacen buen uso del espacio entre bloques de texto, fotografías, iconografía y espacios publicitarios. Uno de los mejores ejemplos de buen uso del espacio es el sitio de noticias de CNN. Es muy común encontrar sitios repletos de información y no poder apreciarla porque los tamaños entre títulos y bloques de texto son tan reducidos que el diseño se vuelve incómodo a la vista.

Testea (¡Desde el principio!)

Parece obvio pero el punto es lograr metodizar el testeo para que sea más efectivo. Testear desde el principio para evitar problemas o cambios muy grandes más adelante, probar en todos los browsers o aplicaciones a los que apuntemos y conseguir la opinión de terceros (de nuestros compañeros y los compañeros de otras áreas).

Toda esta gente tiene garantizado el acceso a internet

Quizas este tipo de legislación no sea tan difícil en un país de 5 millones de personas del primer mundo donde alrededor del 79% de los habitantes ya cuentan con acceso a internet, pero considerarlo un derecho legal para todos es un avance y una declaración de intenciones. Internet se está convirtiendo en el medio de comunicación más importante y es muy bueno que un gobierno se encargue de garantizar que nadie se quede afuera.

Foto (CC) por J_Makk

Algunos Robots Famosos

Automator

Apple tiene al robot “Otto” el cual representa al icono de la aplicación Automator que se introdujo con el OS X Tiger.

Android

El logo de Android es, por obviedad, un robot. Muy simple, sin mayores complicaciones y siempre usando un color plano, ya todos conocen a este famoso robot.

Firefox Gran Paradiso

El RC de Firefox 3 mostraba un robot sobre una ciudad. Después de la instalación la primera vez que lo corrías, te aparecía otro robot en vuelo. Si pones about:robots te muestra esta pantalla (Muy creativos, no?).

Robots en Buscadores

Iconfinder

Uno de mis sitios favoritos rediseñó en 2009 su página principal y logotipo. El robot es su parte “fuerte”; la que lo ayuda a posicionarse como uno de los mas ‘innovadores’ sitios de búsqueda de iconos.

Adicctomatic

Addictomatic usa, como Iconfinder, el robot como parte de su imagen corporativa. Esta aparentemente es otra tendencia que se esta expandiendo cada vez más entre los navegadores, como herramienta visual y tiene un resultado muy llamativo.

Robots en la web

En varios sitios encontré que utilizan el robot en los headers como “mascota”. Se vuelve entonces el elemento mas llamativo del sitio, quizás este método se use para llevar a la práctica el concepto de innovación.

Pixelbot

Guliago

We Fix WP

[youtube]http://www.youtube.com/watch?v=6ILQrUrEWe8[/youtube]

Así había arrancado todo: Did you know? v1.0