Cuando alguien quiere introducirse en el fascinante mundo del diseño web, siempre hay dos caminos aparentes: el del desarrollador tech que se lanza con todo pero con nefastos resultados (aka. webmaster) o el diseñador, que con ganas de elegir el camino políticamente correcto, termina detestando la disciplina, apelando a lo engorroso que es todo.

Este post, va dedicado a los segundos.

Parte de la filosofía de los desarrolladores web más tech, está esas ganas de saber cómo funcionan las cosas, y a pesar de que llegan a obtener increíbles resultados del lado de la programación, el hecho de no diferenciar entre una imagen pixelada de otra en alta definición, los hace culpables de que la mayor parte de los sitios diseñados y creados en latinoamérica sean feos.

No es que acá en Pousta nos creamos los mejores, pero al menos nos defendemos.

En el otro extremo, nos encontramos con los diseñadores, con aquellos de libro y los otros con talento. Los primeros, gracias a la magia del estudio, terminan dedicándose al diseño web, pero a un diseño aburrido, opaco, muy de estilo blog, de hecho, son “muy blog”. En general crean sitios donde la mano “diseñador” no se ve por ningún lado. Normalmente eso se debe a que durante el proceso de aprendizaje, palabras como estándares web, css, validación, xhtml, xml, html, javascript u otras como usabilidad o arquitectura de la información, salen a sabotear cualquier idea medianamente buena que tengas, en pos de algo que salvo la UX Alliance o tu profesor puede valorar.

¿Diseño centrado en quién?

Cuando queremos diseñar como corresponde, siempre entrará en escena un concepto llamado “diseño centrado en el usuario“, que bajo el brazo, trae la mayor parte de las palabras que nombramos anteriormente y es allí cuando todo se vuelve una tortura, porque claro, por cómo lo enseñan, hace que así parezca. Lamentablemente el tiempo ha demostrado que tanto chart con líneas, procesos, wireframes y post-its previos, se reduce a esto.

Piensa y define en el grupo de personas que usará tu sitio, luego reduce sus conocimientos computacionales a la mitad y disminuye en 30 su CI.

Cuando tengas claro eso, tomas un lápiz, rayas la comunicación clave del sitio jerarquizada, luego inyectas el arte, o eye candy que le llaman los diseñadores de blogs (pero que generará empatía con dichos usuarios) y tienes lista la mitad del sitio. Lo siguiente es llevarlo a Photoshop.

Zzz / Via: Ayer Viernes

En Pousta/Roaaar creemos que llevar el tema del diseño centrado en el usuario a planos más complejos, o “al siguiente nivel”, es totalmente absurdo la mayor parte de las veces, porque cuando creas cosas a prueba de tontos, ellas son utilizadas por tontos, así de simple. Es decir, haz que tu interfaz sea tan obvia como puedas, para quien lo deseas…pero si llega tu amiga rubia y dice que no entiende nada, felicítate, haz echo un excelente trabajo, tu sitio no era para tontos.

Ahora qué

Una de las cosas que siempre nos ha gustado de Apple, es que captan insights de cómo nos involucramos e interactuamos con las cosas, para luego decirnos “hey, así es más genial hacerlo“. En web, es genial cuando pasa eso.

Se trata de visualmente contar una historia, pero de forma distinta, de que el botón que por convención todos dicendebe ser así y estar acá“, tu nueva forma de verlo lo sitúe en un lugar más cómodo y llamativo, para contar la misma historia de una forma diferente.

Sleepover: diseño editorial meets diseño web

Cuando todo ese mapa de cosas aquí y allá esté listo (wireframe), es hora de aplicar tu master en ilustración, tu doctorado en multiply de photoshop o incluso la poca gracia que tienes juntando colores, pues teniendo una buena base – que luce como la etapa donde se quedan los diseños de los diseñadores de libros- el resto es demostrar tu talento gráfico.

XHTML, CSS, HMLT5, OMG, WTF, CSM

He aquí la parte final del proceso, esa que obliga a aprender algún enmarañado lenguaje para hacer que las ideas tomen vida, pero en el que nuevamente nos topamos con el purismo inútil que en lugar de acelerar o mejorar el trabajo, lo entorpece.

Uso de estándares, validaciones y recontravalidaciones, son procesos que en realidad no sirven para nada pues al final del día, el usuario final no abrirá el inspector de su navegador, para revisar cada una de tus líneas y dirá: oye, pero qué hermoso como anidaste estas líneas de código aquí. Ese discurso o conversación, dejémoslo para los geeks que se emocionan con ver un terminal. Lo que realmente sirve, es que aprendas varias etiquetas html y las uses con frecuencia para enriquecer tu código, acelerando el proceso de producción y por el lado del css, es experimentar y jugar y volver a jugar.

Actualmente Css3 (Que al usarlo no permite validar ni por si acaso) permite con simples snippets de código, hacer lo que quieras sin tocar Photoshop.

Encore: El Navegador

La fuente de todos los males cuando estás comenzando, es intentar hacer que un sitio luzca igual en todos los navegadores, es decir, la fuente de todos los males cuando comienzas, es intentar conseguir algo absolutamente estúpido y nuevamente inútil.

Hoy en día existen tantas plataformas y contextos de uso, que la fragmentación a la que se enfrenta el diseñador web lo obliga a optar por el camino más inteligente: si todo funciona y luce correctamente, está perfecto. El eye candy por ende, queda para quien disfruta del eye candy: si una persona no es capaz de notar la diferencia entre un sitio que utiliza verdana y otro que experimenta con @font-face, por qué razón te esfuerzas en hacer que una maravillosa league gothic se vea bien en Internet Explorer 6?. La persona que nota la diferencia, no usará un navegador que renderice sitios como lo hace Internet Explorer. Cada persona utiliza el navegador que se adecua a lo que busca de la Web. Chrome y Safari para la gente con (buen) ojo, Firefox para el nerd e Interner Explorer para el newbie. Sabiendo eso ya sabes qué darle a cada uno y si al final del día sigues teniendo problemas, siempre existe:

<script src=”css_browser_selector.js” type=”text/javascript”></script>

Eso es todo. Por último, los dejo con la presentación de Elliot Jay Stocks en Future Of Web Design del año pasado, presentación que gatilló este post, porque creemos que el diseño web es divertido y no una tortura como cree la mayor parte de los diseñadores o como intentan enseñarlo las escuelas.

Referencias: VeerleElliot Jay StocksJason Santa MaríaSimon CollisionRogie King.