Syncotype your baselines

¿Qué significa el título? Se refiere a ajustar el alto de líneas de tu texto para que concuerde en las diferentes cajas o divs aunque tengan diferentes tamaños de letra. ¿Confuso? esta captura lo explica mejor.

Se ve bien a primera vista, incluso el autor del post usa este recurso en su blog y se ve bien, pero… es engañoso.

Como pueden veer el diseño termina muy rígido a mi parecer, otro detalle es que si bien funciona con ciertos tamaños de letra, cuando la diferencia se agranda comienza a descomponerse la cosa. Cada tamaño de texto tiene una altura de línea óptima (en la teoría y en la práctica), y este recurso llamado Syncotype lo pasa por alto.

Visualmente los textos más pequeños necesitan menos altura de línea de otro modo se vuelve dificil la lectura. Syncotype, una solución para tomarse en cuenta y tenerla en nuestro abanico de herramientas pero hay que tener cuidado con su uso.

Sitio web Alpha Group

Alpha GroupEste sitio fue hecho en asociación con Morgan Global Solutions y debo decir que fue una experiencia muy positiva en muchos sentidos. Es un sitio de bienes raíces, promociona propiedades en Arizona y Sonora. El sitio está hecho completamente en CSS + HXTML y tiene algo de flash en el home y en los interiores, además está en inglés y en español.

Aquí pueden ver el sitio viejo, aquí pueden ver el sitio que les hicimos.

La paleta de colores del sitio la hice así porque así son los colores de nuestro entorno acá por Sonora y Arizona, cafés, naranjas, amarillos, incluso a veces los cerros se ven morados.

Quiero contarles algo que pasó con este cliente. En un principio no sabían si soltarnos el trabajo, —¿sí lo van a hacer bien? preguntaban, ahí Daniel jugó un papel muy importante en la labor de ventas y convencimiento, pasado este episodio comenzamos a trabajar y les envié el diseño, lo vieron y dijeron que gustó mucho no sin antes preguntar si realmente nosotros lo habíamos hecho, sorprendidos levantaron las cejas, al parecer no pensaban que desde este lado de la frontera, se hiciera diseño de calidad. La realidad es que los norteamericanos algunos norteamericanos tienen esa percepción de México, creen que todo es como se ve en la TV.

Terminar y entregar este trabajo fue una experiencia agridulce, por un lado fue dulce por que el nuevo sitio les gustó mucho el trabajo lo vendimos bien y un poco agria por otro lado por que creen que en México no somos capaces de hacer trabajo de calidad y eso saltaba en diferentes partes del proceso. Al final creo el balance fue bueno.

Todavía no ponen el sitio en su dominio final, no se la razón pero creo que andan en eso.

O coopelas o cuello t-shirt

Coopelas o cuello

Esta camiseta sale del testimonio de Zhenli Ye Gon, el tipo que tenía 205 millones de dólares dentro de su casa, el mayor decomiso de dinero en el mundo. Según él un funcionario del gobierno le dijo que guardara el dinero y en palabras de Zhenli el funcionario le dijo: “O coopelas o cuello“. Hablando de creatividad mexicana al asunto ya le dicen en los medios “El Chinogate” (Para sumarse a la larga lista de los *gates. Pemexgate, Toallagate, etc.) y al relato de Zhenli le dicen “El cuento chino“.

Pedro owns your homeland t-shirt

pedro-tshirt.png

Esta camiseta se me vino a la mente después de ver en algunos blogs esta camiseta que dice Deport Pedro y también de haber leído en algunos sitios sobre el Mexica Movement que plantea que los indígenas son los verdaderos dueños de toda américa. Sabemos que EU robó compró a diferentes personajes “mexicanos” más de la mitad del territorio mexicano y ese desastrozo episodio de la historia de México dificilmente saldrá de la psique de todos los mexicanos. Claro, yo no soy tan radical como para taparme la cara y agarrar un megáfono en una calle de Los Angeles, así que mi pequeña protesta es esta camiseta.

