Mostrando las entradas con la etiqueta diseño. Mostrar todas las entradas
Mostrando las entradas con la etiqueta diseño. Mostrar todas las entradas

jueves, mayo 22, 2008

La Usabilidad en el Email

Campaig Monitor: 2008 Email Design Guidelines

Así como debes tener muy en cuenta la Usabilidad en tus proyectos Web, también debes tenerla para tus proyectos con el email. ¡Sí! Esos boletínes o newsletters que envías periódicamente a tus clientes.

¿Cómo? Teniendo muy en cuenta estas Guías: 2008 Email Design Guidelines, publicadas por Campaing Monitor.

Si claro. Estas son unas Guías de Diseño, pero si las lees detenidamente verás que también te servirán para hacer tus comunicaciones más usables.

  • No desperdicies el tiempo de tus lectores: Así que directo al grano y si tu boletín es un extenso incluye en primera medida una tabla de contenido.

  • Los permisos importan: ¿Tienes el permiso para enviar tu email a cada uno de tus clientes? Además recuérdales quién eres y por qué deben creer en tí.

  • El contenido le gana al permiso: Además de tener su permiso, a tus clientes debes enviarle información relevante.

  • Haz fácil la salida de tu lista: No tienes porque escribirle a quienes no estén interesados.

  • El bloqueo de imágenes es común: Muchos clientes y webs de correo bloquean las imágenes por defecto, así que tu mensaje no debe depender de ellas.

  • Usa tablas: Desafortudamente el soporte de CSS no es el adecuado en los clientes de correo. Así que para diagramar usa tablas.

  • Cuando uses estilos, úsalos inline: Por el mismo motivo anterior.

  • No te olvides de la versión sólo texto: Muchos de tus clientes la prefieren.

  • Conoce las leyes de correo electrónico de tu país: Porque hay leyes que lo controlan y son diferentes en cada uno.

  • Prueba, prueba, prueba: Así como debes probar, probar y probar con tu sitio Web, igual hazlo con tus correos.

Este es un resumen de las guías. Deberías sacar el tiempo y leer el artículo completo en su blog, donde encontrarás más detalles y ejemplos de cada item.

Adicionalmente, te recomiendo su excelente Galería de Emails en HTML y sus plantillas para correos sólo texto en donde encontrarás gran inspiración

domingo, mayo 04, 2008

Videos y Podcasts de IxDA Interaction 08

IXDA Interaction 08

A mediados de febrero te comenté sobre algunos videos de Interaction 08, la primera conferencia organizada por IxDA - The Interaction Design Association (La Asociación de Diseño de Interacción).

Hoy tengo el placer de informarte que ya han publicado oficialmente la mayoría de los Videos y Presentaciones de la Conferencia que reunió muchos de los grandes exponentes del Diseño de Interacción en Estados Unidos.

Gracias a IxDA.

miércoles, abril 30, 2008

Top 100 Blogs de Diseño en Español

Top 100 Blogs de Diseño en Español

Si te interesa el Diseño Gráfico, he aquí un super listado: el Top 100 Blogs de Diseño en Español, publicado por nfg!

Excelente referencias, con conocidos de la casa como:
Recuerda que hace algunos meses igualmente recomendé Los Mejores Blogs de Diseño Gráfico, cuyo listado en español fue base para este nuevo.

Gracias a Tzek Blog.

lunes, abril 28, 2008

¿Qué es Diseño?



Artículo Original: What is Design? (Yes, all 10 definitions!)
Author: Frank Spillers, MS
Fecha: 30 de octubre de 2007
Traducido rápidamente por: Gabriel Porras
Visita el artículo original para leer el artículo completo en inglés.

Cuando el término diseño es usado puede significar muchas cosas, dependiendo de quién eres y qué conversación estás teniendo.

Debido a que la palabra “diseño” tiene muchos significados y para mucha gente, vamos a definirlo desde la perspectiva de un consultor de usabilidad, agrupando los “diferentes diseños” en 4 conjuntos:


DISEÑO PARA LA MENTE
Es el diseño que impacta los procesos cognitivos incluyendo la interpretación y entendimiento de la experiencia.

  1. Diseño de Interfaces de Usuario: Es el diseño y diagramación de las pantallas. Se enfoca en las interacciones del usuario y los comportamientos de la pantalla. Su objetivo es mejorar la “experiencia de usuario” o la usabilidad del diseño.

  2. Arquitectura de la Información: Es el diseño de esqueletos o “wireframes” con las interacciones en pantalla, de la diagramación, navegación y funcionalidades de un producto. Es usado para reseñar, conceptualizar y probar la funcionalidad inicial.

  3. Diseño de Interacción: Es el diseño que se enfoca en cómo el usuario interactúa con una página, aplicación o producto. Tiene un acercamiento orientado a la tarea, asegurándose que lo principal sea el flujo de la interacción.
¿Estás tres disciplinas del diseño son diferentes? No realmente. Su objetivo en el fondo es el mismo.


DISEÑO PARA EL CORAZÓN
Es el diseño que impacta los procesos sensitivos incluyendo los sentimientos y la emoción o las cualidades afectivas de la experiencia.

  1. Diseño Gráfico: Es el diseño del “look and feel”. Se focaliza en mejorar la apariencia de la diagramación, botones, colores, iconos y elementos de la marca, en mejorar o estilizar los aspectos del diseño.

  2. Diseño Interactivo: Este diseño es una disciplina híbrida que captura un poco de todo. Produce buenas piezas de Flash, animaciones, diseño gráfico y algo de programación con bases de datos o HTML.

  3. Diseño Emocional: Este diseño viene del campo de la usabilidad y el diseño de productos. Está involucrado con las cualidades sociales, ambientales, personales e íntimas de la experiencia de usuario. Este nos puede informar sobre el resultado de cualquiera de los otros tipos de diseño.


DISEÑO PARA EL CUERPO
Este es el diseño que impacta los procesos antropomórficos incluyendo los contextos sociales y físicos de la experiencia.

  1. Diseño Industrial: Diseña los productos físicos con los cuales nos relacionamos, por ejemplo los dispositivos móviles. El resultado: productos intuitivos, que se sienten, suenan, se ven y trabajan elegantemente.


