Category Archives: Métodos y proceso de diseño

Resonance – ¿Qué es el diseño estratégico?

Un video de la compañía Continuum sobre Strategy Design. Como ellos indican, el asunto es conseguir la idea correcta. Una empresa con filosofía de Design Thinking.

Notas del taller de tipografía orientada a la creación de logos

Anteriormente había posteado sobre el taller de diseño de tipografía que impartiría Isaías Loaiza. En lo personal fue una experiencia enriquecedora, además de que Isaías transmite esa pasión por la tipografía y su relevancia en el diseño. Aquí dejo algunas notas de lo visto en el taller.

tipo

La primera parte del taller fue sobre apreciación tipográfica y cómo se puede explotar la tipografía para darle sabor y carácter a una marca. Entre los ejemplos, vimos el trabajo de Alex Trochut. Bastante impresionante.

trochut_10ways

Después nos tocó hacer caligrafía con "pluma de punta rígida" simulándola con un pedazo de madera.

clase-isaias-loaiza

Como primer paso se necesita una unidad para establecer medidas, la cual estará dada por el lado del pedazo de madera que emplearemos para escribir. Un enfoque consiste en tomar nuestra pluma y hacer ocho marcas verticales en serie: dos corresponderán a la altura de nuestros ascendentes, cuatro corresponderán a nuestra altura de las x y dos para el tamaño de nuestros descendentes.

caligrafia-madera

Algo importante es no mover la inclinación de la punta una vez asentada sobre el papel. Esto provocará modulación (aparición de finos y gruesos). Si movemos la punta conforme vamos trazando, los grosores tenderán a sarlirnos uniformes.

caligrafia-isaiasloaiza

Sobre el diseño de tipos en general, según Isaías, debemos tener en cuenta cuatro variables: el tamaño (con respecto a la líneas guía), las curvas (que tán gruesa o fina resultará), el origen (qué tipo de fuente es) y el espaciado entre letras (fijarse en la contraformas).

variables-trazo-tipos1

Una palabra de prueba es hamburguerfonsiv.

hamburguerfonsiv

Isaías nos comentó un tip para manejar los gruesos en los fustes (las columnas), transversales, curvas, diagonales y fustes para mayúsculas. Si se piensa en términos del ancho de un fuste, entonces el resto son variaciones de esta medida.

grueso-fuste-curvas

También discutimos sobre ligaduras, e Isaías comentó que es un recurso para darle personalidad a un logotipo hecho a la medida, así como los ambigramas y los swooshes.

ligadura-en-logos

Con respecto al trazo, comentó que existe un conjunto de reglas para lograr unas curvas perfectas.

Regla 1. Manejar la cantidad mínima de nodos.

num_nodos

Regla 2. Caracterizar la forma de la letra en términos de sólo tres nodos: curva, tangente y de esquina.

nodos-curvas-tipos

Regla 3. Intentar que los puntos estén en los extremos superior, inferior, derecho e izquierdo.

nodos-extremos

Regla 4. Procurar que las perchas (esto es, los controles de la pendiente de las curvas) sean ortogonales.

perchas-ortogonales

Regla 5. Que las perchas sean simétricas.

perchas-simetricas

Un taller bastante interesante sin duda. Gracias al colega Isaías por su tiempo y entusiasmo. Lo único inconveniente para mi es que me he quedado con ganas de tomar un taller de caligrafía o bien, uno de diseño tipográfico, lo cual estaría super. :)

Problema con los speakers en Mac

Actualización:

a) Wow. Gracias por sacarme de mi ignorancia, muchas gracias por explicarme la verdadera razón :D Que bueno que escribí este post o hubiera muerto engañado; mejor evidenciar que uno se equivoca a vivir en la ignorancia. ¡¡¡Gracias por los comentarios!!!

b) Mi colega Omar V. me manda una liga donde parece estar la información pertinente: http://en.wikipedia.org/wiki/TOSLINK

Post original:

