Selección de logotipos con algún animal como tema principal. En total, 1 conejo, 2 elefantes, 1 mantis, 4 pajaros,  3 perros, 1 caballito de mar,  1 pato, 1 abeja, 2 peces, 1 antilope, 1 oso, 1 pulpo, 1 cerdo, 1 lobo, 1 gallo, 1 hipopotamo, 1 mono y 1 buho.

 

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…

Recientemente tuve la increíble experiencia de hacer un pequeño sitio web para un cliente en base a Wordpress, y aprendí muchas cosas acerca de codificar el tema y hacer más fácil la vida de los clientes. Voy a repasar las que, en mi opinión, son las cinco cosas más importantes que aprendí.

Sidebars “Widgetizadas” (Sidebars Dinámicas)

Esto fue lo que más me ayudó. El diseño del sitio necesitaba un área de enlaces en el pie de página para enlazar a otros grupos, departamentos y organizaciones relacionadas con el sitio. También necesitaba información de contacto al pie de página.

La solución fue utilizar barras laterales en base a widgets y luego modificar el código CSS para convertir estas barras laterales en pie de página.

Para agregar una barra lateral, inserta este código en el archivo functions.php de tu tema:

1
2
3
4

<?php
 if ( function_exists('register_sidebar') )
 register_sidebar(1);
?>

Puedes repetir este código para cuantas barras laterales necesites. Sólo tienes que ir cambiando el “1″ por otro número para cada barra.

Ahora inserta este código donde quieres que aparezca tu barra lateral:

1
2
3

<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar(1) ) : ?>
<?php endif; ?>

Esto hará que tu barra lateral dinámica aparezca. En mi caso, sólo ajusté el ancho de cada widget y los alineé hacia la izquierda con este código:

1
2
3
4

#footer .widget{
width:290px;
float:right;
}

Al configurar el ancho de los widgets y alinearlos hacia la izquierda en mi pie de página, creé un área de contenido editable que no interfiere con las entradas o la estructura de la página, utilizando widgets y barras laterales dinámicas.

“Loops” Personalizados

En el sitio que estaba haciendo no iba a existir un blog, sino que una sección de noticias y una sección de eventos, así que necesitaba separar las entradas por categorías y realizar una consulta en forma separada:

1
2
3
4
5

<?php
 $news= 'category_name=news&orderby=date&order=DEC&showposts=3';
 query_posts($news); // run the query
 ?>
 

Este fragmento de código crea una nueva consulta llamada news ($news), toma 3 entradas desde la categoría de noticias y las ordena en forma descendente por fecha. Luego, se debe configurar el Loop de forma normal bajo ese código. Mi Loop completo se veía así:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<?php if (have_posts()) : ?>
        <?php while (have_posts()) : the_post(); ?>
        <?php
                if ( $news%2 ) {
                echo "<li class='news_even'>";
                        } else {
                echo "<li class='news_odd'>";
                        }
                        ?>
                        <h3 class="smallindent"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
                        <p class="posted smallindent"><?php the_time('m-d-y') ?> </p>
                        <div class="smallindent"><?php the_excerpt(); ?></div>
                </li>
                <?php $news++ ?>
        <?php endwhile; ?>
        <?php else : ?> 
        </ul>
        <?php endif; ?>

Menús Desplegables

Los clientes querían que el sitio web tuviera un menú despegable. Normalmente me habría opuesto a esta idea, pero ellos tenían bastante contenido que deseaban incluir en el sitio. Después de buscar durante varias horas y probar varios métodos para el menú despegable, encontré esto. Resultó ser el “santo grial” que estaba buscando, compatible con todos los navegadores, y funcionó de inmediato con el marcado generado por la función wp_list_pages.

Simplificar el Panel de Administración

Después de la primera reunión y sesión de entrenamiento, quería encontrar una manera de esconder varias partes del panel de administración que permanecerían sin uso. El asunto era simplificar Wordpress hasta dejarlo en lo más básico: sin etiquetas, sin necesidad de organizar categorías o la biblioteca multimedia. La solución fue wplite. Este ingenioso complemento permite deshabilitar paneles en la pantalla de administración. También, permite limitar los campos de metadatos de las entradas (excepciones, etiquetas de las entradas, orden de páginas, plantillas, nombres para url, etc). Resultó ser lo que estaba buscando para hacer la administración del sitio simple y fácil; incluso puede eliminar el tablero para que la página de inicio sea la escritura de una nueva entrada.

(Fuente: artículo de upsidedowncity.net escrito por Gino y traducido por Sara Salazar para nerv. )

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…

Ley 1: Reducir

El modo más sencillo de alcanzar la simplicidad es a través de una reducción acuciosa.

El modo más sencillo de simplificar un sistema es la de eliminar funcionalidades. Los reproductores para DVD, por ejemplo, tienen demasiados botones de opciones si lo único que deseas es ver una película. Una solución podría ser eliminar los botones para Retornar, Adelantar, Extraer, y así, sucesivamente, hasta que sólo quede un solo botón: el de Reproducir.

Pero, ¿si lo que deseas es reproducir es solamente una escena favorita? ¿O pausar la cinta mientras que tú vas a ocuparte de ese para- todos –importante asunto en el baño?

