Diseño estratégico

Pasos para construir sitios web exitosos.

El diseño de paginas de internet es una colección de diferentes habilidades — redacción, tipografía, y arte — todo fusionado para crear una interfaz que no sólo cuente con una estética agradable, pero que comunica la función y facilita el acceso a su contenido. Sin embargo para lograr resultados exitosos, hay que combinar todos estos elementos con una dirección clara. Una dirección que guiará cada aspecto del diseño hacia objetivos comunes. Esto es diseño estratégico.

Diseño estratégico es la fusión de métodos de organización con todos los aspectos del proceso del diseño. No es simplemente diseñar una pagina web para que se vea bien. Se trata de lograr los objetivos y las metas de quien lo ha contratado, mas allá del diseño. Existen muchos sitios web con diseños increíbles, los cuales despliegan las ultimas tendencias tecnológicas, y que a menudo fallan miserablemente en su objetivo. Claro que es importante estar actualizado en lo que respecta a nuevas tendencias y técnicas, ya que mantiene nuestros diseños frescos y modernos, pero la aplicación de estos debe ser usados inteligente y centradamente. Por ejemplo, un blog no es un folleto de mercadotecnia, por lo cual es importante hacer que nuestro diseño este dirigido a facilitar la lectura en lugar de estilo. De la misma forma, una pagina web para promocionar juegos de computadora será muy diferente, ya que hará uso de gráficas que muestran las cualidades del producto, en este caso el diseño visual es lo mas importante.

Cuando un diseñador usa la tecnología de moda sin pensar cual es la función del sitio, o no toma en cuenta el negocio u organización detrás de este, seguramente los resultados finales serán poco efectivos.

El diseño de sitios web es la creación de una interfaz que comunica función, uso y fácil acceso, ademas de provocar los sentimientos y las emociones correctas. Un sitio web efectivo contiene todos estos elementos conjuntamente con los objetivos de nuestros clientes. Por lo que diseño estratégico es identificar las metas y usarlas para que guíen nuestro diseño.

Implementación de diseño estratégico

Veamos como podemos diseñar estratégicamente en seis pasos nuestro proyectos web.

1. Estableces Metas
El primer objetivo antes de diseñar el sitio web, es hablar claro con los clientes acerca de las metas. ¿Que quiere lograr con su nuevo sitio web o su re-diseño? ¿Cual es el propósito de la pagina? Pregunte al cliente o preguntese así mismo cuales son los objetivos y metas. Si aun no lo sabe, hable al respecto con el cliente hasta que quede perfectamente claro. Es importante saber cual será la dirección a seguir si desea que su diseño tenga un propósito.

Recuerde que un sitio web no es una obra de arte, es una interfaz que cumple con un propósito. Esa función puede ser la de vender productos, entretener, informar, o facilitar el acceso a un servicio. Cualquiera que sea la función, su diseño deberá centrarse en estos objetivos. Las metas también son importantes, especialmente cuando esta haciendo un re-diseño. Pregunte por que se esta re-diseñando: ¿Quiere aumentar el numero de inscripciones, reducir el numero de cancelaciones, o tal vez aumentar la participación de los usuarios? Cada una de estas respuestas le darán una dirección clara de que tipo de diseño se debe implementar.

2. Identificar a su público
Quién es su público, jugará un papel importante en la forma en que su sitio web debe ser y funcionar. Hay muchos datos demográficos pueden influir en su diseño, tal como la edad, sexo, profesión, etc. Por ejemplo; un sitio web de juegos de computadora será dirigido a un público más joven, y un sitio web de noticias será dirigido a una audiencia madura. En este caso, la navegación sencilla deberá desempeñar un papel más importante para audiencias mayores y con menos conocimientos técnicos.

Su audiencia no sólo influye en la estética general del sitio web, también determinará un montón de pequeños detalles, tales como los tamaños de fuente, el tipo de imágenes, etc. Por lo que es importante saber de antemano quien visitara el sitio web.

3. Determinar la Imagen de Marca
Muchos diseñadores tienden a inspirarse demasiado en las ultimas tendencias y las aplican sin pensar cual es la imagen que realmente deberían usar. Botones tipo cristal, degradados y reflexiones pueden funcionar para algunos sitios, pero no son los correctos para el sitio que estará diseñando y para la imagen del cliente.

