detalles en la web

Siempre que navego, como diseñadora web no puedo evitar fijarme en los pequeños detalles que hacen grande a una web.

Normalmente hago una captura de pantalla, recorto la parte que me ha llamado la atención y la guardo en una carpeta llamada “detalles web”.

A partir de ahora continuaré mi colección online e iré poniendo aquí las capturas de pantalla.

Empezaremos por los iconos de atomiq, un blog que descubrí en los feeds de furilo (que uso a diario porque están mucho mejor organizados que los mios).

icono de un reloj y una carpeta, de color amarillo.

Iconos para dos tipos de meta-información de un post: fecha de publicación y categoría.

presentaciones de Stopdesign en el Web Essentials 2004

Genial el diseño de las presentaciones de Douglas Bowman en el Web Essentials 2004.

Parte de una captura de pantalla del diseño de las presentaciones

El contenido, como siempre, excelente (especialmente la segunda presentación).

ilustraciones de Adrian Johnson

De las mejores ilustraciones que he visto, del británico Adrian Johnson:

ilustración con rastos infantiles de un cielos nublado y un hombre con un paraguas, enfadado porque sólo llueve encima suyo

logotipo del mundial de fútbol FIFA 2006 en Alemania

logotipo oficial: tres círculos que representan caras riendose

Como parece ser que el logotipo para la copa del mundo de fútbol en Alemania el 2006 no ha gustado mucho, varias asociaciones de diseñadores que han propuesto alternativas a la identidad corporativa del mundial.

Form es una revista alemana de diseño que consideró el logotipo “un insulto a los diseñadores alemanes” y se pusieron a crear otras posibilidades:

un balón de fútbol coloreado de negro, rojo y amarillo con llamas de fuego

11 Designer es un colectivo de 11 estudios de diseño que se unieron para hacer propuestas alternativas del logotipo.

Sin duda, mi favorita es la propuesta de Integral Ruedi Baur :

propuesta del logotipo de un hobre corriendo alrededor de un gran círculo relleno de una trama de puntos naranjas

lesionando al usuario

Ayer por la mañana, último día de plazo, me decidí a realizar mi matrícula como estudiante de la UMA a través de su web.
¡Allá voy! Me esparaba una experiencia de usuario frustante. ¡Pero no esperaba que tánto!. A punto estuvo de causarme lesiones mentales irreversibles.

Empecé buscando durante más de 10 minutos dónde estaba la entrada como alumno al sistema. Una vez dentro, tras rellenar un críptico formulario repleto de códigos y preguntas que me hacían consultar la guía de matriculación una y otra vez, cruzo los dedos, le doy a enviar y ¡tachán!: “Error 500: Internal server error”. ¿y ahora qué? ¿Qué pasa con mi matrícula? ¿Ya no puedo estudiar este año?

Tuve que repetir el proceso, con miedo a que el sistema me matriculase dos veces o alguna burrada similar, y al final, frustrado y con los nervios crispados lo logré. ¡Por fin!.

Ahora sólo tenía que consultar la cuenta de email que me proporciona la UMA (y que nunca había usado) para saber si mi matrícula había sido aceptada. Otros 15 minutos buscando por su compleja estructura de navegación para llegar a un formulario en el que mi login es un número de 15 dígitos imposible de recordar.
Finalmete, mi matrícula estaba allí, ¡aceptada!, Vuelvo a ser universitario, un añito más.

Aún hoy temblaba un poco al levantarme, recordando los pinchazos que sentía en el pecho cada vez que la página principal redimensionaba la pantalla de mi flamante navegador automáticamente a 800×600, sientiendo aún la impotencia al manejar ese insufrible menú desplegable, rememorando la espera a que cargase la imagen de fondo de 96 KB, sin la cual no puede leerse el texto por falta de contraste, reviviendo la sensación de desorientación inmensa que me hacía tener que pasar hasta 15 minutos dando vueltas para encontrar algo…

Hoy voy a escribir a la nueva rectora pidiéndole que, si no hacen una web medianamente decente, al menos que pongan un aviso que diga “Cuidado: está página puede lesionar al usuario”.

símbolos para el cuidado de tejidos

Los dibujitos que suelen ir en las etiquetas de la ropa y que sirven para indicar cómo cuidar un tejido son un conjunto pictogramas no recogidos en ningún código estándar universal.

Básicamente hay cuatro códigos principales: el americano, el europeo, el canadiense y el japonés. No he podido ver los dos últimos, pero investigando un poco sobre los primeros, he visto que ambos mantienen una estructura principal con cinco tipos de instrucciones:

  • LavadoPictograma de un cubo con agua
  • BlanqueadoPictograma de un triángulo
  • SecadoPictograma de un cuadrado
  • PlanchadoPictograma de una plancha
  • Lavado secoPictograma de círculo

El estándar americano es un sistema más simple y fácil de aprender que el europeo. La diferencia más llamativa en cuanto a la representación de la información es la utilización de puntos (sistema americano) en vez de números (sistema europeo) para indicar la temperatura del agua de la lavadora.

Los símbolos para el lavado y planchado son muy fáciles de comprender, pero nadie entendería a primera vista que el triángulo representa blanqueado o el cuadrado secado. Los pictogramas tan abstractos se reconocen después de un aprendizaje previo, lo cual resta utilidad al sistema de símbolos.

