Sitio Avance Consultoría

Este es un sitio hecho para una empresa local que ofrece capacitación, consultorías, etc.
Como siempre, si le ven algún bug por favor háganmelo saber :)

Proceso de diseño sitio Mexbest

Este post se los debía, veremos algo relacionado un recurso muy importante que es el uso de wireframes.

Mexbest.com es un sitio informativo que contiene un directorio que agrupa a cientos de agroexportadores mexicanos y sirve como canal de contacto entre ellos y los compradores extranjeros.

El sitio comenzó en el papel, explorando la posición de los elementos del layout. Click aquí para ver imagen grande.

Luego las ideas de los bocetos las pasé a wireframes, que son versiones de los layouts en cajas grises y con pocos detalles. Estos sirven para definir espacios, tamaños y elementos, son como una versión mejor trabajada de bocetos. Esta etapa fue muy importante porque los cambios en elementos se hace sobre un layout que es muy fácil de modificar. Me tomó talvez 20 mins en hacer cada uno y hacer cambios es muchísimo más rápido.

Los wireframes son importantes porque asi no estaremos haciendo cambios en etapas más avanzadas del proyecto donde ya hay color aplicado y gráficos trabajados en photoshop, etc. Con los wireframes las cosas son más simples para el cliente también y no caemos en confusiones ya que tendremos nuestras versiones aprobadas por él.

Descarga aquí todos los wireframes en PDF o bien pueden verlos en línea en formato JPG.

También cambiamos el logo tipo. Seguimos usando la espiral que tiene un origen precolombino y que representa abundancia. Lo que hice fure re-trazar la espiral haciéndola con puros círculos y elipses, es una lástima que no tengo una captura de esa parte del proceso.

Omitimos el slogan porque un sloga no debe ser parte de un logotipo, si no que debe usarse como parte de una imagen general más no ligado completamente al logo.

Otra cosa que hicimos fue reducir el número de colores a dos (negro y verde) y quitamos el recurso de la bandera mexicana, muy utilizada por empresas mexicanas pero que no siempre sirve. En este caso el mercado es principalmente extranjero y el recurso de la bandera pierde sentido. El logo debe reflejar algo más neutro y más global. (La versión del logo nuevo que presento aquí es una variación del original, este tiene degradados pero hay una versión básica con colores planos.)

Finalmente el layout terminado. Aquí pueden ver una versión live del sitio.

El sitio se encuentra en desarrollo pero en un futuro próximo estará corriendo en www.mexbest.com, de modo que hay muchas cosas que no funcionan, textos simulados y falta de contenidos. Está hecho con CSS + XHTML, aún no se si valida :). Lo muestro funcionando sólo para que vean como va. En un post más adelante veremos la parte del backend y el directorio que requirieron trabajo aparte y que se merecen un post también.

Estas imágenes fueron publicadas con el consentimiento del cliente (Gracias Victor!), le pedí autorización para mostrarlo por el valor que tiene para otros desarrolladores web y diseñadores en general, post como este son los que yo mismo busco en otros sitios porque ofrecen una ventana para ver el proceso detrás de un sitio web.

Colección de tarjetas de presentación

Me encontré a través de QBN una colección de tarjetas que no puede faltar en tus bookmarks, son muchísimas y muchas tienen un excelente diseño, Ver tarjetas en flickr.

Problemas de Registro

Este post viene de una pregunta que me hizo llegar Alberto Casanova a través de la forma de contacto. Alberto me pregunta ¿A qué le llamas problema de registro (es decir, qué es)?

Como pueden ver a la izquierda se encuentra un gráfico que fue perfectamente impreso, a la derecha el mismo gráfico con una ligera variación en la posición de sus elementos, esta variación no es intencional, es un problema de registro. El impresor mueve perillas, palancas y hace sus mañas para hacer que la máquina alinie alinee las marcas de registro.

Logotipo Fase Solar

Recién terminé este logotipo, Fase Solar es una compañía que se centra en el uso de energías renovables, ahorro energético etc. Como pueden ver el mismo nombre nos dicta por donde buscar, fue un ejercicio interesante el sol se presta para graficarlo de muchas formas aquí una captura de una parte del proceso. En papel hice muchas variaciones pero no encontré las hojas.

Aquí pueden ver el diseño de la papelería que tiene un detalle que me gusta mucho, las tarjetas tienen uno de los bordes redondeados haciendo referencia a la circunferencia del sol.

El color no me convenció de todo pero fue la elección de mi cliente, personalmente me iba más por un amarillo pellizcando el naranja, en vez del naranja. Dos tintas, cero problemas de registro, la tipo es la Priva Pro.

Logopond concentrado

Muy seguido me doy la vuelta por logopond.com un excelente sitio para inspirarse cuando estás diseñando un logo. Si se te acaban las ideas o simplemente eres amante de la identidad, logopond es tu recurso obligado.

