<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" media="screen" href="/~d/styles/rss2full.xsl"?><?xml-stylesheet type="text/css" media="screen" href="http://feeds.feedburner.com/~d/styles/itemcontent.css"?><rss xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0" version="2.0">
   <channel>
      <title>Mark MacKay - Portafolio</title>
      <link>http://mark.com.mx/</link>
      <description><![CDATA[Portafolio de Mark MacKay 

El dise&ntilde;o es una disciplina que me apasiona, ya que estamos en 
          contacto directamente con &eacute;l desde que despertamos y buscamos 
          el bot&oacute;n de snooze hasta el momento en que programamos 
          la televisi&oacute;n para que nos arrulle antes de dormir. A lo largo 
          de mi carrera profesional y estudiantil he tenido la oportunidad de 
          trabajar en aspectos muy variados del dise&ntilde;o; en disciplinas 
          &quot;tradicionales&quot; como cartel, editorial y empaque, as&iacute; 
          como en aplicaciones recientes (new media) como cd's interactivos 
          y dise&ntilde;o web
          
          Un dise&ntilde;ador siempre deber&aacute; tener una visi&oacute;n 
          amplia del mundo, debe de ser curioso pero racional por naturaleza. 
          Esto le es &uacute;til cuando se involucra con clientes 
          cuyos ramos puede no conocer en lo absoluto, y deber&aacute; educarse 
          minuciosamente acerca todos los aspectos de su cliente y de los clientes 
          de su cliente.
          
          Para conocer m&aacute;s acerca de mi trayectoria escolar y profesional, 
          puedes consultar mi curr&iacute;culum vitae, 
          pero si quieres algo m&aacute;s informal y extenso puedes ver tambi&eacute;n 
          qui&eacute;n es Mark. Si tienes alguna duda 
          o comentario, puedes contactarme.
		  
		  ]]></description>
      <language>en</language>
      <copyright>Copyright 2008</copyright>
      <lastBuildDate>Sun, 04 Mar 2007 21:15:24 -0600</lastBuildDate>
      <generator>http://www.sixapart.com/movabletype/?v=3.34</generator>
      <docs>http://blogs.law.harvard.edu/tech/rss</docs> 

            <atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="self" href="http://feeds.feedburner.com/MarkMackay" type="application/rss+xml" /><item>
         <title>Diseño Editorial</title>
         <description><![CDATA[<h2>Planas imitanto el periódico Reforma</h2>
<h3>Cliente</h3>
<p>Proyecto escolar</p>

<h3>Programas utilizados</h3>
<p>InDesign, Photoshop e Illustrator.</p>

<h3>Descripción</h3>
<p>Distintos ejercicios para la clase de diseño editorial.</p>

<p><img alt="baghdad.jpg" src="http://mark.com.mx/baghdad.jpg" width="540" height="820" /></p>
<p><img alt="belleza.jpg" src="http://mark.com.mx/belleza.jpg" width="540" height="820" /></p>
<p><img alt="buenamesa.jpg" src="http://mark.com.mx/buenamesa.jpg" width="540" height="820" />
</p>
<p><img alt="ciudad.jpg" src="http://mark.com.mx/ciudad.jpg" width="540" height="824" /></p>

<h2>Sección de deportes </h2>
<h3>Cliente</h3>
<p>Proyecto escolar</p>

<h3>Programas utilizados</h3>
<p>InDesign, Photoshop e Illustrator.</p>

<h3>Descripción</h3>
<p>Una plana de la sección deportiva de un periódico hipotético. Mi objetivo al realizar este trabajo (independientemente de los objetivos del profesor) era condensar la mayor cantidad de información posible, evitando causar caos. Toda la información utilizada fue real, a fin de que los <em>datos</em> le dieran forma a la información, y no el capricho de la mano del diseñador.</p>

<p><img alt="plana.jpg" src="http://www.duopixel.com/mark/images/plana.jpg" width="460" height="707" /></p>

<h2>Manual de operación de equipo generador de ozono </h2>

	<h3>Clientes </h3>
	<p>
Ozonia, Ltd. y Ozono Polaris, S.A. de C.V. 
</p>


	<h3>Problema: </h3>
	<p>
Traducir manual de operación de Ozonia Ltd. para la distribución en México por parte de <a href="http://www.ozonopolaris.com" target="_blank">Ozono Polaris </a>
</p>

	
	<h3>Solución: </h3>
	<p>
Mantener el diseño original modificando el layout para dar cabida al engargolado y a la impresión en dos caras (en espejo). El manual original es físico, no original, así que se tuvo que recrear en InDesign. 
</p>

	<h3>Programas utilizados: </h3>
	<p>
InDesign, Photoshop e Illustrator. 
</p>

	<h3>Conocimientos utilizados: </h3>
	<p>
Lingüística y editorial
</p>

	<p>
<strong>Fecha de inicio:</strong>
	marzo 2003 <br />
	<strong>Fecha de terminación:</strong> junio 2003 <br />
</p>
<p><img src="images/ozono.gif" alt="" width="425" height="538" border="0" /></p>
	<h2>Peri&oacute;dico escolar</h2> 

                <h3>Comentarios: </h3>
             <p>Este fue un concurso para el redise&ntilde;o del peri&oacute;dico 
                institucional de la UDLA-P, donde participamos los alumnos de 
                las clases de dise&ntilde;o de informaci&oacute;n. Todo el contenido 
                y el dise&ntilde;o estuvo bajo nuestro criterio, teniendo como 
                cliente al editor, Ramiro Gonz&aacute;lez. Al final del curso 
                se tom&oacute; la decisi&oacute;n de tomar las mejores ideas de 
                cada propuesta y el dise&ntilde;ador <em>in-house </em>del departamento 
                de publicaciones las integrar&iacute;a en un dise&ntilde;o nuevo.</p>
                <p><img src="images/editorial.jpg" alt="Propuesta Peri&oacute;dico  Gaceta" width="460" height="450" border="0" class="eso" /></p>

]]></description>
         <link>http://feedproxy.google.com/~r/MarkMackay/~3/yqe_Wk7G-sw/editorial.html</link>
         <guid isPermaLink="false">http://mark.com.mx/editorial.html</guid>
         <category>Diseño 2D</category>
         <pubDate>Sun, 04 Mar 2007 21:15:24 -0600</pubDate>
      <feedburner:origLink>http://mark.com.mx/editorial.html</feedburner:origLink></item>
            <item>
         <title>Taza-empaque</title>
         <description><![CDATA[<h2>Taza-empaque de Nescafé</h2>

<p><strong>Tarea:</strong> rediseñar el envase de Nescafé. ¿Qué tanto se le puede hacer a un simple frasco? A decir verdad, un frasco funciona bien.</p>

<p>Pero luego logramos sacar una solución: buscando qué otros usos se les da a los envases ya vacíos, como guardar especias, comida sobrante, y demás, recordamos los envases del "Mole Doña María". Para los no familiarizados con el mole, y en especial el envase, no es más que un vaso lleno de mole, un menjurge delicioso hecho de chile y chocolate. Una vez vacío, el envase es un vaso más.</p>

<p>Todos coincidimos en que tenemos una vajilla "oficial", la bonita que sacamos cuando hay visitas. Pero cuando estamos en la comodidad de la soledad familiar, sacamos los vasos que nos robamos del antro, los que nos dieron de recuerdo de quince años, y demás. Yo en lo particular tiendo a evitar lavar los trastes, por lo que termino tomando desde envases de yogurth y latas de frijoles vacías.</p>

<p>Y bien, la solución era obvia: de dónde tomas café mas que de una taza (o un termo!).</p>

<p><img alt="11.jpg" src="http://mark.com.mx/11.jpg" width="540" height="400" />
</p>

<p>Ahora, la solución no era la cosa más sencilla, el café tiene que ir bien sellado para que no pierda su sabor y una tapa normal de frasco dejaría el bajo relieve de las cuerdas en la superficie de la taza. Esto molestaría al tomar café. Así que la solución fue meter las cuerdas <strong>por adentro</strong> de la taza mediante esta tapa especial fabricada con estireno y cloroformo.</p>
]]></description>
         <link>http://feedproxy.google.com/~r/MarkMackay/~3/bJlNkFX59fc/tazaempaque.html</link>
         <guid isPermaLink="false">http://mark.com.mx/tazaempaque.html</guid>
         <category>Diseño 3D</category>
         <pubDate>Sun, 04 Mar 2007 19:07:29 -0600</pubDate>
      <feedburner:origLink>http://mark.com.mx/tazaempaque.html</feedburner:origLink></item>
            <item>
         <title>Mochila</title>
         <description><![CDATA[<h2>Mochila</h2>

<p><strong>El problema</strong>: Ya pasó la época de los llaveritos, mouse-pads, encendedores, plumas y demás tonterías que te regalan las empresas. Aprovechando que en el ejercicio anterior había realizado productos relacionados con el estudio y el trabajo, propusé una mochila diseñada específicamente para un usuario universitario. Como la mayoría de los estudiantes éramos pobres, una mochila es un producto útil que te ahorra algunos billetes para cosas más útiles (como cerveza).</p>

<p><strong>Problema 1:</strong> ¿Cómo cargar la mochila?<br />
Platicamos un rato en la clase respecto a las mochilas, tenía el gran beneficio de tener a quince posibles usuarios enfrente. Sin embargo, las preferencias de cada uno variaban mucho. Unos preferían las mochilas cruzadas, otros las de dos tirantes, y luego otros preferían cargarla con un tirante. </p>

<p><strong>Problema 2:</strong> ¿Rígida o aguada?<br />
Unos compañeros se quejaban de que las mochilas aguadas maltrataban las libretas, otros se quejaban de que las mochilas para laptop eran muy cuadradas y ñoñas.</p>

<p><strong>Problema 3:</strong> Los robos<br />
Comentamos que era muy común que te sacaran cosas de la mochila, en especial de las bolsas delanteras, donde frecuentemente cargas el celular, la cartera, o el reproductor de mp3.</p>

<p><strong>Problema 4:</strong> El estorbo<br />
Soy un usuario asiduo del camión gracias a mi carencia de automóvil. Cuando ya no hay lugar y vas parado en el camión pocas personas tienen la delicadeza de quitarse la mochila para que pase la gente. Y son unas mochilas enormes que abarcan casi todo el pasillo. Anteriormente pedía permiso para pasar, pero he llegado a la conclusión que si no pueden tener la educación de quitarse la mochila, yo tampoco voy a tener la educación de pedir permiso. Así que paso como Juan por su casa llevándome a la persona conmigo. Es uno de esos pequeños detalles que me vuelven loco.</p>

<p><strong>Ahora, las soluciones:</strong></p>

<p><img alt="5.jpg" src="http://mark.com.mx/5.jpg" width="540" height="332" /></p>

<p><strong>Solución 1:</strong> Tirantes multiusos<br />
Aquí arribita pueden observar que la mochila tiene un cierre por el medio, esto te permite dividir los tirantes en dos o en uno. Abajo pueden observar cómo se usa cada solución. Para encontrar esta solución me di una vuelta por donde venden mochilas y encontré unas de mujer de tirantes delgados (horrendas mochilas por cierto). Realmente no funcionan de la misma manera, pero me dio la idea de poder dividir el tirante en dos.</p>

<p><img alt="6.jpg" src="http://mark.com.mx/6.jpg" width="541" height="443" />
</p>

<p>Sin embargo, el poder usar la mochila de una manera o de otra introduce un segundo problema: si quieres usar la mochila de una manera o de otra tienes que ajustar los tirantes. Esto normalmente se hace con hebillas, pero a mi me molestan, luego se aprietan demasiado y es difícil hacer el ajuste. Así que me decidí por velcro.</p>

<p><img alt="7.jpg" src="http://mark.com.mx/7.jpg" width="541" height="409" /></p>

<p><strong>Solución 2 y 3:</strong> Los robos y la rigidez<br />
Una solución posible era hacerle la vida difícil a los ratas e idear una especie de seguro que tuviera truco para abrir, pero el hacerlo difícil para un desconocido también lo haría difícil para el dueño de la mochila. Así que mejor metí la bolsa adentro, y facilité la salida de los audífonos.</p>

<p>El problema de las mochilas cuadradas y ñoñas vs las mochilas que maltratan libretas lo resolvi con un soporte plástico semi-rígido que va desde el fondo de la mochila hasta la espalda. Hay unas mochilas muy duras que parecen caparazón de tortuga ninja, me dicen que son muy cómodas. En la foto el material parece muy suave, y lo es porque no encontré algún material que se ajustara a mis necesidades. Pero imagínenselo rígido!</p>

<p> <img alt="8.jpg" src="http://mark.com.mx/8.jpg" width="542" height="365" />
</p>

<p>Ok, el último problema <strong>Solución 4:</strong> El maldito estorbo<br />
Bien, pues la solución es lógica. Evitamos que la mochila sea demasiado ancha, así el que no se la quiera quitar en el camión al menos no estorba demasiado.</p>

<p><img alt="9.jpg" src="http://mark.com.mx/9.jpg" width="540" height="322" /></p>

]]></description>
         <link>http://feedproxy.google.com/~r/MarkMackay/~3/MbLj3rnuHvE/mochila.html</link>
         <guid isPermaLink="false">http://mark.com.mx/mochila.html</guid>
         <category>Diseño 3D</category>
         <pubDate>Sun, 04 Mar 2007 18:55:16 -0600</pubDate>
      <feedburner:origLink>http://mark.com.mx/mochila.html</feedburner:origLink></item>
            <item>
         <title>Post-its</title>
         <description><![CDATA[<h2>Post-its separadores</h2>
<p><strong>Cliente:</strong> proyecto escolar</p>
<p>El profesor puso una limitante muy interesante: teníamos que hacer un producto bi-dimensional que no debía de ser tirado a la basura. Pensé en el contexto en el que tomas café: en un restaurant platicando con algún amigo, en el trabajo, mientas estudias... Y luego ¿en qué contexto tomas café desde un termo? En el trabajo y en el estudio ciértamente. Ahora, ¿qué producto bi-dimensional te puede ayudar en este contexto? Nada más útil que los post-its. Así que idee esta especie de separadores de libros combinados con post-its que te sirvan para hacer anotaciones sobre ese libro de la biblioteca o sobre ese documento importante en el trabajo.</p>

<p><img alt="3.jpg" src="http://blog.duopixel.com/images/3.jpg" width="550" height="300" /></p>

<p><img alt="4.jpg" src="http://blog.duopixel.com/images/4.jpg" width="550" height="300" /></p>

<p>Están codificados por colores para que tú hagas tu propia categorización. En el ejemplo anterior los usé para indicar (con verde) dónde debes comenzar a copiar y (con rojo) dónde debes terminar, pero en realidad tú haces tu propia clasificación. En una oficina podrías usar el verde para indicar documentos listos, el naranja para correcciones y el rojo para documentos fatales, y hacer anotaciones sobre el área amarilla.</p>
]]></description>
         <link>http://feedproxy.google.com/~r/MarkMackay/~3/H6irjIeGfxg/postits.html</link>
         <guid isPermaLink="false">http://mark.com.mx/postits.html</guid>
         <category>Diseño 2D</category>
         <pubDate>Sun, 04 Mar 2007 18:32:33 -0600</pubDate>
      <feedburner:origLink>http://mark.com.mx/postits.html</feedburner:origLink></item>
            <item>
         <title>Thermo</title>
         <description><![CDATA[<h2>Thermo de Nescafé</h2>

<p><strong>Cliente:</strong> proyecto escolar.</p>

<p>La gran ventaja de un thermo (el mantener el café caliente por un largo rato) también es su mayor desventaja: el aislamiento térmico también es un aislamiento sensorial. Cuando tomas café desde una taza, sabes lo caliente que está por la temperatura y lo humeante de la taza. Cuando tomas café desde un termo, no tienes manera de saberlo (hasta que te quemas). Y el problema se agrava porque un termo mantiene el café muy caliente por bastante tiempo. <strong>Problema 1:</strong> aislamiento sensorial.</p>

<p>El termo tiene un mango. En teoría, la función del mango debería de ser para tomar el café cómodamente sin quemarte. Sin embargo, en un termo como este el aislamiento es tal que a duras penas puedes sentir diferencia alguna cuando el café está caliente a cuando está frío. Si observamos con detenimiento, el mango sólo existe en tarros y en tazas para no entrar en contacto con el frío o el calor. Los vasos no tienen mango porque símplemente es más fácil manipular el vaso directamente. Las jarras tienen mangos o asas porque es más fácil manipularlos así, pero en este tamaño es innecesario. <strong>Problema 2: el mango es innecesario.</strong> (adelanto la solución por su obviedad -quitar el mango-).</p>

<p>El tercer problema detectado con el termo tiene que ver con la tapa. No sé si alguna vez hayan usado este tipo de tapas pero en lo particular me resultan incómodas en la boca. Además, no puedes transportar el termo en una mochila porque no sellan por completo, si se voltea el café se riega. <strong>Problema 3: la tapa no es completamente hermética</strong>.</p>

<p>Muy bien, tenemos nuestros problemas identificados, ahora a resolverlos que no nos califican por quejarnos!</p>

<h3>El problema del aislamiento sensorial</h3>

<p>Aquí identifiqué dos tipos de aislamiento: el visual y el táctil. En un principio pensé en una especie de termómetro, pero se me hizo muy <em>geek</em>. Además, nadie ve un termómetro y dice "40 grados centígrados, justo como me gusta!". Así que resolví el problema con una tira de plástico en una zona que no tuviera aislamiento térmico para que así pudieras <strong>sentir</strong> el calor del termo. Luego recordé aquellos plásticos que cambian de color con la temperatura y <em>voila!</em> Dos problemas (el visual y el táctil) resueltos en uno.</p>

<h3>El problema de la tapa</h3>
<p>Aquí el problema se resolvió sólo en teoría: no tengo manera de manufacturar la tapa para sentir si la boquilla es cómoda y si realmente es hermética. Aunque hicimos un modelo en plastilina que evidentemente no pude llenar con algún líquido para probarlo. Además, tomé prestada una solución que alguna vez vi (no recuerdo dónde pero sé que fue en internet) para indicar los estados de la tapa: el símbolo de play para indicar que puedes tomar, el de stop para indicar que está cerrada, y el de eject para sacar la tapa. Ojalá se me hubiera ocurrido a mí.</p>

<h3>Ahora, la propuesta de rediseño:</h3>

<p><img alt="2.jpg" src="http://blog.duopixel.com/images/2.jpg" width="528" height="800" /></p>]]></description>
         <link>http://feedproxy.google.com/~r/MarkMackay/~3/Xa9H6-wx23k/thermo.html</link>
         <guid isPermaLink="false">http://mark.com.mx/thermo.html</guid>
         <category>Diseño 3D</category>
         <pubDate>Sun, 04 Mar 2007 18:27:41 -0600</pubDate>
      <feedburner:origLink>http://mark.com.mx/thermo.html</feedburner:origLink></item>
            <item>
         <title>Hysteria Bar</title>
         <description><![CDATA[<p><em>Proyecto realizado junto con Jorge Medrano</em></p>

<p><strong>Dirección:</strong> <a href="http://www.hysteriabar.com">hysteriabar.com</a></p>

<p><strong>Descripción:</strong> después de escribir el artículo <a href="http://blog.duopixel.com/images/reporte_mens_clubs2.pdf">Vallarta al Rojo Vivo</a> para la guía de entretenimiento <a href="http://www.bayvallarta.com">Bay Vallarta</a>, la gente de Hysteria Bar se acercó para solicitar el rediseño de su sitio web.</p>

<p><strong>Características especiales:</strong></p>


<ul>
<li>Un gestor de noticias que es tan fácil de usar como enviar un correo.</li>
<li>La lista de correos está ligada a las noticias, cada vez que alguien escribe una noticia, se envía automáticamente a la lista de correos.</li>
<li>El sitio no te obliga a escoger entre inglés y español, sino que te redirecciona a la sección correcta basándose en el idioma de tu navegador.</li>
</ul>



<p><img alt="hysteria.jpg" src="http://mark.com.mx/hysteria.jpg" width="620" height="488" /></p>]]></description>
         <link>http://feedproxy.google.com/~r/MarkMackay/~3/Ih9JRYRJgHo/hysteria-bar.html</link>
         <guid isPermaLink="false">http://mark.com.mx/hysteria-bar.html</guid>
         <category>Diseño Web</category>
         <pubDate>Tue, 13 Feb 2007 15:38:08 -0600</pubDate>
      <feedburner:origLink>http://mark.com.mx/hysteria-bar.html</feedburner:origLink></item>
            <item>
         <title>Duopixel</title>
         <description><![CDATA[<h2>Duopixel, weblog de diseño de información</h2>

<p>Duopixel es mi weblog profesional (y a veces personal), actualizado aproximádamente una vez por semana. En él escribo cosas relacionadas al diseño, aunque no necesitas ser diseñador para disfrutarlo. A lo largo de los años he desarrollado una filosofía sobre cómo y qué debo publicar:</p>

<h3>Contenido original, siempre</h3>

<p>En la red a menudo que comentamos o enlazamos contenido existente en otros sitios. Es un medio hermético, y sólo los periódicos <em>bombean</em> contenido a la red regularmente. Es como un cuarto cerrado en el que el aire se vicia porque no circulan ideas o porpuestas nuevas. Algunos weblogs muy populares se dedican a enlazar únicamente, y es bueno porque funcionan como distribuidores de tráfico. El problema es que los weblogs menos populares emulan lo que hacen los grandes, quieren funcionar como distribuidores y se repite muchísimo contenido.</p>

<p>Mi filosofía siempre ha ido crear contenido nuevo y <em>enlazable,</em> contribuyendo así a bombear aire fresco a la blogosfera.</p>

<h3>La autoría no es importante</h3>

<p>Decidí publicar Duopixel bajo una licencia de Dominio Público. Si quisieras crear un weblog nuevo, tomar todo mi contenido, poner anuncios y no mencionar que yo lo escribí, tendrías toda mi aprobación. Lo importante no es que yo lo escribí (a todo mundo se le olvida el autor, después de todo), lo importante es lo que dice. Al reusar el contendio estás amplificando la señal, llega a más gente.</p>

<h3>Sans-publicidad</h3>

<p>Respeto a la gente que decide poner anuncios en sus weblogs (existe cierta controversia al respecto). Si gano algo mediante publicidad, sería un poco más celoso del contenido. Si alguien tomara el texto y le pusiera anuncios, sentiría que me está quitando el dinero de la publicidad a mí. Si no tengo publicidad, no estoy perdiendo nada, sólo ganando más lectores. Cualquier compensación monetaria que pudiera recibir ya se ha pagado con las relaciones que he hecho a través del blog, he conocido a muchísima gente interesante. Mi trabajo actual lo tengo gracias a Duopixel.</p>

<h3>Jamás borrar comentarios</h3>

<p>Es curioso porque en internet la gente dice cosas que jamás diría cara a cara, les llaman <em>trolls</em>. Ocasionalmente llega alguien y sin razón insultan al autor. He recibido algunos de estos comentarios, y afortunadamente los lectores regulares colaboran para poner las cosas en su lugar.</p>

<h3>Pantallas</h3>

<p><img alt="duopixelscreen.gif" src="http://mark.com.mx/duopixelscreen.gif" width="620" height="1167" /></p>

<h3>Estadísticas</h3>

<p>Según <a href="http://www.alianzo.com/top-blogs/mexico">el ranking de Alianzo</a> es el séptimo weblog más popular en México. Según <a href="http://www.compareblogs.com">CompareBlogs</a> está por ahi del #50 dentro de los weblogs de países hispano-parlantes. Mentiría si dijera que no me importan las visitas, saber que la gente te lee es una gran motivación para seguir escribiendo. Duopixel cuenta con alrededor de 900 lectores desde feeds y 800 desde web. Las cifras no se pueden sumar, porque alguien que lee el feed también puede visitar el sitio. Mi estimado es un total entre 1200 y 1400. Todas las estadísticas son válidas al mes de febrero 2007.</p>

<p><a href="http://blog.duopixel.com/">Visitar Duopixel</a> &rarr;</p>]]></description>
         <link>http://feedproxy.google.com/~r/MarkMackay/~3/nVL7A9_vu7o/duopixel.html</link>
         <guid isPermaLink="false">http://mark.com.mx/duopixel.html</guid>
         <category>Diseño Web</category>
         <pubDate>Mon, 29 Jan 2007 12:31:34 -0600</pubDate>
      <feedburner:origLink>http://mark.com.mx/duopixel.html</feedburner:origLink></item>
            <item>
         <title>La Vida</title>
         <description><![CDATA[<h2>Sitio web para La Vida (Real Estate)</h2>

<p>El diseño para <em>La Vida</em> no es mío, es de <a href="http://www.qualitypeoples.com/">Ed Fladung</a>. Ed me contactó con la inquietud de querer crear un sitio que fuera vistoso, fácil de usar y que pudiera ser modificado por personas sin experiencia en <span class="caps">HTML.</span> Ya que la estructura del sitio era algo sencillo, le sugerí usar una versión ajustada Movable Type como <em>backend</em> del sitio.</p>

<h3>Características que mejoran la usabilidad al momento de editar</h3>


<ul>
<li>Una vez que te logueas exitosamente a la interfaz de Movable Type, en el sitio ves botones que dicen "Edit this page" y permiten modificar la información contextualmente.</li>
<li>Un solo "entry" genera dos archivos: un xml y un html. El html despliega la página, y cada página tiene un <em>slideshow</em> en Flash que muestra fotos de acuerdo a la temática de la página. El xml se usa para especificar las fotos que van a salir en el <em>slideshow</em> en Flash. Suena complicado, pero el editor no ve nada de este proceso, sólo especifica las fotos, escribe el titulo y el texto, selecciona la sección en la que debe de estar y listo.</li>
<li>Los nombres de los campos en Movable Type fueron modificados para que el editor tuviera una mejor comprensión de lo que hace cada cosa.</li>
</ul>



<p><img alt="lavida.jpg" src="http://www.duopixel.com/mark/images/lavida.jpg" width="460" height="808" /></p>

<p><a href="http://www.lavida.com">Visita La Vida</a></p>]]></description>
         <link>http://feedproxy.google.com/~r/MarkMackay/~3/mhK_dape0j8/lavida.html</link>
         <guid isPermaLink="false">http://mark.com.mx/lavida.html</guid>
         <category>Diseño Web</category>
         <pubDate>Fri, 19 Jan 2007 12:03:25 -0600</pubDate>
      <feedburner:origLink>http://mark.com.mx/lavida.html</feedburner:origLink></item>
            <item>
         <title>Real del Mar</title>
         <description><![CDATA[<h2>Sección de rentas para Real del Mar (Real Estate)</h2>

<p>El reto con esta sección fue hacer algo que un programador pudiera actualizar sin acudir a Photoshop. Real del Mar me contactó para que les hiciera una plantilla en <span class="caps">HTML </span>+ <span class="caps">CSS </span>con la que pudieran mostrar sus propiedades en renta. Sin embargo, no contaban con alguien que tuviera conocimientos de Photoshop o algún otro programa de edición de imágenes. Asi que muchos de los detalles tipográficos (sombras de los títulos) están hechos con <span class="caps">CSS, </span>los cuales el programador puede cambiar con facilidad.</p>

<p><img alt="realdelmar.jpg" src="http://www.duopixel.com/mark/images/realdelmar.jpg" width="460" height="586" /></p>

<p><a href="http://www.realdelmarvallarta.com/rentals.php">Visitar sección de Rentas en Real del Mar</a></p>]]></description>
         <link>http://feedproxy.google.com/~r/MarkMackay/~3/mhCdv16t56s/real-del-mar.html</link>
         <guid isPermaLink="false">http://mark.com.mx/real-del-mar.html</guid>
         <category>Diseño Web</category>
         <pubDate>Fri, 19 Jan 2007 10:11:04 -0600</pubDate>
      <feedburner:origLink>http://mark.com.mx/real-del-mar.html</feedburner:origLink></item>
            <item>
         <title>Estados de Cuenta</title>
         <description><![CDATA[<h2>Estado de cuenta LANS</h2>
<h3>Cliente</h3>
<p><a href="http://www.lans.com.mx">LANS</a> tienda departamental</p>
<h3>Comentarios</h3>
<p>Este es un proyecto que todavía no se libera al público (estreno tentativo: marzo 2007). Trabajé de cerca con administración y con el desarrollador para llegar a un concenso entre lo que la tienda tiene que informar (admon), lo que la gente necesita entender (diseño), y lo que es posible técnicamente (desarrollo).</p>
<p>Los estados de cuenta son proyectos sencillos sólo en apariencia, necesitas hacer pruebas con muchos tipos diferentes de personas (imagínate los clientes tan variados de una tienda departamental, de la compañía telefónica o eléctrica). Se necesita ahorrar papel y a la vez no usar letra muy chica, porque hay mucha gente mayor que no ve bien. Todos los usuarios necesitan entender la información que se les presenta: cuantas veces no hemos tomado un estado de cuenta y pensado "¿qué significa este cargo?" y vamos a servicios al cliente, que siempre está llenísimo por quejas de la misma índole. Terrible experiencia de uso. Mejor haz estados de cuenta comprensibles, y nunca trates de ocultar cargos. Al cliente muchas veces no le molestan los cargos (si son justificados), lo que le molesta es que traten de hacérselos pasar desapercibidos.</p>

<p>Para hacer este estado de cuenta me basé en los <a href="http://www.communication.org.au/html/papers_to_read.php">casos de estudio de David Sless</a>, un compendio invaluable de información para hacer buenos estados de cuenta y cómo comunicar claramente.

<p><img alt="estadodecuenta.gif" src="http://www.duopixel.com/mark/images/estadodecuenta.gif" width="434" height="597" />
</p>

]]></description>
         <link>http://feedproxy.google.com/~r/MarkMackay/~3/2I6l4vNfWNg/estados_de_cuenta.html</link>
         <guid isPermaLink="false">http://mark.com.mx/estados_de_cuenta.html</guid>
         <category>Diseño 2D</category>
         <pubDate>Thu, 18 Jan 2007 19:20:16 -0600</pubDate>
      <feedburner:origLink>http://mark.com.mx/estados_de_cuenta.html</feedburner:origLink></item>
            <item>
         <title>VallartaOnline</title>
         <description><![CDATA[<h2>VallartaOnline - Sitio de reservaciones en línea</h2>

<p><a href="http://www.vallartaonline.com">VallartaOnline</a> en realidad es el hijo de varios brillantes desarrolladores y diseñadores, que a lo largo de los seis años de existencia del sitio han dejado su huella. En este momento yo soy director de diseño y desarrollo de VallartaOnline, y en realidad jamás estará finalizado. Hacemos mejoras basadas en las siguientes filosofías:</p>

<h3>Release early, release often (mejora contínuamente)</h3>

<p>La web presenta una oportunidad única con a la iteración contínua: los desarrolladores de software de escritorio tienen que distribuir <em>patches</em> si cometen algún error, y en los diseñadores de material impreso tienen que dejar todo impecable antes de enviar a la imprenta o provocarán pérdidas sustanciosas.</p>

<p>En el desarrollo de aplicaciones y sitios web, es posible hacer la distribución de las mejoras instantáneamente. Esto no es un pretexto para liberar cosas mal hechas, se trata símplemente de mejorar contínuamente. A la perfección nunca se llega, pero te puedes acercar mediante pasos pequeños. Monitoreamos el éxito o fracaso de los cambios, y en base a ello decidimos si los cambios se quedan o se van. Generalmente liberamos los cambios en lunes nos mantenemos al pendiente de cómo se comportan los usuarios con base a herramientas de monitoreo.</p>

<h3>Minimizamos la cantidad de decisiones que toma el usuario</h3>

<p>Las decisiones causan confusión y generan conflicto en la mente de los usuarios. Un ejemplo: los usuarios pueden decidir si quieren pagar con tarjeta de crédito o mediante depósito bancario. Sin embargo, las reservaciones con depósito bancario sólo se pueden realizar cuando hay cinco o más días de anticipación en la reservación.</p>

<p>¿En qué momento debe de tomar el usuario la decisión de pagar mediante tarjeta de crédito o depósito bancario? Respuesta: sólo después de especificar las fechas en las que va a viajar. Esto permite que no salga la opción de depósito bancario si el usuario solicita una reservación con menos de cinco días de anticipación.</p>

<h3>El usuario nunca se equivoca (o también: nunca permitas que el usuario cometa un error).</h3>

<p>Ejemplo: algunos tours salen sólo los fines de semana. Cuando das a escoger la fecha, el calendario no debe de permitir escoger una fecha entre semana. Los mensajes de error sólo deben de mostrarse en casos excepcionales donde la aplicación web no puede interpretar lo que el usuario está intentando hacer. </p>

<h3>Internet no es un medio para vender, es un medio para comprar</h3>

<p>Vacacionistas hay de mil tipos: la familia que busca entretenimiento sano, los que celebran su graduación con algo barato y mucha diversión nocturna, la pareja que busca un escondite romántico. No debes de empujar al usuario a comprar lo que más te resulta redituable, debes proveer herramientas para que encuentre lo que mejor se ajusta a sus necesidades y posibilidades económicas. En internet el usuario es el que está al volante.</p>

<h3>Somos un ecualizador de información</h3>

<p>Proporcionamos comentarios de los vacacionistas, y publicamos lo positivo y lo negativo. Nuestra filosofía es que si una persona no escoge un hotel mal evaluado por nuestros usuarios, va a escoger otro mejor evaluado.</p>

<h3>Evolución del sitio</h3>

<p>Esta es la versión que existía cuando me integré al equipo.</p>

<p><img alt="02.jpg" src="http://www.duopixel.com/mark/images/02.jpg" width="583" height="465" /></p>

<p>Y esta es la versión que existe al momento que escribo esto (enero 2007). Constantemente estamos haciendo mejoras, así que es probable que haya cambiado cuando vean la <a href="http://www.vallartaonline.com">versión en vivo.</a></p>

<p><img alt="main.jpg" src="http://www.duopixel.com/mark/images/main.jpg" width="460" height="725" /></p>

<h3>Sección de hoteles</h3>

<p>Aquí presentamos los precios claramente, los enlaces de hasta arriba permiten navegar entre las características del hotel.</p>

<p><img alt="hotels.jpg" src="http://www.duopixel.com/mark/images/hotels.jpg" width="460" height="714" /></p>

<p>Cuando especificas fechas te deja qué cuartos del hotel están disponibles en las fechas que seleccionaste. El paradigma es muy flexible, ya que permite especificar claramente fechas desde 1 hasta 30 días.</p>

<p><img alt="prices.jpg" src="http://www.duopixel.com/mark/images/prices.jpg" width="460" height="229" /></p>

<p><a href="http://www.vallartaonline.com">Visiten el sitio de VallartaOnline</a></p>]]></description>
         <link>http://feedproxy.google.com/~r/MarkMackay/~3/2Uov7xkPhWc/vallartaonline.html</link>
         <guid isPermaLink="false">http://mark.com.mx/vallartaonline.html</guid>
         <category>Diseño Web</category>
         <pubDate>Fri, 24 Nov 2006 20:53:35 -0600</pubDate>
      <feedburner:origLink>http://mark.com.mx/vallartaonline.html</feedburner:origLink></item>
            <item>
         <title>Diseño de ambientes</title>
         <description><![CDATA[<h2><span class="caps">PVNET</span> Guadalajara</h2>

<h3>Cliente</h3>

<p><span class="caps">PVNET, S.A. </span>de <span class="caps">C.V.</span></p>

<h3>Materiales utilizados</h3>

<p>Vinyl cortado en plotter, bases de <span class="caps">PVC, </span>impresión láser con plastificado <span class="caps">UV, </span>foamboard.</p>

<h3>Problema</h3>

<p>La apertura de <span class="caps">PVNET</span> Guadalajara llevaba seis meses de retraso y el costo total estaba muy por encima de la cantidad presupuestada (cosas desafortunadamente fuera de mi alcance). Me indicaron que necesitaban señalizar y decorar el local en el menor tiempo y con la menor cantidad de dinero posible.</p>

<h3>Fachada</h3>

<p>A fin de ahorrar tiempo, los mismos bocetos que usamos para discutir internamente el proyecto fueron los que se utilizaron para enviar como referencia al impresor. La visualización de espacios físicos permite discutir ideas y hacer correcciones sobre papel, lo cual es mucho más barato que hacerlo una vez que la instalación esté hecha.</p>

<p><img alt="fachada.gif" src="http://www.duopixel.com/mark/images/fachada.gif" width="460" height="229" /></p>

<p>Este es el local terminado:</p>

<p><img alt="local.jpg" src="http://www.duopixel.com/mark/images/local.jpg" width="460" height="417" /></p>

<p>Para las plecas en las ventanas se usó vinyl esmerilado de un lado, y vinil opaco del otro. Esto provoca que las letras tengan una especie de <em>drop shadow</em> natural.</p>

<h3>Interior</h3>

<p>Debido a la poca comunicación entre los arquitectos y administración, se pintaron las paredes con rayas verticales que afectaban la señalización y la publicidad dentro del local. Para minimizar el impacto visual de las rayas se colgaron los carteles con hilos transparentes, lo cual de nuevo, crea un <em>drop shadow</em> natural:</p>

<p><img alt="interior1.jpg" src="http://www.duopixel.com/mark/images/interior1.jpg" width="460" height="345" /></p>

<p>Un juego de forma de las ventanas con el anuncio de GameZone, si continúas las líneas llegas a un punto de fuga en común:</p>

<p><img alt="gamezone.jpg" src="http://www.duopixel.com/mark/images/gamezone.jpg" width="460" height="276" /></p>

<p>Cuado diseñas un espacio físico, es importante diseñar los elementos con respecto a su contexto. Así por ejemplo, podemos ver que la camisa del empleado es del mismo color que el letrero. También se diseñaron las camisas:</p>

<p><img alt="playeras.gif" src="http://www.duopixel.com/mark/images/playeras.gif" width="460" height="228" /></p>

<p>Y los carteles publicitarios para el local:</p>

<p><img alt="posters.jpg" src="http://www.duopixel.com/mark/images/posters.jpg" width="451" height="658" /></p>

<p>Y la interfaz gráfica de la ocupación, que se mostraba en una pantalla plana de 42 pulgadas:</p>

<p><img alt="hud.jpg" src="http://www.duopixel.com/mark/images/hud.jpg" width="480" height="288" /></p>

<p>La señalización hecha a la medida. La mayor parte de los negocios compra señalización pre-hecha, de muy baja calidad. Esta señalización está hecha para cubrir todos los casos posibles que establece el reglamento oficial. Así, por ejemplo, existe en un formato enorme porque debe de poderse colocar en lugares como bodegas amplias, lo cual no se necesita en un local pequeño.</p>

<p><img alt="senalizacion.gif" src="http://www.duopixel.com/mark/images/senalizacion.gif" width="460" height="53" /></p>

<h3>Leer más sobre el diseño de ambientes</h3>

<p>Escribí una anotación en mi blog respecto a <a href="http://blog.duopixel.com/articulos/redisenando_negocios_renta_de_au.html">Rediseñando negocios: renta de autos</a>, ahí puedes observar el proceso mental que se sigue al rediseñar un espacio físico.</p>]]></description>
         <link>http://feedproxy.google.com/~r/MarkMackay/~3/6dvM2Wb9KCg/diseno-de-ambientes.html</link>
         <guid isPermaLink="false">http://mark.com.mx/diseno-de-ambientes.html</guid>
         <category>Diseño 3D</category>
         <pubDate>Fri, 24 Nov 2006 11:14:21 -0600</pubDate>
      <feedburner:origLink>http://mark.com.mx/diseno-de-ambientes.html</feedburner:origLink></item>
            <item>
         <title>Infografía</title>
         <description><![CDATA[<h2>Infografía del funcionamiento de un café internet</h2>
<h3>Cliente</h3>
<p><a href="http://www.pvnet.com.mx">PVNET</a></p>
<h3>Comentarios</h3>
<p>Los cafés internet de PVNET poseen ciertos métodos de automatización que permiten a sólo dos personas (un cajero y un auxiliar) administrar un café internet de cientos de computadoras. Sin embargo, esto provoca que funcionen de manera diferente a los cafés internet estándares (tienes que pre-pagar tu tiempo, por ejemplo). Esta infografía ilustra los pasos y ventajas del esquema de PVNET.</p>
<p><a href="http://www.duopixel.com/mark/images/infografia/infografia.gif"><img alt="infografia_thumb.jpg" src="http://www.duopixel.com/mark/images/infografia/infografia_thumb.jpg" width="460" height="277" /><br />
Ver en grande</a></p>


<h2>Vegetación y fauna en la Bahía de Banderas</h2>	
<h3>Cliente</h3>
<p><a href="http://mx.vallartaonline.com">VallartaOnline</a> y <a href="http://www.bayvallarta.com">Bay Vallarta</a> (revista de entretenimiento).</p>

<p>
Hacer infografía para publicaciones periódicas (periódicos y revistas) es un reto bastante interesante. El bien más preciado es el tiempo, y tienes que proyectar cuanta información puedes investigar y representar visualmente dentro del tiempo disponible.
</p>
<p>
Cuando hago infografía, trato de ver el resultado con ojos frescos y preguntarme "¿aprendo algo de lo que estoy viendo?", y si la respuesta es afirmativa es que la infografía está cumpliendo su objetivo.
</p>
<h3>Programas utilizados: </h3>
<p>Adobe Illustrator</p>
<p><img src="http://images.vallartaonline.com/information/infografia_esp.jpg" alt="infograf&iacute;a que muestra los tipos de vegetación en la bahía de banderas" width="538" height="532" border="0" /></p>
<p><img alt="Tortugas que visitan la bah&iacute;a" src="http://www.duopixel.com/mark/images/tortols.gif" width="538" height="715" />
</p>




<h2>Relaci&oacute;n de actividad s&iacute;smica con la presencia de volcanes</h2>

	<h3>Cliente </h3>
<p>Proyecto escolar</p>

<h3>Comentarios: </h3>
<p>
En este infodiagrama se concentra una gran cantidad de 
                informaci&oacute;n. La proyecci&oacute;n utilizada mustra todos 
                los continentes simult&aacute;neamente, la actividad s&iacute;smica 
                se muestra en verde, y los volcanes se muestran en tri&aacute;ngulos 
                rojos. La imagen est&aacute; compuesta enteramente por puntos, 
                entre m&aacute;s grande sea el punto verde, mayor es la actividad 
                s&iacute;smica. Para apreciar el infodiagrama a mayor resoluci&oacute;n, 
                puedes bajar <a href="http://www.duopixel.com/mark/images/infodiagrama.pdf">este PDF</a>.

</p>


<h3>Programas utilizados: </h3>
<p>Adobe Illustrator</p>
<p><img src="http://www.duopixel.com/mark/images/infografia1.gif" alt="infograf&iacute;a que muestra la relaci&oacute;n entre la actividad sismica y la volcanica" width="460" height="405" border="0" class="eso"/></p>
<!--  termina block de notas -->

<!-- block de notas -->
<h2>Infografía de los gadgets de los bloggers</h2>
<h3>Cliente </h3>
<p>Proyecto personal</p>
<h3>Comentarios: </h3>
<p>En el 2004 se hizo una encuesta y se compilaron las respuestas de los bloggers (webloggers, bitacoreros, o como se les quiera llamar) y de los lectores de blogs. Cuando se hicieron públicos los resultados de la encuesta, decidí realizar una pequeña infografía que abarcara una parte de los datos. Desgraciadamente este tipo de objetos son obsoletos desde el momento que se publican: la tecnología cambia demasiado rápido. Un mejor título sería "una mirada los lectores y publicantes de bitácoras de 2004".</p>

<h3>Programas utilizados: </h3>
<p>Adobe Illustrator</p>
<p><img src=http://blog.duopixel.com/images/gadgets2.png" alt="Gadgets de los bloggers" width="456" width="542" border="0"  /></p>
]]></description>
         <link>http://feedproxy.google.com/~r/MarkMackay/~3/Xq9vzsGtrGA/infografia.html</link>
         <guid isPermaLink="false">http://mark.com.mx/infografia.html</guid>
         <category>Diseño 2D</category>
         <pubDate>Tue, 06 Jun 2006 11:06:10 -0600</pubDate>
      <feedburner:origLink>http://mark.com.mx/infografia.html</feedburner:origLink></item>
            <item>
         <title>Psicóloga Ana Brindis</title>
         <description><![CDATA[<h2>Página web - Ana Brindis</h2>

	<h3>Cliente:</h3>
<p><a href="http://www.anabrindis.com" target="_blank">Psicóloga Ana Brindis</a></p>

<h3>Comentarios: </h3>
<p>
La Psicóloga Ana Brindis prefirió invertir en el internet en lugar del directorio telefónico. Con un presupuesto menor al que hubiera utilizado en la sección amarilla, ha encontrado nuevos pacientes para los servicios especializados de psicología que ofrece. Figura entre los diez primeros lugares en la búsqueda de <em>piscología puebla</em>, <em>psicologa puebla</em> y <em>piscologo puebla</em>.</p>

<h3>Detalles: </h3>
<p>Se propuso e implementó un mapa para llegar desde puntos estratégicos. Los mapas siempre son un buen punto de referencia cuando el usuario piensa <em>OK, me convenciste, ¿ahora qué hago para usar tu producto o servicio?</em></p>

<h3>Programas utilizados: </h3>
<p>BBEdit, Adobe Photoshop</p>
<p><img src="images/anabrindis.jpg" alt="" width="460" height="587" border="0" /></p>]]></description>
         <link>http://feedproxy.google.com/~r/MarkMackay/~3/5Q4_W7J8GKA/ana-brindis.html</link>
         <guid isPermaLink="false">http://mark.com.mx/ana-brindis.html</guid>
         <category>Diseño Web</category>
         <pubDate>Tue, 07 Mar 2006 21:07:34 -0600</pubDate>
      <feedburner:origLink>http://mark.com.mx/ana-brindis.html</feedburner:origLink></item>
            <item>
         <title>Cirugía Plástica</title>
         <description><![CDATA[	<h2>Página web - Clínica Dermatológica</h2>

	<h3>Cliente </h3>
<p><a href="http://www.laserpuebla.com">Clínica dermatológica y Cirugía Estética de Puebla.</a> Proyecto de <a href="http://blog.duopixel.com">Duopixel</a>. </p>

<h3>Comentarios: </h3>
<p>
El Dr. Arístides Arellano fue uno de nuestros primeros clientes. Le diseñamos su página en 1999 y reciéntemente (2004) nos solicitó que la actualizaramos con información nueva. Le propusimos un rediseño total con estándares web y ahora su página figura en los primeros resultados en búsquedas relacionadas con sus servicios médicos. El número de pacientes ha incrementado considerablemente, y ahora nos han contratado para hacer un interactivo distribuido en CD (proyecto en progreso). </p>

<h3>Programas utilizados: </h3>
<p>BBEdit, Macromedia Flash (para contenidos selectos)</p>
<p><img src="images/cirugia3.jpg" alt="" width="460" height="512" border="0" class="eso"/></p>

<p>Página anterior:<br />
<img src="images/cirugia1.jpg" alt="" width="460" height="489" border="0" /></p>
]]></description>
         <link>http://feedproxy.google.com/~r/MarkMackay/~3/mgWFk_HpGkM/cirugia_puebla.html</link>
         <guid isPermaLink="false">http://mark.com.mx/cirugia_puebla.html</guid>
         <category>Diseño Web</category>
         <pubDate>Mon, 06 Mar 2006 23:59:09 -0600</pubDate>
      <feedburner:origLink>http://mark.com.mx/cirugia_puebla.html</feedburner:origLink></item>
      
   </channel>
</rss>
