SlideShare una empresa de Scribd logo
1 de 24
Storyboard
Serie de diagramas que resumen la secuencia y la
disposición del contenido (información y
funcionalidad) a lo largo del sitio web y en cada una
de las páginas
Diagramas de organización y
funcionamiento
BluePrint
Mostrar la estructura del sitio y su flujo de navegación
Diagramas de presentación I
Wireframe o StoryBoard (Prototipos de Baja fidelidad)
Dibujos que representan cómo estarán organizados los
elementos en las páginas
Diagramas de presentación II
Maqueta o MockUp (Prototipo de Alta Fidelidad)
Representan aspectos más precisos de forma
interactiva
Objetivos
Mostrar el contenido de las páginas
En ningún caso significan un compromiso de
diseño gráfico
Sirven como herramienta de comunicación y
discusión entre arquitectos de información,
programadores, diseñadores y clientes
Ventajas
El equipo y el cliente se centran en el diseño de
contenidos y no en el diseño visual
Se evitan cambios posteriores más costosos
Atención!
Es muy importante aclararle siempre al cliente qué
es un Wireframe, estar seguros de que entiende que
ese no es el aspecto final del sitio, sino una mera
representación gráfica de su contenido.
Información que contiene
 Inventario de contenido
 Contenidos de cada página
 Elementos de la página
 Cabeceras, enlaces, botones, imágenes, formularios, etc
 Etiquetado
 De vínculos, títulos, etc.
 Layout
 Ubicación, colocación y agrupación de los elementos de la página
 Comportamiento
 Mediante notas asociadas a los elementos para indicar cómo se deben mostrar
Nivel de detalle
Content-only
Nombre de la página y un listado de contenidos
Nivel de detalle
Diagrama de bloques
Información básica a través de bloques de
funcionalidad y agrupamiento de contenidos
Nivel de detalle
Diagrama de bloques: Más ejemplos
Nivel de detalle
Diagrama de bloques: Más ejemplos
Nivel de detalle
Diagrama de bloques: Más ejemplos
Nivel de detalle
Wireframe detallado
Todo lo anterior más notas de comportamiento
Cantidad de páginas
Principal
Principales tipos de subpáginas o plantillas
(incluidos formularios, resultados de búsqueda,
página de error, etc.)
Metodología
Hacer una lista numerada
Información y funciones ("bit")
Metodología
Priorizar grupos
Lo más importante
Lo necesario
Lo que es bueno tener
Metodología
Agrupar los "bits" que se relacionan entre sí
Grupos con letra (ej. A:1,3,5)
Metodología
Diseñar fragmentos
Dar forma a cada agrupación de "bits"
Metodología
Componer los fragmentos
Prioridad
Equilibrio
Metodología
Acabado
En pantalla
Recomendaciones
Simplificar
Menor cantidad posible de colores y tipos de letra
Quitar detalles innecesarios
Elementos que distraigan la atención
Anotar sólo lo relevante
Autoexplicativo
Presentación
Códigos visuales
Jesse James Garret
Rodrigo Ronda León
URL
URL

Más contenido relacionado

La actualidad más candente

Introducción al Diseño web
Introducción al Diseño webIntroducción al Diseño web
Introducción al Diseño web
ciwmx
 
Diagramación o Maquetación
Diagramación o Maquetación Diagramación o Maquetación
Diagramación o Maquetación
Nathaly Correa
 
Diseño editorial y diagramación
Diseño editorial y diagramaciónDiseño editorial y diagramación
Diseño editorial y diagramación
CeciliaSz
 
Clase 5 Clases De Medios Impresos
Clase 5 Clases De Medios ImpresosClase 5 Clases De Medios Impresos
Clase 5 Clases De Medios Impresos
RAUL BUENO MARTINEZ
 
Composición en Web
Composición en WebComposición en Web
Composición en Web
Rubens Yanes
 
Tecnologia web
Tecnologia webTecnologia web
Tecnologia web
Meli Vidal
 
Fundamentos de diagramación Sesión 1
Fundamentos de diagramación Sesión 1Fundamentos de diagramación Sesión 1
Fundamentos de diagramación Sesión 1
eme2525
 
