El documento describe las características fundamentales de una página web corporativa y el proceso de diseño de un sitio web. Explica que una página web corporativa proporciona información sobre la empresa, facilita el acceso a sus servicios, permite ampliar el espacio de ventas y la interacción con los usuarios. También describe los participantes clave en el diseño de un sitio web, como el director de proyecto, diseñador, editor y programador, y los pasos básicos en el proceso de producción como la planificación, desarrollo y p
2. WEB CORPORATIVA
1 características
La página Web de una empresa se convierte en la actualidad en un elemento
fundamental de comunicación corporativa:
Proporciona información de la empresa y facilita el acceso a sus servicios.
Permite ampliar el espacio de venta física
Facilita la interacción con el usuario del servicio empresarial.
Permite el acceso al usuario a otros servicios Web de la empresa: consultas, red
social corporativa…
Amplia los elementos de comunicación de la empresa: distribución de
información, newsletters, notas de prensa.
Permite mantener actualizada la información de la compañía.
Sirve de registro de contenidos relativos a la empresa.
Master Diseño Industrial Universidad
Nebrija_ Dra. Inmaculada del Rosal 2
3. DISEÑO WEB
Parte de supuestos gráficos relativos al mundo de la impresión pero
modificando el formato y el medio de difusión.
Se trabaja no sobre soporte matérico ( papel) sino sobre soporte electrónico
( píxeles de luz )
Los documentos se generan a partir de un leguaje de programación en código
HTML.
La información no se presenta exclusivamente de una manera lineal. La
posibilidad de generar hiperenlaces facilita la navegación multidirecciónal por
el documento de hipertexto.
La ejecución de la producción de documentos digitales para la Web es más
rápida y dinámica en comparación con producciones gráficas impresas
Los costos de difusión de la información generada son más baratos
comparados con otros medios.
Los costes de producción se reducen también en relación a otros modos de
4. DISEÑO WEB
2 Planificación de un sitio
Planteamientos antes de abordar el desarrollo de un sitio Web Web
IDENTIFICACIÓN DEL PUBLICO OBJETIVO
- Mensaje básico que se quiere transmitir a los visitantes de la pg Web
- A que público va dirigida: edad, intereses, producto
- Como se comporta la competencia para mostrar los contenidos al mismo público
objetivo.
- Que es lo que la va a hacer mas atractiva para mi publico objetivo
DEFINICIÓN DEL SITIO WEB
- Modelo de definición de la página: dinámica / Estática.
- Como refuerza la imagen que el público visitante tiene de la empresa
- Que elementos y en que proporción de la imagen corporativa de la empresa debe
recoger.
- Que grado de uniformidad debe mantener con los otros elementos de comunicación
de la empresa
- Que elementos de la competencia funcionan adecuadamente y como se pueden
emular en mi diseño Web.
CONTENIDO DEL SITIO WEB
- De que secciones se va a componer, como se van a organizar los contenidos
- Que materiales están a mi disposición y cuales debo producir aparte.
-imágenes, videos, animaciones, documentos y archivos
- Quien y como se va a generar el material: producción externa o interna dentro de la
Master Diseño Industrial Universidad
empresa de desarrollo
Nebrija_ Dra. Inmaculada del Rosal 4
- Quien valida la pertinencia de los contenidos
5. DISEÑO WEB
2 Planificación de un sitio
Web
DETALLES TÉCNICOS
- Que plataformas se van a usar
- Incorpora una base de datos: especificar la base de datos y el sitio hosting
donde se va a alojar
- Que transacciones se van a realizar: datos bancarios, datos personales…
ETRATEGIAS DE MARKETING-COMUNICACIÓN
- Como se va a promocionar el sitio: promoción externa, promoción interna
dentro de la empresa
- Como se va a financiar el sitio
DATOS ADMINISTRATIVOS
- Cual va a ser el proceso de actualización del sito Web
- Quien va a ser el responsable
- Datos de contacto de los responsables
- Registrar el nombre de dominio
- Determinar la fecha de lanzamiento
- De cuanto presupuesto se cuenta para desarrollar el sitio web ysu
Master Diseño Industrial Universidad
promoción Nebrija_ Dra. Inmaculada del Rosal 5
6. DISEÑO WEB
2
Producción de un sitio
Web
2.2 PARTICIPANTES EN UN PROYECTO WEB
No son tareas exclusivas pero si interesa que los profesionales sean especializados. En el mundo de la edición digital
las fronteras de la especialización están cada vez mas difusas, atendiendo al concepto de “Renacimiento Digital”
DIRECTOR DEL PROYECTO:
- Relación con el cliente y seguimiento del desarrollo de la página en todos sus pasos
- Solución de los problemas en el desarrollo
- Coordinar los trabajos de los diferentes miembros del equipo
DIRECTOR DE ARTE / DISEÑADOR
- Diseñar la imagen gráfica de la página
- Generar y coordinar los elementos gráficos que definirán la página adecuándolos a los
condicionantes del medio: imágenes, composición, animaciones, botones
- Debe conocer teoría sobre plataformas de navegación y editores Web, html y CCS ( hojas de
estilo en cascada)
- Debe manejar conceptos relativos a Internet: hipertexto, usabilidad
Templates gratuitos: http://www.wix.com , http://www.artisteer.com/
EDITOR Y REDACTOR
- Encargado de ajustar los textos al formato de navegación: enlaces, motores, scrolls
- Adecuar el texto al formato de lectura: textos breves, de fácil visualización y lectura.
Master Diseño Industrial Universidad
Nebrija_ Dra. Inmaculada del Rosal
Para textos más largos adjuntar en otro formato de documento: PDF, Libro digital: (Wobook, ISSUU),
(Wobook, ISSUU), 6
Presentaciones digitales: Slideshare, Scrib
Slideshare,
7. DISEÑO WEB
2 Producción de un sitio
Web
2.2 PARTICIPANTES EN UN PROYECTO WEB
CODIFICADOR HTML
- A partir del trabajo desarrollado por el director de arte llevará a cabo la programación en
lenguajes HTML( programación HTML o Software específico de edición)
y aplicación de estilos CSS para el desarrollo de la pagina
- Velará por una descarga rápida de las paginas del sitio
- Buscará que sean accesibles para todo tipo de usuario: accesibilidad web
PROGRAMADOR- INFORMATICO
- Se encargará de las tareas de interacción complejas:
integración de bases de datos, transaciones electrónicas ( PHP o APS)
Master Diseño Industrial Universidad
Nebrija_ Dra. Inmaculada del Rosal 7
8. DISEÑO WEB
2 Pasos en Proceso de
producción de un sitio
Web
2.3
MAPA DEL SITIO
CALENDARIO DE TRABAJO
ACTUALIZACIÓN DEL SITIO
COMPROBACIÓN DEL FUNCIONAMIENTO DEL SITIO
Master Diseño Industrial Universidad
Nebrija_ Dra. Inmaculada del Rosal 8
9. DISEÑO WEB
3 Software de diseño web
3.1
SOFTWARE DE EDICIÓN
- Código fundamental de creación de paginas web es HTML (hiper text mark lenguaje)( lenguaje
de etiquetado de hipertexto) Programa NOTEPAD
- Las aplicaciones comerciales para desarrollo Web son :
- Dreamweaver Macromedia: une funcionalidades de diseño y posibilidad
de introducir elementos dinámicos.
- Genera Código html directamente
- Permite trabajar el código directamente
- Front-page Microsoft
- Softpress ( para Mac)
EDICIÓN DE IMÁGENES
- Las imágenes fotográficas deben ser tratadas con un programa de retoque de imagen:
Photoshop (Adobe) o Fireworks ( Macromedia) o programas gratuitos: Paint Shop Pro.
- Permiten bajar la resolución y el tamaño del archivo necesario para poder editar imágenes en
Internet con poco peso digitalDiseño Industrial Universidad
Master ( recomendamos formato GIF 72 ppp de resolución) o en JPEG de
baja resolución Nebrija_ Dra. Inmaculada del Rosal 9
10. DISEÑO WEB
3 Software de diseño web
3.1
CREACIÓN DE ANIMACIONES
Flash de Adobe es el programa comercial estándar
Permite realizar animaciones de poco peso digital que facilitan la
interactividad .
Permite agregar audio y video a las animaciones.
Master Diseño Industrial Universidad
Nebrija_ Dra. Inmaculada del Rosal 10
11. ESTRUCTURA DE
DISEÑO WEB
ARQUITECTURA DE LA INFORMACIÓN EN UN SITIO WEB
- Se encarga de la planificación , análisis, estudio y selección //
organización disposición y estructuración de espacios de
información
- Se encarga de la presentación ordenada de los datos
contenidos en los sistemas de información interactivos.
1 PAGINA DE INICIO O PORTADA
2 PAGINAS DE SECCION
3 PAGINAS DE CONTENIDOS:
CATALOGO
FORMULARIOS
FICHAS DE PRODUCTO
Master Diseño Industrial Universidad
Nebrija_ Dra. Inmaculada del Rosal 11
12. ESTRUCTURA DE
DISEÑO WEB
ARQUITECTURA DE LA INFORMACIÓN
-libro
-aplicación de software
-musica
-exibición
-sitio web ….
DISEÑO DE LA INFORMACIÓN
Hace referencia a la organización de los datos en estructuras informativa:
-Mapa
-Texto
-Partitura
-Diseño
-Página web…
ORGANIZACIÓN ESTRUCTURADA DE DATOS
-Frase
-Esquema
-Modelos numéricos
-Gráfico
-Sistemas de señales…
Master Diseño Industrial Universidad
Nebrija_ Dra. Inmaculada del Rosal 12
13. ESTRUCTURA DE
DISEÑO WEB
MODELOS DE ORGANIZACIÓN DE LA INFORMACIÓN I
LINEAL
Un item informativo es correlativo al anterior: ej. Presentación de obras de un museo
JERARQUICO
Informaciónes secundarias dependen jerárquicamente de la primera : ej. Organigramas
RETICULAR
Items informativos están interrelacionados: ej. Juego interactivo
PARALELO
Las informaciones se presentan de forma simultanea y todas tienen la misma importancia
informativa: parrilla televisiva
Master Diseño Industrial Universidad
Nebrija_ Dra. Inmaculada del Rosal 13
14. ESTRUCTURA DE
DISEÑO WEB
MODELOS DE ORGANIZACIÓN DE LA INFORMACIÓN I I
MATRIZ
Retícula organizada de acceso a información
ZOOM JERARQUICO
A partir de una micro información contenida en una pagina pasamos al siguiente item de
información que supondrá una ampliación de la página previa
Master Diseño Industrial Universidad
Nebrija_ Dra. Inmaculada del Rosal 14
15. ESTRUCTURA DE
DISEÑO WEB
PAGINA DE INICIO O PORTADA (Index)
Guía toda la navegación del sitio.
Sirve de localizador principal del sitio.
- Pagina de entrada
- Marca el diseño general del sitio Web
- Debe ser atractiva para invitar a entrar en el sitio
- Se debe facilitar información para acceso a las paginas
de secciones del sitio.
Master Diseño Industrial Universidad
Nebrija_ Dra. Inmaculada del Rosal 15
16. ESTRUCTURA DE
DISEÑO WEB
PAGINAS DE SECCIONES O SUBSECCIONES
- Da acceso a artículos relacionados
- Se deben distinguir las distintas secciones : uso del color o esquemas gráficos.
- Deben ser de fácil actualización.
PAGINA DE CONTENIDOS O ARTICULOS
- Claridad expositiva
- Texto importante frente a imagen.
- Se debe evitar volver a paginas de nivel superior para avanzar en la navegación
- Su diseño puede estar basado en Frames ( marcos)
Master Diseño Industrial Universidad
Nebrija_ Dra. Inmaculada del Rosal 16
17. ESTRUCTURA DE
DISEÑO WEB
HOSTING GRATUITOS:
www.260mb.com
Master Diseño Industrial Universidad
Nebrija_ Dra. Inmaculada del Rosal 17
18. WEB 2.0
El terminoWeb 2.0 (2004-presente) está comúnmente
asociado con un fenómeno social, basado en la interacción que se
diferentes aplicaciones Web,
logra a partir de
que facilitan la interoperatividad
El diseño está centrado en el usuario
Se basa en el trabajo colaborativo en la World Wide Web .
Su finalidad es compartir información creada por el usuario.
Master Diseño Industrial Universidad
Nebrija_ Dra. Inmaculada del Rosal 18
19. WEB 2.0
¿Qué es la Web 2.0?
El termino Web 2.0 (2004-presente) está comúnmente asociado con un fenómeno
social, basado en la interacción que se logra a partir de diferentes aplicaciones Web,
que facilitan el compartir información, la interoperatividad, el diseño centrado en el
usuario y la colaboración en la World Wide Web .
Fue bautizado por Tim O'Reilly en 2004 para referirse a una segunda generación en
la historia de la Web basada en comunidades de usuarios y una gama especial de
servicios, como las redes sociales, los blogs, los wikis, que fomentan la colaboración
y el intercambio ágil de información
Nos da una nueva visión de Internet en la que el usuario participa en la elaboración
de los contenidos.
Está basado en el uso de un conjunto de herramientas de Internet pensadas para la
participación del usuario. La mayoría son fáciles y gratuitas.
En la web2.0 los contenidos se redistribuyen y todo se comparte por el usuario,
perdiendo el monopolio el creador de contenidos.
20. PUBLICIDAD
INTERACTIVA
Aquella que recurre al uso de medios interactivos para dar a
conocer un producto recurriendo a una comunicación bidireccional.
Utiliza medios que permitan la interactividad con el usuario:
- Internet
- TV interactiva
- Dispositivos de telefonía móvil
En la publicidad interactiva el receptor de la comunicación no es un
sujeto pasivo de los elementos de comunicación que conforman el
mensaje ( texto, video …)
Se convierte en el desencadenante de la comunicación por opción propia
al activar los elementos que la conforman: acceso a la información,
petición de información, incorporación a la base de datos de la empresa.
Master Diseño Industrial Universidad
Nebrija_ Dra. Inmaculada del Rosal 20
21. PUBLICIDAD
INTERACTIVA
QUE NOS APORTA COMO COMUNICADORES
LA PUBLICIDAD INTERACTIVA:
• Potenciar la imagen del producto y de la marca
• Captar clientes potenciales
• Segmentar a los usuarios
• Crear bases de datos
• Conseguir tráfico hacia una Web
• Desarrollar promociones
· Crear fidelidad hacia una marca
· Apoyar el lanzamiento de un producto
· Generar experiencias de consumo con un producto
Master Diseño Industrial Universidad
Nebrija_ Dra. Inmaculada del Rosal 21
· Obtener información sobre la percepción de producto del consumidor
22. PUBLICIDAD
INTERACTIVA
QUE NOS APORTA COMO CONSUMIDORES LA
PUBLICIDAD INTERACTIVA:
• Conocimiento del producto y de la marca
• Selección de la oferta informativa
• Selección de la oferta de producto
• Incorporarnos a una red de información y ofertas de producto.
• Fidelidad en la obtención de información de un producto
• Optimización de recursos = ventajas en del precio de compra
Master Diseño Industrial Universidad
Nebrija_ Dra. Inmaculada del Rosal 22
23. FORMATOS DE PUBLICIDAD EN
INTERNET
Formatos Integrados
- Banner: Horizontal - 468×60, 728×90: gif, flash, jpeg.
- Rascacielos: Vertical - 120×600, 160×600: gif, flash, jpeg.
- Robapáginas: 300×250, 200×200: gif, flash, jpeg. Peso: 20k.
- Botón: 120×60, 120×90, 120×120, 150×60, 150×150, 180×150.
- Enlace de texto: Texto de enlace a otras secciones, páginas,...
Master Diseño Industrial Universidad
Nebrija_ Dra. Inmaculada del Rosal 23
24. FORMATOS DE PUBLICIDAD EN
INTERNET
Formatos Flotantes
Pop Up: Aparece sobre los contenidos o páginas web - 300×250, 200×200, 250 x
250: gif, flash, jpeg.
Pop Under: Aparece debajo del navegador (debajo de la página web que se está
visitando) - 300×250, 200×200, 250 x 250: gif, flash, jpeg.
Layers: Recurre a distintas tecnologías, permitiendo la movilidad del anuncio por la
pantalla, pudiendo o no partir de un formato integrado (se incluyen dentro de esta
categoría los banners desplegables).
Cortinillas o interstitials: Se muestra en una ventana completa para
presentar su mensaje y que tiene una duración breve para que el usuario llegue al
destino que desea en unos segundos. Conocida como publicidad de tránsito.
Master Diseño Industrial Universidad
Nebrija_ Dra. Inmaculada del Rosal 24
25. FORMATOS DE PUBLICIDAD EN
INTERNET
Spot-online
Formatos y tecnologías específicas para cada soporte: Tecnología que usa
cada soporte para poder mostrar spots en Internet desde su sitio web.
Todos los formatos estandarizados por IAB-Spain son susceptibles de llevar un spot
Acciones especiales
Patrocinios e integraciones:
Integración de publicidad o contenidos a medida para el anunciante.
Formatos exclusivos
- Formatos específicos de cada soporte
Emailing
- Newsletters/Boletines:
Publicidad que aparece en los boletines.
Master Diseño Industrial Universidad
Nebrija_ Dra. Inmaculada del Rosal 25
26. PUBLICIDAD CONTEXTUAL
Adwords : Google muestra tu anuncio en las
consultas del buscador o inserta la publicidad
en el correo electrónico que tenga referencia
conlos temas de interés del usuario.
búsqueda de etiquetas para posicionamiento
Master Diseño Industrial Universidad
Nebrija_ Dra. Inmaculada del Rosal 26
27. PUBLICIDAD CONTEXTUAL
Adsense: es un programa gratuito que posibilita que los
editores online muestren en su Web adaptados a los intereses
de su público
Se obtiene beneficio económico por clic de usuario.
Master Diseño Industrial Universidad
Nebrija_ Dra. Inmaculada del Rosal 27
28. Google GeoAds Publicidad contextual
Master Diseño Industrial Universidad
Nebrija_ Dra. Inmaculada del Rosal 28
29. Todas la utilidades de Google para
gestión de la información en la Web:
Google Maps Gmail Blogger Búsqueda web Google Earth
Google Chrome iGoogle YouTube Street View Picasa Google Apps
Nuestro Blog Barra de Google Google Docs Google Analytics
Google Buzz Google Calendar Google Traductor Google para móviles
Foro de Ayuda de Google Google Reader Google SketchUp Android
Google Latitude Local Business Center Map Maker AdSense
Friend Connect Google Sidewiki Google Sky Google Transit
Google sites Modelador 3D de edificios Panoramio google.org Buzz
Búsqueda de libros Google Alertas Google Gears Google Moderator
Google Talk Google Translator Toolkit Google Wave SketchUp
Website Optimizer
Master Diseño Industrial Universidad
Nebrija_ Dra. Inmaculada del Rosal 29
30. PUBLICIDAD EN REDES
SOCIALES
Los 10 mandamientos de las marcas en las re
30
videos virales que han marcado una época
internet
10 ejemplos de Crowdsourcing
• Como diseñar para redes sociales
Pon la mesa con Fairy
Master Diseño Industrial Universidad
Nebrija_ Dra. Inmaculada del Rosal 30
31. MARKETING DE GUERRILLA
Se colaborador
Se enredado
Se Intrigante
Se sociable
Se lúdico
Master Diseño Industrial Universidad
Nebrija_ Dra. Inmaculada del Rosal 31
32. NUEVOS MEDIOS
Estrategia de posicionamiento SEO
Estrategias de Marketing on line
http://www.youtube.com/watch?v=M5MhxSadJiM&feature=re
Como Internet cambio la publicidad.
http://www.youtube.com/watch?v=ZWPVm1MVaDw&feature=
BRAND CONTENT
http://www.puromarketing.com/44/11430/content-nueva-
publicidad-fenomeno-auge-entre-empresas-marcas.html
http://www.youtube.com/watch?
v=hc7TllPBbW0&feature=relmfu
Como ha cambiado el marketing con Internet
http://www.youtube.com/watch?
v=Mc0ggyHcQBk&feature=relmfuRosal
Master Diseño Industrial Universidad
Nebrija_ Dra. Inmaculada del 32