denegro.com

F2 Design

May 26th, 2006, Sin comentarios

Dirk y Carol Fowler son F2 Design.
Desde el soleado Lubbok, en Texas, hacen diseño gráfico y carteles usando una antigua imprenta.

Dedos

May 22nd, 2006, 2 comentarios

Un dedo tan a gusto

Ya lo dice Puño. Divertidísimo:
www.irdel.com/finger/

A todos los diseñadores: ¡Aprended a escribir!

May 18th, 2006, 8 comentarios

Traducción del artículo “Calling All Designers: Learn to Write!“, escrito por Derek Powazek y publicado en el número 216 de A List Apart.
Ilustración de Kevin Cornell.

A todos los diseñadores: ¡Aprended a escribir! por Kevin Cornell

A todos nos ha pasado. El cliente dice “haz sólo el diseño, ya meteremos luego el contenido”. O el diseñador dice “Este es el aspecto de la página. He cogido lorem ipsum para el texto, ese no es mi trabajo”.

Puede que esté de moda decir “los mercados son conversaciones” o “diseño es comunicar ideas”, pero, ¿cómo pueden ser verdad si los diseñadores no trabajan con, de hecho ni escriben, el texto?

La experiencia de usuario no es sólo diseño gráfico

Ya es hora de que los diseñadores dejemos de pensar en nosotros como “los del pixel” simplemente, y empezemos a pensar en nosotros como creadores de experiencias. Y cuando se trata de experiencias en la red, no hay mejor manera de crearlas que escribiendo, y escribiendo bien.

Fijémonos en lo que todos llaman el ejemplo de Cosa Bien Hecha: Flickr. Pregunta a la gente qué piensa de su experiencia con Flickr y usarán palabras como “divertida” y “agradable” para describirla.

¿Por qué? No hay nada especialmente divertido en el texto negro sobre fondo blanco. No hay nada agradable en subir y etiquetar, haya la cantidad de maravillosos trucos AJAX que haya. Por supuesto, el contenido fotográfico se presta a una experiencia personal. Pero nadie habló jamás sobre lo divertido que era Ofoto. Y las funcionalidades de la red social orientadas a comunidades se prestan a una experiencia emocional, pero creo que se trata de algo más.

Yo digo: es la redacción. Lo agradable viene de un buen texto pasado de moda. Cuando visitas la página, te da la bienvenida en un idioma al azar. “Hola! Salut! Shalom!” Cuando entras, en el botón dice “Get in there” en vez de “Submit”. Cuando subes una foto, entras en un grupo, añades un contacto… todo el texto asociado es abierto, estimulante, feliz y apasionado. Y eso tiene un impacto significante sobre la experiencia de usuario global.

El texto es la interfaz

Esto no es puro texto de marketing (que también lo es). Es interfaz. Es texto que no puede venir del departamento de Relaciones Públicas, viene de nosotros, los diseñadores responables de la experiencia de usuario. El texto forma parte de la IU tanto como los colores, los píxeles, las cosas de las que los diseñadores se suelen preocupar. O quizás más.

Cojamos otro ejemplo. Un sitio que acabo de descubrir, también del mundo de la foto. Photojojo es un trabajo de amor creado por Amit Gupta y Kara Canal. Es una newsletter semanal, y obviamente pasan mucho tiempo cuidando la redacción del boletín. Pero han pasado la misma cantidad de tiempo para redactar todo lo demás.

Cuando llegas al sitio, la página principal dice “Enhorabuena, es tu día de suerte! Acabas de encontrar la newsletter buena de fotografía”. Bajo el formulario para introducir el email, el mensaje anti-spam no dice nada aséptico tipo “no compartiremos su información con terceras partes”. Dice “Juramos solemnemente: ‘Sin spam. Nunca.’” Si eres lo suficientemente curioso como para leerte la página “Sobre nosotros”, te recompensan con una historia entretenida sobre cómo los dos decidieron empezar el sitio. Nada de palabrería de marketing, simplemente dos personas realmente ilusionadas con lo que hacen.

Soy de los que me he dado de baja de cada newsletter a la que he estado suscrito desde el 99. Odio el mail. Si esa web hubiera usado un lenguaje tradicional, jamás me habría suscrito. Pero su ilusión era contagiosa y, antes de que me diera cuenta, estaba tecleando mi dirección. Un clic en el correo de confirmación y ¿qué me aparece en su web? “Tío, te sales”. Pues efectivamente.

Más allá del lorem ipsum

Así que si eres alguien que contrata diseñadores, pregúntales qué les gusta leer. Habla con ellos sobre qué palabra elegir para cada botón, cada enlace, cada título. Hazles una pequeña prueba para que reescriban tu página “Sobre nosotros”. Es trabajo del diseñador pensar sobre tu web como un usuario, y decirle lo que necesita oir, cuando necesita oirlo. Un diseñador que valga su salario podrá hacerlo. Y si tu diseñador dice “No soy escritor”, puede que toque buscar otro que sí lo sea.

Si eres un diseñador que no te crees escritor, es la hora de pensárselo otra vez. Cómprate una copia de Strunk and White, busca en internet, o apúntate a clases. El diseño es comunicación, y hace falta algo más que píxeles para comunicar.

Translated with the permission of A List Apart Magazine and the author.

Color de fondo en imágenes dentro de enlaces

May 17th, 2006, 3 comentarios