Presentación adobe illustrator
Presentación adobe illustratorPresentación adobe illustrator
Presentación adobe illustrator
victorhpi
 

La actualidad más candente (20)

Tipografia
TipografiaTipografia
Tipografia
 
Formatos de Imagen
Formatos de ImagenFormatos de Imagen
Formatos de Imagen
 
Diseño Periodístico
Diseño PeriodísticoDiseño Periodístico
Diseño Periodístico
 
Contraste y armonia
Contraste y armoniaContraste y armonia
Contraste y armonia
 
Diseño editorial pag y reticula
Diseño  editorial pag y reticulaDiseño  editorial pag y reticula
Diseño editorial pag y reticula
 
Introducción al Diseño web
Introducción al Diseño webIntroducción al Diseño web
Introducción al Diseño web
 
Diagramación o Maquetación
Diagramación o Maquetación Diagramación o Maquetación
Diagramación o Maquetación
 
Diseño editorial y diagramación
Diseño editorial y diagramaciónDiseño editorial y diagramación
Diseño editorial y diagramación
 
Clase 5 Clases De Medios Impresos
Clase 5 Clases De Medios ImpresosClase 5 Clases De Medios Impresos
Clase 5 Clases De Medios Impresos
 
Graphic design
Graphic designGraphic design
Graphic design
 
3 elementos del diseño
3 elementos del diseño3 elementos del diseño
3 elementos del diseño
 
DIAGRAMACIÓN Y COMPOSICIÓN
DIAGRAMACIÓN Y COMPOSICIÓNDIAGRAMACIÓN Y COMPOSICIÓN
DIAGRAMACIÓN Y COMPOSICIÓN
 
Composición en Web
Composición en WebComposición en Web
Composición en Web
 
Tecnologia web
Tecnologia webTecnologia web
Tecnologia web
 
Fundamentos del diseño
Fundamentos del diseñoFundamentos del diseño
Fundamentos del diseño
 
Informatica storyboard instituto La araucana
Informatica storyboard instituto La araucana Informatica storyboard instituto La araucana
Informatica storyboard instituto La araucana
 
04 elementos basicos2
04 elementos basicos204 elementos basicos2
04 elementos basicos2
 
Fundamentos de diagramación Sesión 1
Fundamentos de diagramación Sesión 1Fundamentos de diagramación Sesión 1
Fundamentos de diagramación Sesión 1
 
Presentación adobe illustrator
Presentación adobe illustratorPresentación adobe illustrator
Presentación adobe illustrator
 
Imagen Digital
Imagen DigitalImagen Digital
Imagen Digital
 

Destacado

Navegacion Por Internet Una ComunicacióN Mundial
Navegacion Por Internet Una ComunicacióN MundialNavegacion Por Internet Una ComunicacióN Mundial
Navegacion Por Internet Una ComunicacióN Mundial
andriou77
 
Storyboard. Sus utilidades
Storyboard. Sus utilidadesStoryboard. Sus utilidades
Storyboard. Sus utilidades
directorcpmendez
 

Destacado (20)

Desarrollo de un Storyboard
Desarrollo de un StoryboardDesarrollo de un Storyboard
Desarrollo de un Storyboard
 
Como hacer un story board
Como hacer un story boardComo hacer un story board
Como hacer un story board
 
3.- El Guión Gráfico o Storyboard
3.- El Guión Gráfico o Storyboard3.- El Guión Gráfico o Storyboard
3.- El Guión Gráfico o Storyboard
 
Storyboard
StoryboardStoryboard
Storyboard
 
Guión, mapa y storyboard
Guión, mapa y storyboardGuión, mapa y storyboard
Guión, mapa y storyboard
 
Ejemplo de un guión gráfico / story board
Ejemplo de un guión gráfico / story boardEjemplo de un guión gráfico / story board
Ejemplo de un guión gráfico / story board
 
Modelos de escritura hipertextual para el periodismo
Modelos de escritura hipertextual para el periodismoModelos de escritura hipertextual para el periodismo
Modelos de escritura hipertextual para el periodismo
 
0203 uso de un guión gráfico
0203 uso de un guión gráfico0203 uso de un guión gráfico
0203 uso de un guión gráfico
 