Primero, quisiera compartir tres puntos:

  1. A los que estamos involucrados en diseño, hemos escuchado alguna vez la frase "Un buen diseño es aquel que es invisible ante sus usuarios".
  2. Por otro lado, está el enfoque de Mark Weiser y su Calm Technology, del cual he comentado, y creo que muy importante: tu diseño debe disponer de todo al usuario, pero sólo lo necesario para realizar una tarea debe estar en el centro de su atencion y lo demás en la periferia.
  3. El diseño de información se encuentra en muchos objetos de todos los días, en su mayoría con instrucciones o etiquetas (textuales, verbales o visuales), y es un hecho que estamos bien adaptados a códigos cromáticos, como sucede con los semáforos o señales de peligro.

Recientemente me topé con una situación que parece conjuntar los tres puntos: el desajuste de los speakers en la lap. Tenía enchufado los audífonos; parece que al sacar el conector, moví algo por dentro y la lap se quedó como si tuviera los audífonos aún conectados; por lo tanto, los speakers no se oían.

Es primera vez que me sucede esto, pero parece que es un problema más común en las Mac de lo que pensaba. Para solucionarlo, enchufas  los audífonos de nuevo y vas girando suavemente el conector, luego los desenchufas y ¡voilá!, tus speakers suenan de nuevo. Lo comento por si alguien ocupa esta info algún día. ;)

speakers-redlight

Para indicarme que algo iba mal y dónde estaba el problema, el hueco para enchufar los speakers se puso rojo. Realmente me sorprendió y encantó este hecho, porque no tenía ni idea de que ese orificio se podría iluminar en ese color. Además fue un warning que me señalaba el lugar y no hacía tanto alarde en la pantalla o se ponía en un lugar de ésta que a lo mejor ni veía. Además, está la simple idea de manejar el color rojo para decir que algo está mal empleando una convención occidental.

Me causó el mismo impacto que cuando ví "dormir" a mi iBook G4 por primera vez: la luz se prendía y apagaba lentamente como si estuviera respirando y lo mejor aún, no pensé que hubiera una luz en la orilla de mi laptop.

Una duda que me surge con este tipo de detalles, que van más con lo funcional que con caprichos decorativos, es: si a la gente de Apple se le ocurre incorporar este tipo de características, ¿por qué en otras compañías no se toman decisiones similares? ¿será realmente algo diseñístico o cuestiones de mercadotecnia según delimitan segmentos de mercado y ofrecen lo que creen ad hoc a los diferentes nichos?

En fin...

Affordances everywhere

De acuerdo con D. Norman:

“... the term affordance refers to the perceived and actual properties of the thing, primarily those fundamental properties that determine just how the thing could possibly be used... Affordances provide strong cues to the operation of things.”

Esto es, que veamos y entendamos rápidamente con qué y cómo operar el objeto (como herramienta) para cumplir una tarea.

Cuando una affordance es buena, hace que pasemos de ser usuarios novatos a usuarios expertos con una transición suave. ¿Por qué podría ser esto? La respuesta, aunque parece tonta, tiene que ver con el hecho de que las cosas funcionen como esperamos.

Recuerdo que mi primer celular, un LG muy sencillo y bastante compacto, tenía su teclado alfanumérico distribuido en 4 filas de 3 botones cada una (como la mayoría de los celulares). La forma de los botones es tal que si lo pones de lado se ve "adentado", lo cual ayuda a identificar cada fila y visualmente brinda la sensación de que los botones son apretables. Llegó un momento después de tanto uso que ya podía escribir mensajes de texto si ver las teclas. Esta característica generó un aspecto emocional positivo con este aparato.

Justo con este ejemplo, tuve una breve pero interesante discusión con un colega de sistemas computacionales sobre los pros y contras de un teclado equivalente en una interfaz táctil, como en el iPhone. Sin duda otro tipo de affordances son necesarias.

celular-viejito

Celuar LG jubilado después de múltiples caídas.

Un ejemplo típico sobre las affordances corresponde a la puerta giratoria, donde empujamos hacia la izquierda o derecha un panel dependiendo de qué nos "dice" la puerta; es decir, si notamos algo "para empujar" o no. Es simple, pero a mi ha resultado chistoso comprobarlo. En el lugar donde trabajo hay una puerta de vidrio cuya manija es igual en ambos lados. Cuando la gente llega, tiende a "empujar" la puerta, similarmente cuando sale. El problema está en que el techo está desnivelado: cuando la gente entra no hay problema, pero cuando sale, la parte superior de la puerta "raspa" el techo, terminando la puerta "colgada" y a punto de caerse completamente. La pobre, ya va en su tercera reparación. Con frecuencia, a la gente que nos visita hay que comentarle "hacia adentro, por favor".

