Repositorios de Recursos para Diseñadores Web

La web muta y evoluciona a pasos de gigante. Y el mundillo de los diseñadores web no es la excepción. He notado que los blogs que ofrecen (ofrecían) recursos para diseñadores se están extinguiendo dramáticamente. Quedaron pocos sitios que mantengan un buen ritmo de publicación o enfoquen temas de diseño o herramientas para diseñadores. Los que aun están publicando tristemente hablan sobre «gadgets», término que particularmente detesto. ¿A quien le puede interesar un blog de diseño que te dice cuanta cursilería tecnológica sale al mercado? ¿Sobre que estereotipo de diseñador enfocan los contenidos?

Pero también hay gente copada que mira más allá del monitor y sabe que ni conviene hablar sobre un calentador de tazas de café USB. Es esta gente la que hace la diferencia, por lo que me veo en la obligación moral de regalarles algunos enlaces. Se trata de un formato nuevo de sitios con cientos de recursos y herramientas para diseñadores. En donde se te permite acceder a los temas que necesitas en cuestión de segundos; diseño responsivo, apps, css, wordpress, fireworks, photoshop, etc.

Thestarterkit: este proyecto es de Armando López, de CriterionDG que se tomó el trabajo de programar y diseñar un hermoso repositorio de recursos utra accesible y rápido. Conviene verlo porque está a la altura de los principales sitios que están marcando esta nueva tendencia en mostrar contenidos.  Aquí más data sobre este proyecto.

Agile Designers: del mismo estilo que Thestarterkit pero con mayor contenido porque ya lleva rato funcionando y porque además permite que los usuarios puedan colaborar y enriquecer los contenidos. Está muy integrado con redes sociales y es muy «colaborativo».

Thetoolbox: Con el mismo tinte que el anterior pero más austero y simple. Cumple muy bien con su trabajo sin muchas vueltas. Se destacan más las herramientas para programadores y desarrolladores y no tanto para los diseñadores gráficos fanático de lo estético.

Hey,  designer!: Como el nombre lo indica la web propone un llamado de atención a los diseñadores webs. Cientos de recursos, artículos, aplicaciones, consejos, etc. Se destaca el uso correcto de los textos y la ausencia total de imágenes o fotos de referencia.  Sí, el diseño minimalista que tanto te gusta.

En el 2004 quien escribe diseñó un portal de Recursos Webmaster (Webnova) que cumplió el rol de repositorio de recursos (cuatro años subiendo cosas). Pero como todo en la vida tiene un fín, me ví obligado a abandonar el proyecto por falta de tiempo. Me pone muy contento que el tiempo haya pasado y sitios como estos hayan visto la luz. Todavía existe gente que no se guarda la información y la comparte desinteresadamente. Esta es la única manera de que la web evolucione y mejore naturalmente.

 

Tendencias de Diseño Web 2013

El diseño web como cualquier otra actividad va evolucionando constantemente con el fín de adaptarse a los cambios culturales, tecnológicos, conceptuales, etc. que van sucediéndose en el universo de la web. Este artículo pretende comentar algunos puntos fuertes que serán una tendencia o mejor dicho; estarán en el foco de atención de muchos diseñadores y desarrolladores que van por ahí intentando hacer las cosas un poco mejor.

Diseño Web Responsivo

Food-Sense-ejemplo-de-Responsive-Web-Design

Hoy por hoy la gente navega desde casi cualquier dispositivo; tablets, smartphones, celulares, notebooks, etc. El diseño web con dimensiones fijas tiende a desaparecer. El diseño «Responsivo» es una tendencia de diseño a hacer que el diseño sea adaptable a todos los tamaños o resoluciones de pantalla. Dicho en otras palabras un diseño único «inteligente» que se ve perfectamente bien en todos los dispositivos.

Tipografías Originales no «Standards»

Cuando en la web todos querían diseñar bajo stándares, sólo podíamos usar unas pocas fuentes; las que estaban cargadas en cada computadora. Google Fonts y otros servicios que alojan fuentes abre un mundo de posibilidades estéticas. Ahora podemos usar la misma tipografía que tiene la identidad de una marca y que esta se cargue desde los servidores de google. El uso de tipografías no convencionales otorga ahora un valor agregado importante al diseño web.

Mucha Fotografía