METODOLOGÍAS/ENFOQUES INTEGRALES
Este último grupo presenta metodologías que agrupan las anteriores técnicas de diseño.

  1. Diseño Centrado en el Usuario: Este diseño coloca al usuario en el centro e involucra tres actividades principales: investigación de usuarios, prototipado y evaluaciones de usabilidad. Es iterativo por naturaleza.

  2. Diseño de Experiencia de Usuario: Un término relativamente nuevo que “mejora” el Diseño Centrado en el Usuario adicionándole un elemento más integral a la experiencia. Este diseño o, lo que es lo mismo, la Experiencia de Usuario, se puede considerar más como un acercamiento general y agrupador. No es un tipo de diseño de por sí, ya que sus entregables son los mismos de los Diseños para la Mente.

  3. Diseño de Experiencia: Este término es usado comúnmente como el abreviado de Diseño de Experiencia de Usuario, sin embargo es más ampliamente considerado como lo que llamamos Diseño Ambiental o el diseño de la experiencia en ambientes abiertos/públicos o de comercio. De nuevo, el Diseño de Experiencia, es una “sombrilla” que cobija todas las decisiones de diseño pero con una experiencia más vivencial. Este diseño hace uso del contexto, de los fenómenos sociales y ambientales, así como también de los sentimientos, percepciones e intuiciones del usuario.


En resumen: A lo mejor en este punto ya entiendes por qué el “diseño” puede ser tan ambiguo algunas veces. Así que la próxima vez que escuches “diseño”, te sentarás con la persona que hablas y definirás a qué “diseño” se refieren.

Gracias a InfoDesign.

jueves, abril 24, 2008

Cinco Principios para un Diseño Web Efectivo

Five More Principles of Effective Web Design

Nuevamente Smashing Magazine ha publicado un artículo muy interesante: Five More Principles Of Effective Web Design.

El diseño Web ha mejorado significativamente en estos últimos años. Es más amigable y más atractivo, y hay una buena razón detrás de todo esto: a lo largo de los años hemos descubierto que el diseño enfocado a la usabilidad y la experiencia de usuario es más efectivo.

Mencionan los siguientes principios (aunque te invito a leer el artículo original):
  • Usa un principio de mercadeo efectivo
  • Experimenta con pocos colores
  • Esfuérzate por un buen balance
  • Esfuérzate por la claridad
  • Redirecciónate hacia las necesidades de tus usuarios
Un fragmento de la conclusión: Un diseño Web efectivo no necesita ser bonito y colorido. Necesita ser claro e intuitivo.

Ah. Y te recuerdo estos otros artículos que nos complementan la información:

¿Por qué es Exitoso el iPhone?



¿Por qué es Exitoso el iPhone y en general todos los productos de Apple? Por lo que menciono en mi presentación Sitios Exitosos: Por la Experiencia de sus Usuarios. Y eso lo han corroborado en uiGarden con un Test de usabilidad del iPhone.

En este test: So… Does the iPhone live up to its hype? evaluaron a 5 usuarios con 4 teléfonos: un HTC TyTN, un Sony Ericsson W910i, un Nokia N95 y un Apple iPhone.

Sin lugar a dudas el mejor teléfono fue aquel más fácil de usar, es decir, aquel con el cual sus usuarios tuvieron una mejor Experiencia de Usuario: el iPhone.

Así que recuerda: No basta con que tu sitio funcione bien. Se necesita también que tus usuarios tengan una excelente experiencia. ¡Eso marcará la diferencia!

Gracias al Laboratorio Aragonés de Usabilidad, en donde encontrarás un resumen en español de lo que realizaron en este Test de Usabilidad.

domingo, abril 20, 2008

Sitios Exitosos: De los Estándares Web a la Experiencia de Usuario

Sitios Exitosos: De los Estándares Web a la Experiencia de Usuario

Comparto mi presentación Sitios Exitosos: De los Estándares Web a la Experiencia de Usuario. Si tu Universidad está interesada en presentar esta charla, se pueden comunicar conmigo que lo haré con mucho gusto (y obviamente sin costo alguno).

¡Comentarios más que bienvenidos!

El Contenido NO es el Rey



Publico el artículo que escribí para Capire el mes pasado.

¿Cómo evalúas un sitio Web? ¿Por su contenido? Te cuento que eso es lo último que yo miro. Yo comienzo por su estructura, pues pienso que ésta es en realidad la parte importante.

Por supuesto: soy ingeniero y hago sitios Web. Es por esto, porque conozco el proceso de creación de un sitio Web, que me atrevo a decir tal blasfemia, por la cual he sido recriminado varias veces.

Definitivamente el contenido es importante. ¿Sin embargo, lo es a tal punto que no importe dónde y cómo esté publicado? Eso es lo que hay detrás de tan famosa frase: “¡El contenido es el rey!”.

Como expondré a continuación, aún teniendo el mejor contenido, éste degrada su calidad y hasta se puede volver inaccesible si no está desarrollado sobre una buena estructura. El contenido no es el rey si no hay detrás unas bases que permitan que el contenido sea accesible.

Comenzaré mi exposición seleccionando un contenido. Uno que indudablemente pueda ser considerado rey: el contenido de la biblioteca pública de tu ciudad. Imagina que tal contenido debe ubicarse en un nuevo lugar. ¿Cómo lo construiríamos? ¿Que deberíamos tener en cuenta?

