viernes, 28 de octubre de 2011

Storyboards for banners

Campaña e-Predictor - México
Originalmente publicado en el Blog de Reprise Media Chile)


La congruencia entre el desarrollo gráfico y las necesidades del cliente en una pieza publicitaria son fundamentales para el mensaje que se quiere transmitir. El storyboard es una herramienta bastante útil para compartir y previsualizar ideas, imágenes y probar textos, sea desde cero, con las gráficas ya diseñadas, con papel y lapiz o directamente en el computador. 


 Un storyboard es un bosquejo de la secuencia de pantallas, transiciones y textos que tendrá un banner. Lo idea es trazar un espacio para dibujar los elementos de la imagen y otro para escribir los textos y definir cuáles serán los planos, ángulos y movimientos de los objetos. La extensión dependerá de la cantidad de pantallas que deba contener la pieza gráfica (entre 4 y 10). 


 Usar un storyboard puede ser de gran ayuda para que el equipo de Desarrollo o Producción logre una cohesión de ideas en el producto final, pero también servirá como material de prueba a trabajar con el cliente antes de comenzar la producción de las piezas finales. 


 Dibujados a mano, con una tableta gráfica o en un software, lo ideal es crear una plantilla con los diferentes tamaños de banners existentes, para tener una idea real de la o las alternativas de pantallas para mostrar el mensaje de la marca. 


 Ver banner aquí.

lunes, 26 de septiembre de 2011

Wireframes: ensayo y error

Ejemplo de wireframe
(Originalmente publicado en el Blog de Reprise Media Chile)


El desarrollo web incluye varias etapas, y lograr coherencia entre las expectativas del cliente y las habilidades del equipo de producción en este proceso puede tornarse en toda una experiencia. En ocasiones, las marcas no tienen claro cómo quieren mostrarse a través de un sitio, una aplicación móvil o las redes sociales. 


Aquí entra al juego el wireframe, una útil herramienta para ensayar prototipos sin malgastar tiempo, recursos de diseño y programación. Luego de tener certeza sobre la estructura de contenidos y diagrama de navegación de un sitio, dibujar maquetas, esquemas, prototipos, bosquejos o wireframes permite ordenar los elementos y ayudar a los clientes a visualizar lo que buscan. 


 Estos ensayos pueden realizarse manualmente en hojas de papel, con ayuda de un stencil o en un computador con software. Una vez aprobado, un wireframe puede transformarse en un mockup, es decir, una versión más cercana al look & feel del sitio en términos de color y dimensiones, o puede pasar directamente a la fase de diseño y programación, para luego convertirse en una plantilla o en algún elemento gráfico que finalmente se transformará en el producto final. 


 Cada equipo puede elegir la técnica para crear wireframes que sea más conveniente. Lo principal es cumplir estos objetivos: ayudar al cliente a definir cómo quiere verse y obtener feedback sobre el avance del trabajo.  


En estos enlaces puedes encontrar herramientas para hacer wireframes gratis: 
 Smashing Magazine: Free Wireframing Kits, UI Design Kits, PDFs and Resources 
Net Magazine: Wireframe tools: the top 10 solutions 
Mashable: 10 Free Wireframing Tools for Designers

jueves, 23 de julio de 2009

CineMóvil, el cine en tu celular

- Se trata de la versión móvil (mobile) de www.cinesfera.cl, comunidad que alberga críticas y noticias relativas al séptimo arte.
- Está enfocado en entregar un servicio basado en GPS, que indique la oferta cinematgráfica al usuario en movimiento.
- Se puede acceder desde un navegador web para móviles como Opera Mini a través de m.cinemobile.cl
- Para conocer más esta idea, revise la presentación más abajo.

miércoles, 22 de julio de 2009

Cómo publicar los textos largos en internet

Esta presentación la preparamos Pablo Muñoz y yo, acerca del artículo "La Nación Gate I: cómo se privatizó el diario “del Gobierno”", escrito por la periodista Alejandra Matus para el diario El Mostrador.

