Wireframe de una web
21
Pasos previos en el diseño de sitios web Guia realizada por el Prof. Jorge Llantén B. - www.j2.cl
-
Upload
jorge-llanten -
Category
Education
-
view
167 -
download
0
Transcript of Wireframe de una web
Pasos previos en el diseño de sitios web
Guia realizada por el Prof. Jorge Llantén B. - www.j2.cl
Hacer una página a partir del código es demoroso
Guia realizada por el Prof. Jorge Llantén B. - www.j2.cl
Hacer un boceto de un sitio realizándola con HTML
es arriesgado
Guia realizada por el Prof. Jorge Llantén B. - www.j2.cl
Hacer un boceto de un sitio realizándola con HTML
es arriesgado
Por que si al cliente no le gusta habrá sido tiempo perdido.
Guia realizada por el Prof. Jorge Llantén B. - www.j2.cl
Que se debe hacer entonces?
Teniendo claro los objetivos que el cliente requiere para su sitio, se crea un mapa del sitio para saber
que páginas llevará y cual va ser su jerarquía.
Guia realizada por el Prof. Jorge Llantén B. - www.j2.cl
Que se debe hacer entonces?
Ejemplo 1: Mapa del Sitio
Guia realizada por el Prof. Jorge Llantén B. - www.j2.cl
Que se debe hacer entonces?
Ejemplo 2: Mapa del Sitio
HOME
f
tg+
index.html
QUIENESSOMOS
quienes-somos.html
SERVICIOS
servicios.htmlIMPR. OFFSET
offset.html
IMPR. DIGITAL
digital.html
IMPLEMENTACION
implementacion.htmlNOTICIAS
noticias.php
BLOG
blog.php
CONTACTO
contacto.php
PORTAFOLIO
Guia realizada por el Prof. Jorge Llantén B. - www.j2.cl
Paso 2: Wireframe(se puede hacer antes un boceto o sketch a
mano de la web)
Guia realizada por el Prof. Jorge Llantén B. - www.j2.cl
Paso 2: WireframeLOGO
SLIDER
QUIENES SOMOS SERVICIOS PORTAFOLIO NOTICIAS BLOG CONTACTO
NOTICIAS RECIENTES
LO MÁS POPULAR
ITGT y Sistrade suman fuerzas para formar al sector gráfico
Canon permite a Bookprint rentabilizar las tiradas cortas
PNE.EU presentará sus novedades en Ipex
Grupo Ibergest relanza su portalde productos personalizados
Grupo Ibergest ha lanzado la nueva versión deTodoalacarta.com, su portal de venta online deproductos personalizados, que se dirige tantoa consumidores como a empresas.
13 de Marzo de 2014
Avery Dennison proclama tresganadores en el concursoGoforPro 2013Tres empresas fueron proclamadas comoganadoras en el concurso GoforPro 2013 deAvery Dennison: iNDi Graphics, Printed Wallsy SIGNAL Reklame GmbH.
12 de Marzo de 2014
Konica Minolta lanza suMarketPlace profesional parael sector de la impresiónSe trata de un nuevo servicio que lamultinacional pone al alcance de sus clientes,donde podrán encontrarse una selección deapps desarrolladas para mejorar...
11 de Marzo de 2014
©2014 Primera Impresió[email protected]
2-212345679-21234567
San Francisco 56, SantiagoBandera 236, Local 12, Santiago
humans.txtGuia realizada por el Prof. Jorge Llantén B. - www.j2.cl
Paso 2: WireframeSe define estructura y disposición de elementos
Guia realizada por el Prof. Jorge Llantén B. - www.j2.cl
Paso 2: WireframeSe define estructura y disposición de elementos
No se definen colores, imágenes y textos
Guia realizada por el Prof. Jorge Llantén B. - www.j2.cl
Paso 2: WireframeSe define estructura y disposición de elementos
No se definen colores, imágenes y textos
Se trabaja con elementos simulados y en escala de grises
Guia realizada por el Prof. Jorge Llantén B. - www.j2.cl
Paso 2: WireframeSe define estructura y disposición de elementos
No se definen colores, imágenes y textos
Se trabaja con elementos simulados y en escala de grises
Esto es un trabajo más rápido para mostrarle al cliente como primer boceto.
Guia realizada por el Prof. Jorge Llantén B. - www.j2.cl
LOGO
SLIDER
QUIENES SOMOS SERVICIOS PORTAFOLIO NOTICIAS BLOG CONTACTO
NOTICIAS RECIENTES
LO MÁS POPULAR
ITGT y Sistrade suman fuerzas para formar al sector gráfico
Canon permite a Bookprint rentabilizar las tiradas cortas
PNE.EU presentará sus novedades en Ipex
Grupo Ibergest relanza su portalde productos personalizados
Grupo Ibergest ha lanzado la nueva versión deTodoalacarta.com, su portal de venta online deproductos personalizados, que se dirige tantoa consumidores como a empresas.
13 de Marzo de 2014
Avery Dennison proclama tresganadores en el concursoGoforPro 2013Tres empresas fueron proclamadas comoganadoras en el concurso GoforPro 2013 deAvery Dennison: iNDi Graphics, Printed Wallsy SIGNAL Reklame GmbH.
12 de Marzo de 2014
Konica Minolta lanza suMarketPlace profesional parael sector de la impresiónSe trata de un nuevo servicio que lamultinacional pone al alcance de sus clientes,donde podrán encontrarse una selección deapps desarrolladas para mejorar...
11 de Marzo de 2014
©2014 Primera Impresió[email protected]
2-212345679-21234567
San Francisco 56, SantiagoBandera 236, Local 12, Santiago
humans.txt
LOGO
SLIDER
QUIENES SOMOS SERVICIOS PORTAFOLIO NOTICIAS BLOG CONTACTO
NOTICIAS RECIENTES
LO MÁS POPULAR
ITGT y Sistrade suman fuerzas para formar al sector gráfico
Canon permite a Bookprint rentabilizar las tiradas cortas con su tecnología.
Grupo Ibergest relanza su portal deproductos personalizados
Grupo Ibergest ha lanzado la nueva versión deTodoalacarta.com, su portal de venta online de productospersonalizados, que se dirige tanto a consumidores comoa empresas.
13 de Marzo de 2014
Avery Dennison proclama tresganadores en el concurso GoforPro2013
Tres empresas fueron proclamadas como ganadoras enel concurso GoforPro 2013 de Avery Dennison: iNDiGraphics, Printed Walls y SIGNAL Reklame GmbH.
12 de Marzo de 2014
©2014 Primera Impresió[email protected]
2-212345679-21234567
San Francisco 56, SantiagoBandera 236, Local 12, Santiago
humans.txt
©2014 Primera Impresió[email protected]
2-212345679-21234567
San Francisco 56, SantiagoBandera 236, Local 12, Santiago
VERSION ESCRITORIO960 PX. ANCHO
VERSION TABLET VERTICAL768 PX. ANCHO
VERSION MOVIL VERTICAL480 PX. ANCHO
LOGO
©2014 Primera Impresió[email protected]
2-212345679-21234567
San Francisco 56, SantiagoBandera 236, Local 12, Santiago
QUIENES SOMOS SERVICIOS
PORTAFOLIO NOTICIAS
BLOG CONTACTO
Guia realizada por el Prof. Jorge Llantén B. - www.j2.cl
Al hacer una web con HTML y en boceto hay procesos repetitivos
Guia realizada por el Prof. Jorge Llantén B. - www.j2.cl
Para solucionar esto existen los FRAMEWORKS que son pasos previos ya
hechos para comenzar a ordenar y colocar nuestro contenido.
Guia realizada por el Prof. Jorge Llantén B. - www.j2.cl
LOGO
SLIDER
QUIENES SOMOS SERVICIOS PORTAFOLIO NOTICIAS BLOG CONTACTO
NOTICIAS RECIENTES
LO MÁS POPULAR
ITGT y Sistrade suman fuerzas para formar al sector gráfico
Canon permite a Bookprint rentabilizar las tiradas cortas
PNE.EU presentará sus novedades en Ipex
Grupo Ibergest relanza su portalde productos personalizados
Grupo Ibergest ha lanzado la nueva versión deTodoalacarta.com, su portal de venta online deproductos personalizados, que se dirige tantoa consumidores como a empresas.
13 de Marzo de 2014
Avery Dennison proclama tresganadores en el concursoGoforPro 2013Tres empresas fueron proclamadas comoganadoras en el concurso GoforPro 2013 deAvery Dennison: iNDi Graphics, Printed Wallsy SIGNAL Reklame GmbH.
12 de Marzo de 2014
Konica Minolta lanza suMarketPlace profesional parael sector de la impresiónSe trata de un nuevo servicio que lamultinacional pone al alcance de sus clientes,donde podrán encontrarse una selección deapps desarrolladas para mejorar...
11 de Marzo de 2014
©2014 Primera Impresió[email protected]
2-212345679-21234567
San Francisco 56, SantiagoBandera 236, Local 12, Santiago
humans.txt
Existen FRAMEWORKS para trabajar nuestro sitio con columnas. (Generalmente 12 columnas)
Guia realizada por el Prof. Jorge Llantén B. - www.j2.cl
Existen muchos FRAMEWORKS para diferentes
cosas y el aconsejable para principiantes es
960 Grid Systems
Guia realizada por el Prof. Jorge Llantén B. - www.j2.cl
Ir a su web www.960.gs
Guia realizada por el Prof. Jorge Llantén B. - www.j2.cl
