Tutorial9 es uno de los sitios más conocidos centrados en proporcionar material didáctico sobre photoshop, fotografía, diseño etc. Desde que lleva en pie ha cambiado de diseño en alguna ocasión, según nos cuentan desde UX Booth, tras el último rediseño sus suscriptores se duplicaron y las páginas vistas también.

En el artículo no solo dan estos datos, hacen un completo análisis del antes y el después del diseño de Tutorial9, que se buscaba con el mismo y como lo consiguieron mejorando la usabilidad y destacando las partes que más les interesaban. Está claro que el análisis no es para seguir al pie de la letra en cualquier caso, para cada sitio hace falta un estudio diferente, pero si nos servirá para aprender un poco más de lo que se puede conseguir con una buena interfaz.

Enlace: Site Redesign Case Study: Tutorial9.net

En ocasiones no somos conscientes de la cantidad de usuarios que navegan por páginas y blogs habitualmente y tienen algún tipo de discapacidad auditiva o visual: 2millones de personas tienen visión reducida en el Reino Unido (10 millones en los estados unidos) y 8.2 millones una sordera leve o moderada (28millones en los estados unidos).

Desde Digital Web nos presentan un interesante y útil artículo sobre este tema tan importante, con unos cuantos consejos que toda web que pretenda ser accesible tiene que cumplir, consejos que una vez implementados no solamente mejorarán la navegabilidad para personas discapacitadas si no para el público en general. Aplicarlos es extremadamente fácil y seguro que muchos nos lo agradecerán. Una lectura imprescindible.

Enlace: Understanding Disabilities when Designing a Website

ACTUALIZACIÓN: En este artículo tenemos algo más de información sobre el proyecto El pueblo en el que nunca pasa nada.
———————————————–

Ayer el twittero ahereza dejaba caer un twitt sobre una web, elpuebloenelquenucapasanada.com, comentado que era de lo mejorcito que había visto en mucho tiempo. Raudo y veloz acudí a dicha web, a ver donde estaba eso que la hacía tan especial.

De primeras ya torcí el morro, me saltó un cargador de flash y servidor no es muy partidario del flash, a un click de picar en la X de mi navegador estuve, pero leídas las buenas referencias sobre el sitio decidí esperar a que terminara de cargar. Me alegro de haberlo hecho.

Se trata de la web de un pueblo, miravete de la sierra, que está prácticamente abandonado (como muchos otros de la geografía española) contando en su censo con tan solo 12 habitantes. Y ahí es donde radica para mi toda la gracia de la web, han conseguido crear un sitio dinámico e impactante, con toques de humor, divertido etc de un sitio del que poco hay que contar, o mucho, pero poco interesante si no se presenta de una forma tan bien hecha como en el caso que nos ocupa. Dejando de lado los tiempos de carga que es lo peor que tiene el sitio al estar realizado enteramente en flash, es uno de los trabajos que más me gustó en mucho tiempo. El “guión” de la web, las ideas y su puesta en marcha técnicamente perfectas (3D, buenos montajes, colores, fuentes etc), dan como resultado un sitio verdaderamente curioso.

Entren, ármense de paciencia para esperar la carga y luego disfruten del sitio. ¿Que os parece a vosotros?

Enlace: elpuebloenelquenuncapasanada.com

En más de una ocasión hablamos por aquí de los mockups web y su conveniencia de hacerlos o no con photoshop. Para gustos colores, algunos si se sienten cómodos con la aplicación para hacer sus mockups y en contraposición otros prefieren alguna aplicación diferentes como fireworks.

Para los primeros va esta entrada publicada en Plasticmind, 10 consejos enfocados a mejorar la forma de crear mockups web con photoshop. Los consejos están basados en la pura experiencia del que los escribe y la verdad que son bastante acertados y directos.

Enlace: 10 Tips For Creating Website Mockups In Photoshop

Para los que quieran introducirse en el mundo de la creación web el curso que se impartirá en la UAM Xochimilco del 8 de octubre al 12 de noviembre puede ser una buena forma. En él se explicarán las bases y fundamentos del desarrollo web junto con el manejo de las hojas de estilo en cascada desde editores de texto y el programa especializado Dreamweaver. Lo impartirá Alejandro Nava los miércoles de 16:00 a 20:00 horas con una duración de 24 horas.

Vía: blogvecidad

Se pone en contacto conmigo vía mail Luis C. Aceves de UAWeb para informarme sobre un interesante evento que tendrá lugar en Monterrey (México) los días 5, 6 y 7 de noviembre. Se trata del segundo “Seminario Internacional de Usabilidad y Accesibilidad para la web 2008”, 3 días donde se hablará de la web con profesionales de tan alto calado como Jesse James (presidente de Adaptive Path) o José Manuel Alonso (miembro de la W3C). También tendrán lugar varios talleres con títulos tan interesantes como “diseño visual para sitios exitosos” o “construcción de sitios dinámicos usando un CMS”.

En la web tenemos información más detallada de cada taller, horarios exactos, precios etc. Una visita obligada sin ninguna duda de donde sacar conocimientos de las manos de grandes profesionales.

Enlace: Seminario Internacional de Usabilidad y Accesibilidad para la web 2008

Al final será necesaria una categoría única para esto de la creación de interfaces que es todo un mundo que cada día va tomando más fuerza. Ejemplo de ello son los programas específicos que vamos conociendo cada poco, es el caso de Balsamiq Mockups. El programa está pensado para la creación rápida y eficaz de cualquier tipo de Mockup, tanto de proyectos web como de software.

