Diseño Web Profesional
description
Transcript of Diseño Web Profesional
![Page 1: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/1.jpg)
Pedro Jesús Gonzálezwww.domestika.com
PRESENCIA WEB PROFESIONAL
Aula Vicálvaro - 07 Abril 2010 www.domestika.org
![Page 2: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/2.jpg)
— 10.000 clientes, 5 años
— 120 profesionales
— Socios: madrid tecnología, camerpyme, ministerio industria, google, paypal, vocento, yahoo!
— Tecnología propia
— Domestika.org
![Page 3: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/3.jpg)
¿Qué es una Presencia Web Profesional?
![Page 4: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/4.jpg)
Es aquella que no está realizada pensando en su dueño
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 5: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/5.jpg)
Aquellas en la que se tienen en cuenta todos los navegadores
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 6: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/6.jpg)
En la que se tienen en cuenta los detalles
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 7: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/7.jpg)
La que sabe adaptar las herramientas a las necesidades…
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 8: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/8.jpg)
… incluso cuando no parece posible
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 9: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/9.jpg)
Y ofrece siempre una alternativa
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 10: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/10.jpg)
En la que no se aporta información irrelevante para el usuario
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 11: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/11.jpg)
Una presencia web profesional, no deja las cosas a medio hacer
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 12: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/12.jpg)
no aporta información contradictoria
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 13: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/13.jpg)
Tiene en cuenta las necesidades de los usuarios
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 14: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/14.jpg)
Aprovecha el espacio visual
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 15: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/15.jpg)
Sin sobrecargarlo
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 16: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/16.jpg)
Ofrece ideas innovadoras a problemas comunes
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 17: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/17.jpg)
Porque la competencia está a un clic de distancia
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 18: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/18.jpg)
No tiene fallos de programación
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 19: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/19.jpg)
Los textos son redactados de forma sincera y pensando en el beneficio del usuario
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 20: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/20.jpg)
Siendo breves siempre que sea posible…
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 21: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/21.jpg)
… pero sin ser imprecisos
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 22: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/22.jpg)
No comete faltas de ortografía
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 23: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/23.jpg)
y cuida las imagénes utilizadas
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 24: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/24.jpg)
Tiene en cuenta que los usuarios van a opinar
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 25: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/25.jpg)
Ofrece la misma información en toda la web
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 26: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/26.jpg)
Cuida los mensajes de error
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 27: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/27.jpg)
Cuida su identidad visual
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 28: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/28.jpg)
No ofrece ambigüedades
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 29: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/29.jpg)
No pretende dar una solución a todas las necesidades de negocio
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 30: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/30.jpg)
… y tiene unos objetivos claramente definidos.
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 31: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/31.jpg)
Ofrece una navegación limpia y segura
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 32: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/32.jpg)
Y tiene un importante trabajo por detrás
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 33: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/33.jpg)
No tiene elementos dispuestos al azar sin que aporten información
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 34: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/34.jpg)
Establece claras llamadas a la acción
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 35: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/35.jpg)
… pues los usuarios las cumplimos.
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 36: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/36.jpg)
Los textos son redactados de forma sencilla
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 37: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/37.jpg)
Nunca sacrifica función a favor de un malentendido Diseño.
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 38: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/38.jpg)
Es actualizado frecuentemente…
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 39: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/39.jpg)
Atiende a usuarios con distintas necesidades
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 40: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/40.jpg)
Ofrece siempre una navegación segura
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 41: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/41.jpg)
Nunca incluye elementos como “En construcción”
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 42: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/42.jpg)
Es unívoco
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 43: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/43.jpg)
De verdad…
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 44: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/44.jpg)
No toma imágenes de Google sin informarse
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 45: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/45.jpg)
… y sus contenidos son revisados antes de publicarlos
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 46: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/46.jpg)
Es, en definitiva, lo contrario a esto:
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
![Page 47: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/47.jpg)
Diseño de Conversión
![Page 48: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/48.jpg)
El embudo de conversión
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
Diseño Web +
Usabilidad
= Diseño de
Interacción
Servicio, claro…
“El embudo de conversión surge de la Analítica Web”
![Page 49: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/49.jpg)
SEO
SOCIAL MEDIA
SEM
Analítica Web
Atraer Tráfico+ +
+
+
=
Una estrategia general:
![Page 50: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/50.jpg)
Diseño Orientado
Usabilidad
Accesibilidad
Analítica Web
Conversión+ +
+
+
=
Una estrategia general:
![Page 51: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/51.jpg)
+ ++ = Éxito OnlineAtraer Tráfico Conversión
La clave:
![Page 52: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/52.jpg)
I.- 10 claves para el éxito de una “web corporativa”
![Page 53: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/53.jpg)
1.- Préstale la importancia que merece
• La primera clave es el cariño.
• Una web es un proyecto que empieza, pero no acaba.
• Dinero y esfuerzo. Más de lo que parece inicialmente.
• La imagen de la empresa en juego.
Para ver esta pel’cula, debedisponer de QuickTimeª y de
un descompresor .
![Page 54: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/54.jpg)
2.- Fijemos los objetivos de la página
• Información corporativa.
• Información sectorial.
• ¿Venta online?
• ¿Catálogo online amplio o monoproducto?
![Page 55: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/55.jpg)
IMAGEN
3.- La casa en orden: la estructura web
• Definición de layouts / wireframes.
• Sitemap / mapa de la web
• Tipo de navegación
• Niveles de navegación
![Page 56: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/56.jpg)
IMAGEN
4.- Si queremos que la usen, hagámosla usable
• El Diseño no es sólo estético.
• Establecer criterios de navegación.
• Especialmente importante si queremos vender online.
![Page 57: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/57.jpg)
IMAGEN
5.- Hacer una web fea cuesta casi igual que una bonita
• La estética 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
![Page 58: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/58.jpg)
IMAGEN
6.- Buen contenido y bien actualizado
• El contenido es el rey.
• Actualización periódica de los contenidos.
• Estilo directo y conciso.
• Uso de contenidos multimedia
![Page 59: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/59.jpg)
IMAGEN
7.- Posiciónate en buscadores
• Haciendo una web accesible.
• Generando buen contenido.
• Relacionándote en el mundo virtual y físico.
• Consiguiendo enlaces entrantes.
![Page 60: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/60.jpg)
IMAGEN
8.- Publicita tu web a los cuatro vientos
• Alta en buscadores, directorios locales y sectoriales.
• Contrata campañas de publicidad CPM.
• Campañas publicidad en buscadores (SEM)
• Web 2.0 y medios sociales
![Page 61: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/61.jpg)
IMAGEN
9.- Medir, medir y volver a medir
• Cuántas visitas, cuántos visitantes únicos, cuántas páginas vistas.
• Contenido más visto y tasa de rebote.
• Enlaces entrantes.
• “Keywords” en buscadores.
• Éxito de campañas publicitarias.
![Page 62: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/62.jpg)
IMAGEN
10.- Identidad digital: tu imagen en la red.
• Se mezcla la publicidad, la comunicación y la imagen de marca.
• Quién eres, quién trabaja en tu empresa
• Imagen profesional
![Page 63: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/63.jpg)
II.- Conceptos de diseño web
![Page 64: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/64.jpg)
Arquitectura y usabilidad web
• Estructura acorde con los objetivos de la web. La home se estructura para lograr los objetivos de comunicación: informativos, comerciales, atención al cliente, producto, etc.
• URLs claras y únicas. Cada página, una URL descriptiva, única y permanente.
• Información de contacto clara. Destacada y bien ubicada, fácil de encontrar desde cualquier punto de la web.
• Rótulos significativos y estándar. Las palabras elegidas como menú de navegación deben ser simples y descriptivas.
• Navegación completa y descriptiva. Donde estás, dónde has estado, dónde puedes ir. Un sistema de navegación consistente. Máximo 4 niveles de navegación.
![Page 65: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/65.jpg)
Arquitectura y usabilidad web (II)
• Máximo 7 items de navegación.
• Breadcrums o migas de pan o nubes de etiquetas. Muestra el camino hacia atrás.
• Enlace a la home en el logo. Recurso sencillo para facilitar la vuelta a la página de inicio.
• Enlace a la página de inicio desde todas las páginas.
• Enlaces claros y bien identificados en todo el site. Con estilo propio y bien visibles.
• Aprovechar la jerarquía visual para estructurar información. Estableciendo niveles de importancia del contenido y poniéndolos en los sitios más visibles.
![Page 66: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/66.jpg)
Arquitectura y usabilidad web (III)
• Evitar sobrecarga informativa. No más de 7 ± 2 elementos por página.
• Ayuda contextual y mensajes de error. Para tareas complejas, ayudas con globos de texto, información sobre tamaño y formato de un documento, etc., evitando secciones independientes de ayuda.
• Información de estado. En tareas complejas (como una compra), informar de dónde se está y lo que falta para terminar.
• Evitar flash innecesario. No usar intros en flash, no construir páginas completamente flash. Usar elementos flash para introducir toques de dinamismo en la web (cabecera, banners, etc).
![Page 67: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/67.jpg)
Conversión
vs
![Page 68: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/68.jpg)
Diseño gráfico para la web
![Page 69: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/69.jpg)
La estética juega un valor importante en la utilidad de un site.
Está demostrado que un diseño estético
resulta más fácil de usar y fomenta actitudes positivas
![Page 70: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/70.jpg)
Diseño gráfico en la web
• Look & feel adaptado a los objetivos y al sector. Los colores y la imagen del “site” debe mantener una “mínima” correspondencia con la actividad de la empresa.
• La cabecera marca la pauta. En términos de estilo, tono, calidad, actividad de la empresa. Puede llegar a definir el tono cromático 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 gráfico y en estructura: estética, contenidos y usabilidad. Ojo con las imágenes de fondo (sólo en partes externas). Animaciones mínimas.
![Page 71: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/71.jpg)
Diseño gráfico 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 jerarquía visual. El peso gráfico de los elementos debe establecer una jerarquía según la estructura web. La cabecera, logo y claim ganan peso, pero podría hacerlo también una imagen de producto.
• Uso tipográfico adecuado. El tamaño, tipo, resaltados, ancho de línea, alineaciones, etc de los textos son clave para la legibilidad y la organización de la información. 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.
http://blog.duopixel.com/justified.png
![Page 72: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/72.jpg)
Diseño gráfico en la web (III)
• Evitar el sonido ambiental. Salvo que la actividad lo requiera, el sonido o música 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 gráficos. Pueden aportar equilibrio, belleza, pero deben usarse adecuadamente. Pueden estar bajos de tono, no son protagonistas.
• Proporciones de los elementos de la web. En función de la actividad, el objetivo de la web, el tamaño de la cabecera, por ejemplo, puede variar.
• La paleta cromática. Definir paletas cromáticas corporativas y mantener los tonos en toda la web, incluyendo imágenes, ilustraciones o fotos en la medida de lo posible.
![Page 73: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/73.jpg)
Dominio / URL de la web
![Page 74: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/74.jpg)
¿Cómo elegir un buen dominio?
• Representativo de nuestra empresa. Debe introducir el nombre, o una de las palabras del nombre o marca. También debería ser descriptivo de nuestra actividad. Ejemplo: ceramicaslopez.com
• Fácil de recordar. Mejor corto que largo, aunque algunos giros o expresiones pueden ser llamativos y mnemotécnicos.
• Evitar números y guiones. Para poder decir y deletrear fácilmente el dominio.
![Page 75: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/75.jpg)
Contenidos web: texto y multimedia
![Page 76: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/76.jpg)
El contenido es el rey.
Un contenido excelente y la frecuencia de actualización del mismo es un factor
crítico del éxito de una web corporativa.
![Page 77: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/77.jpg)
Contenidos web
• Estilo de redacción claro y conciso. Escribir de forma simple, evitando el lenguaje pomposo típico de la comunicación corporativa. Un mensaje/idea por párrafo. Ojo con los errores gramaticales y ortográficos.
• Estructura del texto. Ordenar por importancia, resaltar con negritas, cursivas, viñetas y títulos.
• Imágenes. Usar imágenes (fotos y diagramas) para reforzar las ideas de forma visual.
• El imparable ascenso del vídeo. Cada vez se usa más el vídeo (corto y conciso) para explicar una idea o presentar una empresa.
![Page 78: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/78.jpg)
Accesibilidad y maquetación web
![Page 79: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/79.jpg)
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 número de visitantes a nuestra web.– Disminuye los costes de desarrollo.– Reduce el tiempo de carga de la web.
• XHTML y CSS. Hoy día, casi ya un estándar de maquetación web, separa los contenidos del diseño, y facilita la accesibilidad.
• ¿Visible en cuántos navegadores? A principios de 2009, Internet Explorer 6, IE7 y Firefox tienen un ratio de uso en España de un 4/4/2 aproximadamente.
![Page 80: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/80.jpg)
Elementos de posicionamiento (SEO)
![Page 81: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/81.jpg)
Resultados Orgánicos
Posicionamiento buscadores (SEO)
![Page 82: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/82.jpg)
Elementos SEO
• Meta tags: para resumir la descripción de la página en buscadores.
• Title: muy importante para el posicionamiento. No más de 7-10 palabras relevantes para la búsqueda. Title único por cada página.
• Keywords: utilizar palabras clave dentro del contenido. Las keywords de html prácticamente no son usadas por los buscadores. Usar enlaces internos.
• URL: importancia que sean descriptivas y tengan palabras clave.
• Redundancia: de etiquetas descriptivas en imágenes, flash y elementos multimedia.
![Page 83: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/83.jpg)
IV.- Elementos para hacer una web efectiva
![Page 84: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/84.jpg)
Consejos para hacer una web efectiva
• Creando un concepto y una marca. Debe existir una historia, un eje vertebral.
• Planifica con antelación y ten claros los objetivos, asociando una estructura a esos objetivos.
• Fomenta la acción. Haz llamadas a la acción, despertando interés para que el visitante haga click y se mantenga en nuestra página.
• Humaniza la web. No hables mucho de ti, pero si vas a hacerlo, pon cara al equipo, habla de forma natural.
• Usa un gestor de contenidos, para mantener tu web permanentemente actualizada.
http://www.carbajalyasociados.com/
![Page 85: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/85.jpg)
Bola Extra: atraer Tráfico
![Page 86: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/86.jpg)
Promoción web en tiempos de crisis
• Tu URL visible en todos sitios. Tienda, folletos, firmas de correo, etc.
• Directorios locales y sectoriales. Darse de alta no cuesta dinero, y asegura un cierto tráfico y posicionamiento.
• Date un baño de web 2.0. Leer y conversar en Internet está a la orden del día. Comenta y firma con enlace a tu web.
• Escribe en tu web. Generando un contenido amplio y profundo que se indexe en buscadores, y que sea de interés para los visitantes.
• Posiciónate en buscadores. Mediante un esfuerzo técnico, en contenidos y relaciones públicas, podrás mejorar poco a poco los resultados naturales frente a búsquedas clave.
![Page 87: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/87.jpg)
Promoción web en tiempos de crisis (II)
• Vigila los metadatos de tu web. Keywords, titles, metatags, etc.
• Haz networking. Para dar a conocer tu negocio y tu web.
• Envía un newsletter a tus socios y conocidos. Estableciendo con buenos contenidos de utilidad, una relación periódica con ellos.
• Enlaza mucho desde tu web. Para dar a conocer tu sitio y conseguir que con el tiempo, alguien te devuelva un enlace.
• Genera contenido multimedia y difúndelo. Fotos, christmas de navidad, un vídeo y envíalos a los servicios y redes sociales que existen hoy en Internet.
![Page 88: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/88.jpg)
Marketing en buscadores (SEM)
![Page 89: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/89.jpg)
Enlaces patrocinados en buscadores y comparadores de precios
Directorios locales
Directorios sectoriales
Marketing en buscadores y directorios
![Page 90: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/90.jpg)
Enlaces Patrocinados
Enlaces patrocinados en buscadores
![Page 91: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/91.jpg)
1. Sólo se paga por cada visita recibida: desde 0,01 €/visita y en función de la competencia.
2. Resultados inmediatos: en menos de 2 días la campaña está en marcha y se reciben visitas.
3. Planificación y Vigilancia: Es necesario trabajar las palabras clave compradas, los anuncios dinámicos y el
coste por click.
Puntos clave: presupuesto máximo diario, cpc medio, publicidad contextual,
horarios, concordancia, palabras negativas…
TASA DE CONVERSIÓN
Enlaces patrocinados en buscadores
![Page 92: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/92.jpg)
1. Fuente de información para servicios locales: las guías locales en Internet.2. Posibilidad de contratar posiciones destacadas en los resultados de
búsqueda3. Búsqueda local a través de mapas4. Ayuda a mejorar nuestro posicionamiento orgánico en buscadores:
enlaces.
Directorios locales
![Page 93: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/93.jpg)
1. Guías de Servicios especializadas por sector2. Posibilidad de contratar posiciones publicitarias3. Ayuda a mejorar nuestro posicionamiento orgánico en
buscadores.
Directorios sectoriales
![Page 94: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/94.jpg)
- Una técnica de Marketing
Online. Marketing Directo.
E-mail marketing
- Envío de información
comercial por email
- Permite la segmentación
- Permite la evaluación
“Sé que el 50% de mi gasto en publicidad es inutil. El problema es que no sé qué 50% es”
John Wanamaker
Email Marketing
![Page 95: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/95.jpg)
- Bidireccional. Sacar el contenido del sitio
- No centralizar el contenido
- Bidireccional. Traer visitantes al sitio
- Alcanzar nichos
Dispersión Contenido
![Page 96: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/96.jpg)
Herramientas y Técnicas
![Page 97: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/97.jpg)
- Primera impresión. Five Second Test
- Hábitos de navegación. Eyetracking
- Analítica. G. Analytics, Omniture
- A/B Testing. G. Website Optimizer
-Informe de Marketing en Internet
Herramientas y Técnicas
![Page 98: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/98.jpg)
- Permite evaluar bocetos
- Ayuda a convertir
Five Second Test
-www.fivesecondtest.com
![Page 99: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/99.jpg)
- Permite evaluar conductas
- Ayuda a convertir
Eyetracking
-http://www.labsmedia.com/clickheat/index.html- http://www.alt64.com/
![Page 100: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/100.jpg)
- Permite reconstruir patrones de navegación
- Permite ver atenciones máximas
Eyetracking
![Page 101: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/101.jpg)
Eyetracking
![Page 102: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/102.jpg)
Eyetracking
![Page 103: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/103.jpg)
- La evaluación “refinitiva”
- Es iterativo
- Es empírico
A/B Testing
-http://www.google.com/support/websiteoptimizer/?hl=es- http://www.wichtestwon.com/
¿Recordáis la diapositiva 27?
![Page 104: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/104.jpg)
A/B Testing
• ¡Ganó esta!
• Generó un 14.9 % más de registros
• El 49% pensó que no
• El 49% estaba equivocado
![Page 105: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/105.jpg)
A/B Testing
• Pensar y probar
• Es gratis
• No falla
• Siempre sobre nuestro target (es nuestra web!)
![Page 106: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/106.jpg)
Informe de Marketing en Internet
• http://www.vexlan.com/informe-marketing-en-internet
• Páginas indexadas
• Posición en buscadores
• Comparativa con competencia
![Page 107: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/107.jpg)
Para terminar…
![Page 108: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/108.jpg)
![Page 109: Diseño Web Profesional](https://reader037.fdocuments.co/reader037/viewer/2022102813/5482fc07b07959150c8b4919/html5/thumbnails/109.jpg)
“Sé que la mitad de mi gasto publicidad no me aporta beneficios, pero no sé que mitad”
John Wanamaker
Planificar y Definir
Diseñar o Ejecutar
Evaluar
Tanto en Diseño Web como en Marketing Online