puerta-oficina1

El diseño da la oportunidad de jalar la puerta, pero su forma triangular (colocar tu mano en un vértice no es muy agradable) influye en que las personas prefieran empujarla.

Así, en una affordance, la forma influye y está supeditada a la función u operación a realizar, más que a un capricho estilístico. En la imagen de abajo hay un dispensador de papel y otro de jabón. El primero, aunque estilizado, no muestra con claridad cómo hacer que salga mas papel, sobretodo si lo vemos de frente (es practicamente un rectángulo). En el segundo, se ve un componente que resalta y demuestra su caracter de "apretable". Podemos pensar entonces que el contraste de forma es un factor de diseño importante entre los diferentes elementos de un objeto, especialmente en aquellos que son necesarios para la interacción con éste.

papelera-jabonera-banio

Los usuarios no son tontos, sólo desean hacer lo que quieren hacer casi de forma instantánea e intuitivamente.

garrafon-de-agua

Ejemplo de contraste para evidenciar con qué se puede interactuar.

asa-camioneta

Las hendiduras bien marcadas permiten identificar cuántos componentes hay antes de intentar manipularlos.

En los objetos físicos (derivados del diseño industrial), la affordance también se vincula con la ergonomía. Por ejemplo, cuando identificamos algo apretable, podemos saber si es factible la acción con la llema del dedo, con dos dedos o incluso con la palma de la mano. Esto además, nos brinda información subyacente sobre la accesibilidad de esa función: si podemos apretar es porque está permitido y la consecuencia no será perjudicial. Cuando no se piensa en términos de "medidas humanas" quizá no sólo es por el tamaño del producto mismo, sino porque resulta inconveniente que accedamos a esa función tan fácilmente: por ejemplo, cuando tenemos que "resetear" algo metiendo un alambre o una ajuga porque el botón es prácticamente minúsculo y se encuentra hacia dentro.

regulador-ac

Sin importar si somos diestros o zurdos, se pueden colocar los dedos cómodamente.

manija-camioneta

El tamaño del hueco evidencía que es una asa para jalar la puerta.

Las affordances están presentes tanto en objetos de diseño físcos como intangibles (como son las páginas web). Pensar que los elementos interactivos de interfaz son intuitivos/evidentes para los usaurios es una buena práctica de diseño, la cual a veces se pasa por alto y sin embargo, no sólo conlleva un resolución diseñística centrada en el usuario, sino afecta también la experiencia de uso misma y los factores emocionales asociados al objeto.

Saludos. :)

Taller de Diseño de Interacción con Joe Fletcher en Códice 8

Este jueves 26 fue el primero de dos días del taller "Diseño de Interacción para el Mundo Real" con Joe Fletcher en el congreso Códice 8, diseñador que participó en el desarrollo de la Surface de Microsoft.

En esta sesión nos comentó qué es y qué no es diseño, y qué se entiende por diseño de interacción y de experiencias. Aquí unas citas:

El diseño no es un evento, no es un producto y no es una experiencia. El diseño es acerca del proceso.

Si asumimos que el diseño es el proceso, el producto no importa.

El diseño de experiencias es concentrarse en momentos que se comprometen la gente y las marcas y en los recuerdos que esos momentos crean.

Cada vez que diseñes, el diseño debe decirte una historia.

La sesión tuvo dos ejercicios, ambos en grupo. El primero consistió en darle órdenes a Joe para hacer un sandwich de mantequilla de maní y mermelada de fresa.

Un ejercicio de cómo hacer un taco hubiera funcionado mejor. El original: muy gringo a mi gusto. ;)

Según entendí, el objetivo era demostrar lo complicado que es pensar tanto narrativamente como algoritmicamente: como entender qué y/o quiénes se hacen partícipes en una interacción (una tarea) de principio a fin y cómo cada uno de esos elementos tiene ciertos comportamientos (lo que puede hacer, sus funciones). 

Explicación de los bocetos para la cocina de Steve Jobs (foto de celular)

