Taller web preparacion primer ejercicio
This presentation is the property of its rightful owner.
Sponsored Links
1 / 11

TALLER WEB PREPARACION PRIMER EJERCICIO PowerPoint PPT Presentation


  • 82 Views
  • Uploaded on
  • Presentation posted in: General

TALLER WEB PREPARACION PRIMER EJERCICIO. LAYOUT WEB http://web450.wordpress.com. Diseño Publicitario Multimedial · IP Santo Tomás · José Joo Villablanca DG & otras yerbas · http://web450.wordpress.com. TALLER WEB PREPARACION PRIMER EJERCICIO. Definiendo nuestra web.

Download Presentation

TALLER WEB PREPARACION PRIMER EJERCICIO

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Taller web preparacion primer ejercicio

TALLER WEBPREPARACION PRIMER EJERCICIO

LAYOUT WEBhttp://web450.wordpress.com

Diseño Publicitario Multimedial · IP Santo Tomás · José Joo Villablanca DG & otras yerbas · http://web450.wordpress.com


Definiendo nuestra web

TALLER WEBPREPARACION PRIMER EJERCICIO

Definiendo nuestra web

  • Antes de pasar horas armando nuestra web en los softwares que necesitemos, debemos crear un LAYOUT de lo que haremos.

  • Un simple boceto en donde definamos la profundidad de nuestra web, la cantidad de páginas así como los recursos que ocuparemos.

  • Esta simple acción de BOCETAJE, nos ayudará a presentar una maqueta a nuestro cliente y también a CUANTIFICAR en TIEMPO y DINERO.

Diagrama de navegación

Ejercicio 1

Boceto gráfico

Diseño Publicitario Multimedial · IP Santo Tomás · José Joo Villablanca DG & otras yerbas · http://web450.wordpress.com


Taller web preparacion primer ejercicio

TALLER WEBPREPARACION PRIMER EJERCICIO

Diagrama de navegación

  • Toda web tiene una página de inicio, que es la portada o INDICE de cualquier libro.

  • Hacemos esta comparación para entender la importancia de ser la página principal.

  • Generalmente aquí aparece una presentación acotada de el sitio, empresa o producto.

  • Como es la página INICIAL y contendrá el INDICE, al momento de diseñar nuestro proyecto deberemos nombrarlo como INDEX – quedando de la siguiente forma:

  • INDEX .HTML: Es el nombre que reconoce los navegadores por defecto para mostrarnos un sitio web.

  • Entonces debemos empezar a proyectar desde el INDEX.

Diseño Publicitario Multimedial · IP Santo Tomás · José Joo Villablanca DG & otras yerbas · http://web450.wordpress.com


Taller web preparacion primer ejercicio

TALLER WEBPREPARACION PRIMER EJERCICIO

Diagrama de navegación

  • EL INDEX DEBE ENTREGAR:Contenido básico para seguir navegandoInformación corporativaInformación de contactoDar opción de conectar a otra web

Página inicial de nuestra web

NO ES UNA REGLA LOS PUNTOS DESCRITOS, PERO HAY QUE RECORDAR SIEMPRE QUE ESTAMOS DISEÑANDO UNA WEB PARA USUSARIOS ESPECIFICOS Y NO PARA NOSOTROS.

INDEX.HTML

Diseño Publicitario Multimedial · IP Santo Tomás · José Joo Villablanca DG & otras yerbas · http://web450.wordpress.com


Taller web preparacion primer ejercicio

TALLER WEBPREPARACION PRIMER EJERCICIO

Diagrama de navegación

  • LAS PAGINAS DE CONTENIDO:Aquí debemos diseñar la información generando atención sobre lo que queremos comunicar.Siempre debemos llegar de manera directa a nuestro usuario.Para que dar mil vueltas a quién busca una solución a un par de cliks.

Página de contenidos

EL HECHO DE ENTREGAR UNA INFORMACIÓN DIRECTA, NO DICE QUE DEBA SER FOME.

SIN DUDA ES NUSTRA MISIÓN SEDUCIR MEDIANTE LA IMAGEN, EL DISEÑO ATRACTIVO NORMADO POR UNA INTENCIÓN.

CONTENIDO_1.HTML

Diseño Publicitario Multimedial · IP Santo Tomás · José Joo Villablanca DG & otras yerbas · http://web450.wordpress.com


Taller web preparacion primer ejercicio

TALLER WEBPREPARACION PRIMER EJERCICIO

Diagrama de navegación

  • LAS PAGINAS DE CONTENIDO ESPECÍFICO:Podemos entregar una información detallada de el contenido agregando páginas especiales en donde se muestren más detalles.

Contenidos ESPECÍFICO

AQUÍ PODEMOS UTILIZAR GALERÍAS DE PRODUCTOS, APLICACIÓN DE FORMULARIOS DE CONTACTO.