Suele pasar, al menos en Firefox y similares. Definimos mediante css un color de fondo para el estado hover de los enlaces

a:hover {
background: red
}
a.ejemplo:hover {background: red}(enlace de ejemplo)

y, cuando anidamos una imagen dentro de un enlace nos encontramos con el efecto no deseado:

<a href="http://google.com"><img src="http://www.google.com/images/logo_sm.gif" /></a>
imagen para ilustrar el ejemplo(enlace + imagen de ejemplo)

Por mucho que intentamos quitarle el color de fondo o márgenes a la imagen, el color no desaparece:

a {
padding: 0
}
a:hover img {
background-color: transparent;
margin: 0
}

Lo que está pasando es, por una parte, que el color de fondo lo tiene el enlace, y no la imagen, y por otra que la imagen está por encima de la linea base del enlace. La solución es fácil:
a:hover {
background: red
}
a img {
vertical-align: bottom
}

imagen para ilustrar el ejemplo (enlace + imagen de ejemplo)

Mierda

May 16th, 2006, Un comentario

Se vende iBook 12″.
http://www.apple.com/macbook/macbook.html

3, 2, 1, grabando

May 12th, 2006, 2 comentarios

Jero está escribiendo un diario de sus días en San Francisco. Javi nos ha dejado un trocito de su web, yo he minituneado un wordpress y ya se puede seguir en www.supernovapop.com/blogs/the-sunday-drivers. Está de puta madre.

Me muero de envidia porque esta mañana se han ido el Lagarto y Gonpasa para allá y yo no he podido, me tengo que quedar viajando en la oficina. Ayer (o esta noche, o algo así) grabaron una canción que se llama Little Chat, es mi debilidad desde la primera vez que oí la primera estrofa, y me muero de ganas de oir lo bien que está quedando. La estoy oyendo ahora mismo.

En fin, en vez de ir a California, esta tarde cogeré el coche para hacer una cosa que tenía pendiente desde que tengo uso de carné: turismo manchego en la sierra de Albacete. Ayna, Amanece que no es poco, Molinicos, Gachas migas, Lietor…

Traeme algo de Góngora, ¡que tengo yo cuerpo de Góngora!

Si te piden el carné (así)

May 10th, 2006, 6 comentarios

Se me ocurre esta manera de tunear un campo de texto para pedir el DNI (no se ve en Safari):

¿Pros? ¿Contras? ¿Improperios hacia mi persona?

Sobre Abbey

May 9th, 2006, Sin comentarios

Hace como dos años, cuando aún estaba en Vector, estuve haciendo las maquetas para aboutabbey.com. Nada de rediseño, se trataba de, manteniendo el aspecto, rehacer el código para que fuera más ligero, manejable y accesible. Más acorde a los estándares, al fin y al cabo.

Abbey goes Santander

Entregué las maquetas a los backenders y no supe nada de ellas (las maquetas, no las programadoras, que también había) hasta que volvieron (las programadoras) diciendo que todo se veía mal. Era de mis primeros proyectos de este tipo y me costó mucho convencerles de que tenían que usar un Doctype y que éste debía ir al principio, y que el principio era antes del comentario de Open Market y todo.
Pero esto es un rollo y no sé por qué lo acabo de contar.

El caso es que fue uno de esos proyectos infinitos, que van y vienen y nunca se acaban. En medio, Santander había comprado a Abbey, y decidió tirar a la basura el rebranding (rediseño en moderno, creo) que unos meses antes había hecho Wolff Olins. Total, no se habían gastado tanto.

Abbey went Tate Modern

Así que saqué un montón de partido de haber empezado a hacer las cosas bien, porque sólo tuve editar la hoja de estilos y un puñado de imágenes, para cambiar algunos morados por rojos.

El tiempo pasó y la cosa no salía a producción, y un día me llevé un sorpresón, porque habían cambiado la paleta de colores (de morados a rojos), pero dejando el mismo código. En web archive aún se puede ver.

Total, que cuando ya me había olvidado del tema, acabo de encontrarme con la nueva versión online. No está tan bien como me gustaría, pero oye, algo es algo y las páginas pesan la mitad que las antiguas (!). Y es curioso cómo, lo quieras o no, coges cariño a los trabajos.

Y, buscando algún link para este post, he encontrado este otro, sin desperdicio, sobre el destrozo ibérico a la imagen de Abbey. La verdad es que lo que han hecho en abbey.com no tiene nombre. Como dice el tal Matthew Revell, intenta adivinar qué partes del diseño estaban ya y cuáles son las nuevas impuestas por la imagen del Santander. De coña.

Juanjez

May 8th, 2006, Un comentario

El bueno de juanjez ha actualizado su porfolio y se ha salido. Si no lo conocías, esta es una gran ocasión para robarle su Paquita (.zip), ir a la moda de una vez o felicitar al fin la navidad de manera elegante.

Taller en Oviedo

May 5th, 2006, 5 comentarios

Molly E. Holzschlag
Andy Clarke

Fundamentos Web 2006 se pone interesante según aparecen detalles. Leo a través de su RSS:

Taller: “Designing for Web 2.0”
Molly E. Holzschlag y Andy Clarke ofrecerán un taller que lleva por título “Designing for Web 2.0”. Estos expertos del diseño Web ayudarán a aclarar la idea de lo que realmente significa la Web 2.0, explicando el uso de la nueva generación de tecnologías para la Web basándose en estándares.

Estás viendo los posts de May, 2006.