Nuestros principios de diseño web

16 Oct 2009
Este es un post co-escrito por Nidia y Leo

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énicoMockup 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

Usuario frustradoEl 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

The ThinkerEl 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

Bicicleta inusableHay 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

SimpleLos 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

Código CSSHay 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

Proceso de solucion de problemas en diseñoUna 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.

CNN WebsiteEl 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!)

NavegadoresParece 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).

5 comentarios

  1. [...] This post was mentioned on Twitter by Leo, nicestream. nicestream said: Nuestros principios de diseño web: Este es un post co-escrito por Nidia y Leo Aunque cada uno de nosotros tiene .. http://bit.ly/Y9CRn [...]

  2. Por eMe, el 20-10-2009 · link

    Óle.

  3. Por Nenillo, el 20-10-2009 · link

    Todo me parece bastante bien excepto el testeo desde el principio. No veo tan claro que sea lo mejor, creo que puede hacer que el proceso de desarrollo sea mucho más lento que no prepararlo todo para un solo navegador y probar con los demás una vez finalizado el proyecto.

  4. Por Leo, el 21-10-2009 · link

    No estaba hablando de un test exhaustivo desde el principio ni me refería sólo a las pruebas de browsers, sino a todo el desarrollo en general: Probar que las cosas no se desarmen, que todas las acciones devuelvan la respuesta esperada, que los menus y submenus se comportan correctamente, que las paginas y subpaginas tienen los elementos correctos…

    En fin, cada equipo le va a encontrar el punto justo a cómo y qué es necesario testear de un proyecto, lo importante es no dejar todo para el final.

  5. Por diseño web, el 26-12-2009 · link

    Buen articulo, me parece que la parte mas importante es “No reinventes la rueda”, asi acortamos mucho el tiempo de diseño y testeo.

Dejar un comentario

Tags permitidos: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Nicestream en fotos

Fotos al azar de el grupo de Nicestream en Flickr

Categorías