Formato de Storyboard Lyndon John
Formato de Storyboard Lyndon JohnFormato de Storyboard Lyndon John
Formato de Storyboard Lyndon John
 
Guión gráfico
Guión gráficoGuión gráfico
Guión gráfico
 
Guion Multimedia
Guion MultimediaGuion Multimedia
Guion Multimedia
 
Storyboard
StoryboardStoryboard
Storyboard
 
Como hacer un storyboard
Como hacer un storyboardComo hacer un storyboard
Como hacer un storyboard
 
Storyboard
StoryboardStoryboard
Storyboard
 
Navegacion Por Internet Una ComunicacióN Mundial
Navegacion Por Internet Una ComunicacióN MundialNavegacion Por Internet Una ComunicacióN Mundial
Navegacion Por Internet Una ComunicacióN Mundial
 
Mapa navegacion
Mapa navegacionMapa navegacion
Mapa navegacion
 
Storyboard
StoryboardStoryboard
Storyboard
 
Storyboard
StoryboardStoryboard
Storyboard
 
Storyboard. Sus utilidades
Storyboard. Sus utilidadesStoryboard. Sus utilidades
Storyboard. Sus utilidades
 
Que es un storyboard y algunos ejemplos
Que es un storyboard y algunos ejemplosQue es un storyboard y algunos ejemplos
Que es un storyboard y algunos ejemplos
 

Similar a Storyboard web

DiseñO GráFico
DiseñO GráFicoDiseñO GráFico
DiseñO GráFico
cecimat
 
DiseñO De La Informacion
DiseñO De La InformacionDiseñO De La Informacion
DiseñO De La Informacion
iConstruye
 
10 Claves Para Rentabilizar Una Web Marketing Por Internet Abascal 26 03 09
10 Claves Para Rentabilizar Una Web Marketing Por Internet Abascal 26 03 0910 Claves Para Rentabilizar Una Web Marketing Por Internet Abascal 26 03 09
10 Claves Para Rentabilizar Una Web Marketing Por Internet Abascal 26 03 09
Domestika
 
eMarketing para La Empresa Exportadora
eMarketing para La Empresa ExportadoraeMarketing para La Empresa Exportadora
eMarketing para La Empresa Exportadora
Javier Cantera
 

Similar a Storyboard web (20)

ABC - Wireframes
ABC - WireframesABC - Wireframes
ABC - Wireframes
 
DiseñO GráFico
DiseñO GráFicoDiseñO GráFico
DiseñO GráFico
 
Maquetación
MaquetaciónMaquetación
Maquetación
 
Diseño Web 02
Diseño Web 02Diseño Web 02
Diseño Web 02
 
DiseñO Web
DiseñO WebDiseñO Web
DiseñO Web
 
DiseñO De La Informacion
DiseñO De La InformacionDiseñO De La Informacion
DiseñO De La Informacion
 
Metodologia para-diseno-de-paginas-web
Metodologia para-diseno-de-paginas-webMetodologia para-diseno-de-paginas-web
Metodologia para-diseno-de-paginas-web
 
Metodologia para-diseno-de-paginas-web
Metodologia para-diseno-de-paginas-webMetodologia para-diseno-de-paginas-web
Metodologia para-diseno-de-paginas-web
 
Diseño visual para web
Diseño visual para webDiseño visual para web
Diseño visual para web
 
Diseño de información, navegación e interfaces
Diseño de información, navegación e interfacesDiseño de información, navegación e interfaces
Diseño de información, navegación e interfaces
 
Wireframe de la teoría a la práctica - DrupalCamp2011
Wireframe de la teoría a la práctica - DrupalCamp2011Wireframe de la teoría a la práctica - DrupalCamp2011
Wireframe de la teoría a la práctica - DrupalCamp2011
 
10 Claves Para Rentabilizar Una Web Marketing Por Internet Abascal 26 03 09
10 Claves Para Rentabilizar Una Web Marketing Por Internet Abascal 26 03 0910 Claves Para Rentabilizar Una Web Marketing Por Internet Abascal 26 03 09
10 Claves Para Rentabilizar Una Web Marketing Por Internet Abascal 26 03 09
 
