¡Hola! Este es un blog de infodiseño y diseño de interacción, preferentemente, en el cual escribe Omar Sosa Tzec (b.k.a. Omi Tzek), oriundo de Yucatán y actualmente radicando en Puebla, México.
Si deseas contactarme, por favor escribe a omi@tzek-design.com. Espero tus sugerencias, comentarios y opiniones. Gracias.
¿Buscas diseño? Quizá pueda ayudarte. Realizo diseño de información aplicado a comunicación gráfica, soy apasionado la gestión de la identidad corporativa y el diseño de interacción.
Planetaki es un lector de feeds fácil de usar. Te registras, creas tu planeta, vas agregando sitios web y cada vez que regresas aparecen las últimas publicaciones de éstos.
Si ya tienes tu planeta, da clic en el botón para agregarme.
El miércoles 15 de octubre tuve el gusto de participar en la Semana de Arte y Diseño de la Universidad del Arte, un instituto pequeño pero con un ambiente cálido y buen nivel de camaradería.
La decoración de las paredes es muy particular, lo cual le brinda un carácter propio a este centro de estudios. Esos efectos ópticos me parecen geniales.
Debido a otros compromisos, me perdí el resto de las charlas. Ya no tuve la oportunidad de escuchar a Tina Diez y Ricardo Huitrón, dos colegas exaUDLAPs, pero estuve presente en la charla con Germán Montalvo, quien fue muy ameno en su plática y nos mostro una cantidad considerable de trabajo comentándonos para cada caso cuál había sido el proceso. Germán es bien conocido por su trabajo en cartel, aunque en esta charla nos mostró trabajo de editorial, cerámica/talavera e incluso muebles.
Las fotos las tomé con el celular. Una disculpa por la calidad de las fotos.
Prototipo para la Guirnalda de Plata, presea del auditorio nacional.
Libro sobre Warhol.
Plato de talavera.
Portada de la revista Design Issues.
Agenda.
Ilustración de pájaros antropomorfos.
Broche con las mismas ilustraciones del libro.
Germán hizo un par de comentarios que me parecieron muy acertados:
El diseño debe provenir de la realidad.
La gente desconoce que existe un proceso*.
* refiriéndose a proyectos de diseño.
Un servidor platicó sobre qué es arquitectura de información, ya que siendo futuros egresados en diseño estratégico, esta disciplina si al menos no se puede siempre implementar con todo el formalismo, sí es necesaria porque no sólo propone en términos del usuario, sino ejercita esa "manera de pensar" en forma estructural, muy conveniente cuando se tienen que solucionar problemas donde existe una gran cantidad de información o bien, una marcada carencia de esta.
View more from .
Por mi parte quiero agradecer a Hilda Gabarrón (a.k.a. ) por la invitación y a los cuates estudiantes de la Uniarte por sus comentarios, retroalimentación y buena vibra.
Anteriormente había posteado sobre el taller de diseño de tipografía que impartiría . 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.
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 . Bastante impresionante.
Después nos tocó hacer caligrafía con "pluma de punta rígida" simulándola con un pedazo de madera.
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.
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.
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).
Una palabra de prueba es 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.
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 y los .
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.
Regla 2. Caracterizar la forma de la letra en términos de sólo tres nodos: curva, tangente y de esquina.
Regla 3. Intentar que los puntos estén en los extremos superior, inferior, derecho e izquierdo.
Regla 4. Procurar que las perchas (esto es, los controles de la pendiente de las curvas) sean ortogonales.
Regla 5. Que las perchas sean simétricas.
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.
“... 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 emocionalpositivo 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.
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".
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.
Los usuarios no son tontos, sólo desean hacer lo que quieren hacer casi de forma instantánea e intuitivamente.
Ejemplo de contraste para evidenciar con qué se puede interactuar.
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.
Sin importar si somos diestros o zurdos, se pueden colocar los dedos cómodamente.
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.
Y hablando de diseño de interacción, ya está disponible el del congreso del de la (IxDA). Entre los keynote speakers está , autor del libro "" (que estoy tentado de tener) y , una figura importante y con trayectoria en el diseño de interfaces y usabilidad.
El evento será en Vancouver en la de la Universidad de Simon Fraser donde hay en diseño de interacción, los cuales incluyen maestría en ciencias, maestría profesionalizante (en artes) y doctorado.
El nombre de un taller que me llamó la atención fue "Así que quieres ser un diseñador de Interacción". Quizá deba ir a comprar una alcancía en forma de cochinito
A principios de la década, a mi juicio, uno de los mejores recursos para los interesados en el diseño y desarrollo web era , gracias a sus buenos tutoriales y otros artículos. Entre los primeros se encuentra el "".
Si necesitas conocer qué es y cómo se aplica este concepto en un sitio web, te recomiendo echarle un vistazo a este tutorial; su contenido es presentado con claridad, cubriendo los puntos necesarios en forma concisa.
Liga:
¡Qué bien que Webmonkey está de vuelta! Un portal dónde se aplicaba bien el concepto de que el contenido es el rey. Espero que en esta versión se repita la historia.
Justo que vi un comentario de Ixmael en el post sobre mis experiencias en rediseño de logos, me hizo recordar sobre la y documentación al momento de escribir código.
Con respecto a la indentación, el primer pensamiento que he notado en chavos que aprenden XHTML es Who cares!! Sin embargo, no importa si es XML, CSS, C++, JavaScript o lo que sea, indentar es definitivamente una buena práctica. En mi opinión:
Te permite identificar fácilmente la estructura del código: bloques de procesos y sus sub-procesos internos o estructuración semántica del contenido (en XML o XHTML); lo cual,
fomenta una construcción mental ordenada de lo que estás codificando/escribiendo. Este orden te permite extraer y concentrarte en solo un bloque particular, a groso modo si es el proceso grande o detallado si es un sub-proceso.
Ayuda a descansar al lector en el proceso cognitivo de lectura-entendimiento (cuando no es el autor quien lee).
Con respecto a al punto 3, y esto de descansar o descargar cognitivamente al lector (usuario), pues ¿qué no es válido que exista un "diseño" en el código mismo? Diseñadores: si nos preocupamos en diseño editorial y de información por dar una estructura jerárquica a los textos, ¿por qué no hacerlo en códigos?
Quizá no haya tanta importancia entre
<head>
</head>
<body>
<body>
con
<head>
</head>
<body>
</body>
Pero cuando las cosas comienzan a aumentar como en
<head>
<title></title>
<meta ...>
<meta ...>
<link ...>
<script>
bla bla bla...
</script>
</head>
<body>
<div id="hdr">
<ul id="menu-principal">
<li></li>
<li></li>
<li></li>
</ul>
</div> <div id="content">
<div id="col-izq">
<p> ... </p>
<p> ... </p>
</div>
<div id="col-der">
<p> ... </p>
<p> ... </p>
</div>
</div>
<div id="ftr">
<p> ... </p>
<p> ... </p>
</div>
</div>
</body>
pues no hay duda que indentar nos da una buena "ayudadita".
Ya en lenguajes completos (de aplicaciones) o de guiones (scripts), esto de la indentación es un must, sobretodo con esto de que no necesariamente seremos nosotros quienes lean nuestro código. Nunca está demás dejar la sangría necesaria, al menos para marcar cuándo empieza y termina un bloque de código y así:
diferenciar entre los grandes chunks de información (clases, métodos y funciones),
marcar bien los procesos repetitivos (ciclos for, while y repeat until), o bien,
reconocer qué decisiones se tomarán a partir de ciertas condiciones (por ejemplo en if-then, switch-case o "ifs" anidados).
También está el asunto de estandarizar el cómo codificamos. Es algo bueno de aplicar en la mayor medida de lo posible por la misma razón del párrafo anterior, aunque también nos puede beneficiar a nosotros mismos: en algunos casos si dejamos las cosas enfríar un rato para luego retomar el trabajo, puede ser que ya ni nos acordemos qué es lo que escribimos o dónde nos queamos.
Por ejemplo, si tenemos muchas especificaciones en CSS, pues un
/*Footer*/
nos ayudaría a identificar que de ahí para abajo (hasta otra marca) son cosas que tienen que ver con el contenedor footer. Se que parece tonto, pero en mi caso cuando tengo una hoja de estilo con muchas cosas, ya ni ganas me dan de leerla.
Se ve con mayor claridad este asunto en las rutinas de programación. Por ejemplo, una cabecera ayuda a recordar qué estamos haciendo, o bien, si alguien más nos lee, al menos puede tener una idea de qué hay en el archivo aunque no lea detalladamente nuestro código.
Nombre: imprime_datos_usuario Fecha de creacion: 26-julio-2008 Autor: Omar Sosa Tzec Entradas: strNombreUsr - Nombre del usuario. strDireccionUsr - Direccion del usuario. Salidas: intStatus - Verificador de que se imprimieron bien los datos en documento. 1 si estuvo todo bien. 0 si hubo algun error. Descripcion: Recibe datos del usuario y entonces verifica que tienen validez consultando la tabla de usuarios validos y de ahi incrustarlos en el documento-mensaje de salida con la variable de estatus. /*****************************************************************/
También en el manejo de variables, muchas veces resulta conveniente empezar éstas con algún identificador que de antemano nos diga de qué tipo es: un int para las variables enteras, un str para las cadenas, un flt para las flotantes o punto decimal, etc.
A partir de este punto, podemos hacer combinaciones de mayúsculas con minúsculas para nombrar las variables. Por ejemplo, fltResultadoDivision. Para otras palabras reservadas también podemos definir nuestros estándares. Por ejemplo, Persona para la clase persona y Pepe para nombrar un objeto de esta clase.
En CSS por otro lado, si son cosas que tienen que ver con un ID llamado header, por ejemplo, un estándar práctico es quizá ponerle fondo-hdr.gif a su imagen de fondo o en las especificaciones poner .deocor-hdr para llamar a una clase que aplica sólo en este ID.
Sí, ya se: puede ser un verdadero fastidio estar haciendo esto. Tampoco hay que exagerar, y dependiendo de qué estemos haciendo, tomar lo que se nos acomode mejor. Pero sin duda, un poco de estandarización y limpieza de código cae bien, sobretodo cuando se trabaja en equipo.
Actualización: Argentina ha liberado la en México. De verdad que un agradecimiento por compartir este tipo de información. Saludos y éxito.
Argentina, consultora gráfica del despacho , posteó en dos partes el proceso de cómo registrar una marca en México en forma concisa y digerible.
Pongo aquí estos útiles post:
Cómo registrar una marca -
Cómo registrar una marca -
En lo personal, agradezco el que compartan con la comunidad este tipo de información. Ahí está para cuando el cliente nos diga: Oye, ¿y tu te encargas también de eso del registro de marca?
PD. Mucho éxito a Argentina y a Hugo con VectorEs Divergente.