Hice una foto grande con los logos que he visto y que me han gustado.

Logopond es un buen recurso a pesar de que la raza sube muchos logos que son copias de otros o muchos que son muy malos, lo bueno es que hay un galería de los editores, featured logos y popular logos, donde siempre hay calidad.

Mis logos en logopond.

Nudonation en el Top 50: blogs de diseño en español

Primero que nada agradezco a Ulises por considerarnos para la mencionada lista, hay algunos que no los conocía y que gracias a esta lista ahora los sigo desde sus feeds, no se cómo no se le había ocurrido a alguien hacer esto por que sin duda ayuda a que la comunidad de diseñadores se conozca más y haya más intercambio de ideas, emails y posts :)

Top 50: blogs de diseño en español

Bueno pues, gracias a Ulises de nuevo y gracias a los lectores recurrentes de este blog.

Logo Wacha Films

El buen Jorch me pidió que le hiciera un logo para su nuevo proyecto Wacha Films, una productora de cine. Este es el logo final, la idea es que fuera fresco y fácil de reproducir, dos colores, separación de los mismos sin problemas de registro y que funciona bien en negro, invertido o en cualquier color. La palabra wacha es muy conocida aquí en la región y significa "ver-mirar", se puede usar algo así como, "wacha esta película", aunque la palabra wacha viene de la palabra en inglés watch que significa ver, esta está muy arraigada en la vida de los sonorenses.

Como pueden ver el logo tiene tres ojos (habían otras versiones con 1 y 2 ojos, pero esta fue la que le gustó al cliente :p) supongo que por diferenciarse de otros logos con dos ojos. El sentido de los ojos viene del nombre de la productora "wacha" (ver). La boca del pequeño hairy monster es una "W", la tipografía utilizada se llama Amplitude Ultra Black y donde dice Films es la queridísima Avenir.

Aquí una captura de una de las hojas del proceso donde buscaba ideas con la tipo, específicamente donde boceté los hairy monsters.

Buenos logos, buenos diseños

Muchas veces estoy navegando sitios de compañías de diseño o de freelancers y si quiero darme cuenta si son buenos o no me voy directamente a su portafolio a la sección de identidad o logotipos, algunos dirán que estoy mal pero podría decir que en un 90% de los casos si tienen buenos logos significa que el demás trabajo que tienen también es bueno. Si tienen logos malos, también el trabajo tiene baja calidad.

He visto a lo largo de años cientos o talvez miles de sitios y es mi método de filtrado rápido cuando no tengo mucho tiempo para revisar sitios. Si nos ponemos a pensar un poco podemos decir que el diseño de identidad es de las ramas del diseño más dificiles, por que detrás de su aparente sencillez el diseño de un logotipo tiene una gran cantidad de trabajo y conocimientos invertidos, claro si este se hace como debe de ser. De modo que es como un concentrado de los conocimientos del diseñador.

Esto claro es una teoría propia y no pretendo generalizar, hay muchos despachos que hacen cosas impresionantes en otras ramas del diseño y que prácticamente no hacen logos, no pattern sólo por dar un ejemplo, pero puedo decir que en la mayoría de los casos funciona.

Logos finalistas de Mister Wong

Estos son los tres finalistas del diseño de logo para Mister Wong un sitio para guardar tus enlaces favoritos. En general hubo mucha participación en buena parte por el premio que es de 6,000 dólares. Estos tres finalistas obtuvieron 3,000 usd ya, el ganador definitivo tendrá 3,000 más.

La razón del post es porque el tercer finalista Israel Betancourt es mexicano. ¿Qué les parecen los logos?

¿Cómo generar una paleta de colores para tu sitio?

Esta es una pregunta que invariablemente nos hacemos a la hora de comenzar a diseñar un sitio, si bien hay una teoría básica para definir una paleta, muchas veces no es suficiente. ¿A qué me refiero con teoría básica? bueno pues hablando de un sitio para una funeraria por ejemplo, no vamos a usar colores vivos y festivos, lo ideal es la sobriedad, colores que evoquen tranquilidad y paz. Esto por dar un ejemplo de la teoría básica.

No ayuda mucho ciertamente, entonces, ¿de dónde vamos sacar nuestra paleta de colores? Les voy a dar dos ejemplos que trabajé reciéntemente y en los cuales llegué a la paleta de colores por caminos diferentes. Lee todo el post »

Logotipo de V-17 en uso

Actualmente estamos trabajando con el sitio web de v-17 y hemos intercambiado muchos emails con nuestro cliente, pero la semana pasada fue diferente, nos envío un email con fotografías de gente usando uniformes tipo Fórmula 1, aunque el negocio tiene cerca de un año abierto no habíamos visto el logo que hicimos en uso.

Fue un sentimiento extraño que toda esa gente usándolo. Parece que el logo está cumpliendo con su función que es ser un identificador único para nuestro cliente. A continuación algunas fotos. Lee todo el post »