ES IMPORTANTE GENERAR UNA INTERACCION CON NUESTRO USUARIO.

GALERIA.HTML

Diseño Publicitario Multimedial · IP Santo Tomás · José Joo Villablanca DG & otras yerbas · http://web450.wordpress.com


Taller web preparacion primer ejercicio

TALLER WEBPREPARACION PRIMER EJERCICIO

Armando un diagrama de navegación

INDICE · INTRO

PRESENTACION

PRODUCTOS

INSTALACIONES

CONTACTO

PRODUCTOS 1

FORMULARIO DE INSCRIPCION

GALERÍA DE PRODUCTOS 1 -2

PRODUCTOS 2


Taller web preparacion primer ejercicio

TALLER WEBPREPARACION PRIMER EJERCICIO

Armando un diagrama de navegación

VÍNCULOS DE NAVEGACIÓN

INDICE · INTRO

1 NIVEL DE NAVEGACIÓN

PRESENTACION

PRODUCTOS

INSTALACIONES

CONTACTO

2 NIVEL DE NAVEGACIÓN

PRODUCTOS 1

FORMULARIO DE INSCRIPCION

PRODUCTOS 2

3 NIVEL DE NAVEGACIÓN

GALERÍA DE PRODUCTOS 1 -2


Taller web preparacion primer ejercicio

TALLER WEBPREPARACION PRIMER EJERCICIO

Boceto – línea gráfica

  • En el desarrollo de la línea gráfica es importante que esta cumpla con los objetivos comunicacionales de la EMPRESA – PRODUCTO o SERVICIOS .

  • UN SITIO WEB es una herramienta de comunicación y contacto hacia el mundo.

  • DEBE comunicar en forma silenciosa:

    No hay vendedor que explique las bondades de el producto o servicio.

    No hay interacción externa que motive a la compra.

    El cliente- usuario YA LLEGO A NUESTRA WEB – debemos cerrar el círculo virtuoso.

    CIRCULO VIRTUOSO: Cuando un cliente-usuario llega a nuestra web, satisface su necesidad y recomienda a otro usuario-cliente a utilizar la web mediante la recomendación de la marca o producto.

Diseño Publicitario Multimedial · IP Santo Tomás · José Joo Villablanca DG & otras yerbas · http://web450.wordpress.com


Taller web preparacion primer ejercicio

TALLER WEBPREPARACION PRIMER EJERCICIO

Boceto – línea gráfica

TURISMO NORTE

Bienvenidos

La acción terminó a las 23:11:09: ISSetupFilesExtract. Valor devuelto: 1.La acción se inició a las 23:11:09: IsIntlInstall. La acción terminó a las 23:11:09: IsIntlInstall. Valor devuelto: 1.La acción se inició a las 23:11:09: AppSearch.

La acción terminó a las 23:11:09: AppSearch. Valor devuelto: 1.

La acción se inició a las 23:11:09: LaunchConditions.La acción terminó a las 23:11:09: LaunchConditions. Valor devuelto: 1. La acción se inició a las 23:11:09: FindRelatedProducts.

La acción terminó a las 23:11:09: FindRelatedProducts. Valor devuelto: 1.La acción se inició a las 23:11:09: ValidateProductID.

La

La acción terminó a las 23:11:09: ISSetupFilesExtract. Valor devuelto: 1.La acción se inició a las 23:11:09: IsIntlInstall. La acción terminó a las 23:11:09: IsIntlInstall. Valor devuelto: 1.La acción se inició a las 23:11:09: AppSearch.

La acción terminó a las 23:11:09: AppSearch. Valor devuelto: 1.

La acción se inició a las 23:11:09: LaunchConditions.La acción terminó a las 23:11:09: LaunchConditions. Valor devuelto: 1. La acción se inició a las 23:11:09: FindRelatedProducts.

La acción terminó a las 23:11:09: FindRelatedProducts. Valor devuelto: 1.La acción se inició a las 23:11:09: ValidateProductID.

La

La acción terminó a las 23:11:09: ISSetupFilesExtract. Valor devuelto: 1.La acción se inició a las 23:11:09: IsIntlInstall. La acción terminó a las 23:11:09: IsIntlInstall. Valor devuelto: 1.La acción se inició a las 23:11:09: AppSearch.

Diseño Publicitario Multimedial · IP Santo Tomás · José Joo Villablanca DG & otras yerbas · http://web450.wordpress.com


Taller web preparacion primer ejercicio

TALLER WEBPREPARACION PRIMER EJERCICIO

Boceto – línea gráfica

  • Boceto más acabado utilizando Photoshop

  • FUE REALIZADO CON ELEMENTOS NATIVOS DE WINDOWS

Diseño Publicitario Multimedial · IP Santo Tomás · José Joo Villablanca DG & otras yerbas · http://web450.wordpress.com


  • Login