Miremos algunos procesos y las personas que están involucrados en ellos para crear una excelente biblioteca, digna de nuestra ciudad.

  1. Ubicación
    Lo primero que hay que definir es dónde vamos a ubicar nuestra nueva biblioteca. Es nuestro trabajo buscar el lugar y con ayuda de un arquitecto definir uno adecuado para comenzar a construir. ¿Qué variables se deben tener en cuenta para ello? Simplemente que tenga buenas vías de acceso, que sea un lugar céntrico, entre otros detalles. El objetivo aquí es que a nuestra biblioteca pueda llegar fácilmente cualquier persona.

    Esto en una Web es la parte del “Findability”, traducido por algunos como Encontrabilidad. Si tenemos un sitio queremos que sea encontrado y, obviamente, que sea visitado por personas y buscadores. Aquí se pueden aplicar técnicas de SEO (Search Engine Optimization), es decir, que trabajamos para que nuestros visitantes potenciales nos encuentren y lleguen a nosotros fácilmente.

    El “Findability” es parte de la estructura. ¿Importante? Por supuesto. Imagínate una biblioteca que no la encuentre nadie, que esté en un lugar inaccesible o que para llegar a ella haya que dar mil vueltas.

  2. Iniciamos con las bases
    Una vez tengamos el lugar, podemos comenzar a construir el edificio y en cuanto a construcciones nadie mejor que un ingeniero civil (constructor). El se encargará de poner todas las bases sobre la cual pondremos nuestra nueva biblioteca.

    Esto en una Web significa que necesitamos un ingeniero para programar el sitio, ya sea desarrollándolo mediante un lenguaje como .Net o PHP, o mediante un generador de contenidos como Drupal, Wordpress, Joomla, entre cientos que hay. El ingeniero se debe encargar de proveer las bases para el contenido de la Web.

    Fíjate que si esta parte de la estructura no está bien concebida, no hay biblioteca y sin biblioteca no hay contenido. ¿Importante? Por supuesto. Imagínate un edificio sin unas buenas bases, que tan sólo se comience a debilitar cuando comencemos a colocarle todos los libros de la biblioteca o con todas las visitas de toda la comunidad.

  3. Diseño Exterior
    Ahora vamos a darle el toque elegante a nuestra nueva biblioteca. Si el ingeniero civil se encarga de las bases, del diseño exterior se encarga el arquitecto, quien nos hará, entre muchas otras cosas, la fachada, los laterales, los alrededores. Esto es algo importante porque seguramente querremos que nuestra nueva biblioteca tenga un toque moderno o elegante o sobrio o funcional o amigable o todas las anteriores… Eso dependerá de nuestro gusto y expectativas que tengamos del edificio que alojará la futura biblioteca.

    Esto en una Web es el diseño gráfico. La imagen del sitio definitivamente ayuda a hacer nuestro sitio más amigable, a tener su toque moderno o elegante o sobrio... Es la puerta de entrada a todos los contenidos que estamos ofreciendo.

    El Diseño Gráfico también es parte de la estructura. ¿Importante? Por supuesto. Imagínate una biblioteca que sea fea, que no resulte amigable o peor aún, que esté diseñada de una manera tan innovadora o extravagante que los visitantes a la misma no se sientan cómodos para entrar.

  4. Diseño Interior
    Y si hablamos del diseño exterior también debemos hablar del interior, que no sólo implica la parte estética sino también la estructural, como por ejemplo, en dónde están ubicados los libros en la biblioteca, al igual que el resto de secciones que debe tener un edificio (baños, zonas comunes, cafetería, oficinas…). Nuevamente, es nuestro arquitecto quien diseña los interiores del edificio. De igual manera debemos ayudarnos de un bibliotecólogo que se encargará de organizar todos nuestros libros y hacer el catálogo.

    Esto en una Web es la Arquitectura de la Información. Dentro de sus funciones está definir y organizar los contenidos, la navegación, la señalización, la búsqueda. En general es el encargado de organizar el contenido y hacer que pueda ser encontrado y gestionado fácilmente.

    La Arquitectura de Información también es parte de la estructura. ¿Importante? Por supuesto. Imagínate que en la nueva biblioteca no puedas encontrar el libro que buscas, que no puedas ubicar los baños, que cuando menos pienses estés perdido en ese mar de libros.

  5. Funcionamiento
    Adelantémonos un poco e imaginemos ya nuestra biblioteca está construida, organizada y funcionando. ¿Pero lo hace óptimamente? Es aquí donde entra el rol de Administrador. Esta persona debe, por ejemplo, definir los procesos de funcionamiento de la Biblioteca, procesos cómo horarios y préstamos, revisar la satisfacción de los usuarios, entre otras muchas cosas del funcionamiento en general de la misma.

    Esto en una Web corresponde al Diseño de Interacción y a la Usabilidad. El primero se encarga de diseñar la forma en que el visitante interactúa con el sitio (por ejemplo diseña el proceso de compra en una tienda y los diferentes formularios que se necesitan llenar), mientras que el segundo se encarga de determinar qué tan bien están diseñados esos procesos, si realmente le sirven a los visitantes actuales del sitio y cómo se pueden mejorar.

    El Diseño de Interacción y la Usabilidad también son parte de la estructura. ¿Importante? Por supuesto. Imagínate que en nuestra biblioteca una persona no pueda hacer “rápidamente” un simple préstamo porque el proceso o los requerimientos son muy engorrosos.

  6. Accesibilidad
    Nos falta algo. Lo que se llama la Responsabilidad Social, es decir, el compromiso que tenemos con nuestra propia ciudad. Hasta ahora nuestra biblioteca la hemos pensado para los visitantes tradicionales. Pero, ¿qué hay de aquellas personas con necesidades especiales? Aquí nuevamente llamaremos al Arquitecto para que implemente por ejemplo rampas y/o ascensores, para que puedan acceder las personas con sillas de ruedas. También podríamos crear un programa de lectura, donde personas voluntarias le lean a personas ciegas. En esta área se puede hacer mucho.

    Esto en una Web corresponde a la Accesibilidad y el trabajo aquí es hacer que el contenido esté disponible, no importando el dispositivo o las capacidades de nuestros visitantes. Además de Internet Explorer o Firefox hay gran variedad de programas y equipos que pueden navegar en nuestro sitio: lectores de pantalla (Screen Readers) y navegadores sólo texto por mencionar algunos. Lo más interesante de esta área es que también trabajan en pro de los móviles y los buscadores (imagínalos como personas ciegas), los cuales no tienen las mismas capacidades que los navegadores tradicionales.

    La Accesibilidad también es parte de la estructura. ¿Importante? Por supuesto. Imagínate que en nuestra biblioteca no pudiera entrar una persona en silla de ruedas, que un adulto mayor tenga serias dificultades en su ingreso y movilización, que una persona ciega no pueda participar de todo el conocimiento que nuestra ciudad ha acumulado…

Mira todos los factores que he tenido en cuenta. ¡Y faltan! ¿Lo habías pensado desde este punto de vista?

Como te darás cuenta, una excelente biblioteca para nuestra ciudad no la forman sólo los libros. Además de ellos se necesita un edificio bien construido con una excelente estructura. Esto es igual para un sitio Web: Uno bien hecho, además de tener un muy buen contenido, necesita una muy buena infraestructura debajo de él.

Si trabajas en diseño Web deberás reconocer los factores que acabo de presentar. Son los que se han agrupado bajo las Disciplinas relacionadas con la Usabilidad, los cuales inicialmente presentó Francisco Tosete en su Rueda de la Experiencia de Usuario y luego mejoró Olga Carreras en su Esquema de Disciplinas relacionadas con la Usabilidad.

Pero recuerda que la estructura es mucho más: es todo el trabajo que no se ve en un sitio, lo que es invisible. Es el mantenimiento que se le hace, son las estrategias de mercadeo que se implementan, son los servidores que lo hospedan, por mencionar algunos más.