Piense sobre el color. Piense en la sensación que quiere lograr y de las emociones que desea provocar. Su diseño deberá personificar y tener el carácter de la imagen de marca del cliente. Todo tiene una imagen de marca, aun que no se venda algún producto o servicio — por ejemplo, si usted tiene un blog — su sitio web tiene un estilo que crea alguna impresión en sus visitantes. Determine cual será la impresión que el sitio debe evocar.

4. Dirección de diseño orientado a objetivos
Ya determino el propósito del sitio web, ya se establecieron algunas metas que se quieren lograr, ya identifico su audiencia y su imagen de marca. Ahora pude proceder a su ejecución. ¿Como hacer que el diseño este sincronizado con su estrategia? Usemos el siguen ejemplo.

Supongamos que le objetivo principal es aumentar el numero de subscripciones a su sitio web. ¿Como el diseño puede lograr ese objetivo? Hay por lo menos tres cosas aquí que harán la diferencia:

• Hacer el acceso a la pagina “Acerca de”, lo mas claro y conciso posible. El visitante no debe tener ninguna duda de cual es la función del sitio.

• Utilice color y contraste para que el botón de registro o vinculo se destaquen. Si la gente no encuentra fácilmente este botón, seguramente no se suscribirá.

• Agilice el proceso de registro eliminando los elementos innecesarios y opcionales. Estos datos pueden ser llenados mas tarde. Si la forma es muy larga, lo mas probable es que el visitante cierre la pagina.

Estos son sólo tres formas de dar dirección al diseño dirigido hacia la meta de incrementar el numero de subscripciones al sitio. Las metas pueden variar, pero la estrategia es la misma: dar forma y enfocar todos los elementos de diseño en el cumplimiento de esos objetivos.

La misma estrategia se aplica a su marca y a su público: el mejor diseño es el que se adapta a las metas. Si el sitio web es para entretenimiento, entonces cree una “experiencia”. En este caso puede usar mucho color, e imágenes que den forma y proyecten esta experiencia al visitante. Pero si esta diseñando un sitio web de información, tales como un blog o una revista, nuestro objetivo se centrará en el uso y legibilidad. Crear una interfaz que no distraiga al usuario del acceso del contenido.

5. Medir los resultados
Una vez que se haya diseñado el sitio web y que este en linea, es el momento para medir el éxito. Esto es tan importante como los dos primeros pasos, ya que probará lo bien que fue diseñado y su eficacia para lograr las metas y objetivos preestablecidos.

Si el objetivo es aumentar el número de inscripciones a su servicio, mida y vea si los cambios están teniendo un impacto positivo. Vea como las estadísticas de su RSS se incrementan. Si el objetivo fue aumentar la participación del usuario, vea si hay más comentarios o mensajes en el foro, o cualquier otra cosa relevante en el contexto.

También puede preguntar la gente sus opinión al respecto, esta es una manera sencilla para saber si va en la dirección correcta. Pero tenga cuidado en implementar todas las sugerencias que le hagan. Ya que cada quien basa su opinión en su gusto personal, y cada quien tendrá una opinión diferente de como debería ser diseñado el sitio web. Si va escuchar opiniones, busque patrones; vea que tienen en común los comentarios, y analice e implemente aquellos que se alineen con la estrategia y las metas preestablecidas.

Medir los resultados del sitio web es toda una ciencia, y va mas allá de este articulo. Sin embargo, no importa el tipo de análisis que se haga, lo importante es tener alguna forma medir los objetivos clave. Esta información puede mostrarnos si vamos en la dirección correcta con nuestro diseño y cuales son los cambios que necesitamos implementar en el futuro.

Aun si el presupuesto es mínimo, se puede usar herramientas para obtener información sobre el sitio web, el que nos dirá cuales son las paginas que la gente visita mas en su sitio, etc.

Google Analytics es un servicio gratuito, con gran cantidad de datos sobre cómo se está utilizando su sitio web, incluyendo plantillas de las páginas para ver donde la gente hace clic con más frecuencia, y mucho más.

6. Kaizen
Hay una filosofía japonesa llamada “Kaizen”, que se centra en la mejora continua mediante pequeños pasos. Cuando usted diseña un su sitio web, deberá pensar en Kaizen ya que la versión que acaba de publicar no es la versión final. De hecho, nunca hay una versión final.