Explicación de los bocetos para la cocina de Steve Jobs (foto de celular)

En el segundo ejercicio, el problema fue diseñar una cocina para Steve Jobs. Nos dispusimos a pensar un poco en Steve, luego definir el problema, de ahí hacer una lista de las restricciones de diseño y por último, elaborar bocetos de esta cocina. Me agradó que hicimos el ejercicio sin usar los términos y/o nombres de los métodos o herramientas que empleamos, qué basicamente era diseñar en términos de Personas, el método de diseño inventado por Alan Cooper, para después hacer un sketching muy a la Bill Buxton.

Como profesor, es similar a lo que veo con mis alumnos, pero me sentí muy raro al estar del otro lado: yo haciendo el ejercicio. No es tan fácil sentarse en grupo y comenzar a discutir y proponer, evitar protagonismos o llegar todos a un consenso. Aquí fue rápido por cuestiones de tiempo y además estábamos en un ambiente amigable; pero el mismo Joe comenta que así es un día de trabajo: sentarse con programadores, creativos y hombres de negocio; lo cual, no es fácil. 

El taller terminó con una ronda de preguntas y respuestas en la que Joe nos dio su opiniones sobre el diseño en México, cómo está el diseño de interacción en Estados Unidos y la realidad laboral de los diseñadores en general, cómo llegó a Microsoft, la importancia de tener un design thinking, entre otras.

Siftables por David Merrill

Esta TED Talk es sobre el proyecto doctoral de David Merrill, perteneciente al Grupo de Interfaces Fluidas del Media Lab en el MIT, que desde que lo vi por primera vez en el LabCast me ha gustado mucho.

Una idea de interacción tan sencilla como jugar con cubos...

Infoxicación Blog

Di con este blog sobre Diseño y Arquitectura de Información, se llama Infoxicación. Vale la pena darse una vuelta para leer un poco sobre estos temas, presentados en forma amena y bien planteados. 

Infoxicación

Por cierto, los autores han dado un taller en el Encuentro de Diseño de Palermo del 2008, si ven por ahí la liga, no está demás hacerle una descarga a la presentación.

Saludos.

 

Christopher Cisneros, el Chopper: la ilustración como carrera exitosa.

La ilustración puede considerarse una de las actividades más representativas del diseño gráfico; y aún más, para conseguir un lugar reconocido como ilustrador, el practicante no sólo requiere de pasión, sino de constancia en su trabajo y disciplina. En esta entrevista, agradezco a Christopher Cisneros, alias el Chopper, por contarnos sobre su experiencia como ilustrador en México.

Christopher Cisneros alias el Chopper

Christopher Cisneros, el Chopper. Ilustrador.

 

¿Puedes contarnos un poco de ti?

Pues mi nombre es Christopher Cisneros Franco (Choper Nawers), vivo en la ciudad más segura de todo México (Culiacán, Sinaloa). Soy Ilustrador Gráfico, es decir por profesión Diseñador Grafico y por vocación, Pasión y amor Ilustrador. Soy inquieto, muy inquieto y pues siempre me gusta estar en constantemente aprendiendo.

Jesucristo ilustrado por el Chopper

Jesucristo Ilustrado

Christopher, podrías hablarnos un poco sobre tu experiencia como profesional de diseño, ¿qué has hecho? ¿con quién colaboras actualmente? ¿en qué proyectos andas metido?

Mi experiencia como profesional puedo decir que no ha sido fácil y sobre todo nada viene de a gratis, hay algo que uno tiene que hacer en esta profesión es tener carácter para aguantar por que cierto es que hay muchos momentos de incertidumbre, peor tienes que saber sortearlos y sobre todo tenerle mucho amor a lo que haces. Y pues Actualmente Ilustro y colaboro con varias revistas, de diferentes giros además de trabajar con Daniel Esqueda también varios proyectos de Ilustración para otro bonche de revistas y suplementos, tanto internos como de circulación externa, tales Ciencia y Desarrollo, Hélix, Mis Vetas, Universo Big Bang, Pepsico, Hoja Ruta, a! Diseño, Bien Informado, entre otras. Y actualmente ando metido en varios proyectos de diseño en especial con el colectivo graficante acá en mi natal Culichilandia con el proyecto del Graficaster, podcast de este colectivo.