El contenido es el rey porque es lo que se ve, pero lo que hay detrás, la infraestructura que lo sostiene también es muy importante y de mucha mayor envergadura, como nos lo presenta la analogía del Iceberg que APIS Design nos presentó hace algunos días.

Ahora respóndete, ¿el contenido es el rey?

jueves, abril 03, 2008

Cursos Gratuitos en Learning Space

LearningSpace

Gracias a Yusef les comparto otro recurso bien interesante: LearningSpace un espacio web de Open University en el que ofrecen acceso completo a formación virtual.

Dentro de los cursos que nos ofrecen gratuitamente y de nuestro interés están:

Actualización: De manos de Usándolo me acabo de dar cuenta de otro curso gratuito, nada más y nada menos que en el MIT: User Interface Design and Implementation.

sábado, marzo 29, 2008

Más Frameworks de CSS

CSS Framework - Free Open Source

Hace tan sólo 5 días les hablaba de los CSS Frameworks 960 Grid System y el BluePrint cuando hoy me encuentro con este super listado: Los 12 mejores CSS Frameworks.

Obviamente no se menciona el 960 Grid System porque es el New Kind on The Block, pero por supuesto que está el BluePrint.

El listado original proviene de SpaceBoy.

¿Usar o no usar un Framework? Muchos dicen que sí, muchos dicen que no [en]. Mi experiencia, después de usar el Framework de JavaScript: jQuery, es que lo voy a usar siempre (¡Espero!). ¡Es de lo mejor!

¿Pero un framework de CSS? Aún no he hecho el intento, pero cuando lo haga lo comentaré. Si piensan darle una oportunidad es bueno que antes lean las ventajas y desventajas de usarlos [en].

Actualización: En Freak Group acaban de hacer su propio listado de Frameworks de CSS.

Actualización 2: He aquí otro listado con los Frameworks más atendidos: CSS Frameworks.

lunes, marzo 24, 2008

960: Un Nuevo Framework de CSS

960 Grid System: Sketch Design Code

¿Un Framework de CSS? Sí. Así se le denomina a un conjunto de archivos que facilitarán tu trabajo con las hojas de estilo. Hay frameworks para JavaScript, como no va a haber para CSS.

Básicamente se han hecho para ayudarte en la diagramación de tus Webs mediante CSS y generalmente ya incluyen un CSS Inicial (Reset).

Creo que el más conocido es el BluePrint, el cual ya nos presentó Leandro hace algún tiempo y que realmente es muy completo porque, además de facilitarnos la diagramación (maquetación), nos ayuda a definir fácilmente la tipografía y la impresión de las páginas.

Ahora, el framework que te presentaré hoy es el nuevo: 960 Grid System, cuyo objetivo, al igual que del BluePrint, es facilitarnos la vida a la hora de crear el grid (grilla) de nuestro diseño.

¿Qué tiene de especial? Que además de los CSS viene equipado con las plantillas para los programas: Fireworks, Omnigraffle, Photoshop y Visio. Así que desde el prototipado puedes tener un diseño realmente consistente. Muy interesante para que lo evalúes.

Gracias a Digital Web Mag.

lunes, marzo 17, 2008

Cruzando la Brecha Diseñador - Usuario

Bridging The Designer-User Gap

Soy muy recurrente al mencionar que los diseñadores no son los más adecuados en diseñar una Web al 100%. Situación que vemos muy a menudo en Colombia.

Precisamente hoy Jakob Nielsen en su artículo Cruzando la Brecha Diseñador - Usuario [en] comienza con:

Una de las principales reglas de la usabilidad es que "los diseñadores no son usuarios". Esta idea es tan importante como "los vice presidentes no son usuarios" y "los usuarios no son diseñadores" (así que no los escuches, obsérvalos).

Te recuerdo que hace un tiempo igual lo dijo Steve Krug: Los diseñadores tienden a pensar que a la mayoría de la gente le gustan los sitios que sean visualmente interesantes porque precisamente a ellos les gustan los sitios que son visualmente interesantes.

¿Para quién diseñas tus sitios? ¿Para diseñadores?

viernes, febrero 29, 2008

Formularios Usables: 60 Directrices de Usabilidad

Formularios Usables: 60 Directrices de Usabilidad

He aquí la nueva referencia para diseño de formularios Web: Formularios Usables: 60 Directrices de Usabilidad.

Una excelente recopilación que ha hecho Olga Carreras en su blog y que mejor no podría estar. Recopila las recomendaciones y mejores prácticas de Luke Wroblewski, Jakob Nielsen, usability.org, Eduardo Manchón...

domingo, febrero 24, 2008

Propuesta de Rediseño del Home del Sena Virtual

Comunidad de Aprendizaje SENA

Un error común en Internet es crear sitios Web sin pensar en sus usuarios. Los contenidos y la forma de presentarlos se definen con base en las políticas internas de las empresas y algunas veces, por no decir que muchas, es el enfoque errado.

Un sitio Web debe crearse pensando en sus visitantes. Esto es el Diseño Centrado en el Usuario. No es tomar toda la información que la compañía tiene para publicar, sino la que los visitantes necesitan encontrar.

Ejemplos claros de esto se pueden ver en sitios que dan la bienvenida al usuario con imágenes o animaciones, cuando los internautas buscan generalmente es información y servicios. Vemos sitios corporativos con un Home lleno de secciones (encuestas, datos económicos, titulares de prensa, noticias…), cuando el visitante lo que quiere es conocer la empresa y sus servicios.

Hoy quiero plantear el rediseño de un sitio Web. Haremos un rápido análisis del Home actual del Sena Virtual, y elaboraremos una propuesta de rediseño pensando en los posibles visitantes que debe tener este sitio.

¿Sabemos de quién estamos hablando? El Servicio Nacional de Aprendizaje (SENA) es un establecimiento que presta el servicio de Formación Profesional Integral gratuita en toda Colombia, el cual, aprovechando las bondades de Internet, ha ampliado su oferta educativa mediante cursos virtuales, los cuales se ofrecen a través del sitio Sena Virtual.

Este sitio es uno de los merecidos ganadores del Premio Colombia en Línea 2007 como Mejor Sitio de Aprendizaje en Línea en el país y sin lugar a dudas, la labor del Sena es estupenda, toda vez que le lleva educación a toda Colombia gratuitamente.

