introduccin al...

DISEO WEB

ciw.mx
Diferencias entre Diseo Grfico
y Diseo Web?
 Que es el
Diseo Web?
 Que es el
Diseo Web?
No es crear grficos estticos

No es presentar informacin de manera agradable

No es Photoshop, Flash o Dreamweaver

No es acomodar elementos

No es diseo grfico
Descargar un template
y modificarlo

Jamais!
(Nunca)
 Diseo Web=Diseo Grfico

El diseo grfico es tan slo

una parte del diseo web
 Navegabilidad
como se mueve en la web

Usabilidad
como se utiliza una web

Arquitectura de
la Informacin
Composicin y Estructuracin del Contenido

Interactividad
 Aplicacin del
Diseo a la Web
Multimedia

Audio Texto Video Imagen

Objetivo del
Diseo Web?
Mostrar informacin de una manera facil
y Accesible para todo tipo de usuario

permitir establecer comunicacin

efectiva con el usuario.
 Funcin del Diseador Web
Crear un traje a la medida de las
necesidades del cliente o de la empresa!

Establezca comunicacin con el usuario

Presente contenido relevante

Que sea eficiente

Que tenga un diseo agradable y sencillo

Que proyecte la esencia del sitio, producto o

empresa.
 Como funciona?

Cdigo HTML Navegador Usuario

 Etapas del Diseo Web...
Diseo de la Diseo del Diseo de
Desarrollo
Informacin Sitio Pginas

Objetivo sitio Estructura Layout HTML y CSS

Objetivo usuario Navegacin Prototipo en papel Flash e Imgenes
Audiencia Interaccin Prototipo Multimedia
Photoshop
Contenido Funcionalidad Programacin
Prototipo Web (en
Copywriting Usabilidad Validacin
imagen)
Pruebas
1. Diseo de la informacin
Qu queremos lograr con el sitio?

Qu queremos proyectar?

Quines son nuestros usuarios?

Qu contenido vamos a presentar? *

De que manera lo vamos a hacer?

 2. Diseo del Sitio

Qu secciones tendr el sitio?

Qu tipo de navegacin se utilizar?

Cmo va a utilizar el usuario el sitio?

Qu funciones va a tener?

Reglas de usabilidad *
3. Diseo de Pginas
Las interfaces

El prototipo en papel

El prototipo en Photoshop

Simulacin con mapa de imgenes

Se acepta el diseo final

 3. Diseo de Pginas

Prototipo en Photoshop
 4. Desarrollo

Se crean los archivos finales

Se optimizan y cortan imgenes

Se programan las funciones del sitio

Se crean validaciones para formas

Se hacen pruebas y correcciones

Contenidos
+ XHTML CSS
(Contenidos) (Presentacin)
Presentacin
 Reglas de Usabilidad
Reglas Bsicas:
No me hagas pensar.

Disea para escaneo no para lectura

Omite palabras innecesarias

Elimina instrucciones

Deja claro donde se hace clic

Usa una Jerarqua Visual Clara

No reinventes la rueda, sigue los estndares

Si lo entiende tu abuela funciona

Haz pruebas de usabilidad

Diferencias entre Diseador Web
y Desarrollador Web?

FrontEnd y BackEnd
Herramientas del
Diseador 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 Electrnico
 Oportunidades y
Modos de expansin
 Oportunidades y
Modos de expansin
 Dificultades y Retos
comunicacin con Desarrolladores
Problemas Tcnicos
Constante actualizacin
Comunicacin con el cliente
SOMOS DISEADORES,
DISEEMOS LA WEB