Principios elementales de maquetación WEB
Principios elementales de maquetación WEBPrincipios elementales de maquetación WEB
Principios elementales de maquetación WEB
 
Capitulo 19 Modelado De DiseñO
Capitulo 19 Modelado De DiseñOCapitulo 19 Modelado De DiseñO
Capitulo 19 Modelado De DiseñO
 
Html1
Html1Html1
Html1
 
INTRODUCCION AL DISEÑO WEB.pptx
INTRODUCCION AL DISEÑO WEB.pptxINTRODUCCION AL DISEÑO WEB.pptx
INTRODUCCION AL DISEÑO WEB.pptx
 
eMarketing para La Empresa Exportadora
eMarketing para La Empresa ExportadoraeMarketing para La Empresa Exportadora
eMarketing para La Empresa Exportadora
 
Planeación de sitios web
Planeación de sitios webPlaneación de sitios web
Planeación de sitios web
 
Servicios Y Tarifas
Servicios Y TarifasServicios Y Tarifas
Servicios Y Tarifas
 
Internet pa
Internet paInternet pa
Internet pa
 

Más de Antonio Albanés (13)

Perspectiva de la educación artística en el contexto
Perspectiva de la educación artística en el contextoPerspectiva de la educación artística en el contexto
Perspectiva de la educación artística en el contexto
 
DOm 2
DOm 2DOm 2
DOm 2
 
DOM 1
DOM 1DOM 1
DOM 1
 
Arquitectura de la Información (AI)
Arquitectura de la Información (AI)Arquitectura de la Información (AI)
Arquitectura de la Información (AI)
 
mysql_fetch_array
mysql_fetch_arraymysql_fetch_array
mysql_fetch_array
 
CSS
CSSCSS
CSS
 
Clase4: Páginas dinámicas PHP (Sólo intro)
Clase4: Páginas dinámicas PHP (Sólo intro)Clase4: Páginas dinámicas PHP (Sólo intro)
Clase4: Páginas dinámicas PHP (Sólo intro)
 
Tecnologías Web
Tecnologías WebTecnologías Web
Tecnologías Web
 
Ejemplos páginas de inicio
Ejemplos páginas de inicioEjemplos páginas de inicio
Ejemplos páginas de inicio
 
Diseño de Interfaces
Diseño de InterfacesDiseño de Interfaces
Diseño de Interfaces
 
Interfaz Gráfica de Usuario
Interfaz Gráfica de UsuarioInterfaz Gráfica de Usuario
Interfaz Gráfica de Usuario
 
Usabilidad Web
Usabilidad WebUsabilidad Web
Usabilidad Web
 
Web 2.0
Web 2.0Web 2.0
Web 2.0
 

Último

editorial de informática de los sueños.docx
editorial de informática de los sueños.docxeditorial de informática de los sueños.docx
editorial de informática de los sueños.docx
ssusere34b451
 

Último (20)

PRÁCTICA Nº 4: “Análisis de secuencias del ADN con el software BioEdit y uso ...
PRÁCTICA Nº 4: “Análisis de secuencias del ADN con el software BioEdit y uso ...PRÁCTICA Nº 4: “Análisis de secuencias del ADN con el software BioEdit y uso ...
PRÁCTICA Nº 4: “Análisis de secuencias del ADN con el software BioEdit y uso ...
 
editorial de informática de los sueños.docx
editorial de informática de los sueños.docxeditorial de informática de los sueños.docx
editorial de informática de los sueños.docx
 
taller de tablas en word para estudiantes de secundaria
taller de tablas en word para estudiantes de secundariataller de tablas en word para estudiantes de secundaria
taller de tablas en word para estudiantes de secundaria
 
Tipos de datos en Microsoft Access de Base de Datos
Tipos de datos en Microsoft Access de Base de DatosTipos de datos en Microsoft Access de Base de Datos
Tipos de datos en Microsoft Access de Base de Datos
 
Imágenes digitales: Calidad de la información
Imágenes digitales: Calidad de la informaciónImágenes digitales: Calidad de la información
Imágenes digitales: Calidad de la información
 
Ejercicio 1 periodo 2 de Tecnología 2024
Ejercicio 1 periodo 2 de Tecnología 2024Ejercicio 1 periodo 2 de Tecnología 2024
Ejercicio 1 periodo 2 de Tecnología 2024
 