Ahora, ¿quiénes visitan este sitio? La metodología de “Personas” nos invita a hacer una descripción detallada de los usuarios, pero sin llegar a este análisis, considero que principalmente hay dos tipos de visitantes: los estudiantes actuales y los estudiantes potenciales del Sena Virtual. Seguro hay más visitantes: docentes, empresas interesadas en cursos para sus empleados, entre muchos otros. Pero creo, que las “personas” más importantes y en los cuales deberíamos estar más interesados son los Estudiantes.

¿Qué hacen ellos en el sitio? La metodología de “Escenarios” propone definir tareas comunes de nuestros usuarios (las “personas”). Para este ejemplo las simplificaré en estas tareas:
  • Los estudiantes actuales necesitan, principalmente, ingresar al sitio para tomar sus cursos, e igualmente conocer los nuevos y/o próximos a realizarse.
  • Los estudiantes potenciales, principalmente, necesitan conocer la oferta educativa del Sena, al igual que conocer el proceso de inscripción en los mismos.
Seguramente hay más tareas que necesitan hacer estos usuarios, pero me atrevo a indicar que estas son las principales.

Ahora, basados en los usuarios y tareas que definimos (que supondremos como acertadas), nos debemos preguntar: ¿el home actual del Sena Virtual ayuda a estos usuarios en sus tareas?

Veamos cómo está diagramado:

Home Actual del Sena Virtual

  1. Encabezado: Su función es identificar el sitio. Aunque claramente está el logo del Sena y hay un slogan: “Comunidad de Aprendizaje” me parece que se puede mejorar. Primero porque cubre mucho espacio y segundo porque no cumple una buena práctica de-facto en cuanto a ubicación del logo. Actualmente está al lado derecho y debería estar al lado izquierdo.

    Así que nuestra propuesta sería reubicar el logo y colocarlo como Sena Virtual (para diferenciarlo del sitio del Sena). Adicionalmente podríamos redefinir el slogan como “La Comunidad Online de Aprendizaje del SENA”. ¿No les parece mejor? Y por último disminuiríamos el espacio que ocupa este encabezado.

  2. Presentación: Aquí simplemente hay unas palabras de bienvenida junto con una imagen decorativa. También presentan el Premio Colombia en Línea que ganaron. ¿Esta información sirve a nuestros estudiantes? Realmente no. Si soy un estudiante activo necesito es estudiar y si soy uno potencial quiero conocer los cursos que me ofrecen. Los expertos en usabilidad recuerdan que es mejor listar los servicios que invitar a conocerlos. Igualmente el logo del Premio no da un valor agregado a los estudiantes.

    Así que nuestro rediseño eliminaría las palabras de bienvenida, reubicaría la imagen del Premio fuera de esta sección y aquí podríamos presentar 1 o 2 cursos que queramos resaltar, ya sea porque sean nuevos y/o porque estén próximos a comenzar. ¿Tenemos muchos cursos? Simplemente colocamos aleatoriamente uno de ellos cada vez que ingrese un usuario y colocamos un vínculo a “Cursos que comienzan esta semana” o “Nuevos cursos”.

  3. Noticias: Esta sección me parece válida y aunque no ayuda directamente a cumplir las tareas de nuestros estudiantes, son de esas secciones que no pueden faltar.

    Así que en nuestro rediseño simplemente reduciría la cantidad de texto presentado por cada noticia y al final de ellas podríamos colocar un vínculo a “Anteriores noticias” para ofrecer un histórico.

  4. Menú de Servicios: El menú es básico en todo sitio Web, ¿pero el actual está bien concebido? Hay 4 secciones: Aprendices, Biblioteca Virtual, Correo Electrónico y Encuestas.

    La primera sección “Aprendices” presenta los ítems que necesitamos: “Nuestros Cursos Ofertados” e “Iniciar Sesión”. Pero también hay un “Ingreso a la Oficina Virtual” y un “Curso de Inducción”, el primero sirve a los estudiantes activos y el segundo a los potenciales.

    Este menú podríamos mejorarlo separando los ítems que son para los estudiantes activos y los potenciales, al igual que haríamos una sección aparte para los cursos.

    Adicionalmente la “Biblioteca Virtual” y el “Correo Electrónico”, podríamos colocarlo en una categoría de Servicios, en donde seguramente se pueden colocar otros ítems.

    La sección de “Encuestas” sobra. Primero, no ayuda a los estudiantes en sus tareas. Segundo, si el Sena desea hacer una encuesta entre sus usuarios, es mejor enviarles un correo e invitarlos a responderla en una página preparada para ello.

    Finalmente debemos recordar que este menú nos debe dar acceso a cualquier página del sitio. Por lo tanto faltan ítems tan importantes como Quiénes Somos, Noticias, Herramientas (que actualmente están ocupando toda la columna izquierda), y algo tan importante como Proceso de Inscripción, el cual no encuentro en ninguna parte del Home.

    En resumen, en lugar de tener:
    1. Aprendices
      - Nuestros servicios ofertados
      - Iniciar sesión
      - Ingreso a la oficina virtual
      - Curso de inducción
      - Inglés para todos los colombianos

    2. Biblioteca Virtual
      - Biblioteca Virtual Sena

    3. Correo Electrónico
      - Correo MiSena
      - Reestablecer contraseña

    4. Encuesta
      - Colombianos en el exterior

    Podríamos tener algo como:
    1. Oferta de Cursos (lo coloco de primero porque sirve tanto a estudiantes activos como potenciales)
      - Inglés para todos los colombianos (el cual está muy resaltado en el Home actual).
      - Clasificados por Categorías
      - Todos los cursos
      - Próximos a iniciar
      - Nuevos

    2. Estudiantes Activos
      - Inicio sesión
      - Ingreso a la oficina virtual

    3. Estudiantes Nuevos
      - Matrículas
      - Curso de Inducción
      - Herramientas necesarias (requisitos)
      - Información para Extranjeros (Recuerden que estamos en Internet a la vista de todo el mundo. ¿El Sena Virtual ofrece educación gratuita también a extranjeros? Aquí se puede responder esta pregunta. Por lo menos este es un vínculo que nunca falta en las Universidades estado unidenses y europeas).

    4. Sena Virtual
      - Quienes Somos
      - Noticias
      - Contáctenos (¡En el sitio no lo veo por ningún lado!)

    5. Servicios (Lo coloco aparte y no dentro de Estudiantes Activos porque, según leí, también se ofrecen a docentes, proveedores, etc.)
      - Biblioteca Virtual Sena
      - Correo Electrónico

    Este puede ser un mejor menú. ¿El ideal? ¡Definitivamente no! Necesitamos conocer todo el sitio para poder completar los ítems que faltan y verificar que los que están si están bien ubicados. Porque como dijimos anteriormente, éste debe servir para navegar todo el sitio.

    Mínimo las 3 primeras categorías son muy acertadas para nuestros visitantes más importantes: los estudiantes (activos y potenciales).

    Adicionalmente aunque la agrupación de los ítems puede parecer lógica, sería ideal apoyarnos de una metodología tipo Card Sorting, en la cual son los mismos usuarios quienes nos ayudan a hacer la categorización. Al fin y al cabo ellos son quienes harán uso del mismo.

    En cuanto a diseño, es una gran pérdida de espacio el utilizar botones para cada uno de los ítems. Tan sólo observemos que este menú en una pantalla de 1024x768 sólo permite ver 5 opciones. Por lo tanto, es recomendable utilizar un menú que ocupe un espacio menor.

  5. Enlaces a sitios: Estos vínculos a sitios “amigos” no ayudan para nada en las tareas de nuestros estudiantes. Es otra sección de esas que hay que tener (por lo que he visto en los sitios del gobierno Colombiano) pero definitivamente no deben estar en el menú.

    Para este caso en nuestro rediseño los colocaríamos en la parte inferior de la página, como he visto que lo hacen otros sitios del gobierno.

  6. Herramientas: Finalmente esta columna presenta las herramientas necesarias para tomar los cursos del Sena Virtual. ¿Importante? Por supuesto. Pero la pregunta que debemos hacernos es: ¿Deben estar en el Home?

    Si miramos desde la perspectiva del estudiante activo: no sirve, porque ya debe tener estas herramientas. Y desde el punto de vista del estudiante potencial esta es una información que sobra si la comparamos contra los cursos, toda vez que él está buscando qué estudiar. Lo que necesita para hacerlo sería posterior.

    Así que esta columna la podemos eliminar y su contenido lo podemos colocar dentro de la información para los estudiantes nuevos. Es importante resaltar, adicionalmente, que cada curso debería tener la información de las herramientas que se necesitan para cursarlo.