Aquí describimos cómo condensar grandes cantidades de información, de manera que se mantenga la tendencia de escribir preciso y conciso para la web, pero al mismo tiempo, entregar contenido de calidad:

- Recortar los párrafos a no más de 4 líneas cada uno.
- Utilizar negritas y cursivas para facilitar la lectura.
- Separar el tema usando links a información complementaria.
- Establecer subtítulos linkeables al costado derecho, de manera de “navegar” el texto y predisponer al lector a la información que contiene dicho apartado.
- Realizar línea de tiempo con hechos importantes del diario.

- Hacer galería de fotos de personajes relevantes con información (Francisco Feres, Knut Herud, Eilet Herud, Sebastián Piñera, Carlos Ibañez del Campo, Miguel Bejide, Cristián García-Huidobro Ruiz-Tagle)

Ahora, la presentación que describe cómo quedaría el texto siguiendo estas recomendaciones


Un buen título conquista al lector

Recuerdo que en la época que comencé a estudiar periodismo, aprendí que titular (la acción de crear títulos para los artículos) es un gran desafío. Básicamente, los títulos deben ser descriptivos del texto completo, es decir, resumirlo.
Ahora, el escenario del periodismo y la información está asentado tanto en las publicaciones de tiraje como en internet, logrando una relación mucho más dinámica e inmediata con los lectores. Dadas las diversas entradas a un contenido (feeds, blogs
, redes sociales), un título puede hacer la diferencia entre cliquear o no. E incluso, en mi experiencia como visitante de medios digitales, ha tenido efectos sobre mi opinión de la información entregada.

Para la creación de un título atractivo, se debe tener en cuenta, entonces:

- Informar de manera directa y activa, siguiento la fórmula Sujeto+Verbo Activo+Predicado. Las oraciones pasivas tienden a ser más largas y confusas.
- Mostrar la idea principal contenida en el texto. El título es un aproach al usuario, y ahorra tiempo en leer el texto completo para entender de qué se trata. Así también se evita que el lector pierda tiempo en temas que no le interesan.
- Ser comprendido fuera de contexto, debe ser atempor
al y no se puede dar por hecho de que todos los lectores conocen las historias y personajes relativos a un tema. Un título "sabiondo" y excluyente, al igual que las personas pedantes, generalmente no se entiende y aleja al público.
- Ser ingenioso/a. Eso se logra a través de analogías con conceptos conocidos para el público general y el uso de sinónimos, lo que incrementa el potencial impacto en el lector.


Para ejemplificar estas recomendaciones, he tomado un artículo publicado en el blog Fayerwayer.com el 15 de julio de este año, por el editor ZooTV. Se trata de:
"Ballmer se ríe de Chrome OS"

A pesar de tratarse de una comunidad experta en tecnología, que agrupa muchísimos seguidores también especializados, si el usuario no sabe o no recuerda de inmediato quién es "Ballmer" y qué es "Chrome OS", no comprenderá la idea del artículo y deberá leerlo completo. No se lo peude comprender sin el contexto.

En el primer párrafo del post, ZooTV señala que "Ballmer" (Steve Ballmer) es el CEO de Microsoft. Luego vuelve a mencionar "Chrome OS", en un tono que supone al lector como experto del tema. Posteriormente, en ningún párrafo del texto, la redacción sugiere directamente que "Chrome OS" no es más que el sistema operativo que la empresa Google lanzará pronto a mercado.

Sólo si se trata de un usuario que lee habitualmente el sitio web, se puede apreciar, luego de varias lecturas, que la idea principal del texto es: Steve Ballmer, director ejecutivo de Microsoft, se mofó de Chrome OS, un nuevo sistema operativo propuesto por otra empresa, Google.

Primero, mi propuesta de título es:
CEO de Microsoft de ríe del OS de Google

De esta forma, se comprendería el contexto general: dos empresas que están en disputa opr un producto creado por una de ellas. Luego, el primer párrafo debería explicar el contexto específico: una de estas compañías lanzará un sistema operativo que amenaza el dominio en mercado del actual, que pertenece a la otra.

