“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.

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!

Esto incluye pero no se limita a:

- Yahoo
- Gmail
- AOL
- Windows Live Hotmail
- Outlook 2007
- Outlook 2003
- Lotus Notes
- Thunderbird
- Entourage
- Mac Mail

¡Pero espera – hay más!

Algunos de estos clientes de email tienen versiones múltiples, cada una de las cuales hará el render del CSS y HTML de forma diferente.

Esto es parte de un HTML siendo rendereado por la versión antigua de Yahoo.

Aquí está exactamente el mismo email siendo rendereado por la nueva versión de Yahoo.

Diferencias sutiles, debo admitir. Pero suficientes de esas diferencias sutiles resultan en un diseño descuidado. Y si eso no es suficiente… el navegador de internet del usuario también puede jugar un papel en cómo se renderea tu diseño.

Ahora, antes de que arrojes tu computador por la ventana con frustración… los siguientes pasos te pueden ayudar a descartar la mayoría de los problemas en las pruebas.

Diseña Tus Emails Para Que Degraden Con Gracia

Me sorprende ver a algunos de los anunciantes más grandes rompiendo reglas de usabilidad básicas acerca de los email en HTML.

Aquí hay algunos lineamientos para tener en cuenta:

• Nunca confíes en las imágenes para comunicar información importante… especialmente una de gran tamaño. Una gran mayoría de los clientes de email tienen las imágenes desactivadas por defecto. A menos que el usuario tenga cierta iniciativa… le habrás enviado un lindo mensaje en blanco.
• Nunca confíes en las imágenes de fondo para hacer legible el texto. Asegúrate de que tu texto tiene suficiente contraste con o sin las imágenes activadas. Outlook 2007, por ejemplo, no mostrará las imágenes de fondo en las celdas de las tablas incluso si las imágenes están activadas.
• Entrega un enlace para las personas que tienen problemas viendo tu mensaje. Ok, esto no es absolutamente necesario – pero es una buena idea darle a tus suscriptores la opción de ver tu mensaje en su navegador web (especialmente si es un diseño particularmente pesado en HTML).
• Usa etiquetas ALT en las imágenes importantes. ¡No puedo enfatizar esto lo suficiente! Con las imágenes deshabilitadas por defecto, las etiquetas ALT descriptivas son tu última mejor oportunidad de convencer al usuario para que active las imágenes.
• Cuando uses etiquetas ALT, reduce el desorden. Completa las etiquetas ALT que importan y deja las otras en blanco (Nota: ¡No he dicho que las excluyas!)

Este es el encabezado de un email que recibí de Discovery Health:

Tomé esta screenshot desde mi cuenta de Gmail – antes de activar las imágenes. ¿Ves cómo el texto ALT “bullet” y “spacer” se interponen?

Agregar etiquetas ALT a elementos que sólo sirven para propósitos de diseño desordena el diseño y distrae de tu mensaje.

¡Usa Tablas Para Estructurar Tu Layout

¿Ah? ¿Pasé todo este tiempo aprendiendo CSS y ahora tengo que volver a las tablas? Cuando se trata de diseño para email, las tablas son lo mejor como si fuera el año 2003 – son lo más cercano que tenemos a los estándares.

Unas pocas cosas que tener en cuenta:

• Asegúrate de configurar todos los atributos de tabla disponibles donde sea posible. Eso incluye el cellpadding, cellspacing, borde, valign, ancho y alto.
• Las tablas anidadas son tus amigas. Asegúrate de usar la sangría apropiada para un código limpio y fácil de leer.
• Usa el atributo de fondo en una celda de tabla para configurar imágenes de fondo. Esta es la manera más fácil de sobrepasar los fondos que no se vean en Gmail.

Nota: Tus imágenes de fondo se comportarán como si estuvieran en mosaico… así que planifícate de acuerdo a eso.

• Toma en cuenta que las imágenes de fondo aplicadas a tablas o divs no están soportadas por Outlook 2007. De hecho, la única manera de usar una imagen de fondo en Outlook 2007 es aplicándola el cuerpo del email, lo cual por supuesto no está soportado por otros clientes de email como Gmail, Yahoo, o Windows Live Hotmail. Fantástico, ¿verdad?