Para el que no lo sepa, la camiseta original de Vote for Pedro (Vota por Pedro) salió en la película de Napoleon Dynamite, después algún americano estadounidense hizo la camiseta Deport pedro (Deporta a Pedro) mofándose de la situación de millones de mexicanos sin papeles en EU.

Haz tu propia camiseta de Pedro y envíanosla a droid[at]nudonation.com para publicarla.
Descarga el template (.zip con un archivo .PSD editable y un .JPG)

Actualización: Ya nos mandaron la primer camiseta, gracias Karlos Maldonado. Aquí la camiseta.

Sitio SuperMedia

SupermediaRecién terminé este sitio. Es una compañía que vende publicidad en los carritos de los supermercados, bueno, en carritos y en los pisos. La idea aunque no es nueva, no ha sido implementada de lleno aquí en la ciudad de Hermosillo, esperemos que le vaya bien a Javier Gallego, director de SuperMedia.

Las fotos las saqué de istockphoto.com se los recomiendo, tiene fotos de muy buena calidad a precios muy bajos, tanto como 1 dolar. El sitio está hecho con CSS + XHTML, y fue listado en algunos directorios de diseño de sitios como: cssmania.com, cssgalerie.cz, Screenalicious.com, mostinspired.com.

How Seagate learned to package like Apple

Quise dejar el título como lo leí porque lo dice todo. Se trata de un tipo que compró un disco duro externo de la marca Seagate y documentó paso por paso la experiencia del empaque. Tiene algunos detalles muy interesantes, copywriting inteligente, calidad en los materiales, será que aprendieron algo de Apple?. Vale la pena leer el post.

Sitio del Monitoreo Legislativo Sonorense

MLSEstoy más que contento porque por fin terminamos este sitio, un proceso largo y lleno de momentos de prueba y error, pero al final el cliente quedó muy satisfecho y claro, nosotros también.

Se trata del sitio del Monitoreo Legislativo Sonorense, este sitio llevará un riguroso registro de las actividades de los legisladores en el congreso local de Sonora, por ejemplo sus asistencias, su producción, entre muchos otros datos, esto con el fin de transparentar sus actividades.

Debo decir que es el sitio más dificil que he hecho, fue todo un aprendizaje para mi, batallamos mucho para agarrarle al funcionamiento del congreso y después pasar eso a programación. El sitio es alimentado por personas que llevan el monitoreo de cada sesión del congreso, despúes con los datos recopilados accesan a un administrador y agregan los datos.

Este sitio está hecho en PHP+MySQL montado sobre documentos XHTML y maquetados en CSS. Además el CSS valida ;)

Este trabajo fue desarrollado por Trost con la ayuda en la parte de programación de Victor Castrejón de Desarrollos Digitales. El sitio es nuevecito, así que si le ven algún bug por favor me dicen.

Sitio Suspiros Pastelería

suspiros.jpgEsta vez el sitio no lo hice yo, si no Victor de Desarrollos Digitales. Pero igual me da gusto que se reconozca el trabajo de otros mexicano y claro, también porque este trabajo lo veo como hecho en equipo. Mi participación fue con el diseño, hice la página de inicio y se la entregué en un archivo .PSD. Aquí el sitio de Suspiros Pastelería.

El sitio fue agregado a CSSmanía y hasta el momento con una calificación de 9, CSSmanía es el directorio de sitios hechos bajo estándares web más importante hoy en día. Bien por Victor que es de los pocos —Asesores de Sistemas— (una vez se encabronó por que lo presenté a otro amigo como “El programador”) realmente preocupado por los estándares y el buen diseño.

Aquí pueden ver una captura de lo que hice.

Comentarios desactivados

Algunos links

Mark Coleran, Visual Designer
Te preguntarás quien diseña las interfases animadas en las películas, cámaras de seguridad, scanners geográficos, bases de datos de delincuentes, todos lucen bonitos y sobre todo funcionan a la perfección —en las películas—, nada más alejado de la realidad. Lo bueno es que siempre tenemos a Mark Coleran para que diseñe estas interfases. Sin duda una profesión muy interesante.