Siempre se puede hacer mejoras, y la propia naturaleza de un sitio web le permitirá introducir estos cambios en cualquier momento. Una revista que se imprime y se vende: una vez que la revista se distribuye está fuera de sus manos, no se puede hacer ningún cambio, corregir ortografía o errores. Un sitio web, sin embargo, se encuentra en el servidor: si encuentra un error, puede corregirlo de inmediato. De la misma manera, se pueden introducir mejoras graduales y actualizaciones para que el sitio web sea más eficaz y en el servicio de su función.

Utilizando los resultados de las mediciones, se puede identificar las áreas problemáticas. Tal vez sus visitantes no pueden encontrar el vinculo RSS, o el porcentaje de abandonos es muy alto, o una página importante en su sitio web no está recibiendo suficientes visitas. Sea cual sea el problema, siempre habrá una manera de mejorar las cosas.

Conclusión:
La esencia principal del diseño estratégico es simplemente sentido común: hacer algo con propósito específico, por supuesto, este objetivo se debe cumplir a través del diseño. Ya que en la realidad es muy fácil olvidar las metas y terminar con algo que es hermoso, pero en última instancia que no funciona en contexto. Es muy fácil caer en la trampa de usar de las últimas tendencias de diseño sólo por hacer un diseño atractivo, o dar formato una sección del sitio web que pretende parecerse otro sitio web sin tomar en cuenta el propósito de este.

Evite caer en estas trampas, pensando de antemano cada decisión de diseño que realice. Por que el color de este botón? ¿Por que estamos usando el tabulares? ¿Por que debemos utilizar iconos en esta lista? Una vez que creamos el habito de cuestionar cada decisión de diseño, todo el proceso se vuelve mas acertado y centrado. No se limite a crear un hermoso sitio web: cree una página web que realmente funciona.

Movimiento de Desplazamiento

Hace un par de días, asistí al grupo de Muse el cual se junta cada mes en las oficinas de Adobe en San Francisco, CA. En donde Aaron Lawrence y Dani Beaumont nos instruyeron en el uso del efecto de movimientos de desplazamiento y que hoy quiero compartir con ustedes.

Movimineto de desplazamiento

De clic aquí para bajar los archivos para la lección.

Mis características favoritas del nuevo Adobe Muse CC

130618_muse_groups

El día 17 de Junio de este año, Adobe lanzo sus nuevas versiones de programas llamados CC por sus siglas en ingles “Creative Cloud”. Con ellos Muse cumple un año desde de su lanzamiento. Un día después, tuve la oportunidad de asistir al grupo de usuarios de Muse en las oficinas de Adobe en San Francisco, CA; en donde la gerente de producto Dani Beaumont y el evangelista Aaron Lawrence nos dieron una demostración de las nuevas características del programa. Todas las mejoras son muy bienvenidas; y de todas éstas, hay cuatro que me llamaron mucho la atención y que definitivamente harán que mis diseños sean mas interactivos, mas cautivadores para hacer que los visitantes permanezcan mas tiempo y tomen acción.

 Capas (Layers)

Tal como en cualquier otro programa de diseño, ahora Adobe Muse cuenta con capas. Lo cual nos permite agrupar y organizar todos los objetos creados en la pagina. Este concepto no es  revolucionario, pero el hecho de que ahora lo haya en Muse vale la pena mencionarlo. Ya que cuanto mas complejo sea nuestro diseño, mas necesitaremos de herramientas que nos ayuden a organizarnos, permitiendo mover objetos hacia adelante y hacia atrás, o hacerlos invisibles fácilmente.

4_funciones_capas

Formularios de contacto (Forms)

Cuando tenemos visitantes en nuestra pagina, queremos que estos permanezcan lo mas que se pueda, y nos den su información para que demos seguimiento ya sea para ventas, o simplemente para mantenerlos informados. Los formularios de contacto nos permite recolectar esta información sin que el visitante se vaya de nuestro sitio. En la versión anterior de Muse, esta opción estaba limitada para los usuarios subscritos en Business Catalys de Adobe. Ahora podemos ofrecer este servicio a nuestros clientes sin necesidad de estar subscritos. Estas formas vienen como un nuevo widget, y el único requisito es que el proveedor de servicio ofrezca .php. Esta opción es muy común, y Muse creara el código necesario para crear las formas.

4_funciones_formularios

Metadatos para todas las paginas. (Metadata)

