<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Tzek Blog de Diseño &#187; Tertulias</title>
	<atom:link href="http://tzek-design.com/blog/tag/tertulias/feed/" rel="self" type="application/rss+xml" />
	<link>http://tzek-design.com/blog</link>
	<description>Diseño de Información e Interacción: Reflexiones, comentarios, vínculos con otras áreas de diseño o bien,  cualquier cosa...</description>
	<lastBuildDate>Thu, 19 Jan 2012 06:20:43 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>De la Educación en Diseño de Interacción</title>
		<link>http://tzek-design.com/blog/2010/11/30/ideas-sobre-la-educacion-en-diseno-de-interaccion/</link>
		<comments>http://tzek-design.com/blog/2010/11/30/ideas-sobre-la-educacion-en-diseno-de-interaccion/#comments</comments>
		<pubDate>Tue, 30 Nov 2010 19:19:27 +0000</pubDate>
		<dc:creator>Tzek</dc:creator>
				<category><![CDATA[Diseño de Interacción]]></category>
		<category><![CDATA[Diseño de Interfaces]]></category>
		<category><![CDATA[Diseño y Sociedad]]></category>
		<category><![CDATA[HCI]]></category>
		<category><![CDATA[Profesión]]></category>
		<category><![CDATA[Reflexión]]></category>
		<category><![CDATA[Tertulias]]></category>
		<category><![CDATA[archivo]]></category>
		<category><![CDATA[Currículum]]></category>
		<category><![CDATA[Desde la web]]></category>
		<category><![CDATA[diseño]]></category>
		<category><![CDATA[DIx]]></category>
		<category><![CDATA[don norman]]></category>
		<category><![CDATA[educación]]></category>
		<category><![CDATA[Email]]></category>
		<category><![CDATA[formación]]></category>
		<category><![CDATA[ibero]]></category>
		<category><![CDATA[Ingeniería en Diseño]]></category>
		<category><![CDATA[interaction design]]></category>
		<category><![CDATA[Junio 2010]]></category>
		<category><![CDATA[licenciatura]]></category>
		<category><![CDATA[Materias]]></category>
		<category><![CDATA[omar]]></category>
		<category><![CDATA[pensamiento]]></category>
		<category><![CDATA[Plan de estudios de licenciatura]]></category>
		<category><![CDATA[puebla]]></category>
		<category><![CDATA[Sosa Tzec]]></category>
		<category><![CDATA[uia]]></category>

		<guid isPermaLink="false">http://tzek-design.com/blog/?p=1230</guid>
		<description><![CDATA[Hace un par de post ya, escribí algunos pensamientos sobre el diseño de interacción; sobre cuál era mi percepción sobre la disciplina en aquel entonces. Creo que este hecho no ha cambiado mucho en el sentido que no se reconoce el valor del diseño como disciplina (su madurez, aportación en el conocimiento colectivo y la [...]]]></description>
			<content:encoded><![CDATA[<p>Hace un par de post ya, escribí algunos<strong><a title="http://tzek-design.com/blog/2008/10/02/pensamientos-en-diseno-de-interaccion/" href="http://tzek-design.com/blog/2008/10/02/pensamientos-en-diseno-de-interaccion/"> pensamientos sobre el diseño de interacción</a></strong>; sobre cuál era <em>mi</em> percepción sobre la disciplina en aquel entonces. Creo que este hecho no ha cambiado mucho en el sentido que no se reconoce <em>el valor </em>del diseño como disciplina (su madurez, aportación en el conocimiento colectivo y la posibilidad de conseguir una <em>buena capitalización</em> del mismo); aún más, no se reconoce como el diseño <em>per se</em> puede tomarse como un eje disciplinar <em>natural</em> en algunas formaciones académicas (me refiero a <em>títulos en ingeniería y ciencias</em>, no sólo a títulos en las "disciplinas proyectuales").</p>
<p>Lo anterior podemos tomarlo como una <em>metáfora de un cono</em>, recorriéndolo de <em>dentro hacia afuera</em>, donde las <em>lineas</em> que van del interior a una de las orillas –donde están "paradas" las disciplinas y su conocimiento construido– muestran el "camino del diseño" (algo así como un <em>design-driven approach</em>). Aunque también podemos tomar una visión contraria: en forma de embudo. Esto es, caminar de fuera hacia dentro, donde lo que queda hasta abajo –y saldría por el embudo– es el diseño derivado de una <em>formación académica especializada</em>.</p>
<p>Con respecto a este último enfoque, considero que esta visión de embudo aplica muy bien para la formación a nivel licenciatura de un Diseñador de Interacción. Don Norman en su artículo <a title="http://www.core77.com/blog/columns/why_design_education_must_change_17993.asp" href="http://www.core77.com/blog/columns/why_design_education_must_change_17993.asp">¿Por qué la educación en diseño de cambiar?</a> comenta que:</p>
<blockquote><p>"Las nuevas áreas (refiriéndose a la formación en diseño) son más como ciencias sociales y del comportamiento aplicadas, y que requieren un entendimiento de la cognición y emoción humana, sistemas sensoriales y de motricidad, y el suficiente conocimiento del método científico, estadística y diseño experimental en la medida que los diseñadores puedan validar, legitimar las pruebas de sus ideas antes de liberarlas…"</p></blockquote>
<p>Justo este artículo me recordó un correo electrónico que había compartido con un par de colegas en junio de 2010 sobre <em><strong>¿qué materias podrían ser útiles en un plan de estudios de licenciatura para Diseño de Interacción?</strong></em> – bajo esta <em>visión de embudo</em>– y que quisiera compartir ahora con ustedes (al final del post).De antemano, ofrezco una disculpa por algún error de redacción u ortografía; no quise cambiar nada del correo para no tergiversarlo. Dado <a title="http://www.core77.com/blog/columns/why_design_education_must_change_17993.asp" href="http://www.core77.com/blog/columns/why_design_education_must_change_17993.asp">el artículo de Norman</a>, considero que faltó de la lista materias como las siguientes: Metodología de la Investigación, Probabilidad, Inferencia Estadística, Diseño de Experimentos, Modelos Probabilísticos, Psicología Cognitiva, Psicología y Emociones, entre otras.</p>
<p>De cualquier forma, el <em>asunto fuerte</em> en este caso es <strong>la formación del diseñador de interacción</strong>. Es decir, podríamos preguntarnos: ¿cómo en las escuelas se está pensando formar adecuadamente a un diseñador de interacción?, ¿cómo formar a un estudiante con las herramientas para solucionar problemas de interacción en diferentes contextos de uso y con una ejecución adecuada, limpia, profesional?, ¿cómo lograr la integración de este tipo de diseñadores en equipos de trabajo multidisciplinarios? y por último, ¿cómo esa formación derivará en los futuros profesionales y teóricos que concreticen los pilares del conocimiento en Diseño de Interacción?</p>
<p><strong><span style="color: #ff6600;"><span style="font-weight: normal;"> </span></span><span style="color: #ff6600;">----- Materias descritas en el correo original – O.S.T. Junio 2010 -------</span></strong></p>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Fundamentos ==========================================</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">* Algoritmia.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Teoría: programación estructurada, condicionales, ciclos, recursividad, etc.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Práctica: Diseñar y programar ejercicios relacionados.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Objetivo: Saber pensar en forma algorítimica y tener fundamentos de programación estructurada.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">* Dibujo</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Teoría: Línea, forma, proporción, etc.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Práctica: Representaciones del mundo real.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Objetivo: Adquirir un estándar de calidad en representación visual.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">* Introducción al Diseño de Interacción</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Teoría: Qué es Diseño de Interacción, Interfaz, Tarea, Usuario, Contexto de Uso, Relación con otras disciplinas, objetivos de un producto de diseño.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Práctica: Elaboración de maquetas físicas, carteles académicos, intervención en espacio (todo análogo, nada electrónico).</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Objetivo: Conceptualizar soluciones para resolver problemas del entorno.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">* Taller de Diseño Industrial.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Teoría: Volumen, materiales, forma, ergonomía, sustentabilidad, etc.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Práctica: Diseñar y realizar prototipos físicos de herramientas y aparatos como controles de videojuegos, palancas de carro, páneles de control. Evaluación de las propuestas con usuarios.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Objetivo: Entender sobre usuarios y sus necesidades de uso.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">* Creatividad</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Teoría: Introducción al proceso creativo.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Práctica: Maquetar ideas creativas de problemas de diseño espurios.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Objetivo: Que el alumno tenga inteligencia emocional, un pensamiento creativo y romper paradigmas.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">* Investigación Cuantitativa.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Teoría: Metodología de la investigación, estadística.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Práctica: Armar un proyecto de investigación sencillo con recopilación y análisis de datos cuatitativos.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Objetivo: Aprender y aplicar metodología de investigación en la elaboración de proyectos de diseño.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">* Investigación Cualitativa.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Teoría: Métodos y procesos de investigación en las ciencias sociales.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Práctica: Trabajo de campo, elaboración de etnografías, observación, entrevistas, etc.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Objetivo: Aprender a cómo levantar requerimientos y necesidades de los usuarios a partir de una investigación cualitativa.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">* Diseño visual.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Teoría: Forma, color, composición.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Práctica: Elaboración de mensajes visuales.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Objetivo: Adquirir un pensamiento visual y saber comunicarlo.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">* Tipografía y Texto.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Teoría: Fuentes, famila tipográfica, kerning, tracking, composición de textos.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Objetivo: Saber componer un texto adecuadamente para medios impresos.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">* Diseño para pantalla.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Teoría: Tipografía para pantalla, color para pantalla, composición en pantalla.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Objetivo: Realizar composiciones de texto e imágenes del estilo de interfaces gráficas de usuario y para lectura en pantalla.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Formación ==========================================</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">* Programación Orientada a Objetos.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Teoría: clase, objeto, métodos, funciones, etc.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Práctica: Diseñar y programar ejercicios relacionados</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Objetivo: Saber pensar en forma algorítimica y tener fundamentos de programación OO.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">* Diseño de Información.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Teoría: Comunicación, mensaje, introducción a la visualización, introducción a la usabildiad, esquemática, legilidad de mensajes visuales, etc.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Práctica: Diseñar mensajes que muestren la relación enter las variables de un fenómeno, códigos sonoros, diseño instruccional.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Objetivo: Saber cómo diseñar visual, física y auditivamente con fines utilitarios.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">* Arquitectura de Información</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Teoría: Qué es arquitectura, ejemplos de arquitectura en diseño impreso, arquitectura para medios digitales, sistemas de navegación, sistemas de búsqueda, sistemas de etiquetado, análisis de contenido, tesauros, introducción al modelo entidad-relación y XML para bases de datos, etc.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Práctica: Elaboración de Personas, Card-Sorting, Free listing, Mapas y modelos mentales, Elaboración de Wireframes, Elaboración de escenarios.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Objetivo: Estructurar el pensamiento de una aplicación más allá de pensar visualmente.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">* Diseño de Interacción Humano Computadora</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Teoría: Qué es HCI, sketching e ideación (Bill Buxton), paradigmas de interacción, estilos de interacción e interfaces (gráficas, tangible, móvil, robótica, táctil, agentes inteligentes, etc), ergonomía de interfaces.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Práctica: bocetaje de interfaces, elaboración de interfaces y escenarios animados.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Objetivo: Qué el alumnos conozca sobre interacción y adquiera la capacidad de imaginar y luego bocetar y aprender a presentar y vender sus ideas.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">* Diseño de Interacción Humano Computadora II</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Teoría: Continuar con los temas de estilos de interacción en intefaces (visualización de datos, interfaces hápticas, etc).</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Práctica: bocetaje de interfaces, elaboración de interfaces y escenarios animados.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Objetivo: Qué el alumnos conozca sobre interacción y adquiera la capacidad de imaginar y luego bocetar y aprender a presentar y vender sus ideas.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">* Evaluación de Interfaces</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Teoría: Pruebas de usabilidad, Ingeniería Semiótica, Grupos Focales.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Práctica: Aplicar una prueba de usabilidad, protocolos y métodos para aplicarse en pruebas de usabilidad, pruebas de comunicabilidad (de la Ingeniería Semiótica), realizar un focus group.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Objetivo: Saber llevar a cabo una evaluación, cómo podría ser documentada, cómo recopilar datos y analizarlos, hacer reporte para propuestas de mejoras.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Web ==========================================</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">* Diseño web</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Teoría: Aprender conceptos de Internet, entender qué es web semántica, qué es separar contenido de presentación, usabilidad para web, prototipeo en papel de sitios web, arquitectura de inforamción para web, etc.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Práctica: XHTML y CSS.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Objetivo: Crear un sitio web estático con buena retícula y arquitectura de información.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">* Aplicaciones Web I</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Teoría: Interacción en web, diseño de formas/formularios.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Práctica: JavaScript, AJAX y librerías para web interactiva (JQuery, Mootools, etc).</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Objetivo: Crear sitios interactivos y con validaciones en formularios, menúes, etc.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">* Aplicaciones Web II</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Teoría: Conceptos de Base de Datos, Scripting en servidores, servicos web, etc.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Práctica: PHP, MySQL, desarrollo en .net.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Objetivo: Crear un sitio web dinámico.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">* Aplicaciones Móviles</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Teoría: Diseño de interacción para móviles.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Práctica: XHTML, CSS, JavaScript, AJAX, JQuery, PHP, MySQL, e introdución a plataformas de desarrollo para móviles como Java ME y Objective-C.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Objetivo: Realizar una aplicación web para móviles de forma que se den cuenta que no es lo mismo para pantalla.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Videojuegos ==========================================</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">* Diseño Videojuegos para la Red</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Teoría: Diseño de videojuegos, aplicación de los videojuegos en entretenimiento, capacitación, investigación y ciencia, industria.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Práctica: Aplicar animación, diseño de interacción humano computadora y programación orientada a objetos en el proyecto.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Objetivo: Elaborar un juego de video basado en un browser.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">* Diseño de Videojuegos para Consola</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Teoría: Lenguaje de programación para una consola.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Práctica: Conocer y aprender lo básico de un lenguaje nativo de una consola.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Objetivo: Lograr ejecutar (quizá mendiante un emulador) lo que se vería en un juego de consola de cierta marca.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">* Diseño de Videojuegos para Móviles</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Teoría: Repaso de un lenguaje de programación nativo para un móvil (Java ME u Objective-C).</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Práctica: Programar y diseñar para una plataforma móvil.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Objetivo:Poner en práctica lo aprendido de programación y elaborar un prototipo de juego para móvil no basado en browser.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Interacción física ==========================================</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">* Elaboración de prototipos electrónicos.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Teoría: Introducción al cómputo físico.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Práctica: Elaborar prototipos físicos (con Arduino o alguna plataforma similar).</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Objetivo: Fomentar el pensamiento creativo a través de la elaboración de prototipos físicos interactivos.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">* Interacción física.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Teoría: Complentar conceptos de cómputo físico e interacción tangible.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Práctica:  Elaborar prototipos físicos y aplicar diseño industrial.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Objetivo: Elaborar un prototipo de cómputo que resuelva un problema del mundo real.</div>
<p><span style="color: #000080;">Fundamentos ==========================================</span></p>
<p><strong>* Algoritmia</strong></p>
<p>Teoría: programación estructurada, condicionales, ciclos, recursividad, etc.</p>
<p>Práctica: Diseñar y programar ejercicios relacionados.</p>
<p>Objetivo: Saber pensar en forma algorítimica y tener fundamentos de programación estructurada.</p>
<p>________________________________________________</p>
<p><strong>* Dibujo</strong></p>
<p>Teoría: Línea, forma, proporción, etc.</p>
<p>Práctica: Representaciones del mundo real.</p>
<p>Objetivo: Adquirir un estándar de calidad en representación visual.</p>
<p>________________________________________________</p>
<p><strong>* Introducción al Diseño de Interacción</strong></p>
<p>Teoría: Qué es Diseño de Interacción, Interfaz, Tarea, Usuario, Contexto de Uso, Relación con otras disciplinas, objetivos de un producto de diseño.</p>
<p>Práctica: Elaboración de maquetas físicas, carteles académicos, intervención en espacio (todo análogo, nada electrónico).</p>
<p>Objetivo: Conceptualizar soluciones para resolver problemas del entorno.</p>
<p>________________________________________________</p>
<p><strong>* Taller de Diseño Industrial</strong></p>
<p>Teoría: Volumen, materiales, forma, ergonomía, sustentabilidad, etc.</p>
<p>Práctica: Diseñar y realizar prototipos físicos de herramientas y aparatos como controles de videojuegos, palancas de carro, páneles de control. Evaluación de las propuestas con usuarios.</p>
<p>Objetivo: Entender sobre usuarios y sus necesidades de uso.</p>
<p>________________________________________________</p>
<p><strong>* Creatividad</strong></p>
<p>Teoría: Introducción al proceso creativo.</p>
<p>Práctica: Maquetar ideas creativas de problemas de diseño espurios.</p>
<p>Objetivo: Que el alumno tenga inteligencia emocional, un pensamiento creativo y romper paradigmas.</p>
<p>________________________________________________</p>
<p><strong>* Investigación Cuantitativa</strong></p>
<p>Teoría: Metodología de la investigación, estadística.</p>
<p>Práctica: Armar un proyecto de investigación sencillo con recopilación y análisis de datos cuatitativos.</p>
<p>Objetivo: Aprender y aplicar metodología de investigación en la elaboración de proyectos de diseño.</p>
<p>________________________________________________</p>
<p><strong>* Investigación Cualitativa.</strong></p>
<p>Teoría: Métodos y procesos de investigación en las ciencias sociales.</p>
<p>Práctica: Trabajo de campo, elaboración de etnografías, observación, entrevistas, etc.</p>
<p>Objetivo: Aprender a cómo levantar requerimientos y necesidades de los usuarios a partir de una investigación cualitativa.</p>
<p>________________________________________________</p>
<p><strong>* Diseño visual</strong></p>
<p>Teoría: Forma, color, composición.</p>
<p>Práctica: Elaboración de mensajes visuales.</p>
<p>Objetivo: Adquirir un pensamiento visual y saber comunicarlo.</p>
<p>________________________________________________</p>
<p><strong>* Tipografía y Texto</strong></p>
<p>Teoría: Fuentes, famila tipográfica, kerning, tracking, composición de textos.</p>
<p>Objetivo: Saber componer un texto adecuadamente para medios impresos.</p>
<p>________________________________________________</p>
<p><strong>* Diseño para pantalla.</strong></p>
<p>Teoría: Tipografía para pantalla, color para pantalla, composición en pantalla.</p>
<p>Objetivo: Realizar composiciones de texto e imágenes del estilo de interfaces gráficas de usuario y para lectura en pantalla.</p>
<p><span style="color: #000080;">Formación ==========================================</span></p>
<p><strong> * Programación Orientada a Objetos</strong></p>
<p>Teoría: clase, objeto, métodos, funciones, etc.</p>
<p>Práctica: Diseñar y programar ejercicios relacionados</p>
<p>Objetivo: Saber pensar en forma algorítimica y tener fundamentos de programación OO.</p>
<p>________________________________________________</p>
<p><strong>* Diseño de Información</strong></p>
<p>Teoría: Comunicación, mensaje, introducción a la visualización, introducción a la usabildiad, esquemática, legilidad de mensajes visuales, etc.</p>
<p>Práctica: Diseñar mensajes que muestren la relación enter las variables de un fenómeno, códigos sonoros, diseño instruccional.</p>
<p>Objetivo: Saber cómo diseñar visual, física y auditivamente con fines utilitarios.</p>
<p>________________________________________________</p>
<p><strong> * Arquitectura de Información</strong></p>
<p>Teoría: Qué es arquitectura, ejemplos de arquitectura en diseño impreso, arquitectura para medios digitales, sistemas de navegación, sistemas de búsqueda, sistemas de etiquetado, análisis de contenido, tesauros, introducción al modelo entidad-relación y XML para bases de datos, etc.</p>
<p>Práctica: Elaboración de Personas, Card-Sorting, Free listing, Mapas y modelos mentales, Elaboración de Wireframes, Elaboración de escenarios.</p>
<p>Objetivo: Estructurar el pensamiento de una aplicación más allá de pensar visualmente.</p>
<p>________________________________________________</p>
<p><strong>* Diseño de Interacción Humano Computadora</strong></p>
<p>Teoría: Qué es HCI, sketching e ideación (Bill Buxton), paradigmas de interacción, estilos de interacción e interfaces (gráficas, tangible, móvil, robótica, táctil, agentes inteligentes, etc), ergonomía de interfaces.</p>
<p>Práctica: bocetaje de interfaces, elaboración de interfaces y escenarios animados.</p>
<p>Objetivo: Qué el alumnos conozca sobre interacción y adquiera la capacidad de imaginar y luego bocetar y aprender a presentar y vender sus ideas.</p>
<p>________________________________________________</p>
<p><strong>* Diseño de Interacción Humano Computadora II</strong></p>
<p>Teoría: Continuar con los temas de estilos de interacción en intefaces (visualización de datos, interfaces hápticas, etc).</p>
<p>Práctica: bocetaje de interfaces, elaboración de interfaces y escenarios animados.</p>
<p>Objetivo: Qué el alumnos conozca sobre interacción y adquiera la capacidad de imaginar y luego bocetar y aprender a presentar y vender sus ideas.</p>
<p>________________________________________________</p>
<p><strong>* Evaluación de Interfaces</strong></p>
<p>Teoría: Pruebas de usabilidad, Ingeniería Semiótica, Grupos Focales.</p>
<p>Práctica: Aplicar una prueba de usabilidad, protocolos y métodos para aplicarse en pruebas de usabilidad, pruebas de comunicabilidad (de la Ingeniería Semiótica), realizar un focus group.</p>
<p>Objetivo: Saber llevar a cabo una evaluación, cómo podría ser documentada, cómo recopilar datos y analizarlos, hacer reporte para propuestas de mejoras.</p>
<p><span style="color: #000080;">Web ==========================================</span></p>
<p><strong> * Diseño web</strong></p>
<p>Teoría: Aprender conceptos de Internet, entender qué es web semántica, qué es separar contenido de presentación, usabilidad para web, prototipeo en papel de sitios web, arquitectura de inforamción para web, etc.</p>
<p>Práctica: XHTML y CSS.</p>
<p>Objetivo: Crear un sitio web estático con buena retícula y arquitectura de información.</p>
<p>________________________________________________</p>
<p><strong> * Aplicaciones Web I</strong></p>
<p>Teoría: Interacción en web, diseño de formas/formularios.</p>
<p>Práctica: JavaScript, AJAX y librerías para web interactiva (JQuery, Mootools, etc).</p>
<p>Objetivo: Crear sitios interactivos y con validaciones en formularios, menúes, etc.</p>
<p>________________________________________________</p>
<p><strong>* Aplicaciones Web II</strong></p>
<p>Teoría: Conceptos de Base de Datos, Scripting en servidores, servicos web, etc.</p>
<p>Práctica: PHP, MySQL, desarrollo en .net.</p>
<p>Objetivo: Crear un sitio web dinámico.</p>
<p>________________________________________________</p>
<p><strong>* Aplicaciones Móviles</strong></p>
<p>Teoría: Diseño de interacción para móviles.</p>
<p>Práctica: XHTML, CSS, JavaScript, AJAX, JQuery, PHP, MySQL, e introdución a plataformas de desarrollo para móviles como Java ME y Objective-C.</p>
<p>Objetivo: Realizar una aplicación web para móviles de forma que se den cuenta que no es lo mismo para pantalla.</p>
<p><span style="color: #000080;">Videojuegos ==========================================</span></p>
<p><strong> * Diseño Videojuegos para la Red</strong></p>
<p>Teoría: Diseño de videojuegos, aplicación de los videojuegos en entretenimiento, capacitación, investigación y ciencia, industria.</p>
<p>Práctica: Aplicar animación, diseño de interacción humano computadora y programación orientada a objetos en el proyecto.</p>
<p>Objetivo: Elaborar un juego de video basado en un browser.</p>
<p>________________________________________________</p>
<p><strong>* Diseño de Videojuegos para Consola</strong></p>
<p>Teoría: Lenguaje de programación para una consola.</p>
<p>Práctica: Conocer y aprender lo básico de un lenguaje nativo de una consola.</p>
<p>Objetivo: Lograr ejecutar (quizá mendiante un emulador) lo que se vería en un juego de consola de cierta marca.</p>
<p>________________________________________________</p>
<p><strong> * Diseño de Videojuegos para Móviles</strong></p>
<p>Teoría: Repaso de un lenguaje de programación nativo para un móvil (Java ME u Objective-C).</p>
<p>Práctica: Programar y diseñar para una plataforma móvil.</p>
<p>Objetivo:Poner en práctica lo aprendido de programación y elaborar un prototipo de juego para móvil no basado en browser.</p>
<p><span style="color: #000080;">Interacción física ==========================================</span></p>
<p><strong> * Elaboración de prototipos electrónicos</strong></p>
<p>Teoría: Introducción al cómputo físico.</p>
<p>Práctica: Elaborar prototipos físicos (con Arduino o alguna plataforma similar).</p>
<p>Objetivo: Fomentar el pensamiento creativo a través de la elaboración de prototipos físicos interactivos.</p>
<p>________________________________________________</p>
<p><strong>* Interacción física</strong></p>
<p>Teoría: Complentar conceptos de cómputo físico e interacción tangible.</p>
<p>Práctica:  Elaborar prototipos físicos y aplicar diseño industrial.</p>
<p>Objetivo: Elaborar un prototipo de cómputo que resuelva un problema del mundo real.</p>
<p><span style="color: #ff6600;"><strong><span style="color: #000000;"><span style="font-weight: normal;"><br />
</span></span></strong></span></p>
]]></content:encoded>
			<wfw:commentRss>http://tzek-design.com/blog/2010/11/30/ideas-sobre-la-educacion-en-diseno-de-interaccion/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>Logo del Catálogo Colectivo de Marcas de Fuego</title>
		<link>http://tzek-design.com/blog/2010/11/25/logo-del-catalogo-colectivo-de-marcas-de-fuego/</link>
		<comments>http://tzek-design.com/blog/2010/11/25/logo-del-catalogo-colectivo-de-marcas-de-fuego/#comments</comments>
		<pubDate>Thu, 25 Nov 2010 20:17:27 +0000</pubDate>
		<dc:creator>Tzek</dc:creator>
				<category><![CDATA[Diseño Gráfico]]></category>
		<category><![CDATA[Métodos y proceso de diseño]]></category>
		<category><![CDATA[Tertulias]]></category>
		<category><![CDATA[biblioteca lafragua]]></category>
		<category><![CDATA[buap]]></category>
		<category><![CDATA[catálogo colectivo de marcas de fuego]]></category>
		<category><![CDATA[ciria]]></category>
		<category><![CDATA[colores]]></category>
		<category><![CDATA[diseño]]></category>
		<category><![CDATA[diseño de identidad]]></category>
		<category><![CDATA[Diseño Web]]></category>
		<category><![CDATA[firebrand]]></category>
		<category><![CDATA[firemark]]></category>
		<category><![CDATA[franciscana]]></category>
		<category><![CDATA[identidad]]></category>
		<category><![CDATA[imagen]]></category>
		<category><![CDATA[Logo]]></category>
		<category><![CDATA[m]]></category>
		<category><![CDATA[marca de fuego]]></category>
		<category><![CDATA[métodos y procesos de diseño]]></category>
		<category><![CDATA[Profesión]]></category>
		<category><![CDATA[propuesta]]></category>
		<category><![CDATA[proyecto]]></category>
		<category><![CDATA[símbolo]]></category>
		<category><![CDATA[udlap]]></category>
		<category><![CDATA[visual]]></category>

		<guid isPermaLink="false">http://tzek-design.com/blog/?p=1203</guid>
		<description><![CDATA[El proyecto del Catálogo Colectivo de Marcas de Fuego, fundado por la UDLAP (a través del CIRIA y la Biblioteca Franciscana) y la BUAP (a través de la Biblioteca Lafragua), es una iniciativa para que dichas instituciones y cualquier otra que quiera incorporarse al proyecto, puedan publicar el tipo de marcas de fuego que tienen [...]]]></description>
			<content:encoded><![CDATA[<p>El proyecto del <strong>Catálogo Colectivo de Marcas de Fuego</strong>, fundado por la <a title="http://www.udlap.mx" href="http://www.udlap.mx">UDLAP</a> (a través del <a title="http://ciria.udlap.mx" href="http://ciria.udlap.mx">CIRIA</a> y la <a title="http://ciria.udlap.mx/franciscana/" href="http://ciria.udlap.mx/franciscana/">Biblioteca Franciscana</a>) y la <a title="http://www.buap.mx/" href="http://www.buap.mx/">BUAP</a> (a través de la <a title="http://www.lafragua.buap.mx/" href="http://www.lafragua.buap.mx/">Biblioteca Lafragua</a>), es una iniciativa para que dichas instituciones y cualquier otra que quiera incorporarse al proyecto, puedan publicar el tipo de marcas de fuego que tienen en sus fondos antiguos.</p>
<blockquote><p>La marca de fuego se define como una señal carbonizada colocada principalmente en los cantos de los libros mediante un instrumento metálico candente. A la fecha se valora como un testimonio histórico distintivo que permite identificar a las instituciones y particulares que se valieron de ellas; como evidencia de haber sido los poseedores de ciertas colecciones bibliográficas. [Catálogo Colectivo de Marcas de Fuego, 2010].</p></blockquote>
<p><img class="alignnone size-full wp-image-1205" title="librosconmarcasdefuego" src="http://tzek-design.com/blog/wp-content/uploads/2010/11/librosconmarcasdefuego.jpg" alt="librosconmarcasdefuego" width="500" height="274" /></p>
<p>Aunque las marcas de fuego resultan interesantes, por lo mismo de su aplicación, muchas pueden notarse como monogramas de trazos simples – "cuasi serifos" por decirlo así. Los que formamos el comité del proyecto, consideramos en cierto momento asociar la identidad visual con una "marca de fuego particular". Sin embargo, decidimos que sería mejor una solución que evoque a "algo antiguo" sin caer en la obviedad de la marca, considerando la morfología tipográfica como elemento distintivo.</p>
<blockquote><p>Y es que el asunto fuerte de la marca: es lograr su construcción de forma que sea armoniosa y aplicable como símbolo de una identidad visual.</p></blockquote>
<p>Unas muy buenas referencias que conseguimos fue de "Escuela Paleográfica" de AndresMerino de Jesucrito, libro que data de 1780. Miembros del comité propusieron que la 'M' y la 'F' deberían tener un carácter protagónico, funcionando como "símbolo" dentro del imagotipo, convirtiéndose de ser posible en una fusión de 'MF' por "Marcas de Fuego".</p>
<p><img class="alignnone size-full wp-image-1212" title="lamina001" src="http://tzek-design.com/blog/wp-content/uploads/2010/11/lamina0011.jpg" alt="lamina001" width="560" height="471" /></p>
<p><img class="alignnone size-full wp-image-1213" title="lamina002" src="http://tzek-design.com/blog/wp-content/uploads/2010/11/lamina0021.jpg" alt="lamina002" width="560" height="471" /></p>
<p><img class="alignnone size-full wp-image-1214" title="lamina003" src="http://tzek-design.com/blog/wp-content/uploads/2010/11/lamina0031.jpg" alt="lamina003" width="560" height="471" /></p>
<p><img class="alignnone size-full wp-image-1215" title="lamina004" src="http://tzek-design.com/blog/wp-content/uploads/2010/11/lamina004.jpg" alt="lamina004" width="560" height="471" /></p>
<p><img class="alignnone size-full wp-image-1220" title="lulu01" src="http://tzek-design.com/blog/wp-content/uploads/2010/11/lulu01.jpg" alt="lulu01" width="460" height="259" /></p>
<p><img class="alignnone size-full wp-image-1221" title="omi01" src="http://tzek-design.com/blog/wp-content/uploads/2010/11/omi01.jpg" alt="omi01" width="460" height="222" /></p>
<p><img class="alignnone size-full wp-image-1224" title="meche01" src="http://tzek-design.com/blog/wp-content/uploads/2010/11/meche01.jpg" alt="meche01" width="460" height="206" /></p>
<p><img class="alignnone size-full wp-image-1223" title="meche02" src="http://tzek-design.com/blog/wp-content/uploads/2010/11/meche02.jpg" alt="meche02" width="460" height="355" /></p>
<p><img class="alignnone size-full wp-image-1222" title="Meche03" src="http://tzek-design.com/blog/wp-content/uploads/2010/11/Meche03.jpg" alt="Meche03" width="460" height="386" /></p>
<p>Una vez determinada la "MF" seleccionada, mi participación activa, estuvo en el ajuste de las curvas y la presentación de diferentes arreglos con la propuesta. Mi aprendizaje en este proceso fue cuidar esa sensación caligráfica, resaltar que la 'M' efectivamente es una 'M' e incorporar ese detalle que evoca al gancho de una 'F', entender cómo es el ritmo en los trazos y dónde es necesario romper las reglas.</p>
<p>Esta es la presentación que presenté al comité de dicho proceso:</p>
<div id="__ss_5908351" style="width: 425px;"><strong><a title="Propuesta de logo para Catálogo" href="http://www.slideshare.net/Tzek/propuesta-de-logo-para-catlogo">Propuesta de logo para Catálogo</a></strong><object id="__sse5908351" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="500" height="418" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><param name="src" value="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=propuestas-logo-ccmf-101125100210-phpapp02&amp;stripped_title=propuesta-de-logo-para-catlogo&amp;userName=Tzek" /><param name="name" value="__sse5908351" /><param name="allowfullscreen" value="true" /><embed id="__sse5908351" type="application/x-shockwave-flash" width="425" height="355" src="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=propuestas-logo-ccmf-101125100210-phpapp02&amp;stripped_title=propuesta-de-logo-para-catlogo&amp;userName=Tzek" name="__sse5908351" allowscriptaccess="always" allowfullscreen="true"></embed></object></p>
<div style="padding:5px 0 12px">View more <a href="http://www.slideshare.net/">presentations</a> from <a href="http://www.slideshare.net/Tzek">Omar Sosa Tzec</a>.</div>
</div>
<p>El arreglo que seleccionamos al final fue el siguiente:</p>
<p><img class="alignnone size-full wp-image-1218" title="logo-ccmf" src="http://tzek-design.com/blog/wp-content/uploads/2010/11/logo-ccmf.jpg" alt="logo-ccmf" width="460" height="125" /></p>
<p>Con esta experiencia tuve la oportunidad de analizar y ver la <strong>riqueza de los trazos caligráficos</strong>. Es difícil expresar la <em>exquisitez</em> de un trazo, pero creo ahora que cuando conectas mentalmente cómo era la "punta" de la pluma más la forma del trazo, puedes tener una idea de cómo se da la fluidez en la mano y muñeca durante la escritura (sobretodo en mi caso que me considero un neófito caligráfico), lo cual hace que disfrutes y aprecies esta habilidad.</p>
<p>En cuanto a la <em>parte humana</em> del proceso, confirmé este asunto de que al ser el diseño visual una capacidad sustentada en la alfabetización visual (por lo que vemos) y posible de ejecutar prácticamente por cualquiera (porque al menos podemos manipular una herramienta de trazo o escritura), es natural que todos quieran anteponer su punto de vista sobre cómo debería ser un logo. Lo interesante aquí es escuchar y entender qué se comenta, por qué se comenta y reconocer el alcance o límite del conocimiento en el que se basan los comentarios/toma de decisiones; y aún más, que al trabajar en comité, la <strong>democracia</strong> juega un papel fundamental para llegar a acuerdos y concluir con los objetivos.</p>
]]></content:encoded>
			<wfw:commentRss>http://tzek-design.com/blog/2010/11/25/logo-del-catalogo-colectivo-de-marcas-de-fuego/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>De arquitectura de información, wireframes y discusión entre expertos</title>
		<link>http://tzek-design.com/blog/2010/08/16/de-arquitectura-de-informacion-wireframes-y-discusion-entre-expertos/</link>
		<comments>http://tzek-design.com/blog/2010/08/16/de-arquitectura-de-informacion-wireframes-y-discusion-entre-expertos/#comments</comments>
		<pubDate>Mon, 16 Aug 2010 17:53:01 +0000</pubDate>
		<dc:creator>Tzek</dc:creator>
				<category><![CDATA[Diseño de Información]]></category>
		<category><![CDATA[Diseño de Interacción]]></category>
		<category><![CDATA[Diseño de Interfaces]]></category>
		<category><![CDATA[Diseño Web]]></category>
		<category><![CDATA[Métodos y proceso de diseño]]></category>
		<category><![CDATA[Profesión]]></category>
		<category><![CDATA[Reflexión]]></category>
		<category><![CDATA[Tertulias]]></category>
		<category><![CDATA[arquitectura de información]]></category>
		<category><![CDATA[catálogo colectivo]]></category>
		<category><![CDATA[discusión]]></category>
		<category><![CDATA[diseño]]></category>
		<category><![CDATA[diseño de contenidos]]></category>
		<category><![CDATA[dummy]]></category>
		<category><![CDATA[estructura navegacional]]></category>
		<category><![CDATA[etiquetado]]></category>
		<category><![CDATA[impreso]]></category>
		<category><![CDATA[jesuita]]></category>
		<category><![CDATA[labeling]]></category>
		<category><![CDATA[marca agustina]]></category>
		<category><![CDATA[marca franciscana]]></category>
		<category><![CDATA[marca jesuita]]></category>
		<category><![CDATA[marca orden secular]]></category>
		<category><![CDATA[marcas de fuego]]></category>
		<category><![CDATA[marco alambrado]]></category>
		<category><![CDATA[navegación]]></category>
		<category><![CDATA[página web]]></category>
		<category><![CDATA[papel]]></category>
		<category><![CDATA[proceso de diseño]]></category>
		<category><![CDATA[retícula web]]></category>
		<category><![CDATA[sato]]></category>
		<category><![CDATA[toma de decisiones]]></category>
		<category><![CDATA[wireframe]]></category>

		<guid isPermaLink="false">http://tzek-design.com/blog/?p=1145</guid>
		<description><![CDATA[Este post expresa una experiencia similar a la descrita en "El prototipo como herramienta de discusión/diseño", solo que en esta ocasión decidí acudir al wireframe como parte de las herramientas de discusión para que entienda qué debo diseñar de un sitio web, no sólo de su contenido, sino también cómo resulta válida su arquitectura. Fui [...]]]></description>
			<content:encoded><![CDATA[<p>Este post expresa una experiencia similar a la descrita en "<a title="http://tzek-design.com/blog/2007/10/02/el-prototipo-como-herramienta-de-discusiondiseno/" href="http://tzek-design.com/blog/2007/10/02/el-prototipo-como-herramienta-de-discusiondiseno/">El prototipo como herramienta de discusión/diseño</a>", solo que en esta ocasión decidí acudir al <em>wireframe</em> como parte de las herramientas de discusión para que entienda qué debo diseñar de un sitio web, no sólo de su contenido, sino también cómo resulta válida su arquitectura.</p>
<p>Fui invitado a participar en un proyecto sobre un catálogo en línea de un tema del que desconocía todo. En este caso, la gestión de dicho catálogo es posible gracias a un sistema en el que trabaja una colega Ingeniera en Sistemas. En realidad mi participación original era sólo para elaborar un <em>front page</em>, lo cual desde mi punto de vista <em>ya no se estila</em>. Comenté en su momento que <em>el home debe ser más que una carátula con un vínculo</em> hacia un catálogo (lo cual a mi juicio rompe con la consistencia navegacional). Debería ser un punto de partida a la tarea principal del usuario (<em>i.e.</em> navegar el catálogo) o hacia otras tareas que requieran (como en este caso) el consumo de información textual nada más. Pues bien, aunque mi participación no involucra algo complejo como la gestión misma del catálogo, en parte confieso que es un esfuerzo para hacerme más divertido el trabajo.</p>
<p><img class="alignnone size-full wp-image-1147" title="Boceto de propuesta de home en vez de una carátula simple." src="http://tzek-design.com/blog/wp-content/uploads/2010/08/boceto-wireframe.jpg" alt="Boceto de propuesta de home en vez de una carátula simple." width="467" height="350" /></p>
<p>Entonces, en vez hacer un prototipo de baja fidelidad (<em>i.e.</em> el <em>mockup a la photoshop</em>), después de oir en juntas y con mi colega cómo funcionaría el catálogo, idear una arquitectura realmente simple (adecuada en este proyecto) y realizar un boceto que después se convertiría en un <em>wireframe</em>.</p>
<p><img class="alignnone size-full wp-image-1152" title="Close-up del wireframe" src="http://tzek-design.com/blog/wp-content/uploads/2010/08/wireframe-closeup.jpg" alt="Close-up del wireframe" width="490" height="289" /></p>
<p>Estos han sido algunos puntos derivados de esta experiencia:</p>
<p><strong>El papel todo aguanta.</strong> Los cambios son fáciles de "realizar" durante la discusión en las juntas. Basta con "rayar" directamente sobre el papel.</p>
<p><img class="alignnone size-full wp-image-1148" title="Resultado de los primeros cambios discutidos en junta." src="http://tzek-design.com/blog/wp-content/uploads/2010/08/wirerame-rayado.jpg" alt="Resultado de los primeros cambios discutidos en junta." width="375" height="500" /></p>
<p><strong>Discusión sobre contenidos y navegación</strong>. Que se tenga sólo un <em>wireframe</em> frío sí evita que las discusiones se vayan a aspectos gráficos como los colores o la estética.</p>
<p><strong>Aprender sobre el tema escuchando.</strong> Dado que la mayoría del equipo son los expertos sobre el tema, suelen expresarse con la terminología adecuada y también tener una idea muy marcada de cómo les gustaría que se diera el proyecto. Es conveniente escuchar y preguntar de vez en cuando, al menos para cuestionar la decisiones, tomando en cuenta que lo importante es <em>"si le funciona esa idea/decisión al usuario"</em>.</p>
<p><img class="alignnone size-full wp-image-1150" title="Wireframes impresos para discutir la arquitectura y contenido de las secciones, más allá el home." src="http://tzek-design.com/blog/wp-content/uploads/2010/08/wireframes-mesa.jpg" alt="Wireframes impresos para discutir la arquitectura y contenido de las secciones, más allá el home." width="490" height="296" /></p>
<p><strong>Una arquitectura </strong><em><strong>orgánica</strong></em><strong> se puede generar a partir una discusión de expertos.</strong> En casos donde la navegación parece sencilla, con <em>wireframe</em> en la mano, se puede ir determinando el esquema de navegación global y local mediante discusión. Esto provoca que los mismos expertos realicen el <em>labeling</em>. Aún más, te permite replantear en la cabeza, como diseñador, el acomodo "visual" de la misma información, conforme se va escuchando lo discutido en las juntas.</p>
<p><img class="alignnone size-full wp-image-1151" title="&quot;Mapa de navegación&quot; final." src="http://tzek-design.com/blog/wp-content/uploads/2010/08/wireframe-replanteado.jpg" alt="&quot;Mapa de navegación&quot; final." width="375" height="500" /></p>
<p>Ya falta entonces, armar el <em>look and feel</em> para la interfaz, comenzar a ensamblar las páginas <em>estáticas</em> y la integración con las páginas <em>dinámicas</em> generadas a partir del sistema seleccionado. Veamos cómo sale. Saludos <img src='http://tzek-design.com/blog/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
]]></content:encoded>
			<wfw:commentRss>http://tzek-design.com/blog/2010/08/16/de-arquitectura-de-informacion-wireframes-y-discusion-entre-expertos/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>

