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.

Hey!!

El sitio oficial de los Premios Exponet publica un comentario que hice al respecto de los premios.

Favor que me hacen "lider de internet" :)

En otras cosas pero de lo mismo, este año la participación es muy fuerte también. Si no dense una vuelta por el listado de sitios participantes.

Developer Bar para Firefox 3

Si usabas esta barra antes y al actualizar a FF3 dejó de funcionar hay buenas noticias, no se exactamente desde cuando, pero ya funciona bien en FF3. Aquí puedes descargarla.

Facebox

Facebox es un visor de imágenes y otros elementos basado en jquery, es como lightbox pero abre las ventanas con el estilo de las ventanas emergente en Facebook. Denle una revisada, parece interesante.

Yahoo Design Stencil Kit para tus wireframes

Si te gusta trabajar tus sitios desde los wireframes esto te puede interesar. Yahoo libera el Yahoo! Design Stencil Kit version 1.0 que trae elementos de diseño de UI como son: Form elements, Calendars, UI controls, Menus, Buttons, Navigation, Pagination entre muchos otros.

Últimamente estoy trabajando mucho con los wireframes y la verdad es que no se porque no lo integré a mi proceso de trabajo antes, los había usado de vez en cuando pero no todos los días como ahora.

Tienen grandes ventajas porque te permiten definir espacios, tamaños y elementos de los layouts sin siquiera abrir Photoshop. Una vez que tienes el wireframe (aprobado por el cliente) me paso a photoshop donde comienza el diseño y todo es miel sobre hojuelas, ya que nada más me falta seleccionar colores e integrar graficos cosa que me resulta ya mucho más sencillo y rápido porque tengo la mitad del trabajo hecho con las proporciones y elementos definidos del wireframe. Este es un ejemplo de un wireframe de un sitio en el que estoy trabajando actualmente. Me lleva de 20 a 30 mins hacer algo como eso y lo mejor de todo te evitas muchos dolores de cabeza con tu cliente.

Más adelante voy a escribir un post dedicado a este tema, mucha gente los usa, mucha gente los odia y hay hasta quien se brinca de wireframes en papel al XHTML, de locos :p

WriteMaps, creando mapas de tus sitios en línea

Me encontré esta excelente herramienta para crear mapas en línea WriteMaps, es muy fácil usarlo y puedes compartir con tus clientes el mapa que hayas creado, así el puede editarlo, agregarle notas, etc.

Venía usando Mindmanager pero ahora que estoy en mac no he hallado sustituto o mejor dicho no he buscado mucho ¿pero qué mejor que tener tus mapas en línea? Estoy encantado con la herramientita :). Aquí un ejemplo de un mapa que hice, pruébenlo, verán lo sencillo que es.

Sitio Plaza Las Palmas

Este es otro sitio que terminé hace poco, pero que no se porque no lo había publicado. El proyecto fue hecho para Plaza Las Palmas un complejo de oficinas acá en la ciudad de Hermosillo. El sitio está hecho en HXTML + CSS. Si le ven algún bug les agradecería que me lo hicieran saber. Visitar sitio de Plaza Las Palmas.

Si tienes alguna vez la necesidad de mostrar gráficas en tu sitio te recomiendo AmCharts, que es lo que usamos en este sitio para desplegar la gráfica de dona. Es uy flexible y tienes control sobre como se ve, ángulo, colores, altura, etc. Los datos se alimentan desde un archivo de texto o bien pueden ser alimentados dinámicamente. Puedes usarlo de forma gratuita sólo que te dejan una liga en la parte superior de la gráfica. Si no te importa esto puede ser una buena opción.

Sitio web Los Santos Residencial

Recién terminé este sitio para Los Santos Residencial, una colaboración entre Miguel Ayala y Trost.

A nivel de código el sitio fue relativamente sencillo pero presetnó algunos pequeños retos con el CSS. Usé más flash de lo que normalmente uso pero creo que la dosis de flash que tiene le ayuda. El sitio esta hecho completamente en XHTML + CSS y validan :). Sitio de Los Santos Residencial.

Youtube y la optimización de recursos

Estaba navegando por youtube y me llamó la atención unos botones amarillos que están usando recientemente en la interfase, quise ver como los hicieron, me interesaba ver que técnica usaron. Click derecho / View background image / sorpresa! me encontré esto.

Todos los elementos gráficos de la interfase del sitio están contenidos en un sólo archivo "master-vfl32776.gif", desconozco la manera en como posicionan el gif para que despliegue bien en cada caso que se necesita pero es algo ingenioso que no había visto en ningún sitio web. ¿La razón? supongo que es mejor cargar una sola foto aunque pese más que cargar 50 pequeñas imágenes cada vez que alguien visita el sitio. —El server lo agradece—. Otra razón puede ser que de esta forma en un sólo file tienen contenido todo lo que pueda usar la interfase, así no andan buscando y actualizando pequeños archivos de forma individual. O tal vez las dos razones.

Esta técnica al parecer no es nada nueva, se usa en el desarrollo de videojuegos y en los skins de algunos programas como winamp por ejemplo. ¿Interesante no? Uno nunca sabe a donde lo va a llevar el siguiente click :)

Obama un ser celestial

O cuando menos esa es la impresión que me da cuando entro a su sitio. El sitio está bien hecho, el código es limpio, pero creo que se pasaron con los glows, muy celestial a mi parecer, o como si fuera de una iglesia cristiana, no se.

Por otro lado es muy interesante el manejo que están haciendo de la imagen en sus diferentes aplicaciones, en esta liga pueden ver variaciones del logo aplicadas a diferentes escenarios o targets. Muy inteligente, un perfecto ejemplo de identidad bien aplicada.

Semblanza de Trost media en Maestros del Web

Stephanie Falla editora de Maestros del web ha tenido el detalle de hacernos una entrevista que recién fue publicada en la sección de semblanzas de Maestros del Web. Muchas gracias Stephanie!

Maestros del web desarrolla una actividad muy importante en la difusión de tips, técnicas, estándares web, etc. desde hace varios años, todos sus contenidos están enfocados a hacer de la web un mejor lugar. Si eres desarrollador de sitios alguna vez habrás estado por su sitio.

Aquí la semblanza