“El contenido precede al diseño. El diseño en ausencia de contenido no es diseño, es decoración”

De Jeffrey Zeldman en su Twitter.

Los chicos de idée han creado una interesante herramienta de búsqueda de fotos Creative Commons de Flickr. Lo hacen a partir de colores que nosotros les digamos, es decir si seleccionamos el azul y un tono de gris, nos va a buscar fotos con esos colores, así hasta 10 colores simultáneos. El resultado es impresionante. La herramienta se llama Multicolor Search Lab, y mejor probarlo que explicarlo.

Como muchos otros diseñadores web, yo me esfuerzo en codificar páginas web hermosas pero flexibles que se vean virtualmente idénticas en cada navegador web. Desafortunadamente, diseñar boletines de email te envía de vuelta diez años atrás. Etiquetas depreciadas, tablas, estilos inline, ¡oh, cielos! En este artículo, voy a listar seis métodos que mejorarán inmediatamente tus layouts de email.

Boletines de Email.

Como nuevo contratado en el servicio de marketing por email de AWeber, mi asignación fue crear un par de docenas de nuevas plantillas para los boletines de email en HTML de nuestros clientes. Para el diseñador web que gusta del código limpio, un email en HTML es un recuerdo de un pasado afligido. Después de semanas de trabajo e incontables dolores de cabeza, entregué el material. También aprendí mucho acerca de diseñar para email.

Para ayudarte a evitar muchos de los dolores de cabeza que tuve durante la fase de prueba, aquí hay algunas cosas que puedes hacer para crear emails en HTML que se vean geniales.

¡Crea Múltiples Cuentas de Email Para Probar!

Si sólo vas a tomar un consejo de este artículo, por favor que sea éste. Como diseñadores, pasamos mucho tiempo creando la experiencia de usuario perfecta en la web y probando esa experiencia en múltiples plataformas. Sin embargo, cuando se trata de email, demasiados de nosotros fallamos en entregar la misma atención al detalle.

Parecido a hacer pruebas para la web, crear un layout de email que se vea igual en cada cliente de email puede ser una pesadilla absoluta.
Para asegurarse de que tus suscriptores recibirán tu mensaje en la forma en que se propuso – ¡prueba en todo lo que puedas!

Leer más…

En un tiempo de crisis económica, los desarrolladores web y freelancers en todas partes han comenzado a comerse las uñas. Sin embargo, no importa qué tanto empeore la economía, siempre habrá trabajo en ciertos campos del desarrollo web que están en pleno auge.

Como moderador del foro de trabajo de Freelance Switch, hay ciertos tipos de trabajos que están constantemente en demanda. Aquí están las 10 habilidades que son o serán las más demandadas para los desarrolladores. Si eres competente en estas habilidades, estarás en una gran posición para encontrar trabajo y sobrellevar cualquier caída de la economía.

Autor: Glenn Stansberry
Glen Stansberry es un desarrollador web y blogger. Puedes leer más trucos acerca de desarrollo web en su blog Web Jackalope o seguirlo en Twitter.

1. Conocimientos de un Framework

Parece ser que los frameworks serán la próxima cosa de moda. Con el meteórico ascenso a la fama de Rails, Django, y otros frameworks MVC, los desarrolladores han aprendido que pueden construir sitios web mucho más rápido con la ayuda de estas herramientas. Los frameworks te ayudan a acortar la mayoría de las tareas repetitivas que la programación personalizada normal requeriría. Tener el conocimiento de los mejores frameworks (Rails, Django, CakePHP, Symfony, y otros varios), le puede dar una dimensión completamente nueva a tu conjunto de habilidades.

2. Desarrollo de widgets

Los widgets han cambiado la manera en que se hace el desarrollo web en los últimos años. Con la llegada de los widgets, los datos se han hecho más portátiles, interactivos y, más importantemente, virales. En casi todos los planes de las páginas de inicio web está el incluir uno o dos widgets en algún punto, principalmente porque ayuda a aumentar su audiencia y lleva más miradas hacia su contenido.

El desarrollo de widgets requiere conocimientos de Javascript y/o flash, sin mencionar el conocimiento del lenguaje regular con el cual está construido el sitio principal.

3. Temas de CMS personalizados

Los diseñadores y desarrolladores siempre pueden encontrar trabajo creando o personalizando un tema de CMS. Así como la popularidad de CMS como Wordpress o Drupal ha crecido durante los últimos años, también lo ha hecho la demanda para la creación de temas para estos softwares.

Mucha gente usa CMS para potenciar sus sitios web personales o de negocios, así que este trabajo siempre va a existir. Un sitio web decente necesita un diseño único y utilizable que refleje bien la marca detrás de él.

Leer más…