Romina por el Chopper

Romina

Resulta interesante de tu trabajo que 1) trabajes con entidades que podríamos considerar sólidas o importantes en México como el Consejo Nacional de Ciencia y Tecnología (CONACYT) y 2) qué logres evadir el cliché de que si no estás en la capital, sea difícil conseguir proyectos. ¿Qué factores crees que han contribuido a colocarte comercialmente como ilustrador? 

Creo que todo se trata de constancia, mucha, pero mucha constancia y pues atreverte a pedir los trabajos, por muy arrogante que parezca, tienes que pedir la pelota y decir: PUEDO HACERLO! Y demostrar que tienes la madera para hacerlo o de lo contrario nunca te tomaran en cuenta, para saltar a la campo tienes que pedirle al entrenador que te meta.

Y no fíjate, creo que si es cliché pensar que debes de estar en cierto lugar para desarrollar tu chamba. Esa fue una de mis metas, que pude concretar a finales del 2006, poder trabajar a distancia, pero como te digo, tienes que ser muy constante, nada de que esto va para mañana y lo hago mañana, nel acá es de es para mañana y se tiene que entregar mañana a las 8 a.m….jejeje.

Participación ciudadana en la democracia

Ilustración alusiva a la articipación ciudadana mediante el voto

Ilustración sobre la legalidad por el Chopper

Ilustración alusiva a la legalidad

Como ilustrador, ¿tienes una metodología o proceso de diseño bien estructurado para tus proyectos? ¿cómo determinas en sus distintas fases que vas sacando un trabajo de calidad y competitivo tanto en lo visual como en lo económico?

El proceso siempre debe de ser de calidad, es decir nunca aflojarle al paso, además de mirar siempre al frente en los proyectos. Creo también que debes de ser muy serio en lo que haces sobre todo en base a lo que es el proyecto, ya que no hay un proyecto grande o chico, todos son iguales y todos merecen tu total entrega, sobre todo no trato de verlo como trabajo, trato de verlo como algo que me gusta hacer todos los días, en definitiva, puedo decir con certeza y con mucho orgullo que amo lo que hago, aunque a veces es muy cansado, si lo es, pero eso no le quita lo divertido.

Y en lo económico, es muy variable, hay proyectos que son muy bien pagados y hay otros que no, pero que más da, si es lo que te gusta hacer. Aparte hay veces que cierto proyectos traen un presupuesto y hay cierta cantidad a pagar, pero tiene mucho valor curricular, además de las relaciones que puedas abrir trabajándolos, eso creo que muy importante recalcar, ver a tus clientes como tus amigos y aliados, por que lo que yo hago es solo una parte del trabajo, por eso se debe de ver como un trabajo en equipo.

boceto de una ilustración a la tierra por el christopher cisneros

Wireframes o vectores de ilustración a la tierra por el Chopper

Ilustración a la tierra por Christopher Cisneros el Chopper

Ilustración alusiva a la tierra y su proceso comenzando por el bocetaje

También te dedicas a la docencia. ¿En la docencia, es verdad que no sólo se enseña sino que también se aprende? ¿Qué has aprendido de ser docente en el área de diseño gráfico que contribuya en tu proceso como profesional?

Pues me han tocado grupos de todo tipo, y lo que he aprendido es que en realidad uno como docente, debe de ser un catalizador para que los morros brinquen de nivel en nivel y sobre todo un motivador que los impulse a querer ser mejores. Creo que es como hacer una escultura, debes de irlos tallando y puliendo al punto que  ellos mismos se den cuenta del potencial que tienen, por que cuando uno esta en la universidad, todo lo ve muy fácil y cree que es un mundo que no se acaba, y el fregadazo se lo dan cuando tiene que ser parte de las filas de los que buscan empleo.

Ilustración para anuncio de café por el Chopper

Ilustración publicitaria de café

Y en ese evolución reflexiva de tu crecimiento profesional dada por tus alumnos sumado con todas tus experiencias en proyectos comerciales ¿cómo transmites ese conocimiento en tus alumnos?