Studio8 Design
Estudio situado en London, se especializan en diseño editorial, tienen un portafolio que da envidia de la buena.

Animal Logic
Si te preguntabas quien hizo los efectos visuales de la película 300, el especial de Martial Arts del discovery, Matrix y algunos otros trabajos de los llamados bigshots, te recomiendo que veas el portafolio de estos señores, sorprende la calidad del trabajo que realizan. Además están estrenando sitio (en flash) y está muy bien hecho.

Oficinas de Clear Left
¿Te gustaría saber como es clear left por dentro?, aquí puedes ver varias fotografías de sus oficinas en Londres. Por cierto, este enlace lo tomé de una página que muestra fotos de los interiores de los despachos y agencias más destacados del mundo y la verdad es que es muy interesante. Les voy a mandar las fotos de mi lugar de trabajo :p, tengo la ligera sospecha de que no las van a publicar.

Comentarios desactivados

Recurso para diseñadores web

epc.pngEsta es una entrada en el blog de Jesse Bennett-Chamberlain, responsable de 31Three, un excelente diseñador y que últimamene ha compartido con la comunidad el proceso de diseño que sigue en sus proyectos.

El primer proyecto es para Embrace Pet Insurance y aquí pueden ver las propuestas de diseño desde el wireframe hasta la versión final.

El otro proyecto es para Embrace Pet Community y las capturas también están disponibles.

Este canadiense es uno de los mejores diseñadores que he visto en la web, pone mucho cuidado con los detalles y el uso de la tipografía y ver su forma de resolver el diseño es un recurso de gran valor para los que hacemos web.

Sitio web Grupo Alta

Recién terminamos la versión en español del sitio web de Grupo Alta, ha sido un trabajo largo, y depués de una primera entrega del avance del sitio, tuve que reescribir casi todo el CSS :s, pero bueno, al final es muy reconfortante ver un código limpio.

…eso estuvo muy geek verdad? bueno, la cosa es que ya está en línea y les pido por favor que si le ven algún bug me lo hagan saber.

Supongo que el 98% de los lectores de este blog de diseño estarán bailando arriba de alguna mesa en alguna playa virgen llena de extranjeros y chavos buena vibra, así que gracias a ese 2% que aún queda, que al igual que nosotros debió haberse quedado a trabajar estos días en que nadie quiere trabajar.

Cosas que faltan del sitio:

  • Versión en inglés Done!
  • Más fotografías en las secciones de productos
  • Noticias reales :s

El nuevo sitio de Expression Engine

El sitio de la red Ellislab.com fue lanzado hace poco, sin embargo este post es para compartirles una entrada publicada en Digital Web Magazine sobre el proceso de rediseño del sitio de Expression Engine y que sirvió como base de diseño para los otros sitios de la red. Es muy interesante porque habla desde el entorno de trabajo, pasando por la selección tipográfica, iconografía y los argumentos para decidir qué elementos incluir en el home del sitio entre otras cosas.

He quedado impresionado y con un buen sabor de boca, ya que la descripción de las etapas del proceso vienen descritas de forma detallada, desde el wireframe o layout hecho en sus inicios en Illustrator, hasta las decisiones tomadas de última hora. Sin duda un post de lectura obligada si te dedicas a desarrollar sitios web, porque puedes ver como es el proceso real de un proyecto de este tipo.

Gracias a Jesse Bennett-Chamberlain fundador de 31three.com y encargado de darle esta nueva cara a Ellislab.com por compartir esto que es tan valioso para los que hacemos sitios web. -El post está en inglés-

Categorías

Archivos por mes

Buscar

Suscríbete vía RSS

Suscríbete vía E-mail

Lo más reciente

  1. Logos que no deberían ser
  2. Preview de tus brochas de photoshop
  3. Parece que ya estamos de vuelta
  4. Custom fonts en el diseño web
  5. Infinitum aumenta velocidad de nuevo
  6. Lost: el humo negro
  7. Logo Phonotic
  8. Logo 3way
  9. Logo optimiza.mx
  10. Logo Cranker Bikes