Atrás quedó la tendencia de usar pocas imágenes, en la era de los sitios para conexiones lentas sólo se permitían imágenes pequeñas y en baja resolución. Eso es el pasado, ahora las conexiones son buenas y rápidas y permiten el uso de fotos en alta resolución y en gran tamaño, logrando otras impresiones en los usuarios. Ahora la fotografía juega un rol muy importante.

Minimalismo y Austeridad

Mucho se está hablando sobre el minimalismo estético de los sitios webs, muchos lo asocian con un estilo o moda pasajera. Sin embargo el minimalismo llegó para quedarse, básicamente porque sus beneficios son muchísimos; belleza, simplicidad, velocidad, usabilidad, etc. El minimalismo es la excelencia en el diseño web, será muy difícil que se vuelva atrás, a los viejos diseños efectistas cargados de elementos visuales.

WordPress como plataforma Standard

El administrador de contenidos por excelencia sigue siendo WordPress. Su versatilidad, seguridad y facilidad de adaptación y personalización permite que la tendencia siga marchando por el mismo lado. Existe una lista enorme de aplicaciones o pluggins que pueden usarse o inclusive adaptar al gusto del cliente. Otra ventaja enorme es el concepto de portabilidad que tiene el aspecto de un sitio corriendo sobre wordpress y la practicidad de crear uno a medida con el aspecto que el cliente quiera.

Resúmen

La web sigue mejorando de cara al usuario y de cara a los creadores de sitios webs. Por ejemplo hay todo una interesante movida con 960 Grid que es una biblioteca de CSS enfocada a la maquetación web, que permite realizar el trabajo de forma fácil y ágil. Entre otras cosas también permite que la maquetación sea adaptable a la resolución de pantalla (diseño web responsivo). Estas fueron algunas de las tendencias que están vigentes en la actualidad o que nosotros consideramos importantes para crear nuestros sitios.

El verdadero Diseño dura para toda la vida

Hace un par de días mientras acomodaba unos papeles viejos encontré folletería publicitaria de unos celulares y notebooks, eran del año 1999, o sea del siglo pasado. Me quedé sorprendido por lo vigente de su diseño, al punto que pensé que se trataba de un folleto reciente.

Vivimos en una sociedad pendiente de lo último en tendencias, modas, estilos, etc. En donde todo es efímero y desechable. El verdadero diseño permanece al margen de ello, no está pendiente de manías superficiales ni mucho menos de modas que harán que el diseño se vea anticuado o desenjacado dentro de un par de años.  El buen diseño evita ir con la moda y aun así, nunca parece anticuado.

Muchos clientes me piden que incorpore ciertas tendencias efectistas sobre los trabajos, o que trabaje usando determinados estilos que están de moda. El punto en cuestión es que al cabo de un tiempo estos mismos clientes me piden «modernizar» el diseño porque ya les ha quedado viejo o porque su sitio ya no es original! Si bien yo cumplo en advertir o «formar» al cliente, estos terminan exigiendo cosas que más temprano que tarde atentan contra su presupuesto.

El buen diseño, debe por sobre todo comunicar y movilizar (entiéndase actuar), lo importante es el mensaje y el efecto. Lamentablemente las modas atentan contra la originalidad, la creatividad y el buen gusto.

A continuación un listado de brochures vintage que prueban un poco lo que estoy queriendo decir. El verdadero diseño dura toda la vida!

El arte tipográfico de Jon Contino

Jon Contino en un principio era un diseñador gráfico neoyerquino que sabía ilustrar. Luego según cuenta, abrazó fuertemente la ilustración y el mundo tipográfico, al punto de que hoy se ha ganado un lugar muy respetable como artista gráfico.

El estilo de su trabajo se basa en el uso de tipografías con un marcado estilo de los carteles o afiches de New York de los finales del 1800.

Vale decir que Jon Contino es un diseñador que ilustra a mano sus propias tipografías y diseños, lo que hace que sus trabajos tengan una interesante carga artística. Trata de mantener esa sensación de nostalgia inclusive si es para algo completamente moderno.

Dejo aquí algunos de sus trabajos, un video con una entrevista y esta entrevista para leer.

Sitio Web: Jon Contino

Teoría del Diseño Minimalista