Hasta aquí el contenido del Home actual. Volvamos a evaluar las tareas de nuestros estudiantes.
  • Los estudiantes actuales necesitan, principalmente, ingresar al sitio para tomar sus cursos, e igualmente conocer los nuevos y/o próximos a realizarse.
  • Los estudiantes potenciales, principalmente, necesitan conocer la oferta educativa del Sena, al igual que conocer el proceso de inscripción en los mismos.

Para todos los estudiantes (tanto los activos como los potenciales) tenemos en el menú todas las opciones que necesitan (las 3 primeras secciones). ¿Pero es suficiente? ¡No!

Si el Home debe destacar por algo es por hacer más rápidas y fáciles las tareas de nuestros usuarios principales.

La tarea principal del estudiante activo es ingresar a sus cursos, por lo tanto sería ideal, que en el Home tengamos una sección de Login. En cuanto a la oferta de cursos ya mencionamos que en la sección 2 tendríamos 1 o 2 cursos resaltados.

Sólo nos faltaría, para el estudiante potencial, la información sobre cómo matricularse.

Así es que hemos completado nuestro nuevo Home del Sena Virtual así:
  • Un nuevo encabezado con logo y slogan.
  • Un nuevo menú.
  • Una sección con un curso resaltado.
  • Una sección de login.
  • Una sección con la información para matriculas.
  • Una sección de noticias.
  • El infaltable pie de página

En cuanto a diagramación se podrían plantear una propuesta como esta:

Home propuesto para el Sena Virtual

Esto es un prototipo de baja fidelidad: un primer acercamiento, una versión en borrador del Home.

Es una propuesta, que si nuestra definición de usuarios y tareas está correcta resulta muy válida. Pero, es una propuesta de varias que se pueden generar. Podemos generar otras mostrando las 4 secciones principales en otro orden y en otras diagramaciones.

El proceso continúa, pero el ejercicio que quería presentarles ha finalizado.

Para terminar, ¿qué te ha quedado? Puedes hacer un rápido ejercicio definiendo los usuarios que más usan tu sitio. Luego define las tareas que ellos realizan en él. Ahora pregúntate: ¿mi Home les ayuda a estos usuarios a hacer sus tareas rápida y fácilmente?

sábado, febrero 02, 2008

10 Principios para un Diseño Web Efectivo

10 Principles Of Effective Web Design

Artículo Original: 10 Principles of Effective Web Design
Author: Smashing Magazine
Fecha: 31 de enero de 2008
Traducido rápidamente por: Gabriel Porras
Visita el artículo original para ver ejemplos de cada principio.

La Usabilidad y la utilidad, y no el diseño visual, son los que determinan el éxito o el fracaso de un sitio Web. Puesto que el visitante de una página es la única persona que hace clic en el mouse y, por consiguiente, decide lo que quiere hacer, el diseño centrado en el usuario se ha establecido como un método estándar hacia el diseño Web comercial y exitoso.

No vamos a discutir los detalles de implementación (por ejemplo dónde debe colocarse la caja de búsqueda), como ya lo hemos hecho en otros artículos, sino que nos centraremos en los principios, heurísticas y estrategias para un diseño web efectivo – métodos que, usados apropiadamente, pueden guiarnos a decisiones de diseño más sofisticadas y a simplificar el proceso de percepción de la información presentada.

¿CÓMO PIENSAN LOS USUARIOS?
Básicamente, los hábitos de los usuarios de un sitio Web son diferentes de los hábitos de los compradores de una tienda. Los visitantes dan un vistazo a cada nueva página, examinan rápidamente algo del texto y hacen clic en el primer vínculo que les llama su atención o se asemeja vagamente a los que están buscando. De hecho, hay muchas partes de la página que ni siquiera miran.

