El documento describe los principios fundamentales del diseño de sitios web. Explica que el diseño debe centrarse en el contenido que resulta más interesante para los usuarios. También describe el proceso de diseño que incluye la creación de un wireframe, el diseño visual y la programación front-end y back-end. El objetivo final es crear sitios web que sean útiles, atractivos y fáciles de usar para los visitantes.

1. 01 salero Finalidad del diseño en salerodigital
Creatividad => Eficacia = Solución

2. 02 salero Finalidad del diseño en salerodigital
Multimedia no es sólo el diseño gráfico,
sino el diseño de la información.
option1
HOME option2
option3

3. 03 salero Finalidad del diseño en salerodigital
Concepto de hipertexto.
Muchas veces los estudios de diseño/agencias de publicidad hacen
páginas Web sin tener demasiados conocimientos de lo que es un
hipertexto, que es la base de todo. De aquí sale hipermedia, multime-
dia, etc. Pero si no conoces la base, podrás hacer páginas bonitas
pero no aprovecharán el soporte en el que están.

4. 04 salero Finalidad del diseño en salerodigital
Lo sencillo, seduce y fideliza al mismo tiempo.
Seduce, porque te hace sentir como la mayoría de las aplicaciones
web no te hace sentir.
Fideliza, porque la idea de saber utilizar algo mejor con respecto a
otras aplicaciones aporta tranquilidad. (Más vale pájaro en mano...)

5. 05 salero Finalidad del diseño en salerodigital
El contenido es la mejor publicidad.
Convertir la publicidad en contenido ocioso es publicidad de creci-
miento exponencial: Marketing relacional/viral/buzz/boca-oreja, etc.
Concepto de experiential marketing:
“¿Para qué tengo que contratar a Beckam, a Roberto Carlos y Raul
para rodar un anuncio cuando con una décima parte de ese
presupuesto monto la Copa Coca-Cola para niños?”
(Director de Marketing de Coca-Cola España hablando de la campaña de Pepsi en televisión)

6. 06 salero Finalidad del diseño en salerodigital
El contenido es la mejor publicidad: Ejemplos
Nike con sus vídeos de Ronadinho.
Adidas con su campaña Xavi+10
BMW con sus cortos.
Anotación:
Que una marca cree un contenido interesante para el usuario com-
promete a éste de alguna manera a elegir su producto y no el de la
competencia.

7. 07 salero ¿Por qué sabemos hacerlo?
¿Por qué sabemos hacerlo?
Investigamos
Observamos
Experimentamos
Clasificamos

8. 08 salero ¿Por qué sabemos hacerlo?
Investigamos el contenido realmente interesante
para el usuario.
Antes de ponermos a hacer una web analizamos su contenido infor-
mativo y su posible contenido connotativo. Es decir, qué contenido le
va a hacer disfrutar al usuario y le va a hacer volver.

9. 09 salero ¿Por qué sabemos hacerlo?
Observamos cualitativamente la eficacia de
nuestros sistemas.

10. 10 salero ¿Por qué sabemos hacerlo?
Experimentamos los avances en sistemas de
navegación, diseño de la información, etc.
Parte del tiempo de nuestro trabajo es probar sistemas en páginas
web de navegación innovadora y las nuevas formas de interface que
saldrán.
Interfaces táctiles.
MultiTouch.
Navegación 3D.

11. 11 salero ¿Por qué sabemos hacerlo?
Lo clasificamos y lo evaluamos por público.
No todos los buenos sistemas son para todos los públicos. Nuestros
parámetros para asignar un tipo de interface u otro son la experiencia
que nuestro target pueda tener en Internet y en nuevas tecnologías.

12. 12 salero Método
Método
Wireframe
Diseño
Programación

13. 13 salero Método
1) Wireframe:
1.1 Estudio del contenido: ¿qué le interesa a nuestra audiencia?
1.2 Organización de la información: nombre de las secciones.
1.3 Diseño de la funcionalidad: diseño de la interactividad.
1.4 Maquetación en rasgos generales.
2) Diseño: parte connotativa.
2.1 Definición de estilos: fotos, tipografías, colores.
2.2 Maquetación definitiva.
3) Programación:
3.1 FrontEnd: programación de la interactividad y sincronización de
animaciones.
3.4 BackEnd: programación de la integración con bases de datos y sistemas
de actualización.

14. 14 salero Método
1) Wireframe:
1.1 Estudio del contenido: ¿qué le interesa a nuestra audiencia?
1.2 Organización de la información: nombre de las secciones.
1.3 Diseño de la funcionalidad: diseño de la interactividad.
1.4 Maquetación en rasgos generales.
2) Diseño: parte connotativa.
2.1 Definición de estilos: fotos, tipografías, colores.
2.2 Maquetación definitiva.
3) Programación:
3.1 FrontEnd: programación de la interactividad y sincronización de
animaciones.
3.4 BackEnd: programación de la integración con bases de datos y sistemas
de actualización.

15. 15 salero Método
1) Wireframe:
1.1 Estudio del contenido: ¿qué le interesa a nuestra audiencia?
1.2 Organización de la información: nombre de las secciones.
1.3 Diseño de la funcionalidad: diseño de la interactividad.
1.4 Maquetación en rasgos generales.
2) Diseño: parte connotativa.
2.1 Definición de estilos: fotos, tipografías, colores.
2.2 Maquetación definitiva.
3) Programación:
3.1 FrontEnd: programación de la interactividad y sincronización de
animaciones.
3.4 BackEnd: programación de la integración con bases de datos y sistemas
de actualización.

16. 16 salero Método
1) Wireframe:
1.1 Estudio del contenido: ¿qué le interesa a nuestra audiencia?
1.2 Organización de la información: nombre de las secciones.
1.3 Diseño de la funcionalidad: diseño de la interactividad.
1.4 Maquetación en rasgos generales.
2) Diseño: parte connotativa.
2.1 Definición de estilos: fotos, tipografías, colores.
2.2 Maquetación definitiva.
3) Programación:
3.1 FrontEnd: programación de la interactividad y sincronización de
animaciones.
3.4 BackEnd: programación de la integración con bases de datos y sistemas
de actualización.