Yo tampoco lo pensé así.

¡Usa Estilos Inline Cuando Codifiques Tu CSS

Algunos clientes email populares ignoran el código dentro de tus etiquetas de encabezado. Gmail y Hotmail son culpables particulares que se vienen a la mente.

Con tu layout configurado en formato tabla, es hora de aplicar estilos a tu texto e imágenes. Aquí hay algunas pistas y trucos para asegurar que tu mensaje se vea casi idéntico en cada navegador:

• Usa etiquetas de saltos de línea como reemplazo al padding vertical. Para alterar la cantidad de espacio que consumen, intenta rodearlas con tags de span y configura un tamaño de fuente mayor o menor.
• Usa estilos inline repetitivamente y a menudo. Aplicar una etiqueta de fuente a una tabla madre no significa necesariamente que será traspasada a todas sus hijas. Asegúrate de configurar estilos inline en todos tus elementos HTML.
• Aplica estilos inline detallados a los enlaces. Especialmente para los usuarios de Gmail – debes configurar estilos específicos para cada enlace. De otra forma, heredarán la fuente por defecto, tamaño y color configurada en cada navegador del usuario.
• Rodea tus imágenes con tags de span y configura los atributos de las fuentes para estilizar tu texto ALT de acuerdo a ellas. Esto te permite estilizar tu texto ALT, haciéndolo más legible cuando las imágenes están desactivadas.

¡Usa el Formateo de la Bandeja de Entrada de Gmail Para Tu Provecho

¿Sabías que la línea de asunto de cada email enviado a una cuenta de Gmail está seguido por los primeros fragmentos de código de texto dentro de ese email en particular?

¡Por qué no usar eso en tu provecho!

Arriba hay una imagen de mi bandeja de entrada de Gmail.

Ambos boletines tienen el mismo contenido de encabezado.

Sólo una diferencia – El Boletín 1 saca provecho del formateo de la bandeja de entrada de Gmail.

Aquí está cómo lo hice:

Inserta una imagen de 1px por 1px como el primer elemento en tu email. Rodea la imagen con etiquetas de span configurando el color de la fuente con el mismo color del fondo. Cualquier texto que pongas en las etiquetas de ALT para tu imagen de 1px por 1px ahora reemplazará ese fragmento de código de google en la bandeja de entrada del usuario.

¡Es tan simple como eso! Esta sutil diferencia destacará tu mensaje del resto de los emails en la bandeja de entrada del usuario.

¡Entonces, ¿Ahora Qué?

He hecho mi mejor esfuerzo para compartir algunas cosas que hago cuando creo emails en HTML. ¡Es tu turno! ¿Cómo lo haces para diseñar, codificar y probar tus campañas de email?

Cualquier recomendación, pista o truco que quieras agregar será muy apreciada por la comunidad de tus compañeros diseñadores.

(Fuente: artículo de nettuts.com escrito por Bob Ricca y traducido por Sara Salazar para nerv. )

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.

4. Personalización de CMS y desarrollo de plugin

Los CMS son geniales porque le dan a los dueños de sitios con pocos conocimientos técnicos, la habilidad de cambiar aspectos de su sitio sobre la marcha con la ayuda de módulos. Mientras que la mayoría de las plataformas CMS tienen una larga lista de módulos que ofrecer, muchos sitios de negocios y personales necesitan más, y los módulos o plugins personalizados son la solución perfecta.

Los desarrolladores pueden tener negocios prósperos con sólo el desarrollo de CMS y la personalización. Aquí hay algunas (y de ninguna manera están todas) de las mejores plataformas CMS que podrían llegar a requerir el desarrollo de plugin y otras personalizaciones:

• ExpressionEngine
• Wordpress
• Drupal
• MovableType
• Joomla

5. Servicios de PSD a XHTML

Otra de las habilidades más populares que se necesitan es convertir archivos de Photoshop (PSD) a archivos XHTML para usar en plantillas. Debido a que los diseñadores no siempre saben cómo convertir un layout de Photoshop en archivos de plantilla, un ninja de CSS y XHTML siempre puede encontrar trabajo. Debido a la variedad de navegadores de uso común ahora y las diferencias engorrosas en cómo renderean los sitios, querrás ser un desarrollador web que pueda construir sitios que se vean iguales en cualquier navegador. Esta clase de servicio “de diseño a código” es el más buscado de todos.