Entre sus características destaca el estilo de los componentes realizados imitando a los que podríamos dibujar nosotros en un pepel pero eliminando ese paso y haciéndolo directamente en el pc. En definitiva una genial opción para crear nuestros esquemas que podremos probar durante 15 días para ver si nos gusta o no. Una vez lo sepamos tienen varias licencias diferentes y el programa es multiplataforma.

Enlace: Balsamiq Mockups | Vía: Konigi

Otra buena idea como primer paso al empezar un sitio es el uso de Wireframes, una definición “académica” para los que no estén muy enterados:

“Una representación esquemática de una página web sin elementos gráficos que muestran contenido y comportamiento de las páginas. Sirven como herramienta de comunicación y discusión entre arquitectos de información, programadores, diseñadores y clientes. También se pueden utilizar para pruebas de usuarios”

*Definición de No Lo Entinedo

Son especialmente útiles si el proyecto es desarrollado por varias personas de un equipo donde cada una tiene unas funciones claras, servirá como “guía” para que todos los componentes trabajen sobre las mismas bases sin cabida a confusiones. Como se comentó en alguna otra ocasión tenemos que tener muy claro cual es el objetivo de un wireframe y no es el de mostrar lo bonito que queremos dejar el trabajo al finalizar el proyecto, tiene que ser lo más simple posible, en grises y sin ningún elemento visual que nos pueda distraer. Estamos organizando la información de la forma más optimizada que podamos.

Para conseguirlos contamos con varios programas, dependiendo mucho en este punto el uso que tu le des a los wireframes dentro de un proyecto, los podemos hacer con Illustrator, Fireworks etc, contando con varios pensados especialmente para este tipo de cosas como Visio.

El tema es muy extenso y espero que esto valga como introducción para seguir investigando cada uno por su cuenta. A continuación algunos enlaces interesante:

• Wireframes - El factor humano
• Wireframes: recopilación de enlaces - No Lo Entiendo
• Wireframes - Usable y accesible
• Using Wireframes (Revised) - strange systems
• Graph Paper (Plantillas para descargar) - Konigi

CSS nos permite en cierta manera ampliar la potencia de las pocas fuentes que podemos usar de forma segura a la hora de diseñar un sitio. Entre estas características se encuentra la denominada “Font Stacks”, que no es otra cosa que poder definir varias fuentes diferentes en una misma línea, por si la primera no está en determinado ordenador que se muestre el contenido con la segunda definida y así sucesivamente. Con esta propiedad, que se define en el atributo font-family, podemos mostrar el aspecto de fuente que queramos para cualquier sistema, pondremos primero la fuente que nos interesa y como opciones sucesivas tipografías que se parezcan.

Todos estos temas que rodean a la propiedad Font Stacks son los que tratan en el artículo publicado por unit interactive, donde nos explican que es y también los malos usos que se hacen de ella, como los grupos de tipografías que Dreamweaver propone por defecto, con fuentes que no tienen ninguna similitud entre si. De lo más interesante del artículo los grupos de familiar que nos enseñan al final, con fuentes relacionadas e indicación de donde es recomendable usarlas, ya sea para párrafos o títulos.

Enlace: Better CSS Font Stacks

La noticia casi ha pasado desapercibida pero es interesante cuando eres un programador y deseas experimentar con reproductores de música hechos por ti mismo. En este caso hablamos de Last.fm el servicio de música por streaming más conocido en internet, el cual ha publicado una nueva versión de su API disponible para todo el que desee averiguar como interactuar con el servicio. Desde aquí pasamos la voz ya que Last.fm es uno de mis servicios favoritos.

Vía: Blog the Last.Fm
Enlace: Last.Fm Api

En Abduzeedo nos presentan un útil tutorial para conseguir un cajón mediante fireworks. Útil por varias razones, la primera porque conseguiremos un diseño final que destaca por su profesionalidad, esos pequeños toques que a la vista no son muy perceptibles pero que le dan fuerza al conjunto. La segunda, porque practicaremos el uso de fireworks, un programa que personalmente tengo que confesar no uso y del que se más bien nada. A partir de ahora dejará de ser así por los conocidos beneficios que tiene a la hora de diseñar, sobre todo, para la web.

El manual está perfectamente explicado, con pasos detallados y capturas de pantalla. Al final del proceso deberíamos obtener un cajón similar al que usan en TinySong, en el que se basa todo el tutorial.

Enlace: Grooveshark design style in Fireworks

Si nos fijamos en las interfaces web que google usa en sus diferentes servicios rápidamente veremos similitudes, todos se rigen por unos patrones muy concretos, con unos objetivos claros. 10 son los principios básicos que siguen en cualquier proyecto que ponen a nuestra disposición, encontramos algunos como:

• Lo más valioso es el tiempo, los usuarios no lo tienen, el código usado para la maquetación tiene que ser lo más liviano posible
• La simplicidad es poderosa
• Bonito diseño sí, pero sin distraer al usuario ni confundirlo

Resumiendo, simplicidad, rapidez de carga, usabilidad y claridad son los puntos más importante para google, a los que yo me intento acercar cada día un poco más. O es que ¿alguien se atreve a decir que se equivocan? ¿Qué los diseños de google no funcionan? Alguno habrá, yo no.

Enlace: Google User Experience