Your SlideShare is downloading. ×
0
introducción al... DISEÑO WEB                     ciw.mx
Diferencias entre Diseño Gráfico         y Diseño Web?
Que es elDiseño Web?
Que es el  Diseño Web?No es crear gráficos estéticosNo es presentar información de manera agradableNo es Photoshop, Flash o...
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...
Aplicación del   Diseño a la Web        MultimediaAudio   Texto   Video   Imagen
Objetivo delDiseño Web?Mostrar información de una manera facil y Accesible para todo tipo de usuario   permitir establecer...
Función del Diseñador Web            Crear un traje a la medida de las         necesidades del cliente o de la empresa!•Es...
Como funciona?Código HTML       Navegador   Usuario
Etapas del Diseño Web...     Diseño de la      Diseño del       Diseño de                                                 ...
1. Diseño de la información  •¿Qué queremos lograr con el sitio?  •¿Qué queremos proyectar?  •¿Quiénes son nuestros usuari...
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 s...
3. Diseño de Páginas Las interfaces El prototipo en papel El prototipo en Photoshop Simulación con mapa de imágenes Se ace...
3. Diseño de PáginasPrototipo en Photoshop
4. Desarrollo       Se crean los archivos finales       Se optimizan y cortan imágenes       Se programan las funciones del...
Reglas de UsabilidadReglas Básicas:No me hagas pensar.Diseña para escaneo no para lecturaOmite palabras innecesariasElimin...
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     ...
Oportunidades de Empleo  Instituciones  Empresas  Startups (Emprendimiento)  Empresas de Software  Freelance  Comercio Ele...
Oportunidades yModos de expansión
Oportunidades yModos de expansión
Dificultades y Retoscomunicación con Desarrolladores      Problemas Técnicos    Constante actualización  Comunicación con ...
SOMOS DISEÑADORES, DISEÑEMOS LA WEB
Upcoming SlideShare
Loading in...5
×

Introducción al Diseño web

597

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
597
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
49
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Introducción al Diseño web"

  1. 1. introducción al... DISEÑO WEB ciw.mx
  2. 2. Diferencias entre Diseño Gráfico y Diseño Web?
  3. 3. Que es elDiseño Web?
  4. 4. Que es el Diseño Web?No es crear gráficos estéticosNo es presentar información de manera agradableNo es Photoshop, Flash o DreamweaverNo es acomodar elementosNo es diseño gráfico
  5. 5. Descargar un template y modificarlo Jamais! (Nunca)
  6. 6. Diseño Web=Diseño Gráfico• El diseño gráfico es tan sólo una parte del diseño web
  7. 7. Navegabilidad como se mueve en la web Usabilidad como se utiliza una webArquitectura dela InformaciónComposición y Estructuración del Contenido Interactividad
  8. 8. Aplicación del Diseño a la Web MultimediaAudio Texto Video Imagen
  9. 9. 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.
  10. 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. 11. Como funciona?Código HTML Navegador Usuario
  12. 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. 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. 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. 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. 16. 3. Diseño de PáginasPrototipo en Photoshop
  17. 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. 18. Reglas de UsabilidadReglas Básicas:No me hagas pensar.Diseña para escaneo no para lecturaOmite palabras innecesariasElimina instruccionesDeja claro donde se hace clicUsa una Jerarquía Visual ClaraNo reinventes la rueda, sigue los estándaresSi lo entiende tu abuela funcionaHaz pruebas de usabilidad
  19. 19. Diferencias entre Diseñador Web y Desarrollador Web? FrontEnd y BackEnd
  20. 20. Herramientas del Diseñador Web
  21. 21. Ventajas y Beneficios Mercado muy explotable Puede ser Autodidacta Comunidades de apoyo en Internet Muchas areas de especializacion
  22. 22. Oportunidades de Empleo Instituciones Empresas Startups (Emprendimiento) Empresas de Software Freelance Comercio Electrónico
  23. 23. Oportunidades yModos de expansión
  24. 24. Oportunidades yModos de expansión
  25. 25. Dificultades y Retoscomunicación con Desarrolladores Problemas Técnicos Constante actualización Comunicación con el cliente
  26. 26. SOMOS DISEÑADORES, DISEÑEMOS LA WEB
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×