6. Creación de plugins en Javascript

Muy parecido al ascenso de los CMS y frameworks MVC, los frameworks en Javascript son igualmente populares. Estos frameworks en Javascript son construidos con la habilidad de agregar funcionalidad personalizada en la forma de módulos. Si eres un desarrollador que sabe cómo construir módulos Javascript personalizados para frameworks como jQuery o Dojo, tendrás bastante trabajo disponible. Aquí hay algunos de los frameworks Javascript más populares que podrías necesitar manejar.

• JQuery
• Scriptaculous
• Dojo
• MooTools

7. Aplicaciones para Facebook/MySpace

Facebook y MySpace han abierto sus plataformas para entregarle acceso API a los desarrolladores, y la demanda por aplicaciones para redes sociales ha sido enorme desde entonces. Una industria completamente nueva para el desarrollo web floreció de la noche a la mañana, y cientos de aplicaciones ahora son agregadas día a día. Se ha descubierto que la plataforma de aplicación de los medios sociales es muy viral y potencialmente muy lucrativa.

Algunas de estas aplicaciones son construidas para ganar dinero o hacer publicidad a marcas, pero finalmente las aplicaciones pueden ser muy exitosas y virales si están hechas apropiadamente. Un desarrollador sólido puede obtener un ingreso decente creando aplicaciones para Facebook y MySpace.

Las redes sociales como Facebook requieren que aprendas su propio lenguaje de sintaxis, como el FBML (Lenguaje Markup de Facebook), así que esta habilidad tiene una pequeña curva de aprendizaje.

8. Aplicaciones para iPhone

Siendo otro grupo de habilidades específicas para una plataforma, construir aplicaciones para iPhone puede ser muy rentable, y muy parecido a lo que ocurre con las aplicaciones para los medios sociales, es una gran habilidad para que cualquier desarrollador aprenda. Hacer una aplicación para iPhone que sea aceptada en la plataforma de Apple tiene una oportunidad excelente de generar mucho dinero o recibir montones de descargas.

Esto es algo genial para los desarrolladores, debido a que las compañías están comenzando a ver el valor de desarrollar tecnologías para iPhone y otros móviles, y consecuentemente estarán esperando más y más aplicaciones desarrolladas en el futuro.

9. Integración con comercio electrónico

Los sitios web de negocios siempre van a necesitar integración con comercio electrónico. Esencialmente, si puedes tomar un lenguaje o framework (PHP o Rails) y fusionarlo con un portal de pagos (como Paypal o Authorize.net), te irá bien. Estoy prediciendo que veremos más servicios pagados que servicios gratuitos y soportados por anuncios siendo desarrollados en el futuro cercano, a medida que menos dinero está siendo entregado a las páginas de inicio.

A medida que la economía se vuelve agria y la industria de anuncios comienza a apretarse un poco, los sitios web que utilizan un modelo de ingresos en base a suscripciones comenzarán a hacerse más comunes. Tener el conocimiento de lograr la integración con los servicios de banca en línea como Paypal y Google Checkout será una gran habilidad para tener.

10. Conocimiento de Flash y ActionScript

La animación flash puede hacer mucho por un sitio web. Flash puede ser usado para crear videos, navegación interesante, secuencias animadas entretenidas, widgets, y muchas otras cosas útiles en Internet. La tecnología flash puede agregar una dimensión muy profesional a cualquier sitio web, y los sitios webs grandes y las corporaciones siempre pagan para que sus sitios se vean profesionales, y a menudo encargan interfaces animadas en Flash para mostrar sus productos. Con los buscadores trabajando en maneras que permiten que Flash se comunique mejor con ellos, esta es una habilidad que de seguro florecerá a medida que la tecnología de los navegadores avance.

Conclusiones