En versiones anteriores de Muse para adicionar metadatos a las paginas, había que hacerlo de una en una para obtener un buen SEO (Search Engine Optimization). Ahora en Muse CC se hace una sola vez, cuando en la pagina maestra en propiedades se adiciona la información en Metadatos; automáticamente esta información se añadirá a todas las paginas de su sitio, a las cuales se hayan aplicado esa pagina maestra.

4_funciones_metadatos

Movimiento de desplazamiento (Parallax Scrolling)

Tal vez una de mis opciones favoritas sea el movimiento de desplazamiento, en ingles “Parallax Scrolling”. Esta nueva opción en Muse CC nos permite crear efectos impresionantes en unos cuantos clics para hacer que imágenes y objetos se muevan dentro de la ventana del navegador en diferentes direcciones y velocidades cuando el usuario desplace la pagina.

Estos son dos sitios que vale la pena explorar, ya que hacen uso del movimiento de desplazamiento y ejemplifican su uso: richardshephered.com y aaronlawrencedesign.com.

4_funciones_richardshephered

4_funciones_aaronlawrence

Adobe Muse continua incorporando las mas modernas tendencias y normas de codificación con cada actualización, haciendo que mis paginas de internet se vean modernas, de vanguardia y sin la necesidad de escribir ningún tipo de código.

Jose F. Justo

130618_muse_groups_visitor

Adobe Kuler

Como diseñador gráfico, siempre he pensado que el color no es una característica; sino que es mas bien, una sensación que se produce en respuesta a la estimulación visual. Por lo que es importante seleccionar los colores adecuados para provocar ese sentimiento. El circulo cromático ha sido una de mis herramientas favoritas para encontrar los valores adecuados cuando se trata de color y gracias a Adobe Kuler, siempre esta al alcance de mis manos.

Adobe Kuler es una pagina de internet, en donde se pueden crear muestras o esquemas de color personalizados usando el principio del circulo cromático. Aquí creo gamas dependiendo del color que seleccione, y uso las diferentes reglas como; análogo, monocromático, triple, complementarios, compuestos y sombras para explorar nuevos esquemas. Los colores son guardados en grupos de 5 llamados Temas, los cuales puedo editar en cualquier momento, o bien compartirlos en la comunidad de Adobe Kuler. Si necesito algo de inspiración, en la sección “Explore” puedo ver que es lo que están haciendo otros miembros y si encuentro algún Tema que me me guste, puedo bajarlo como archivo Swatch Exchange a mi computadora, para importarlo por las aplicaciones de diseño de Adobe.

https://kuler.adobe.com

Adobe Kuler-CreateAdobe Kuler-Explore

Ahora… ¿Que pasa cuando necesito capturar los colores de mi entorno? tal como un paisaje, un mural, foto, o simplemente no tengo tiempo de crear algún Tema manualmente. Afortunadamente para los que somos usuarios de iPhone, iPod o iPad, Adobe ha creado la aplicación Kuler. Este programa puede ser bajado en iTunes sin costo, y funciona exactamente igual que la pagina de internet, pero con algunas ventajas mas. La aplicación usa la cámara del dispositivo, y cuando ésta se activa; Kuler lee los esquemas de colores y los representa activamente en la pantalla. Conforme voy moviendo la cámara, el Tema de color se va ajustando y una vez localizada la muestra de color que deseo capturar, lo acepto. Moviendo los indicadores de color que aparecen en la pantalla puedo ajustar cada una de las muestras hasta que este satisfecho con la selección. Y dándole un nombre, el Tema es guardado en mi dispositivo. El Tema lo puedo modificar posteriormente u obtener información de los colores tal como los valores en RGB o hexadecimal. También puedo compartir el Tema, ya sea por medio de email o Twitter. Lo mejor sucede sin que me de cuenta. Ya que tengo una cuenta con Adobe, mi Tema es actualizado en la nube de computo para que pueda ser accesado en cualquier computadora, e importado directamente a mi aplicación favorita en Adobe CC.

Adobe Kuler-mzl.hamzfdqe.320x480-75 Adobe Kuler-mzl.ssxbqsky.320x480-75 Adobe Kuler-mzl.zmaptens.320x480-75 Adobe Kuler-mzl.zyrqbqou.320x480-75

Adobe Kuler es una excelente herramienta para nosotros diseñadores y para los amantes de color, ya que permite ir mas allá de los colores que se han pensado. Y con la aplicación para iOS, ahora puede capturar los colores que lo rodean y optimizando su flujo de trabajo.