“Menos es más”. Esta frase del arquitecto alemán Mies Van Der Rohe se ha convertido en la máxima definición del minimalismo. El diseño minimalista es el diseño en su forma más básica, es la eliminación de elementos pesados para la vista. Su propósito es hacer que sobresalga el contenido. Desde el punto de vista visual, el diseño minimalista está destinado a ser calmado y  llevar la mente del observador a lo básico de la pieza. Por lo tanto, los diseños minimalistas ofrecen contenidos visuales concretos abordados de la simplicidad -no simpleza- de los recursos gráficos que se deben emplear para lograr desarrollos consecuentes, sin distracciones. Diseño Minimalista es mostrar sólo lo importante o lo realmente funcional.

Las obras del Minimalismo buscan la sencillez y la reducción para eliminar toda alusión simbólica y centrar la mirada en cuestiones puramente formales: el color, la escala, el volumen o el espacio circundante.

Minimalismo y Diseño Gráfico

El diseño gráfico minimalista sigue las características propias del estilo: la abstracción, la economía de lenguaje, purismo estructural y funcional, orden, reducción, síntesis, sencillez y concentración.La reducción de las formas a lo elemental, así como la predilección por emocionar a través de la mínima expresión es una de las bases de los diseñadores de este movimiento.

Minimalismo y Diseño Web

Lo que se busca es no sobrecargar el sitio con elementos que no aportan nada a la funcionalidad del mismo o al objetivo con que fue creado. Características: abundancia de los espacios en blanco, tipografía efectiva, maximizar el efecto de las imágenes, efectivo uso del color, claridad del propósito, eliminación de los elementos extra y enfoque.

Minimalismo y Diseño Industrial

En una decoración influida por el minimalismo, el contraste blanco-negro es el rey absoluto. Priman las líneas rectas, la ausencia de ornamentos y florituras, los muebles sencillos y funcionales, la disposición ordenada y los acabados finos.

Los creadores minimalistas reducen al máximo los elementos propios del arte, los volúmenes y formas en escultura. Buscan la belleza en la mínima expresión. Sus principales características son: máxima inmediatez, superficies inmaculadas, colores puros, formas simples y geométricas realizadas con precisión mecánica, y la utilización de materiales industriales de la manera más neutral posible para que no se alteren sus calidades visuales. Líneas puras, rectas, ambientes cálidos y a la vez acogedores. Colores claros, paredes limpias y mobiliario esquemático.

Minimalismo y Fotografía

Por norma en la fotografía minimalista se debe cumplir que haya una idea principal, un motivo único que debe de ser tratado por encima de todo lo demás y esto debe de ser tenido en cuenta antes de hacer la foto, ya que la manera de plantearla puede ayudar o no a conseguir una imagen limpia de elementos que puedan entorpecer el protagonismo del foco principal.

Una de las ventajas que nos ofrece la fotografía minimalista es que, evidentemente, no hace falta mucho para llegar a ella; casi cualquier entorno en el que nos encontremos es susceptible para hacer fotos minimalistas. Y la temática susceptible de ser “minimizada” es tan amplia como en cualquier otro tipo de fotografía; se pueden realizar fotografías minimalistas no solo a objetos, sino también a paisajes, a personas, etc.

Resúmen

Normalmente tenemos incorporado de que el diseño minimalista es «aburrido» por no poseer demasiados recuersos estéticos. Sobre esto pregunto ¿debe el diseño divertirnos? ¿cual es el verdadero rol de una pieza o de un trabajo de diseño? El rol primero es ser funcional, permitirnos hacer algo de la mejor manera. En este caso el placer está en la experiencia que se transmite y es justo aquí en donde el minimalismo se destaca por sobre otros estilos. Su facilidad, su sencillez y su claridad nos produce placer y una sensación de comodidad.

Los cuatro principios del buen diseño de Donald Norman

Donald Norman es un influyente profesor de ciencia cognitiva y profesor de ciencias de la computación. Hoy en día trabaja principalmente con la ciencia cognitiva en el dominio de la ingeniería de la usabilidad. Ha escrito libros que cambiaron el concepto de usabilidad o psicología cognitiva. Hasta el grado de que se han acuñado “Los cuatro principios del buen diseño de Donald Norman”. Más abajo los detallo.