Aprender frameworks es una de las mejores maneras de aumentar tu conjunto de habilidades y tu potencial trabajo como freelancer. Ya sea un framework en Javascript, CMS o framework en MVC, tomarse el tiempo de aprender una nueva habilidad puede ser una enorme ventaja para encontrar trabajo. Además, los dueños de los sitios web pagan mucho dinero por un desarrollo que les permita ganar dinero, porque no lo ven como un gasto por el cual lamentarse, sino como una inversión en ganancias futuras. Los servicios como la integración con el comercio electrónico, crear aplicaciones para iPhone y conocimiento de flash también serán habilidades muy necesitadas, y la gente siempre pagará por esas habilidades.

(Fuente: artículo de nettuts.com escrito por Glen Stansberry y traducido por Sara Salazar para nerv. )

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.

Mientras se conservaba la rareza del tipo de imprenta original de The Economist, Spiekermann lo rediseñó ligeramente, añadiendo más espacios en blanco a los caracteres individuales. Entonces puso una tipografía ligeramente más pequeña y con más resalte. Todos estos cambios añadieron un micro espacio en blanco al diseño. El resultado total era sutil: el contenido era más legible y el sentimiento total del periódico era ligero, aún cuando la cantidad de contenido seguía siendo la misma.

Aunque Spiekermann también añadiera un macro espacio en blanco y color al The Economist su acertado rediseño de la tipografía demuestra que el espacio entre los elementos más pequeños puede tener un impacto grande sobre la eficacia de un diseño – y esto se aplica también al diseño web.

Posicionamiento de la marca

Los diseñadores usan los espacios en blanco para crear un sentimiento de sofisticación y elegancia para las marcas. Junto con un empleo elegante de tipografía y fotografía, el generoso espacio en blanco es visto por todas partes como un mercado de lujo. Los cosméticos, por ejemplo, usan extensos espacios en blanco en su material de marketing para decir al lector que son sofisticados, de la alta calidad, y generalmente caro.

Mi viejo cliente de correo directo estaba en lo cierto en su evaluación del espacio en blanco para su producto en particular, porque los paquetes de correo directo tienen que aparecer por debajo del mercado para trabajar – y la adición del espacio en blanco a su diseño le habría prestado a su paquete una calidad indeseablemente alta. Tome el ejemplo siguiente.

Figura 3. Ejemplos de correo directo vs. Diseño de lujo.

El contenido es el mismo en ambos diseños, al igual que los otros elementos, así como la fotografía. Aunque los dos diseños están terminados son opuestos en cuanto a la marca. Menos espacio en blanco = barato; más espacio en blanco = lujo.

Mucho más entra en juego la colocación de la marca que el espacio en blanco, pero al igual que un pedido llega a tu escritorio para una marca de lujo, es muy probable que el cliente – y su objetivo, la audiencia – espere que el espacio en blanco y todo lo demás alinee el producto con el de sus competidores.

Espacio en blanco activo y pasivo

El espacio en blanco a menudo es usado para crear un equilibrio, un diseño armonioso. Uno en el que “se sienta” bien. Esto también puede llevar al lector a un viaje por el diseño de la misma forma que deja una “habitación” en una fotografía de retrato para posicionar el objeto en el centro del marco y examinar el espacio restante. Cuando es espacio en blanco es usado para conducir al lector de un elemento a otro se le llama “espacio en blanco activo”.

Vamos a echar un vistazo al siguiente ejemplo antes de que sea aplicado el espacio en blanco activo:

Figura 4. Texto antes de añadir el espacio en blanco.

Todo está bastante apretado. Tenemos que añadir espacios en blanco para crear la armonía y la comodidad visual en el diseño. Primero, añado márgenes, cambio la tipografía y el tamaño, y también aumento el interespacio (o la altura de línea, como se conoce en CSS). Esto es “espacio en blanco pasivo“.

Figura 5. Texto con espacio en blanco pasivo.

Unos podrían argumentar que el espacio en blanco pasivo es el espacio no considerado presente en una composición. Yo discrepo: si no consideras todo tu espacio en blanco, eso es un mal diseño. El espacio en blanco pasivo crea un espacio que respira y da equilibrio. Eso es importante.

Aunque aún no lo hemos hecho. Dentro de este contenido hay algo que quiero que el lector le preste atención: la segunda cita. Podría destacar este elemento con un color diferente o hacerle una tipografía mayor, pero en este caso, simplemente he añadido un macro espacio en blanco alrededor del elemento para conducir al ojo del usuario, entonces reduzco el micro espacio en blanco dentro de la tipografía para hacerla en negritas y fuerte.