Les paso mucha información, buscando que se queden con hambre de más, de que vean trabajos de otras personas, empaques, diseños de otros lugares, repasamos formas, ideas, compartimos pensamientos e ideas, de vez en cuando nos ponemos a solo platicar entre todos, por que creo que es bueno como maestro conoce a tus alumnos y motivarlos para que sena mejores. Creo que el conocimiento esta en ellos y como te digo uno nada más es un catalizador.

Aztecas e Incas ilustrados por el Christopher Cisneros

Aztecas e Incas

Esta pregunta de alguna forma es doble: ¿crees en el poder de la ilustración como herramienta de comunicación? Y en una reflexión rápida en México, existe una cultura visual muy rica y ecléctica. Quizá lo anterior implique que no se le de la suficiente importancia a la hora de buscar y seleccionar la calidad, tanto visual como comunicativa, en proyectos de ilustración o similares. Sin embargo, quizá sea como mucha gente considera: es algo subjetivo. ¿cuál es tu perspectiva como profesional en competencia y/o como formador de futuros profesionales que logren ser competentes?

Creo que como país somos uno muy rico en todo lo que al tema de cultura y miscelánea se refiere, así que tenemos mucho de donde cortar tale para inspirarnos. Y si la ilustración es mi mayor herramienta, es mi tarjeta de presentación. Además de que creo que mucha gente le resta algo de importancia a la ilustración y prefieren utilizar otros métodos que son muy respetables, pero en mi opinión muchas cosas que conciernen al diseño se resuelven con una buena ilustración. Aparte, creo que si se debe de hacer de este mercado uno más grande, pero sin perder calidad. 

Creo que la gente va a ser competitiva cuando se de cuenta de no debe, necesita ser competitiva día a día, además de dedicada. La competencia siempre esta y no debes de verla como a un enemigo, si no como una oportunidad de probar que el día de hoy puedes ser mejor, más nuevo, fresco y sobre todo comprometido.

 

Frase del Chopper:

Como diseñadores es importante que utilicemos nuestros 5 sentidos. Un diseñador que no saborea la vida no tiene nada que decir. 

La separación frente-fondo

Un producto de diseño visual, por su naturaleza, "aplasta" dentro de un área delimitada los elementos que lo constituyen, viviendo éstos "en capas". En forma burda, podemos distinguir al menos dos: un frente y un fondo. Si nuestro ojo está mejor educado podemos descomponer el frente en dos o más capas también, sin embargo lo que sí es un problema de diseño es cuando no se pueden distinguir al menos estas dos capas, ya que no se puede "leer" o extraer el significado de lo está al frente o bien, entender si el fondo es despreciable.

Esta separación se hace más importante cuando los productos poseen un carácter informativo con el fin de tomar decisiones o bien, involucran realizar una tarea. Ejemplos de éstos son sitios web, interfaces gráficas en teléfonos celulares, cajeros automáticos, señales en las autopistas, entre otros. En algunos casos el tiempo en el que el usuario puede separar el frente del fondo resulta relevante; por ejemplo, ¿qué implica si en una autopista a 120 km/h un conductor no puede entender lo que dice una señal porque la información pertinente no se distingue del fondo? 

La separación del frente y del fondo depende de dos factores básicos:

  1. La estructura visual de lo que constituirá el frente. Esta estructura implica que la información tiene una buena distribución y una buena jerarquización; es decir, se pueden identificar los pedazos o chunks de información.
  2. El contraste visual entre el frente y fondo.

Poco contraste entre el contenido informativo y el fondo

Manejo del fondo de un sitio web

Mejor contraste con el fondo

En algo "más" sencillo como un sitio web, puede cometerse el error de colocar la información "directamente" sobre una imagen de fondo (que puede repetirse o no) y a veces, aunque haya una estructura visual, el contraste entre el frente y fondo no es suficiente y todo queda "ruidoso".

Variaciones del mismo fondo que ayudan a identificar el contraste que separa el fondo de un frente de información ya visualmente estructurada.

La separación entre el frente y el fondo podría ser equivalente a tener una letra escrita en una hoja de papel. No importa la tinta empleada o el tipo de papel; para ser leída, es importante que se pueda distinguir la letra, entonces se cuida la forma de la letra misma así como el papel en el que se escribe. Contrariamente, una letra garigoleada (con mucho adorno) sobre un papel excesivamente texturizado podría dificultar la lectura.