La mayoría de los usuarios buscan algo de su interés (o que les sea útil) y que tenga un vínculo. Tan pronto lo encuentran le hacen clic. Y si en la nueva página no encuentran lo que estaban buscando, hacen clic en el botón Atrás y el proceso de búsqueda continua.
  • Los usuarios aprecian la calidad y la credibilidad. El contenido es más importante que el diseño. Es por eso que sitios con muy buen contenido y no tan bien diseños obtienen gran cantidad de tráfico.
  • Los usuarios no leen, sino que ojean rápidamente. Buscan puntos fijos que los guíen hacia lo que están buscando.
  • Los usuarios son impacientes y quieren resultados instantáneos. Un principio simple: Si un diseño no hace que el usuario encuentre lo que busca, el diseñador falla y hace perder dinero a la empresa. Entre más tenga que pensar el usuario y la navegación sea menos intuitiva, más fácil será que los usuarios busquen otras alternativas.
  • Los usuarios no seleccionan lo más óptimo. No examinan la página linealmente ni van de sección en sección buscando lo que necesitan. Por el contrario buscan rápidamente y toman la primera opción que encuentren, en lugar de buscar la mejor de todas las opciones.
  • Los usuarios siguen su intuición. La mayoría de las veces los usuarios se las arreglan como puedan, sin siquiera leer la información que el diseñador ha puesto.
  • Los usuarios quieren tener el control. Sobre su navegador y esperan que todo el sitio sea consistente. Es por eso que no les gustan los pop-ups ni que el botón Atrás les deje de funcionar. Así que es una buena práctica nunca abrir vínculos en nuevas ventanas.

LOS PRINCIPIOS
  1. No hagas pensar a los usuarios

    De acuerdo a la primera ley de la usabilidad de Krug, la página web debe ser obvia y auto-explicativa. Tu trabajo al diseñar una página es que el usuario no tenga ninguna pregunta. Debes tener una navegación y una arquitectura intuitiva, una estructura clara, ayudas visuales moderadas y vínculos fácilmente identificables. El visitante debe entender qué hace la página, cómo funciona y cómo puede ir a otro lado. De eso se trata que no tenga ninguna pregunta.

    Una vez que tus visitantes entiendan de qué se trata tu sitio, les puedes explicar por qué es útil y cómo se pueden beneficiar de él.

  2. No desperdicies el tiempo de los usuarios

    Si vas a ofrecer algún servicio o herramienta, trata de tener unos requisitos mínimos. Entre menos necesiten los usuarios para probar un servicio, más fácil lo harán. Ellos quieren “jugar” con él, en lugar de registrarse porque tal vez nunca vuelvan. Déjalos explorar y descubrir cuáles son tus servicios sin pedirles ni el correo.

    Un solo registro es suficiente para evitar que tus visitantes naveguen en tu sitio y reducir tu tráfico.

  3. Haz que los usuarios enfoquen su atención

    Algunas partes de la interfaz de usuario atraen la atención más que otras. Obviamente las imágenes son más atractivas que el texto y la negrita atrae más que el texto plano. El ojo humano no es para nada lineal y los usuarios pueden identificar instantáneamente bordes, patrones y movimiento.

    Así que enfocar la atención del usuario a áreas específicas del sitio mediante el uso moderado de elementos visuales puede ayudar a que fácilmente vaya de un lugar a otro sin siquiera pensarlo. Este visitante estará más orientado y desarrollará más confianza en el sitio, y por ende en la compañía que visita. Entre menos tenga que pensar el usuario, mejor será su experiencia.

  4. Esfuérzate por mostrarte

    Los diseños Web modernos son normalmente criticados por guiar a sus usuarios con unos procesos 1-2-3 muy atrayentes y por tener botones grandes con efectos visuales Pero precisamente estas guías son extremadamente útiles, porque guían al usuario de una manera muy amigable y simple.

    Dejar ver al usuario claramente las funciones disponibles es un principio fundamental del diseño de interfaces de usuario. No importa cómo se logre, lo que importa es que el contenido sea entendible.

  5. Haz uso de una buena escritura

    Como la web es diferente de los medios impresos, es necesario ajustar el estilo de escritura a los gustos y hábitos de los usuarios.

    Evita nombres lindos, rebuscados, de mercadeo, específicos de la compañía, técnicos o no familiares. Si quieres que los usuarios creen una cuenta, usa “Regístrate” en lugar de “Comienza ahora”, que es aún mejor que “Explora nuestros servicios”.
    Una solución óptima para una escritura efectiva es:
    • Usa frases cortas y concisas.
    • Usa una diagramación que se ojee fácilmente (categoriza el contenido, usa múltiples niveles en los encabezados, usa elementos visuales y listas).
    • Usa un lenguaje objetivo y plano.

  6. Esfuérzate por la simplicidad

    El principio “Hazlo Simple” (KIS: Keep It Simple) debería ser el objetivo principal del diseño de un sitio. Los usuarios raramente visitan un sitio por su diseño. Lo que buscan es información o servicios.

    Desde el punto de vista del visitante el mejor diseño es uno en sólo texto, sin publicidades. Es por eso que una versión para imprimir de las páginas es esencial para una buena experiencia de usuario.

  7. No le tengas miedo al espacio en blanco

    Actualmente es difícil valorar la importancia de los espacios en blanco. No sólo ayudan a reducir la carga cognoscitiva, sino que también mejoran la percepción de la información. Cuando un visitante llega a una página lo primero que intenta hacer es examinar la página y dividirla en secciones y los espacios en blanco son esenciales en esta tarea.

    Las estructuras complejas son más difíciles de leer, examinar, analizar y de trabajar con ellas. Las estructuras jerárquicas reducen la complejidad (Ley de Simon): entre mejor logres que tus usuarios encuentren un sentido de jerarquía, tu contenido será más fácilmente percibido.

  8. Comunícate efectivamente con un lenguaje visual

    En sus artículos de comunicación visual efectiva, Aaron Marcus declara tres principios fundamentales [en] implicados en el llamado lenguaje visual:
    • Organiza: dale al usuario una estructura conceptual consistente y clara. Conceptos importantes dentro de la organización son: la consistencia, la diagramación, las relaciones y la navegación.
    • Ahorra: haz lo que más puedas con tus elementos visuales. Los cuatro puntos principales a tener en cuenta son: simplicidad (sólo incluye los elementos importantes), claridad (ningún elemento debería presentar ambigüedad), individualidad (debe ser distinguible lo que realmente importa) y énfasis (los elementos más importantes deben ser los que más fácilmente se perciban).
    • Comunica: La interfaz del usuario debe mantener un balance en legibilidad, tipografía, simbolismos, visualización y color, para poder comunicarse efectivamente. Usa máximo 3 tipos de letras en cómo máximo 3 tamaños y un máximo de 18 palabras o 50-80 caracteres por línea.

  9. Las convenciones son nuestras amigas

    Las convenciones son muy útiles para reducir la curva de aprendizaje y el tener que pensar cómo funcionan las cosas. Imagínate cómo sería si todos los sitios usaran un icono diferente para sus RSSs. ¡Toda una pesadilla para la usabilidad!

    Con ellas ganas la confianza y credibilidad de tus usuarios. Entiende qué es lo que esperan los usuarios de la navegación de un sitio, de la estructura del texto, del lugar de la búsqueda, etc.

    Por ejemplo traduce tu página a otro lenguaje como el japonés y pon a prueba el sitio con algunos usuarios. Si las convenciones están bien aplicadas, aunque la página esté en otro idioma, estos usuarios podrán ubicarse en ella.

  10. Prueba temprano, prueba a menudo

    Este principio llamado TETO (Test Early, Test Often) debería ser aplicado en todo proyecto, debido a que estas pruebas de usabilidad a menudo dan gran conocimiento sobre problemas y situaciones.

    Sólo podrás saber con certeza que un diseño es mejor que otro analizándolo desde un punto específico, es decir: probando con un usuario.

    Algunos puntos importantes para que tengas en cuenta:
    • De acuerdo a Steve Krug, probar con un solo usuario, es 100% mejor que probar con ninguno y probar con uno al principio del proyecto es mucho mejor que probar con 50 al final. De acuerdo a la primera ley de Boehm, los errores son más frecuentes en la etapa de requisitos y diseño y entre más se demoren en removerse serán más costosos.
    • Las pruebas son un proceso iterativo, lo que significa que cuando diseñas algo, lo pruebas, lo arreglas y lo vuelves a probar.
    • Las pruebas de usabilidad siempre producen resultados útiles. Ya sea porque encuentres problemas que tienes o para ver que no tienes grandes fallas en tu diseño.
    • De acuerdo a la ley de Weinberg, un desarrollador no es el apropiado para probar su propio código. Lo que aplica también para los diseñadores. Ya has trabajado mucho en un diseño, lo conoces, lo que hace que no tengas una perspectiva diferente sobre él. Ya sabes cómo se hizo y cómo funciona, así que busca otras personas para que lo prueben.