Figure 6. Después de que el espacio en blanco activo haya sido añadido.

Esto es el espacio en blanco activo – espacio en blanco añadido a una composición es mejor que enfatizar o estructurar información.

Práctica, práctica, práctica

El único camino para conjugar esto con un concepto tan subjetivo como el espacio en blanco es el de la práctica. De la misma forma que los expertos en artes marciales tienen que pasar horas y horas perfilando técnicas simples, los diseñadores gráficos han de hacer lo mismo. Los estudiantes de diseño gráfico han realizado ejercicios compositivos durante décadas y, por suerte para nosotros, algunas leyendas de diseño de años pasados han documentado el proceso. Emil Ruder es uno de mis favoritos.

Ruder fue un tipógrafo suizo que murió en 1970. Después de 21 años de enseñar la tipografía, sacó un libro llamado Typography: A Design Manual (Tipografía: Manual de diseño), en cual declara:

El libro está deliberadamente restringido a la tipografía pura, al funcionamiento con los tipos prefabricados que son subordinados a un sistema exacto de medidas. Su objetivo es de hacer evidente las leyes de tipografía y – a pesar de ciertos rasgos comunes – el contraste entre ellos y el diseño gráfico que tanto en la selección como en su uso, es más libre y más complejo.

Las enseñanzas de Ruder son blancas y negras, focalizándose sobre la tipografía y la sutileza de diseño con los formularios de cartas. Ruder te lleva por lo correcto y lo incorrecto, un gran lugar para a aprender los principios fundamentales de composición. El libro está hasta los topes de grandes ejercicios que cubren el espacio en blanco y otros dispositivos compositivos. Es caro, pero bien vale ese precio.

Una vez que sepas diseñar y manipular el exterior espacial, dentro, y alrededor de su contenido, serás capaz de dar a tus lectores un comienzo, productos de posición más precisos, y quizás incluso comenzar a ver tu propio contenido con una nueva luz.

(Fuente: artículo de alistapart.com escrito por Mark Boulton y traducido por Encarni para nerv. )

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.

Siguiendo con lo mismo, no tengas miedo de empezar. Si algo no funciona, ciérralo y tíralo a la basura. Si crees que la navegación es demasiado bonita, recuerda cómo la hiciste y comienza desde ese punto en el siguiente diseño. La meta es refinar, una y otra vez.

Opciones

Hay muchas elecciones que se pueden hacer cuando estás diseñando – tanto el tipo, los colores, el tono del sitio. Algunas veces, me gusta lanzar muchas cosas en un diseño para ver lo que encaja y algunas veces empiezo con lo mínimo. Esfuérzate en hacer elecciones simples y sencillas. Si hay una forma más fácil de diseñar algo, hazlo. La elección complicada será complicada para el cliente y su audiencia potencial a menos que puedas construir una compleja interacción que parezca simple.

Sé constante

Una vez que hagas las elecciones, llévalas a cabo. Si eliges rellenar los artículos con columnas de 10 pixeles pero usas 15 píxeles en las áreas de texto largo, asegúrate que los bocetos reflejan esas decisiones. Guarda apuntes mientras diseñas – de este modo formarás una buena base para una guía de estilo. La consistencia demuestra la sofisticación y muestra que entendiste totalmente y tomaste decisiones razonables. La consistencia debería ser transparente.

Finalización

Termina el diseño. No pierdas ni un pié de página ni ningún detalle. No digas, “eso se rellenará más tarde – No tuve tiempo”. Saca el tiempo para ello. No des ninguna razón a los otros para torpedear el diseño o permitir que alguien se fije en los pequeños detalles – desechando el resto del trabajo. Son esos pequeños detalles los que merecen tu atención. Los directores creativos, los directores de arte y especialmente los clientes perseverarán en detalles como estos así que asegúrate de que los detalles estén ahí.

Avanza, retrocede, vuelve atrás: equilibrio