La cuestión fundamental es, ¿dónde está el balance entre simplicidad y complejidad?

¿Qué tan simple puedes hacer eso? <—> ¿Qué tan complejo debe ser eso mismo?

Por un lado, deseas que un producto o servicio sea de fácil utilización; por otro, quieres que eso pueda hacer lo que toda persona desearía que hiciese.

El proceso de alcanzar un estado ideal de simplicidad puede ser verdaderamente complejo, de tal modo que permíteme simplificarlo para ti. El modo más fácil de lograr simplicidad es a través de una reducción acuciosa. Cuando dudes acerca de algo, sólo quítalo. Pero ten cuidado con lo que retires.

Ley 2: Organizar

La organización logra hacer ver a un sistema más reducido de lo que es

El hogar es usualmente el primer campo de batalla que me viene a la mente cuando enfrento el reto diario de manejar complejidad. Las cosas inservibles simplemente parecen multiplicarse. Hay tres estrategias consistentes para lograr simplicidad en el ámbito del vivir:

1) Comprar una casa más grande,
2) Poner todo lo que realmente no necesites en almacenaje, o bien,
3) Organizar tus bienes personales en un orden sistemático.

Estas típicas soluciones tienen resultados diversos. Primero, una casa grande reduce enormemente el desorden por razón de su espaciosidad. Pero, en última instancia, un espacio más grande posibilita mayor desorden. La ruta del almacenaje incrementa el monton del espacio vacío, pero también, a final de cuentas, puede ser inmediatamente colmado por más objetos inservibles, que a la larga, también ameriten ser almacenados.

La opción final de implementar un sistema tiene la forma de seguir el modelo de los organizadores de ropa de los closets, que pueden brindar auxilio, al estructurar el caos, mientras que los principios de la organización puedan ser obedecidos. Yo encuentro que acudir a las tres estrategias para reducir el desorden- solicitar apoyo al mercado inmobiliario, a los servicios de almacenaje, tales como “Door to Doorâ€, y un amueblamiento racional como los de la Container Store (tienda especializada en productos de almacenamiento), están en boga.

Leer más…

Nos complace presentarte un estracto del capítulo 13 del libro Diseño de formularios web: Rellenando los huecos, de Luke Wroblewski (Rosenfeld Media, 2008), con un 10% de descuento con el código ALAWFD cuando lo compres desde el sitio del autor – Ed.

Sólo vendré a decir esto: Los formularios de registro deben morir. En la introducción de este libro describí el proceso de tropezar o que te recomienden un servicio web. Tú llegas impaciente para contratarlo y, ¿qué es lo primero con lo que te encuentras? Un formulario.

Podemos hacerlo mejor. De hecho, creo que podemos conseguir que las personas se adapte a los servicios digitales en vez de decirles cómo trabajan tales servicios y por qué deberían preocuparse por usarlos. También creo que podemos hacer esto sin hacerles rellenar completamente un formulario como primero paso.

Pero antes de que consigamos el potencial (tu salida de los formularios “aburridosâ€) vamos a echar un vistazo al proceso de contratación de un servicio online. 2007 fue un año de libertad para el vídeo online, por ello es normal asumir que muchas personas utilizaron internet para publicar uno de sus vídeos. Quizás oyeron hablar de Google Vídeo como un buen lugar donde hacerlo. Una vez llegados al sitio, encontraron un link para compartir su vídeo y, ¿qué pasó después? Encontraron el formulario. Figura 13.1.

Figura 13.1 Un formulario da la bienvenida a los nuevos clientes de Google Vídeo.

Se te solicitaba que dieras tu correo electrónico, seleccionaras una contraseña, les dieras tu nombre, tu ciudad, verificar una extraña palabra, aceptar los usos del servicio y, finalmente, conseguirías lo que había detrás del formulario.

Ahora comparemos este proceso con este otro de un servicio de vídeo online: Jumpcut. Lo primero que te llama la atención es el diseño de Jumpcut, como se ve en la Figura 13.2, es “Haz una película y prueba una demoâ€. De forma directa, es interesante decir cómo trabaja Jumpcut y por qué para ti es genial. Así que vamos a profundizar.

Leer más…

Recientemente me encontré con el problema de ocultar las subcategoría en el sidebar de wordpress ya que las opciones que tiene wp_list_categories() no lo permiten. Lo único que puedes hacer es mostrar las subcategorias de una forma mas ordenada con una ligera sangria.

Tienes dos opciones, o usar algún plugin para intentar ocultarlas o simplemente añades al CSS esta línea de código:

.children {display:none}

Con esta regla ocultaremos las subcategorías. Recordad que la opción hierarchical tiene que estar activada, igual a 1.

Workshop de Redes Sociales: la herramienta para dar a conocer tu marca, en la II Jornada de Negocios de Networking Activo,29 de noviembre del 2007, en Barcelona.

Con Pedro Sanchez Pernia (Viadeo), Tommy Pelluz (Neurona.com) y Ollivier Jacq (Open Coffee Club).

Leer más…

Os voy a dejar unos videos que me he encontrado de una conferencia que hizo Eduardo Manchón (cofundador de Panoramio y ahora trabajando en Google) donde nos habla de usabilidad y diseño poniendo ejemplos sobre las comunidades online.