Puerta bonita

download Puerta bonita

of 60

  • date post

    18-Dec-2014
  • Category

    Documents

  • view

    2.227
  • download

    1

Embed Size (px)

description

Taller ofrecido por Pedro Jesús González dentro de la colaboración de Domestika en Madrid Tecnología

Transcript of Puerta bonita

  • 1. Ponente: Pedro Jess Gonzlez www.domestika.com Marketing Digital para la Pyme Aula Puerta Bonita - 07 Sept 2010 www.domestika.org
  • 2. Los objetivos de mi web Ya, pero definir objetivos es la clave. (Es casi ms dficil que cumplirlos)
    • Aumentar mis
    • beneficios, no?
  • 3. 0- Y todo por un embudo
  • 4. El embudo de conversin Usuarios de Internet Encuentran nuestra web Navegan por nuestra web Encuentran nuestro formulario, tienda online Los que empieza un proceso Los que lo terminan Los que nos recomiendan Los que vuelven Marketing Diseo Web + Usabilidad = Diseo de Interaccin Servicio, claro El embudo de conversin surge de la Analtica Web
  • 5. Estrategia Parte 1 Conciencia Consideracion Objetivo Embudo de Conversin Estrategia Parte 2
  • 6. Diseo Orientado Usabilidad Accesibilidad Analtica Web Conversin + + + + = Una estrategia general:
  • 7. SEO SOCIAL MEDIA SEM Analtica Web Atraer Trfico + + + + = Una estrategia general:
  • 8. + + + = xito Online Atraer Trfico Conversin La clave:
  • 9. 1.- Fijemos los objetivos de la pgina
    • Informacin corporativa.
    • Venta online?
    • Catlogo online amplio o monoproducto?
    Diseo Orientado
  • 10. 1.- Fijemos los objetivos de la pgina Diseo Orientado
  • 11. 2.- La casa en orden: la estructura web
    • Definicin de layouts / wireframes.
    • Sitemap / mapa de la web
    • Tipo de navegacin
    • Niveles de navegacin
    Diseo Orientado
  • 12. Estructura Web
    • Estructura acorde con los objetivos de la web . La home se estructura para lograr los objetivos de comunicacin: informativos, comerciales, atencin al cliente, producto, etc.
    • URLs claras y nicas . Cada pgina, una URL descriptiva, nica y permanente.
    • Informacin de contacto clara . Destacada y bien ubicada, fcil de encontrar desde cualquier punto de la web.
    • Rtulos significativos y estndar . Las palabras elegidas como men de navegacin deben ser simples y descriptivas. Estilo de redaccin.
    • Navegacin completa y descriptiva . Donde ests, dnde has estado, dnde puedes ir. Un sistema de navegacin consistente. Mximo 4 niveles de navegacin.
    Diseo Orientado
  • 13. Estructura Web
    • Mximo 7 items de navegacin .
    • Breadcrums o migas de pan . Muestra el camino hacia atrs. Tambin Tags
    • Enlace a la home en el logo . Recurso sencillo para facilitar la vuelta a la pgina de inicio.
    • Enlace a la pgina de inicio desde todas las pginas .
    • Enlaces claros y bien identificados en todo el site . Con estilo propio y bien visibles.
    • Aprovechar la jerarqua visual para estructurar informacin . Estableciendo niveles de importancia del contenido y ponindolos en los sitios ms visibles.
    Diseo Orientado
  • 14. Estructura Web
    • Evitar sobrecarga informativa . No ms de 7 2 elementos por pgina.
    • Ayuda contextual y mensajes de error . Para tareas complejas, ayudas con globos de texto, informacin sobre tamao y formato de un documento, etc., evitando secciones independientes de ayuda.
    • Informacin de estado. En tareas complejas (como una compra), informar de dnde se est y lo que falta para terminar.
    • Evitar flash innecesario . No usar intros en flash, no construir pginas completamente flash. Usar elementos flash para introducir toques de dinamismo en la web (cabecera, banners, etc).
    Diseo Orientado
  • 15. 3.- Aspecto Visual
    • La esttica tiene una utilidad funcional.
    • La imagen de nuestra empresa
    • Las tendencias existen, como en la moda, y las webs se quedan obsoletas.
    • Ojo con el flash y las webs sobrecargadas
    Diseo Orientado
  • 16. 3.- Aspecto Visual Diseo Orientado
  • 17. Diseo grfico en la web
    • Look & feel adaptado a los objetivos y al sector . Los colores y la imagen del site debe mantener una mnima correspondencia con la actividad de la empresa.
    • La cabecera marca la pauta . En trminos de estilo, tono, calidad, actividad de la empresa. Puede llegar a definir el tono cromtico del resto de la web.
    • El logotipo de la empresa debe integrarse . En ocasiones se puede modificar ligeramente en color o forma el logotipo para evitar disonancias visuales.
    • Evitemos ruido visual . Lograr un balance en peso grfico y en estructura: esttica, contenidos y usabilidad. Ojo con las imgenes de fondo (slo en partes externas). Animaciones mnimas.
    Diseo Orientado
  • 18. Diseo grfico en la web (II)
    • Jugando con los espacios en blanco . Pueden existir, pero en Internet tienen un coste mayor. Ayudan en el equilibrio visual.
    • La jerarqua visual . El peso grfico de los elementos debe establecer una jerarqua segn la estructura web. La cabecera, logo y claim ganan peso, pero podra hacerlo tambin una imagen de producto.
    • Uso tipogrfico adecuado . El tamao, tipo, resaltados, ancho de lnea, alineaciones, etc de los textos son clave para la legibilidad y la organizacin de la informacin. Hacer uso de negritas, cursivas, titulares para facilitar la lectura.
    • Contraste entre fuente y fondo . Buscar un efecto positivado, de letra oscura sobre fondo claro.
    Diseo Orientado
  • 19. Diseo grfico en la web (III)
    • Evitar el sonido ambiental . Salvo que la actividad lo requiera, el sonido o msica no aporta nada. A veces, puede estar incorporado en un flash. En todo caso, se debe poder apagar el sonido.
    • Uso o abuso de ornamentos o recursos grficos. Pueden aportar equilibrio, belleza, pero deben usarse adecuadamente. Pueden estar bajos de tono, no son protagonistas.
    • Proporciones de los elementos de la web . En funcin de la actividad, el objetivo de la web, el tamao de la cabecera, por ejemplo, puede variar.
    • La paleta cromtica . Definir paletas cromticas corporativas y mantener los tonos en toda la web, incluyendo imgenes, ilustraciones o fotos en la medida de lo posible.
    Diseo Orientado
  • 20. Accesibilidad web
    • Accesibilidad web: Capacidad de acceder a una web y sus contenidos independientemente de la discapacidad de un usuario o de su contexto de uso (dispositivos, etc).
      • Aumenta el nmero de visitantes a nuestra web.
      • Disminuye los costes de desarrollo.
      • Reduce el tiempo de carga de la web.
    • XHTML y CSS. Hoy da, un estndar de maquetacin web, separa los contenidos del diseo, y facilita la accesibilidad.
    • Visible en cuntos navegadores? A principios de 2009, Internet Explorer 6, IE7 y Firefox tienen un ratio de uso en Espaa de un 4/4/2 aproximadamente. Hoy, 6/4
    Accesibilidad
  • 21.