El documento describe los pasos previos para el diseño de sitios web, incluyendo hacer un mapa del sitio con las páginas y su jerarquía, crear un wireframe sin colores ni imágenes para mostrar la estructura y disposición de elementos, y utilizar frameworks como 960 Grid System que dividen el diseño en columnas para facilitar el proceso de desarrollo.

1. Pasos previos en el
diseño de sitios web
Guia realizada por el Prof. Jorge Llantén B. - www.j2.cl

2. Hacer una página a partir del
código es demoroso
Guia realizada por el Prof. Jorge Llantén B. - www.j2.cl

3. Hacer un boceto de un sitio
realizándola con HTML
es arriesgado
Guia realizada por el Prof. Jorge Llantén B. - www.j2.cl

4. 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

5. 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

6. Que se debe hacer
entonces?
Ejemplo 1:
Mapa del Sitio
Guia realizada por el Prof. Jorge Llantén B. - www.j2.cl

7. Que se debe hacer
entonces?
Ejemplo 2:
Mapa del Sitio
HOME
f
t
g+
index.html
QUIENES
SOMOS
quienes-somos.html
SERVICIOS
servicios.html
IMPR. OFFSET
offset.html
IMPR. DIGITAL
digital.html
IMPLEMENTACION
implementacion.html
NOTICIAS
noticias.php
BLOG
blog.php
CONTACTO
contacto.php
PORTAFOLIO
Guia realizada por el Prof. Jorge Llantén B. - www.j2.cl

8. Paso 2: Wireframe
Guia realizada por el Prof. Jorge Llantén B. - www.j2.cl

9. 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

10. Paso 2: Wireframe
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 portal
de productos personalizados
Grupo Ibergest ha lanzado la nueva versión de
Todoalacarta.com, su portal de venta online de
productos personalizados, que se dirige tanto
a consumidores como a empresas.
13 de Marzo de 2014
Avery Dennison proclama tres
ganadores en el concurso
GoforPro 2013
Tres empresas fueron proclamadas como
ganadoras en el concurso GoforPro 2013 de
Avery Dennison: iNDi Graphics, Printed Walls
y SIGNAL Reklame GmbH.
12 de Marzo de 2014
Konica Minolta lanza su
MarketPlace profesional para
el sector de la impresión
Se trata de un nuevo servicio que la
multinacional pone al alcance de sus clientes,
donde podrán encontrarse una selección de
apps desarrolladas para mejorar...
11 de Marzo de 2014
©2014 Primera Impresión
contacto@primeraimpresion.cl
2-21234567
9-21234567
San Francisco 56, Santiago
Bandera 236, Local 12, Santiago
humans.txt
Guia realizada por el Prof. Jorge Llantén B. - www.j2.cl

11. Paso 2: Wireframe
Guia realizada por el Prof. Jorge Llantén B. - www.j2.cl

12. Paso 2: Wireframe
Se define estructura y
disposición de elementos
Guia realizada por el Prof. Jorge Llantén B. - www.j2.cl

13. Paso 2: Wireframe
Se 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

14. Paso 2: Wireframe
Se 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

15. Paso 2: Wireframe
Se 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

16. 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 portal
de productos personalizados
Grupo Ibergest ha lanzado la nueva versión de
Todoalacarta.com, su portal de venta online de
productos personalizados, que se dirige tanto
a consumidores como a empresas.
13 de Marzo de 2014
Avery Dennison proclama tres
ganadores en el concurso
GoforPro 2013
Tres empresas fueron proclamadas como
ganadoras en el concurso GoforPro 2013 de
Avery Dennison: iNDi Graphics, Printed Walls
y SIGNAL Reklame GmbH.
12 de Marzo de 2014
Konica Minolta lanza su
MarketPlace profesional para
el sector de la impresión
Se trata de un nuevo servicio que la
multinacional pone al alcance de sus clientes,
donde podrán encontrarse una selección de
apps desarrolladas para mejorar...
11 de Marzo de 2014
©2014 Primera Impresión
contacto@primeraimpresion.cl
2-21234567
9-21234567
San Francisco 56, Santiago
Bandera 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 de
productos personalizados
Grupo Ibergest ha lanzado la nueva versión de
Todoalacarta.com, su portal de venta online de productos
personalizados, que se dirige tanto a consumidores como
a empresas.
13 de Marzo de 2014
Avery Dennison proclama tres
ganadores en el concurso GoforPro
2013
Tres empresas fueron proclamadas como ganadoras en
el concurso GoforPro 2013 de Avery Dennison: iNDi
Graphics, Printed Walls y SIGNAL Reklame GmbH.
12 de Marzo de 2014
©2014 Primera Impresión
contacto@primeraimpresion.cl
2-21234567
9-21234567
San Francisco 56, Santiago
Bandera 236, Local 12, Santiago
humans.txt
©2014 Primera Impresión
contacto@primeraimpresion.cl
2-21234567
9-21234567
San Francisco 56, Santiago
Bandera 236, Local 12, Santiago
VERSION ESCRITORIO
960 PX. ANCHO
VERSION TABLET VERTICAL
768 PX. ANCHO
VERSION MOVIL VERTICAL
480 PX. ANCHO
LOGO
©2014 Primera Impresión
contacto@primeraimpresion.cl
2-21234567
9-21234567
San Francisco 56, Santiago
Bandera 236, Local 12, Santiago
QUIENES SOMOS SERVICIOS
PORTAFOLIO NOTICIAS
BLOG CONTACTO
Guia realizada por el Prof. Jorge Llantén B. - www.j2.cl

17. Al hacer una web con HTML y en
boceto hay procesos repetitivos
Guia realizada por el Prof. Jorge Llantén B. - www.j2.cl

18. 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

19. 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 portal
de productos personalizados
Grupo Ibergest ha lanzado la nueva versión de
Todoalacarta.com, su portal de venta online de
productos personalizados, que se dirige tanto
a consumidores como a empresas.
13 de Marzo de 2014
Avery Dennison proclama tres
ganadores en el concurso
GoforPro 2013
Tres empresas fueron proclamadas como
ganadoras en el concurso GoforPro 2013 de
Avery Dennison: iNDi Graphics, Printed Walls
y SIGNAL Reklame GmbH.
12 de Marzo de 2014
Konica Minolta lanza su
MarketPlace profesional para
el sector de la impresión
Se trata de un nuevo servicio que la
multinacional pone al alcance de sus clientes,
donde podrán encontrarse una selección de
apps desarrolladas para mejorar...
11 de Marzo de 2014
©2014 Primera Impresión
contacto@primeraimpresion.cl
2-21234567
9-21234567
San Francisco 56, Santiago
Bandera 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

20. 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

21. Ir a su web
www.960.gs
Guia realizada por el Prof. Jorge Llantén B. - www.j2.cl