Mi primer trabajo de diseño fue en una pequeña agencia de diseño de impresión en Manchester que producía el trabajo de varios medios de comunicación: embalaje, publicaciones, marketing de materiales de apoyo y… Correo directo. Pronto descubrí que los principios de diseño gráfico que había aprendido en la universidad eran de poco uso cuando diseñé para el correo directo, donde lo grande, las letras fuertes, y lo apiñado es el orden del día. En palabras de un cliente – palabras que nunca olvidaré – “un espacio en blanco es un espacio vacío”.

Creo que todos hemos tenido que pasar, a manos de jefes o exigencias del cliente, por este momento.

Los clientes del correo directo necesitan sus paquetes para permanecer en el mercado, porque trabajan para ello. Pero para todo lo demás, mi cliente no podría haber estado más lejos de la verdad.

Conocer los espacios en blanco

“Espacio en blanco” o “espacio negativo” es el espacio entre dos elementos en una composición. Más específico, el espacio entre los elementos mayores en una composición es el “macro especio en blanco”. El Micro espacio en blanco es – si, lo has adivinado – el espacio entre elementos más pequeños: entre listas de objetos, entre un título y una imagen, o entre palabras y letras. The itty-bitty stuff.

Figura 1. Macro espacio en blanco

Figura 2. Micro espacio en blanco.

Así que, ¿qué hacer con el espacio en blanco?

Micro espacio en blanco y legibilidad

Hace un par de meses, tuve bastante suerte de ver una conferencia de Erik Spiekermann. Parte de su charla se basaba en su rediseño del periódico The Economist, que en parte fue motivado por el cliente ya que su diseño era demasiado pesado y el contenido demasiado difícil para leer.

En el diseño del periódico, la información es densa. A veces, como en el diseño web, es difícil añadir espacios en blanco debido al contenido requerido. Los periódicos a menudo tratan con esto poniendo su contenido en un tipo de letra de imprenta sencilla con bastante espacio en blanco entre los caracteres. Esto era parte de la solución de Spiekermann para rediseñar The Economist.

Leer más…

Estás en la mesa con colegas diseñadores, un director de arte y un director creativo. La pantalla muestra diseños hechos por ti para ser criticados colectivamente. Esta es la primera vez que todos vosotros consideraréis los conceptos iniciales. El diseño sigue, uno a uno, y el trabajo comienza a fluir.

Esta es una frase que oirás a menudo: “El diseño está en los detalles“. Con el diseño, prestando atención a los pequeños detalles – y en algunos casos, obsesivamente enfocándote en “lo que no está bien” – puedes conseguir un diseño de “casi” a “eso es” y seguir más allá.
Asisto a las reuniones en las cuales los diseñadores presentan sus diseños – normalmente en la primera ronda – por primera vez. La mitad del tiempo el diseñador que presenta los diseños muestra un producto áspero en la pantalla y piensan que el diseño está hecho al 90-100%. Pero el diseñador experto en los detalles sabe que el trabajo expuesto sólo equivale al 50-70%. Puedes ver el trabajo preliminar, la fusión, y sentir el diseño delante de ti, pero sabes que no está terminado.

El objetivo de unificar los detalles es conseguir pensar críticamente y presentar el mejor diseño posible que puedas hacer – esa es la ronda 1. En esencia, quieres que tu diseño esté listo para una presentación real al cliente. Así que, ¿cómo tener un diseño al 100%? . Algo común entre los diseñadores es sentirse que se ha precipitado: tienes una fecha límite, estás bajo presión. Pero si te preocupas por tu arte y tus ideas, te tomarás tiempo extra, quizás trabajes hasta tarde por las noches, como todos hacemos, y añadas ese toque que sabes que hará a tu trabajo brillar. Sabes que esa forma de pensar se consigue cuando piensas, “Oh, sabía que tenía que haber intentado eso” Hazlo la primera vez que se te pase por la cabeza. No permitas que alguien que revise tu diseño piense en una idea en la que ya habías pensando.

Los consejos y las técnicas fortifican cualquier herramienta del diseñador, pero debo aventurar que el pensamiento crítico sobre un diseño es tan importante como las herramientas y habilidades necesarias para producirlo.
Aquí tienes una guía de comprobación e inspiración para conseguir que un sitio esté hecho, hecho, hecho. No dejes nada sin comprobar y no dudes sobre el diseño que presentas – déjale que brille.

El Experimento

No es insólito para mí crear hasta cuatro bocetos simultáneos para solamente la primera ronda de presentaciones de diseño. Yo suelo usar esos para “dar una primera impresión” de los diseños. Una navegación o el tratamiento del logo que no funciona en un boceto podría funcionar en otro boceto. Esto te permite tener lo que yo llamo “el Hermoso Error” – colocando elementos en otros ambientes que crean posibilidades. En lugar de que un diseñador se sienta bloqueado, sin inspiración, lanzas ideas que plasmas en bocetos y ves adónde llegan. Conseguir empezar es la mitad de la batalla.

Leer más…