REFERENCIAS

martes, enero 22, 2008

Galería de Sitios de la W3C



Si trabajas con los estándares deberías estar acá: W3C Sites, una colección de sitios Web creados por diseñadores que trabajan con los Estándares de la W3C (más su respectivo directorio de sus diseñadores por países).

¡Si! Otro galería más de sitios hechos con los Estándares Web. Pero esta galería es la oficial de la W3C. Además, me gustó mucho que los diseñadores están categorizados por países, así que puedes conocer a tus compatriotas que trabajan con los estándares.

Por Colombia estamos 18 inscritos. Muy pocos comparados contra Estados Unidos con 831, Inglaterra que tiene 623, Alemania con 405, España con 180... Pero si vamos a ver somos muchos, comparados contra países que tienen sólo 1 o 2 diseñadores inscritos. Por latinoamérica destacan Brasil con 257 y Argentina 71.

Gracias a seraccesible.

martes, enero 15, 2008

¿Están Bien Asignados los Colores de Tu Web?



La programación web no es más que otra forma de vender un producto que has de hacer llegar a los ojos de los clientes y enamorarlos en la primera impresión....
Los colores es lo segundo que nuestro cerebro capta despues de la estructura, por ese motivo hemos de pensar muy a conciencia que colores usar para vender nuestro producto. Al igual que colocamos en la parte superior el título de nuestra página para que sea lo primero que vea nuestro usuario, hemos de pensar en el conjunto y crear un estructura homogenea que transmita unos sentimientos al usuario.
En el blog Estandares y Usabilidad de Aplicaciones nos quieren recordar la importancia de la asignación de los colores en nuestros diseños, y es por eso que publicaron estos muy buenos post:
¿Ya evaluaste si los colores de tu Web transmiten realmente lo que quieres?

sábado, enero 12, 2008

Los Mejores Blogs de Diseño Gráfico

David Airey: Top 50 Graphic Desgin Blogs

Aunque pienso que el diseño gráfico no forma parte esencial del desarrollo Web, sí que forma parte importante de él. Al fin y al cabo, sabemos que un sitio estéticamente agradable se percibe como más usable.

Es por eso que hoy les traigo el listado de los 50 Mejores Blogs de Diseño Gráfico según David Airey.

Me gustó el listado especialmente porque está ordenado de acuerdo al PageRank de los blogs y porque está liderado por el blog de Veerle (PageRank de 8), diseñadora muy interesada en los Estándares Web.

No puedo dejar de vincular estos otros blogs con PageRank de 7:
Para el listado completo visita el post original, donde encontrarás otros conocidos de esta casa como I Love Typography y Smashing Magazine.

Actualización: En el50 acaban de publicar, el mismo Top 50 pero en español. Allí encontramos otros conocidos de esta casa como:

jueves, enero 10, 2008

La Galería de Formularios de Wufoo

The Wufoo Form gallery

¿Qué le puede faltar a Wufoo, uno de los más conocidos y usados generadores de formularios Web? ¡Pues precisamente una galería de formularios! Así que bienvenido sea: The Wufoo Form Gallery

The Wufoo Form gallery Homepage

Así que si buscas inspiración para tus formularios, tanto a nivel gráfico, como a nivel de diagramación y de preguntas... ¡Ya sabes a dónde ir!

Allí puedes encontrar ejemplos de Registros, Encuestas, Ordenes, Contáctenos, entre muchas otras... Además puedes revisar plantillas en HTML o temas en CSS. Una gran variedad de tipos de formularios y de categorías. Todas ellas descargables gratuitamente o para utilizarla en tu cuenta de Wufoo. ¿Qué más puedes pedir?

Esta maravilla está disponible desde finales del año pasado y me di cuenta gracias a LukeW.

lunes, enero 07, 2008

100 Web Design Template Sources, Tools and Resources

Hoy les traigo la excelente recopilación que hizo Design Vitality: Caja de Herramientas de Diseño Web Open Source: 100 Plantillas, Herramientas y Recursos de Diseño Web.

Dentro de ella encontramos:
  • Los 4 mejores directorios de Plantillas.
  • Los 6 mejores programas de Diseño Web.
  • 39 Sitios de Plantillas (de Diseño Web) Completas.
  • 29 Sitios con Layouts en CSS (complementanto mi post de hace unos días: Diagramación con Hojas de Estilo)
  • 10 Generadores y Herramientas Automáticas de CSS.
  • 12 Plantillas y Temas para Blogs.
Todos estos recursos de uso totalmente gratuito.

Gracias a ARTEGami.