Pedro Puig

El concepto de usabilidad está presente cada vez más en nuestros desarrollos, desde un simple buscador, pasando por la homogeneidad en los links hasta la navegación por pestañas, precisamente en usabilitypost nos dan 5 consejos parar que esta navegación sea 100% efectiva para el usuario. Estos consejos se resumen en:

• Unir la pestaña activa con el contenido
• Diferenciar la pestaña activa por colores
• Poner en un color diferente el texto de la pestaña activa
• Hacer que toda la pestaña sea clicable y no solo el texto
• Definir siempre una pestaña activa

Vía: Isopixel

Desde un principio, un trabajo puede ir a las mil maravillas, el cliente entiende lo que quieres hacer, valida tus prototipos, cobras sin retrasos ni demoras al final del desarrollo, muchas veces me he encontrado con este tipo de clientes/trabajos; pero os puedo asegurar que cuando un trabajo se tuerce, se tuerce de verdad, el cliente no te transmite nada a la hora de comenzar el desarrollo, tarda una eternidad en validar las diferentes fases del trabajo y encima al final tarda en pagar o directamente no paga.

¿Qué hay que hacer para encauzar a este tipo de clientes/trabajos? Minid.net explica magistralmente como debemos entender el proceso creativo y como debemos comportarnos en nuestra relación con el cliente:

• La regla de oro es saber distinguir que tu trabajo no es la manufactura, es la creación, solo eso
• El cliente no sabe que diseño quiere, dirige al cliente, tú eres el diseñador, probablemente si sigues 100% las directrices del cliente, acabaras creando un frankenstein.
• 1 diseño es una idea, si el cliente te pide 5 bocetos te está pidiendo 5 ideas, cobra por ellas.
• Cúbrete las espaldas. Cuando envíes un prototipo al cliente, pon marcas de agua o reduce las medidas del prototipo, aunque lo mejor es hacerle firmar al cliente un contrato o pedido para en caso de quedarse con los prototipos, puedas cobrarlos.
• Prueba todos los terrenos para lograr un cometido. Trata de simplificar todo para conseguir algo solido y elegante.
• No trabajes sin un contrato redactado de forma correcta y completa.
• Incluye en el presupuesto el material a utilizar (tipografías, fotografías etc.…).
• Cobrar el trabajo, esto parece algo obvio, pero puede llegar a ser lo más complicado.

Vía: Minid.net

Leo en Nudonation un muy interesante post donde explica cómo se crea un proyecto web desde el inicio hasta la fase final, gráficamente hablando por supuesto. Desde el esbozo en lápiz y papel, pasando por el desarrollo de wireframes (bosquejo de la ubicación de elementos en una pantalla) hasta la fase de prototipado (la usabilidad y los sistemas de navegación van indirectamente implícitos en el desarrollo de los wireframes) .

Lo importante de crear wireframes previos al comienzo de la fase de diseño, nos evitará hacer modificaciones en fases posteriores (aunque esto no es siempre así, ya se sabe…).

Ya sea un microsite, un blog, una web o incluso diseños para imprenta, es recomendable crear un wireframe que nos ayudará a definir un mejor proyecto final. Para la realización de wireframes hay multitud de herramientas. Yo utilizo el Photoshop, me permite crear los distintos elementos en capas, es fácil de modificar y me resulta cómodo no salir del programa en el que luego voy a realizar el diseño, pero lo importante es que sea una herramienta en la que el diseñador, se sienta a gusto.

Yo sencillamente me quito el sombrero ante esta recopilación de 15 ilustraciones vectoriales hiperrealistas. Los más mínimos detalles están presentes en estos dibujos técnicamente perfectos.

Yo sería incapaz de distinguir entre la fotografía y la ilustración.

En Paintbits encontramos un muy interesante recopilatorio de tutoriales de nuestro querido y amado Adobe Photoshop. El recopilatorio está clasificado en diferentes categorías ( efectos, retoque, tipografías, pintura digital, diseño, iconos, diseño web y temas variados).

Como bien dicen en Isopixel, el problema es distinguir entre tanta cantidad de información, que tutoriales son de calidad y cuáles no. Estos sin duda son de la primera clase.

Espero que lo disfrutéis.

La importancia de crear un Wireframe (diseño de alambre), antes de comenzar con el prototipado, es cada vez más aconsejable.

Hay numerosas herramientas para la creación de Wireframe, pero tal vez las más importantes sean Omnigraffle y Visio de Microsoft.

Ahora Yahoo, presenta el Stencil Kit que es un conjunto de objetos predefinidos que nos ayudarán a crear de forma rápida un wireframe desde nuestra aplicación favorita.

El Stencil Kit de Yahoo esta disponible tanto para usuarios de Omnigraffle como de Visio. Pero si tu programa para la creación de Wireframes es otro, puedes descargártelo en PDF, PNG y SVG.

Otra ayuda más…

Vía: Torresburriel

El diseño de comentarios en un weblog es la oportunidad para que un diseñador pueda desmarcarse de la tónica habitual que presentan la mayoría de blogs. En esta página se nos muestran 30 estilos diferentes de comentarios, a cada cual mas diferente.

Siempre es interesante tener referencias de este tipo que nos pueden sacar de más de un apuro.

Es sabido que Internet Explorer 6 no se lleva muy bien con los PNGs transparentes; leo en JVcreación que existe una forma rápida y cómoda de solucionar este problema, los detalles están en Google Code. Simplemente hay que insertar el siguiente código entre las etiquetas y nombrar las imágenes PNG con el sufijo “-trans.png”:

Parece ser que además de solucionar esta incompatibilidad, resuelve otros defectos del navegador en su lucha por cumplir los estándares.