Jose F. Justo

Inspirado por Muse

Jose-F-Justo

Después de trabajar como director de arte, en una agencia de publicidad en San Francisco por mas de 14 años, fui liquidado; y por primera vez en mi vida me encontré sin trabajo.

Después de algunas semanas de vacaciones, empecé buscar trabajo y me di cuenta que en todos los anuncios que leía, solicitaban que el aplicante tuviera un sitio de internet con muestras de trabajo. Por lo que empecé a diseñar mi portafolio en para ser visto en internet.

Habiendo trabajado en una agencia, seguir mismo proceso para crear mis páginas web como lo haría con cualquier cliente. Hice todos mis diseños usando InDesign, Photoshop e Illustrator. Una vez bocetadas todas mis paginas, era tiempo de crear mi sitio.

Al principio, pensé hacerlo en Flash, ya que es un programa que conozco muy bien. Sin embargo, desde la aparición del iPhone y iPad cada vez se usa menos esta aplicación para la creación de sitios. Así que me puse en contacto con un ingeniero para codificar mis paginas. Después de leer la cotización me sentí muy desalentado. El tiempo que tardaría para crear el sitio y los honorarios estaban fuera de mi presupuesto. Traté de codificar en Dreamweaver pero sin éxito. Mi conocimiento de código era tan básico que no me llevo a ningún lado. Se me ocurrió que debería existir algún un programa en el cual pudiera diseñar y que automáticamente exportara el código. Trate de usar iWeb, pero el programa era muy básico, lento y Apple lo discontinuó hace algunos años. Continúe buscando y encontré sitios en donde vendían plantillas, o sitios que ya tenían estructurado el diseño. Pero nada que me diera la libertad de diseñar como yo quería.

Un día por azares del destino, me encontraba en la pagina de Adobe actualizando mi información, cuando el titulo de un articulo me llamo la atención. “Si usted es diseñador gráfico, y desea crear paginas de internet sin codificar. Subscribase a al programa beta publico de Adobe Muse”… ¡Eureka!  Yo soy diseñador gráfico, yo no se código, y yo necesitaba desesperadamente una pagina de internet. Tal parecía que el articulo lo hubiera sido escrito para mi. Me subscribí al programa inmediatamente para ver de que se trataba. Cuando empecé a leer sobre Muse me di cuenta que de esta aplicación era mucho mejor de lo que yo esperaba. Así que me puse como meta aprender todo lo que el programa podía ofrecer. Tome el curso de Muse en la pagina Adobe paso a paso. Una vez que termine empecé a diseñar mis páginas con Muse. Desde que abrí el programa me sentí muy familiarizado con la interfaz y los comandos. Las funciones se me hicieron muy fáciles y lógicas. Fue cómo usar cualquier otro programa de diseño de Adobe. Empecé inmediatamente a crear páginas, hacer vínculos, menús dinámicos, diapositivas, y mucho mas. Fue tan fácil que una semana más tarde tenía mi portafolio en línea.

Esto me abrió una nueva puerta de oportunidades inesperadas. Empece a ofrecer mis servicios como diseñador visual. Desde el diseño de materiales impresos, diseño de paginas de internet y el código de las paginas web. Por lo que empece a ser recomendado, esto creo nuevas oportunidades de ingreso, dándole servicio integrado a mis clientes.

Ahora trabajo por mi cuenta, sin jefes, sin horarios, mi ingreso es mucho mas alto de lo que ganaba cuando estaba empleado y tengo tiempo para las cosas que verdaderamente valen la pena.

Gracias Muse por la inspiración.

Jose F. Justo

Adobe Muse en Español

Bienvenidos a Adobe Muse en español.

Muse es la respuesta de Adobe para aquellos que prefieren diseñar sitios de internet
en un entorno gráfico sin necesidad de codificar.

Este programa esta dirigido principalmente a diseñadores gráficos, diseñadores de impresión, o para personas que no desean codificar HTML, CSS, Java Script, etc. y quieren crear un sitio de internet.

Si usted tiene el talento creativo, con Adobe Muse podra usar esa habilidad y crear sitios de internet dinámicos, interactivos y profesionales con el mismo tipo de herramientas que usaría para diseño de impresión, de manera fácil y rápida.