Segundo, una reescritura completa del texto. Las ideas están, pero repite varios "motes", como "Sistema Operativo", que está presente en el tercero, cuarto y quinto párrafo. Tampoco se entiende por qué tiene las primera letras en alta.

No es necesario escribir grandes textos para entregar información. La precisión y calidad en web se agradecen.

lunes, 20 de julio de 2009

El mejor pétalo de la Margarita (el modelo)

Margarita es un modelo estupendo que funciona como espiral y se alimenta de sí mismo. Siendo así, considero a Crear como el pétalo más importante.
Permite tomar contenido y reelaborarlo basándonos en Definir, y en esta apropiación, podemos construir conceptos, significados (folksonomías) y palabras claves (keywords), que contribuirán al posicionamiento en buscadores.
También nos ayuda a conocer mejor la web y utilizar los elementos disponibles para ser usados mediante cortesía web (por ejemplo, saber del as garantía que nos dan las licencias Creative Commons).
Asimismo, es posible generar categorías para ordenar la información y relacionarla a contenido creado por otros(externos), fomentando el establecimiento de una comunidad relativa a esa información.

jueves, 18 de junio de 2009

¿Dónde está el HACER en ChileCambió.cl?

ChileCambió.cl es el sitio web creado para motivar a los jóvenes (y otros ciudadanos chilenos) a firmar para que Marco Enríquez-Ominami (a.k.a. MEO) pueda participar como candidato en las próximas elecciones presidenciales.


1. La cuestión que el sitio debiera MOTIVAR es ésta: FIRMAR. Y para lograrlo se debe explicar "por qué". "DEPENDE DE TÍ que Marco alcance las firmas a tiempo" es la oración que invita y resume, incluso, la existencia misma del sitio web. No obstante, aparece hacia el final, bajo el mapa. Esto obliga al usuario a usar el scroll para bajar y leer el sitio completo hasta encontrar la invitación. Pero, ¿qué pasa si el visitante deja el sitio antes de que podamos explicarle POR QUÉ debe votar por MEO?

2. DIFERENCIAR. Así como la preferencia de segmento para MEO es "los jóvenes", el tipo de usuario que visita debiera ser diferenciado también. Y ya podemos contar dos tipos: los inscritos y no-inscritos; y los convencidos, contrarios e indecisos (como diría Verón :P). Con la incitación inicial (FIRMA para que MEO pueda ser candidato) podemos lograr que, efectivamente, los ya inscritos firmen. Asimismo, es posible que los no-inscritos, que busquen una razón para inscribirse (un candidato que, mediante sus promesas, los convenza) vayan y se INSCRIBAN, siguiendo los tres pasos que se indican y apoyándose en el mapa para encontrar el sitio más cercano.

3. El segundo tipo de usuarios - los convencidos, contrarios e indecisos- necesitan NAVEGAR, LEER y CONOCER al candidato, para lograr una tercera acción relevante: VOTAR. Para ello, el sitio debe ALMACENAR información acerca del candidato (MOSTRAR fotografías, obras, opiniones, prensa), lograr una identificación (REPRESENTAR) al candidato a través del sitio, con colores distintivos y frases que remitan a él.

4. DEBATIR. El sitio web debiera darles espacio a los usuarios para CONVERSAR. Un FORO o MURO (como en Facebook), ayudaría a los visitantes a dejar su opinión, y compartir información entre ellos. No sirve de mucho poner a disposición las cuentas de redes sociales si el sitio no genera una conversación con el visitante. La imperatividad y univocacidad de los sitios web is so last week. la posibilidad de registro ("si ya tienes cuenta, ingresa aquí") podría constituirse en una oportunidad estadística para saber cuánta gente accede a él (sitio) y a qué cantidad de personas está llegando la información, cuáles son las vías por dónde llegan las personas y qué palabras son las más significativas. Sin embargo, para esto último es necesario un tiempo determinado del sitio circulando en la web.