introducciﾃｳn al...
DISEﾃ前 WEB
ciw.mx
Diferencias entre Diseño Gráfico y Diseño Web?
Que es el Dise単o Web?
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
Descargar un template y modificarlo
Jamais! (Nunca)
Diseño Web=Diseño Gráfico
•
El diseño gráfico es tan sólo una parte del diseño web
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
Aplicaci贸n del Dise帽o a la Web Multimedia
Audio
Texto
Video
Imagen
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.
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.
Como funciona? C贸digo HTML
Navegador
Usuario
Etapas del Diseño Web... Diseño de la Información
Diseño del Sitio
Diseño de Páginas
Desarrollo
•Objetivo sitio
Estructura
Layout
HTML y CSS
•Objetivo usuario
Navegación
Prototipo en papel
Flash e Imágenes
•Audiencia
Interacción
Multimedia
•Contenido
Funcionalidad
Prototipo Photoshop
•Copywriting
Usabilidad
Prototipo Web (en imagen)
Validación
Programación Pruebas
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?
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 *
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
3. DiseĂąo de PĂĄginas
Prototipo en Photoshop
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 + Presentaci贸n
XHTML
CSS
(Contenidos)
(Presentaci贸n)
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
Diferencias entre Dise単ador Web y Desarrollador Web? FrontEnd y BackEnd
Herramientas del Dise単ador Web
Ventajas y Beneficios Mercado muy explotable Puede ser Autodidacta Comunidades de apoyo en Internet Muchas areas de especializacion
Oportunidades de Empleo Instituciones Empresas Startups (Emprendimiento) Empresas de Software Freelance Comercio Electr贸nico
Oportunidades y Modos de expansi贸n
Oportunidades y Modos de expansi贸n
Dificultades y Retos comunicaci贸n con Desarrolladores Problemas T茅cnicos Constante actualizaci贸n Comunicaci贸n con el cliente
Alumno:Valverde Paz Soldan Jesus Seccion:V - A-10 eh