La verdad, nadie es perfecto y nadie nunca lo será; pero la vida tiene que ver con la mejora continua de uno mismo, y con ser tan productivo como sea posible con el precioso tiempo que se nos ha otorgado. El trabajo frecuentemente consume nuestras vidas, pero si podemos llegar a ser más productivos en el trabajo y adoptar buenos hábitos, nuestra vida personal se verá beneficiada también.

Esta lista fue creada con el fin de inspirarte a elaborar tu trabajo cotidiano, llegar a estar más interesado en tu carrera, ser un diseñador más productivo y una persona más sana. No tengas reparo en agregar tus propias opiniones para ser un diseñador más productivo a la siguiente lista:

1.-Sácale provecho a tus traslados

Si realizas largos trayectos de la casa al trabajo, trata de sacarles el mayor provecho: lee un libro, consigue una laptop para empezar a utilizar tu tiempo o planear tu día.

2.-Elabora una lista de objetivos

Elaborar una lista de objetivos te asegurara el recordar cada cosa que necesitas hacer. Organiza tu lista de objetivos por importancia y tacha lo que cumpliendo, pero acepta el hecho de que tu lista probablemente nunca termine.

3.-Familiarízate con la suite de atajos para teclado de Adobe.

Aprender atajos esenciales para programas como Photoshop o Illustrator pueden ahorrarte muchas hojas de trabajo, a largo plazo.

Doy fe de ello.

4.-Mantén actualizado y libre de virus o spyware el software de tu ordenador

Desde que los diseñadores utilizan computadoras cotidianamente, es muy importante asegurarse de que estas trabajen, apropiadamente, en su máximo rendimiento, revisa el sistema por lo menos una vez a la semana.

5.-Busca por fuentes de inspiración para tus diseños

La inspiración es una parte capital de cualquier carrera artística y hay un cúmulo de sitios para encontrar inspiración tales como muestras de diseño, museos, portafolios on line y galerías de diseño gráfico.

6.-Permanece integrado a la comunidad de diseñadores

Unirse a foros de diseño, comentar en blogs, escribir artículos y participar en seminarios, son solo algunas de las maneras de poder estar más relacionado con la comunidad de diseñadores.

7.-Asiste a eventos de diseño, espectáculos o seminarios de aprendizaje

Cada año se efectúan muchas conferencias, eventos y seminarios sobre diseño. Si trabajas en una compañía, ellos pueden pagar esos eventos para que asistas, a fin de que te mantengas actualizadas tus habilidades e infraestructura.

Leer más…

Antes de empezar con el diseño de iconos hay algunas directrices y principios que vale la pena estudiar. Si quieres crear buenos iconos deberías tener en cuenta algunas cosas como: público, tamaño, simplicidad, iluminación, perspectiva y estilo. Este artículo te da un buen punto de partida para la creación de iconos que trabajan bien juntos y encajan perfectamente en tus diseños.

1. Enfoque iconos de diseño de manera integral

Los iconos encajan dentro del sistema gráfico. Tanto como si el icono esta diseñado para una aplicación de escritorio como para una página web, un icono es uno de los muchos elementos gráficos que necesitan trabajar juntos en armonía. Aplica también esta lógica a los iconos. Los iconos pueden ser apreciados por su estética individualmente pero no funcionan por si solos. Haz tu icono acorde con el sistema operativo y asegúrate de que los iconos que tienes a tu alrededor combinan bien.

Si tienes que dibujar varios iconos, necesitas tener una visión general del aspecto de todo el set antes de empezar a dibujar uno por uno. Si tienes esto en cuenta, ahorrarás mucho tiempo de inevitable reajuste y rediseño posterior.

(libre traducción de psdtuts.com)

Mira que he visto ya CAPTCHAs enrevesados, difíciles de leer, pero este de rapidshare ya no sé por donde cogerlo.

Solo falta que me pongan unos jeroglíficos para estar 2 horas pensando la adivinanza. Cómo no, he fallado en el primer intento y he tenido que abrir la página de nuevo.

Tan difícil es poner una pregunta del tipo: “10 + 5 =” , y poner un 15 y listo.

EDITO: Después de 5 intentos, me he bajado el archivo y encima estaba dañado. Bien.

Estaba leyendo un artículo sobre usabilidad. Trata de algunos aspectos cómo si no quieres que un usuario haga algo, no le dejes hacerlo.

Por ejemplo, si tienes una serie de botones que realizan una acción sobre un objeto, pero el objeto en cuestión aun no se ha cargado correctamente, no habilites el funcionamiento de esos botones hasta que el objeto se haya cargado por completo y se pueda interactuar con él.

Me ha venido a la mente una imágen que me encontré hace un año en Ibiza al girar una cruce en una carretera. Ilustremos:

Vamos a ver, si lo que se pretende es que no me empotre contra los postes nada mas girar, no pongas un cartelito con unas flechitas. O no me dejes pasar por esa calle ya que no está “cargada” del todo, o ponme unas vallas protectoras para evitar que pase por ahi.

¿Que os parece?