Durante un diseño, lo mejor es dejar el mismo de vez en cuando – incluso sólo para almorzar o para descansar 15 minutos. Mira algo más. Vuelve y mira de nuevo tu diseño. Piensa en tus primeras impresiones. Tu propia reacción probablemente sea similar a la de aquellos que lo ven por primera vez. Toma nota y revisa o cambia tu diseño basándote en esas impresiones. Independientemente de lo “chulo” o “perfecto” que pudiera ser un elemento, si no sirve para tu diseño de una forma útil, deshazte de ello e intenta algo nuevo. Distánciate siempre y reconsidera tu diseño.

Cierto como la vida misma

Sé tu propio crítico

Si conoces bien al equipo con el que trabajas normalmente, el cliente, o las necesidades del cliente, mira tu diseño como si estuviera cerca de terminarse y piensa en aquellas partes que, potencialmente, pueden plantear preguntas o preocupaciones. Ten una respuesta sólida para las decisiones que has tomado.

Complejidad es simplicidad: menos es más

Cuando hablamos de “menos es más”, nos referimos a cosas diferentes. Por ejemplo, algunas veces el diseño necesita reducirse. Tiene demasiados elementos. O un diseño se ahoga con tantos colores. Cuando hacemos un trabajo en los detalles, “menos es más” es dejar una sola cosa que es necesaria y hacerla armoniosa. Permitir que la complejidad esté en la simplicidad – un diseño no es útil cuando se percibe como complejo. Un diseño debería ser útil, simple y franco – permitir que la complejidad brille a través de la simplicidad.

La obsesión es sana

Si no me siento bien con la navegación o con un widget multimedia que muestra fotografías, me siento y construyo un pequeño boceto hasta que encuentro algo que encaja. El diseño es un puzzle que puedes crear tú mismo – tienes todas las piezas, pero eres tú quien decide cómo juntarlas. La perfección no es algo para lo que haya que esforzarse, pero estar cerca es perfecto – deja especio para la exploración, el diálogo y el estudio.

Me encuentro pensando sobre diseños. Estoy trabajando en diferentes periodos del día – en la ducha, haciendo la cena, o paseando en la tienda de la esquina. Pequeños, momentos tranquilos cuando tengo brechas y resuelvo problemas. Esos son las veces en las que aparecen los detalles adecuados. Esto no es facturable a menudo, pero es un buen ejercicio para pensar sobre el diseño antes de ponerte a ello. Yo no diseño mucho usando lápiz y papel; me gusta permitir que el diseño se filtre y crezca en mi mente antes de ponerme a ello en una pantalla. Imagino la forma, el sentido, y los detalles. Me encantan los detalles.

Trabajar los detalles no es fácil. Toma su tiempo, inspiración e imaginación. Es, sin embargo, una práctica muy buena – te permite cultivar tu ojo crítico para ayudarte a tí mismo y a tus compañeros diseñadores. Confía en los detalles y tus diseños destacarán.

(Fuente: Alistapart.com, traducido por Encarni para nerv)

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.

8.-Lee libros sobre teoría e historia del diseño

El número de libros sobre diseño que están disponibles es abrumador; así que escoge un tema que interese como teoría del diseño y consigue algunos libros para que leas en tu tiempo libre. Un gran libro es “Como ser un diseñador gráfico sin perder tu alma”

9.-Lee entrevistas sobre otros diseñadores gráficos.

Las entrevistas son frecuentemente reveladoras, y sacan a la luz muchos secretos y grandes claves acerca de diseñadores exitosos, es asombroso cuanto se puede aprender de estas breves entrevistas.

10.-Únete a organizaciones de diseño grafico

Unirse a las organizaciones de diseño gráfico puede traerte numerosos beneficios, y es una gran manera de tener acceso a recursos e infraestructura. La Sociedad de Artistas Gráficos y AIGA son solo algunas de las organizaciones que puedes considerar para afiliarte.

11.-Aprende a aceptar las críticas constructivas

Este es un tópico común y relevante para muchos estudiantes, y aún profesionales, del diseño. El tiempo que te tome aceptar críticas constructivas personales, será el tiempo que te sea preciso para mejorar como diseñador.

12.-No temas pedir ayuda

Si no sabes cómo hacer algo, no pierdas tu tiempo pretendiendo hacerlo, solicita amablemente algún auxilio para así poder enfocarte a otro asunto lo más pronto posible.