TELECOMUNICACIONES- CAPITULO2: Modelo Osi ccna
TELECOMUNICACIONES- CAPITULO2: Modelo Osi ccnaTELECOMUNICACIONES- CAPITULO2: Modelo Osi ccna
TELECOMUNICACIONES- CAPITULO2: Modelo Osi ccna
 
proyectos_social_y_socioproductivos _mapas_conceptuales
proyectos_social_y_socioproductivos _mapas_conceptualesproyectos_social_y_socioproductivos _mapas_conceptuales
proyectos_social_y_socioproductivos _mapas_conceptuales
 
BUSCADORES DE INTERNET (Universidad de Sonora).
BUSCADORES DE INTERNET (Universidad de Sonora).BUSCADORES DE INTERNET (Universidad de Sonora).
BUSCADORES DE INTERNET (Universidad de Sonora).
 
VelderrainPerez_Paola_M1C1G63-097.pptx. LAS TiC
VelderrainPerez_Paola_M1C1G63-097.pptx. LAS TiCVelderrainPerez_Paola_M1C1G63-097.pptx. LAS TiC
VelderrainPerez_Paola_M1C1G63-097.pptx. LAS TiC
 
NIVEL DE MADUREZ TECNOLÓGICA (TRL).pptx
NIVEL DE  MADUREZ TECNOLÓGICA (TRL).pptxNIVEL DE  MADUREZ TECNOLÓGICA (TRL).pptx
NIVEL DE MADUREZ TECNOLÓGICA (TRL).pptx
 
manual-de-oleohidraulica-industrial-vickers.pdf
manual-de-oleohidraulica-industrial-vickers.pdfmanual-de-oleohidraulica-industrial-vickers.pdf
manual-de-oleohidraulica-industrial-vickers.pdf
 
De Olmos Santiago_Dolores _ M1S3AI6.pptx
De Olmos Santiago_Dolores _ M1S3AI6.pptxDe Olmos Santiago_Dolores _ M1S3AI6.pptx
De Olmos Santiago_Dolores _ M1S3AI6.pptx
 
Navegadores de internet - Nuevas Tecnologías de la Información y la Comunicación
Navegadores de internet - Nuevas Tecnologías de la Información y la ComunicaciónNavegadores de internet - Nuevas Tecnologías de la Información y la Comunicación
Navegadores de internet - Nuevas Tecnologías de la Información y la Comunicación
 
Unidad 1- Historia y Evolucion de las computadoras.pdf
Unidad 1- Historia y Evolucion de las computadoras.pdfUnidad 1- Historia y Evolucion de las computadoras.pdf
Unidad 1- Historia y Evolucion de las computadoras.pdf
 
CIBERSEGURIDAD Y SEGURIDAD INFORMATICA .
CIBERSEGURIDAD Y SEGURIDAD INFORMATICA .CIBERSEGURIDAD Y SEGURIDAD INFORMATICA .
CIBERSEGURIDAD Y SEGURIDAD INFORMATICA .
 
Pons, A. - El desorden digital - guia para historiadores y humanistas [2013].pdf
Pons, A. - El desorden digital - guia para historiadores y humanistas [2013].pdfPons, A. - El desorden digital - guia para historiadores y humanistas [2013].pdf
Pons, A. - El desorden digital - guia para historiadores y humanistas [2013].pdf
 
¡Mira mi nuevo diseño hecho en Canva!.pdf
¡Mira mi nuevo diseño hecho en Canva!.pdf¡Mira mi nuevo diseño hecho en Canva!.pdf
¡Mira mi nuevo diseño hecho en Canva!.pdf
 
Inteligencia Artificial para usuarios nivel inicial
Inteligencia Artificial para usuarios nivel inicialInteligencia Artificial para usuarios nivel inicial
Inteligencia Artificial para usuarios nivel inicial
 
Gestión de concurrencia y bloqueos en SQL Server
Gestión de concurrencia y bloqueos en SQL ServerGestión de concurrencia y bloqueos en SQL Server
Gestión de concurrencia y bloqueos en SQL Server
 

Storyboard web