En su libro “Psicología de los objetos cotidianos” norman analiza los errores de diseño mas comunes, las causas cognitivas que están tras ellos y propone unos principios de diseño que son una referencia para cualquiera que se dedique al diseño de interacción. El libro trata bastantes conceptos y principios, pero creo que se pueden resumir en cuatro:

Visibilidad

Los elementos con los que interactuar y las claves importantes del objeto deben poder ser percibidos por el usuario. Puede parecer una obviedad, pero es un principio que muchas veces se pasa por alto. Este problema se puede plantear en muchos casos: una puerta que no muestra claramente de dónde hay que empujar o tirar, un icono diminuto cuya función tenemos que descubrir poniendo el ratón sobre él para ver su tooltip, un combo que sólo muestra una opción, etc.

Buena topografía (affordance)

La “topografía” es la relación entre dos cosas, por ejemplo entre el movimiento de un volante y el giro de un coche. Si mueves el volante a la derecha, el coche gira a la derecha. Es un ejemplo de buena topografía. Este es un punto clave en el diseño de interfaces de usuario y también hay cientos de ejemplos de su mala aplicación: enlaces que no parecen enlaces, botones que no parecen botones, puertas que hay que empujar con pomos para agarrar, fogones dispuestos en dos filas de dos cuyos mandos están dispuestos en una fila de cuatro, etc.

Retroalimentación (feedback y feedforward)

El feedback es una indicación del estado del sistema o de que se ha realizado una acción y qué resultado se ha logrado. Toda acción que lleve a cabo el usuario debe proporcionar feedback y debe hacerlo enseguida. Por ejemplo, si un usuario hace una transferencia bancaria y no le damos feedback rápido puede ejecutar varias veces la operación pensando que no ha ocurrido nada.

Relacionado con el feedback está el feedforward, que consiste en informar al usuario del objetivo y efectos de la acción antes de que la lleve a cabo.

Buen modelo conceptual

Las personas, cuando usamos un objeto u operamos con una interfaz de usuario, nos formamos un modelo conceptual de su funcionamiento. Para que un usuario se forme un buen modelo conceptual de nuestro producto, las partes importantes de este deben ser visibles, los elementos de interacción deben ser topográficamente correctos, y el sistema en general y cada acción nos deben dar un feedback apropiado.

Otra herramienta importante para crear buenos modelos conceptuales es el uso de las prestaciones y las limitaciones. Hay que mostrar claramente al usuario qué se puede y qué no se puede hacer. Un buen ejemplo son unas tijeras, con dos agujeros para meter los dedos, uno mas grande que el otro. Prácticamente la mano va sola a los huecos apropiados de la tijera porque es la única manera de usarla. A nivel de accesibilidad es fundamental seguir estas normas de diseño para crear objetos y aplicaciones fáciles de entender y usar, y además hay que saber adaptarlas a los usuarios con necesidades especiales. Por ejemplo, en un baño de autobús si el cartelito está en verde indica que el baño está libre y si está en rojo indica que está ocupado. Los principios de visibilidad y feedback son correctos: la señal se ve y da buena información. Pero ¿qué pasa con los usuarios daltónicos? ¿y con los ciegos? Podrían no distinguir los colores o directamente no verlos, así que habría que usar alguna otra pista visual o tactil que diera esa información. Normalmente este tipo de problemas se solucionan dando la información por varias vías sensoriales: vista y tacto, vista y oido, etc.

Conclusión:

Personalmente creo los principios de Donald Norman pueden traspolarse perfectamente al diseño web o al desarrollo de aplicaciones en general, es más. Me atrevo a decir que a todo lo que se pueda crear de manera tangible como virtual. Lo que afirma el escritor pudiese parecernos en un principio algo obvio o básico, sin embargo son estos asuntos los que primero olvidamos cuando creamos o diseñamos. Pareciera que la nueva creatividad juega en contra de los principios de usabilidad y simplicidad básica. Tendemos a querer embellecer y a darle un toque demasiado “creativo” o innovador a todo lo hacemos. No nos olvidemos de la belleza de lo simple.

 

ENLACES RELACIONADOS:

Entrevista a Daniel Norman [ES]

Principios del diseño de interacción importantes para la accesibilidad

Página Oficial de Donald Norman

Descargar el libro: La Psicología de los Objetos Cotidianos

Comprar Libros de Donald Norman