De hecho, la prueba más evidente de que los símbolos no acaban de funcionar es que todas las etiquetas acompañan los dibujos con una explicación de las normas o consejo de lavado.

Me temo que la idea es dejarnos el texto hasta que nos aprendamos los símbolos antes que rediseñarlos. Si seguimos así, a los niños del futuro les tendrán que impartir una asignatura que se llame “Pictogramas para comprender el mundo”.

3 detalles gráficos

Navegando por HellDesign (gracias a cssvault), he encontrado un icono que he ha gustado mucho:

Icono de un folio con un artículo escrito y una flecha. Al lado el texto Tip a friend

Toda la página me parece muy buena: el código excelente, la presentación muy clara y su menú, precioso:

menú con cinco opciones, fondo con un gris degradado y que se pone roja la opción sobre la que haces foco

También me ha gustado mucho el menú de una agencia de diseño francesa: Cosmic

menú con cinco opciones en en un recuadro cada una de un color diferente

Tengo yo una espinita de hacer un menú con grandes recuadros…

Horario de programador

Un gerente fué con sus programadores y les dijo: “Con respecto a sus horas de trabajo: ustedes van a tener que venir a las nueve de la mañana e irse a las cinco de la tarde.” Con esto, todos se enojaron y varios renunciaron en el momento.

Entonces el gerente dijo: “Está bien, en ese caso ustedes pueden fijar sus propias horas de trabajo, siempre y cuando terminen sus proyectos a tiempo.” Los programadores, ahora satisfechos, comenzaron a llegar a mediodía y trabajar hasta la madrugada.

El Tao de la programación

Visto en backdraft, uno de nuestros vecinos en el directorio de xeoweblog.

Dedicado a los programadores de ávidos, que llegan a las nueve de la mañana y trabajan hasta la madrugada. ¡Ánimo, que ya mismo acabamos cupotel!

palette: exploración del color para diseñadores de información

Una de las partes más duras cuando te enfrentas a bocetar el diseño de una página web es la elección de la gama de colores.

Y, aunque hay buenas recopilaciones de recursos para generarlas, hace unos días Jose me desubrió Palette, una pequeña aplicación de la diseñadora (de interacción e información) Joanna Wiebe (fundadora de OneMind).

logotipo del programa y una gama cromática generada

El programa, además de generar gamas cromáticas que me han gustado mucho, recopila 10 consejos sobre el uso del color que no está de más recordar, además de una sección de enlaces con recursos sobre el tema.

e-dirigentes

Cuando comenzamos ilusionados el proyecto de montar nuestra propia empresa de diseño web, no pensábamos que tendríamos que dedicar más del 30% de nuestro esfuerzo y trabajo diario a gestionarlo y dirigirlo.

A nosotros lo que nos gusta es la web, y nos resulta pesado tener que dedicar tiempo a presupuestos, facturas, llamadas de teléfono, organizar los papeles en carpetas… (¡pudiendo estar leyendo artículos sobre heurísticos de sistemas de búsqueda o patrones de diseño de interacción!)

Pero, ya que no nos queda otra, intentaremos aprender de ello. De momento, creo que nos serán útiles los “10 principios y cualidades” para mejorar nuestra impuesta faceta de “e-managers“, mencionados por Fernando Sáez Vacas en su libro “Más allá de Internet: la Red Universal Digital“, donde resume las idéas de Frances Cairncross (“How to be an e-manager”):

  1. Velocidad: para una empresa, es mejor ser rápida que grande.
  2. Buenos empleados: procurar que empleados con nuevos talentos, capacidades y actitudes se sientan como en casa.
  3. Aperturismo: facilitar un gran nivel de acceso de asociados, proveedores y clientes en sus bases de datos y procedimientos internos.
  4. Capacidades colaborativas: potenciar el trabajo en equipo.
  5. Disciplina: normalizar procesos de trabajo y protocolos de comunicación.
  6. Buenas comunicaciones: por ejemplo, comunicar las estrategias al personal de la empresa.
  7. Capacidades de gestión de contenidos: no proveer de mucha información a asociados, clientes y empleados, sino de la que importa y bien empaquetada.
  8. Focalización en el cliente: concentrarse en el servicio, la personalización y la fidelización del mercado.
  9. Gestión del conocimiento: tener y mantener gente inteligente en la plantilla y construir y gestionar un capital intelectual de la empresa.
  10. Liderar con el ejemplo: manejar personalmente su correo electrónico, analizar sitios web y algunas otras operaciones tecnológicas típicasde la economía digital.

Lo dicho, la base tecnológica la llevamos bien, pero seguiremos trabajando en la “normalización de procesos de trabajo” y esas cosas…

Sobre blogold

blogold era un blog sobre desarrollo y estándares web, diseño gráfico, usabilidad, new media y ciberespacio.


Otros blogs de ávidos

ring
blog sobre desarrollo y usabilidad web para dispositivos móviles.
detalles
blog sobre diseño gráfico, ilustración, motion graphics y street art.
blog
noticias sobre los últimos movimientos y proyectos de ávidos.

Enlaces interesantes



La fecha de hoy: