DISEÑO WEBintroducción al...

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 templatey 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

Usabilidadcomo se mueve en la web

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

Audio Texto Video Imagen

Multimedia

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.

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.

Código HTML UsuarioNavegador

Como funciona?

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

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áginasLas 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

XHTML(Contenidos)

Contenidos+

PresentaciónCSS

(Presentación)

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

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

InstitucionesEmpresasStartups (Emprendimiento)Empresas de SoftwareFreelanceComercio Electrónico

Oportunidades de Empleo

Oportunidades yModos de expansión

Oportunidades yModos de expansión

Dificultades y Retoscomunicación con Desarrolladores

Problemas TécnicosConstante actualización

Comunicación con el cliente

SOMOS DISEÑADORES, DISEÑEMOS LA WEB