Este documento introduce el diseño web y explica que va más allá del diseño gráfico, enfocándose en la usabilidad, la experiencia del usuario y la arquitectura de la información. Explica las etapas del diseño web, incluyendo el diseño de la información, el diseño del sitio, el diseño de páginas y el desarrollo. También discute las herramientas, oportunidades laborales y retos de ser diseñador web.

1. introducción al...
DISEÑO WEB
ciw.mx

2. Diferencias entre Diseño Gráfico
y Diseño Web?

3. Que es el
Diseño Web?

4. Que es el
Diseño Web?
No es crear gráficos estéticos
No es presentar información de manera agradable
No es Photoshop, Flash o Dreamweaver
No es acomodar elementos
No es diseño gráfico

5. Descargar un template
y modificarlo
Jamais!
(Nunca)

6. Diseño Web=Diseño Gráfico
• El diseño gráfico es tan sólo
una parte del diseño web

7. Navegabilidad
como se mueve en la web
Usabilidad
como se utiliza una web
Arquitectura de
la Información
Composición y Estructuración del Contenido
Interactividad

8. Aplicación del
Diseño a la Web
Multimedia
Audio Texto Video Imagen

9. Objetivo del
Diseño Web?
Mostrar información de una manera facil
y Accesible para todo tipo de usuario
permitir establecer comunicación
efectiva con el usuario.

10. Función del Diseñador Web
Crear un traje a la medida de las
necesidades del cliente o de la empresa!
•Establezca comunicación con el usuario
•Presente contenido relevante
•Que sea eficiente
•Que tenga un diseño agradable y sencillo
•Que proyecte la esencia del sitio, producto o
empresa.

11. Como funciona?
Código HTML Navegador Usuario

12. Etapas del Diseño Web...
Diseño de la Diseño del Diseño de
Desarrollo
Información Sitio Páginas
•Objetivo sitio Estructura Layout HTML y CSS
•Objetivo usuario Navegación Prototipo en papel Flash e Imágenes
•Audiencia Interacción Prototipo Multimedia
Photoshop
•Contenido Funcionalidad Programación
Prototipo Web (en
•Copywriting Usabilidad Validación
imagen)
Pruebas

13. 1. Diseño de la información
•¿Qué queremos lograr con el sitio?
•¿Qué queremos proyectar?
•¿Quiénes son nuestros usuarios?
•¿Qué contenido vamos a presentar? *
•¿De que manera lo vamos a hacer?

14. 2. Diseño del Sitio
¿Qué secciones tendrá el sitio?
¿Qué tipo de navegación se utilizará?
¿Cómo va a utilizar el usuario el sitio?
¿Qué funciones va a tener?
Reglas de usabilidad *

15. 3. Diseño de Páginas
Las interfaces
El prototipo en papel
El prototipo en Photoshop
Simulación con mapa de imágenes
Se acepta el diseño final

16. 3. Diseño de Páginas
Prototipo en Photoshop

17. 4. Desarrollo
Se crean los archivos finales
Se optimizan y cortan imágenes
Se programan las funciones del sitio
Se crean validaciones para formas
Se hacen pruebas y correcciones
Contenidos
+ XHTML CSS
(Contenidos) (Presentación)
Presentación

18. Reglas de Usabilidad
Reglas Básicas:
No me hagas pensar.
Diseña para escaneo no para lectura
Omite palabras innecesarias
Elimina instrucciones
Deja claro donde se hace clic
Usa una Jerarquía Visual Clara
No reinventes la rueda, sigue los estándares
Si lo entiende tu abuela funciona
Haz pruebas de usabilidad

19. Diferencias entre Diseñador Web
y Desarrollador Web?
FrontEnd y BackEnd

20. Herramientas del
Diseñador Web

21. Ventajas y Beneficios
Mercado muy explotable
Puede ser Autodidacta
Comunidades de apoyo en Internet
Muchas areas de especializacion

22. Oportunidades de Empleo
Instituciones
Empresas
Startups (Emprendimiento)
Empresas de Software
Freelance
Comercio Electrónico

23. Oportunidades y
Modos de expansión

24. Oportunidades y
Modos de expansión

25. Dificultades y Retos
comunicación con Desarrolladores
Problemas Técnicos
Constante actualización
Comunicación con el cliente

26. SOMOS DISEÑADORES,
DISEÑEMOS LA WEB