Download - Introducción al Diseño web
![Page 2: Introducción al Diseño web](https://reader033.vdocumento.com/reader033/viewer/2022052223/558a07bfd8b42a1f658b46bf/html5/thumbnails/2.jpg)
Diferencias entre Diseño Gráfico y Diseño Web?
![Page 3: Introducción al Diseño web](https://reader033.vdocumento.com/reader033/viewer/2022052223/558a07bfd8b42a1f658b46bf/html5/thumbnails/3.jpg)
Que es el Diseño Web?
![Page 4: Introducción al Diseño web](https://reader033.vdocumento.com/reader033/viewer/2022052223/558a07bfd8b42a1f658b46bf/html5/thumbnails/4.jpg)
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
![Page 5: Introducción al Diseño web](https://reader033.vdocumento.com/reader033/viewer/2022052223/558a07bfd8b42a1f658b46bf/html5/thumbnails/5.jpg)
Descargar un templatey modificarlo
Jamais!(Nunca)
![Page 6: Introducción al Diseño web](https://reader033.vdocumento.com/reader033/viewer/2022052223/558a07bfd8b42a1f658b46bf/html5/thumbnails/6.jpg)
Diseño Web=Diseño Gráfico
• El diseño gráfico es tan sólo una parte del diseño web
![Page 7: Introducción al Diseño web](https://reader033.vdocumento.com/reader033/viewer/2022052223/558a07bfd8b42a1f658b46bf/html5/thumbnails/7.jpg)
Navegabilidad
Usabilidadcomo se mueve en la web
como se utiliza una web
Arquitectura de la Información
Composición y Estructuración del Contenido
Interactividad
![Page 8: Introducción al Diseño web](https://reader033.vdocumento.com/reader033/viewer/2022052223/558a07bfd8b42a1f658b46bf/html5/thumbnails/8.jpg)
Aplicación del Diseño a la Web
Audio Texto Video Imagen
Multimedia
![Page 9: Introducción al Diseño web](https://reader033.vdocumento.com/reader033/viewer/2022052223/558a07bfd8b42a1f658b46bf/html5/thumbnails/9.jpg)
Objetivo delDiseño Web?Mostrar información de una manera facil
y Accesible para todo tipo de usuario
permitir establecer comunicación efectiva con el usuario.
![Page 10: Introducción al Diseño web](https://reader033.vdocumento.com/reader033/viewer/2022052223/558a07bfd8b42a1f658b46bf/html5/thumbnails/10.jpg)
Función del Diseñador WebCrear 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.
![Page 11: Introducción al Diseño web](https://reader033.vdocumento.com/reader033/viewer/2022052223/558a07bfd8b42a1f658b46bf/html5/thumbnails/11.jpg)
Código HTML UsuarioNavegador
Como funciona?
![Page 12: Introducción al Diseño web](https://reader033.vdocumento.com/reader033/viewer/2022052223/558a07bfd8b42a1f658b46bf/html5/thumbnails/12.jpg)
Etapas del Diseño Web...
Diseño de laInformación
Diseño delSitio
Diseño dePáginas Desarrollo
•Objetivo sitio•Objetivo usuario•Audiencia•Contenido•Copywriting
EstructuraNavegaciónInteracciónFuncionalidadUsabilidad
LayoutPrototipo en papelPrototipo PhotoshopPrototipo Web (en imagen)
HTML y CSSFlash e ImágenesMultimediaProgramaciónValidaciónPruebas
![Page 13: Introducción al Diseño web](https://reader033.vdocumento.com/reader033/viewer/2022052223/558a07bfd8b42a1f658b46bf/html5/thumbnails/13.jpg)
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?
![Page 14: Introducción al Diseño web](https://reader033.vdocumento.com/reader033/viewer/2022052223/558a07bfd8b42a1f658b46bf/html5/thumbnails/14.jpg)
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 *
![Page 15: Introducción al Diseño web](https://reader033.vdocumento.com/reader033/viewer/2022052223/558a07bfd8b42a1f658b46bf/html5/thumbnails/15.jpg)
3. Diseño de PáginasLas interfaces
El prototipo en papel
El prototipo en Photoshop
Simulación con mapa de imágenes
Se acepta el diseño final
![Page 16: Introducción al Diseño web](https://reader033.vdocumento.com/reader033/viewer/2022052223/558a07bfd8b42a1f658b46bf/html5/thumbnails/16.jpg)
3. Diseño de Páginas
Prototipo en Photoshop
![Page 17: Introducción al Diseño web](https://reader033.vdocumento.com/reader033/viewer/2022052223/558a07bfd8b42a1f658b46bf/html5/thumbnails/17.jpg)
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
XHTML(Contenidos)
Contenidos+
PresentaciónCSS
(Presentación)
![Page 18: Introducción al Diseño web](https://reader033.vdocumento.com/reader033/viewer/2022052223/558a07bfd8b42a1f658b46bf/html5/thumbnails/18.jpg)
Reglas de UsabilidadReglas 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
![Page 19: Introducción al Diseño web](https://reader033.vdocumento.com/reader033/viewer/2022052223/558a07bfd8b42a1f658b46bf/html5/thumbnails/19.jpg)
Diferencias entre Diseñador Web y Desarrollador Web?
FrontEnd y BackEnd
![Page 20: Introducción al Diseño web](https://reader033.vdocumento.com/reader033/viewer/2022052223/558a07bfd8b42a1f658b46bf/html5/thumbnails/20.jpg)
Herramientas del Diseñador Web
![Page 21: Introducción al Diseño web](https://reader033.vdocumento.com/reader033/viewer/2022052223/558a07bfd8b42a1f658b46bf/html5/thumbnails/21.jpg)
Ventajas y Beneficios
Mercado muy explotable
Puede ser Autodidacta
Comunidades de apoyo en Internet
Muchas areas de especializacion
![Page 22: Introducción al Diseño web](https://reader033.vdocumento.com/reader033/viewer/2022052223/558a07bfd8b42a1f658b46bf/html5/thumbnails/22.jpg)
InstitucionesEmpresasStartups (Emprendimiento)Empresas de SoftwareFreelanceComercio Electrónico
Oportunidades de Empleo
![Page 23: Introducción al Diseño web](https://reader033.vdocumento.com/reader033/viewer/2022052223/558a07bfd8b42a1f658b46bf/html5/thumbnails/23.jpg)
Oportunidades yModos de expansión
![Page 24: Introducción al Diseño web](https://reader033.vdocumento.com/reader033/viewer/2022052223/558a07bfd8b42a1f658b46bf/html5/thumbnails/24.jpg)
Oportunidades yModos de expansión
![Page 25: Introducción al Diseño web](https://reader033.vdocumento.com/reader033/viewer/2022052223/558a07bfd8b42a1f658b46bf/html5/thumbnails/25.jpg)
Dificultades y Retoscomunicación con Desarrolladores
Problemas TécnicosConstante actualización
Comunicación con el cliente
![Page 26: Introducción al Diseño web](https://reader033.vdocumento.com/reader033/viewer/2022052223/558a07bfd8b42a1f658b46bf/html5/thumbnails/26.jpg)
SOMOS DISEÑADORES, DISEÑEMOS LA WEB