13.-Aprende a laborar con fuentes externas y delega funciones

Si tu “muerdes más de lo que masticas” es casi siempre una mejor idea trabajar por fuera con alguien en quien confíes, y así escapes de un estrés de muerte. El proyecto final se tornará más provechoso si trabajas en equipo y delegas labores a otros.

Si tienes suerte y a los que delegas el trabajo saben hacerlo bien, sin duda. De otro modo el estrés se multiplicará por 3…

14.-Utiliza Google Reader y sigue los blogs de diseño

Google Reader es un gran lector online de RSS que te permitirá seguir fácilmente la marcha de todos tus blogs de diseño favoritos.

Personalmente uso netvibes, pero hay muchos donde escoger.

15.-Utiliza Google Calendar para mantenerte al tanto de eventos importantes

Google Calendar es un software gratuito y sobresaliente, que te ayudara a organizar todos tus eventos importantes.

16.-Programa tu cliente de correo para checar por mensajes nuevos lo menos frecuente posible

Revisar por mensajes nuevos tu correo cada 5 minutos puede ser fuente de muchas distracciones. Si revisas esto pocas veces al día, entonces, podrás tener tiempo para realizar más trabajos.

Es un buen consejo, pero hay que tener cuidado, un correo leido demasiado tarde puede hacerte retroceder 1 dia de diseño o más

17.- Elabora contratos estándar con tus clientes manejando tiempos por adelantado

Es una buena idea tener a un abogado para que te auxilie a crear contratos estándar con tiempos por anticipado, para que tú puedas tener programado tu tiempo y no tengas que preocuparte por perderlo con contratos obtenidos posteriormente.

18.- Elabora facturas y estimaciones presupuesto estandarizadas

El manejar facturas y estimados de presupuesto amablemente diseñados es una muestra de profesionalismo y puede ser la ruta para conseguir un nuevo cliente. Asegúrate de imprimir copias para ti mismo, para propósitos de archivo, a fin de tener como referencias si se requiere en alguna ocasión.

19.- Crea plantillas de correo

Teclear por tantos años ha desgastado realmente mi mano para escribir, y tener esquemas predeterminados de correo no sólo protege a todos de mi fea escritura manual, sino que además ahorra tiempo.

20.- Organiza todos tus documentos impresos por lo menos una vez a la semana

Hoy día los documentos de trabajo pueden acumularse rápidamente, y tenerlos bajo control puede llegar a ser una pesadilla. Utiliza carpetas en un gabinete de archivos que este bien señalado, para organizar todos los papeles importantes para ti.

21.- Organiza tus archivos fuente por lo menos una vez a la semana

Organizar tus archivos es aun más importante que organizar tus papeles. Debes tener carpetas y subcarpetas para cada cliente y crear respaldos de tus archivos en varios recursos externos.

22.- Desarrolla un sistema de etiquetado de archivos estándar

Etiquetar tus archivos en un modo específico puede hacer mucho más fácil para ti buscar por ciertos archivos cuando los necesites rápidamente.

23.- Trata de mantener tus fines de semana libres de trabajo

Es fácil consumirse con el trabajo, y mantener los fines de semana libres de labores es una buena manera de asegurarte de que no te agotarás o tendrás un desvanecimiento. ¡Así que no olvides disfrutar la vida plenamente los fines de semana!

24.- Ejercítate regularmente y toma alimentos al aire fresco

Esto, aunque siempre aparece en las listas de productividad, nadie lo hace. Puede parecer difícil, pero aun tan sólo 20 minutos de ejercicio 3 veces a la semana, pueden tener un gran impacto en tu salud general.

25.- Haz ejercicios para las manos cada cierto tiempo, para ayudar a combatir el síndrome del túnel carpiano

Usar el teclado 8 horas al día por años enteros, es una manera fácil de gastarte las manos, así que hacer ejercicios cada cierto tiempo ayuda a proteger tus manos de un potencial daño permanente.

Si sólo fueran 8…

(Fuente: artículo de youthedesigner escrito por Gino y traducido por Jesús Ademir Morales Rojas para nerv. )

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)

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.

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?