metodología para diseño de páginas web

Metodología Para diseño de Metodología Para diseño de Páginas WebPáginas WebAutor:David SiegelAutor:David Siegel

Diseñar una estrategiaDiseñar una estrategia

AudienciaAudiencia Propósito Propósito (COMO VOY A LLEGAR A LA META )(COMO VOY A LLEGAR A LA META )

Objetivo Objetivo (QUE VOY A HACER PARA LLEGAR A LA META)(QUE VOY A HACER PARA LLEGAR A LA META)

EspecificacionesEspecificaciones InformaciónInformación PresentaciónPresentación

RESULTADOS

Vigilar la competenciaSeguir los forosPosicionamientoEncuestasEstadísticas

Diseño de la InterfaseDiseño de la Interfase

Interface BásicaInterface Básica

Desarrollo de funcionalidades que Desarrollo de funcionalidades que permitan una experiepermitan una experienncia cia interactiva y agradableinteractiva y agradable

Usar herramientas que permitan Usar herramientas que permitan coordinar varios lenguajes y coordinar varios lenguajes y tecnologia del lado del Servidor. tecnologia del lado del Servidor. (Php/Ajax)(Php/Ajax)

Colocar los elementos de acceso Colocar los elementos de acceso de manera armónica y efectivade manera armónica y efectiva

Diseño de la InterfaseDiseño de la Interfase

Diseño de la InterfaseDiseño de la Interfase

Problema de AccesoProblema de Acceso AccesibilidadAccesibilidad Distribución de Menús Distribución de Menús

NecesariosNecesariosUtilizar menús ContextualesUtilizar menús ContextualesMenús ColapsablesMenús Colapsables

Capacidad de Acceso para todas las Capacidad de Acceso para todas las personaspersonasCapacidad de Acceso para todas las Capacidad de Acceso para todas las personaspersonas

Diseño de la InterfaseDiseño de la Interfase

Diseño de la InterfaseDiseño de la Interfase

La navegaciónLa navegación Se refiere a la forma visual a la que el Se refiere a la forma visual a la que el

navegador y el usuario ven el Sitionavegador y el usuario ven el Sitio Dimensiones y Espeficaciones (Scroll)Dimensiones y Espeficaciones (Scroll) Adaptacion a los direfentes Adaptacion a los direfentes

navegadoresnavegadores

Diseño de la InterfaseDiseño de la Interfase Navegación y EnlacesNavegación y Enlaces

Optimización en la Navegación a Optimización en la Navegación a través de las paginas.través de las paginas.

Enlazar siempre al índiceEnlazar siempre al índice Evitar páginas huérfanasEvitar páginas huérfanas Pie de páginaPie de página Los menúsLos menús

Diseño de SiteDiseño de Site

Diseño PreliminarDiseño Preliminar Estructura Estructura ElementosElementos CoverturaCovertura

Diseño de SiteDiseño de Site

Estructura Estructura En árbol En árbol

En listaEn lista

MixtaMixta

En redEn red

Diseño de SiteDiseño de Site

ElementosElementos Disponer de tiempo, tecnología y recursos Disponer de tiempo, tecnología y recursos

humanos para llevar a cabo el proyecto. humanos para llevar a cabo el proyecto. multidisciplinar (como mínimo, programación, multidisciplinar (como mínimo, programación,

diseño, contenidos y un coordinador de diseño, contenidos y un coordinador de equipo).equipo).

Integración de los departamentosIntegración de los departamentos Que vas a ofrecer y a quien se lo vas a Que vas a ofrecer y a quien se lo vas a

OfrecerOfrecer maqueta que servirá para aproximarnos a maqueta que servirá para aproximarnos a

la idea de nuestro site. la idea de nuestro site.

Errores en el Diseño de un SiteErrores en el Diseño de un Site Texto parpadeante. Texto parpadeante. Animaciones innecesarias.Animaciones innecesarias. Textos deslizantes. Textos deslizantes. Combinaciones ilegibles de texto y fondo. Combinaciones ilegibles de texto y fondo. Encabezamientos decorados. Encabezamientos decorados. Cualquier elemento que parezca publicidad. Cualquier elemento que parezca publicidad. Títulos sin sentido fuera de contexto. Títulos sin sentido fuera de contexto. Recomendaciones para el cambio de resolución del Recomendaciones para el cambio de resolución del

monitor. monitor. Verborrea corporativa. Verborrea corporativa. Uso de framesUso de frames Apertura automática de nuevas ventanas del Apertura automática de nuevas ventanas del

navegadornavegador..

Diseño de SiteDiseño de Site

Diseño de SiteDiseño de Site

CoverturaCovertura

Diseño de las PaginasDiseño de las Paginas

Balance de la PáginaBalance de la Página Diseño de los Grid de la páginaDiseño de los Grid de la página Encabezados y Pie de PaginaEncabezados y Pie de Pagina TipografíasTipografías Tipo de LetrasTipo de Letras ConsistenciaConsistencia Largo de la PáginaLargo de la Página Patrón de las PáginasPatrón de las Páginas

Selección de GráficosSelección de Gráficos

Tipo de GráficosTipo de Gráficos Fondos de la Pagina WebFondos de la Pagina Web Mapa de las ImágenesMapa de las Imágenes

imágenes que tienes varios enlaces imágenes que tienes varios enlaces asociados en distintas áreas. asociados en distintas áreas.

Implementar el modeloImplementar el modelo

Compre una metodología, no un diseño de páginasCompre una metodología, no un diseño de páginas