Introducción al Desarrollo 
Web: HTML y CSS 
Parte I   
Prototipado: wireframes, mockups y 
  prototipos 
 
Hola,  mi  nombre  es  Olga  Carreras.  Soy  consultora  en  experiencia  de  usuario,  especializada  en 
usabilidad,  accesibilidad  y  arquitectura  de  información,  y  en  este  vídeo  os  voy  a  explicar  la 
importancia  de  prototipar  una  aplicación  web  antes  de  comenzar  a  implementarla  y  a 
recomendaros recursos que os ayuden a plantear con éxito vuestros propios prototipos. 
 
Soy  la  autora  del  blog  Usable  y  accesible,  donde  comparto  la  experiencia  y  los  conocimientos 
que he ido acumulando desde que comencé a participar en desarrollos web en el año 99.  
 
Antes  de  empezar,  estas  son  las  direcciones  de  mi  blog  y  de  mi  web  en  las  que  puedes 
encontrar  información  sobre  mí  y  sobre  mi  trabajo,  así  como  artículos  y  recursos relacionados 
con la experiencia de usuario. 
 
Podéis contactar conmigo a través de mi web o de mi cuenta de Twitter. 
 
La  responsabilidad  de  un  arquitecto  de  información,  es,  tal  y  como  la  explica  Jesse  James 
Garrett  en  su  conocido  libro  “Los  elementos  de  la  experiencia  de  usuario”:  identificar  los 
objetivos  del  proyecto  y  las  necesidades  de  los  usuarios,  especificar  las  funcionalidades  y 
requerimientos  de la aplicación web, definir y diseñar los sistemas de navegación, organización, 
etiquetado  y  búsqueda,  y  finalmente  realizar  el  prototipado  de  la  aplicación,  que  es  lo  que 
vamos a tratar en este vídeo. 
 
Nuestra  responsabilidad  final  es  asegurar  que  los  usuarios  podrán  encontrar  y  gestionar  la 
información de manera efectiva. 
 
De  la  misma  manera  que  un  arquitecto realiza los planos y la maqueta del edificio antes de que 
este  comience  a  construirse;  los  arquitectos  de  información  nos  valemos de la diagramación y 
el  prototipado  para  especificar  cuál  será  la  organización,  estructura,  navegación  y 
funcionamiento  de  la  aplicación  web.  Es  decir, al igual que ellos, realizamos planos y maquetas 
del sitio antes de que este comience a construirse. 
 
Los  planos,  son  diagramas  de  organización  y  funcionamiento,  que  se  suelen  denominar 
blueprint, diagramas de contenido o flujo o mapa web. 
 
Será  una  constante  a  lo  largo  del  vídeo  que  os  indique  los  diferentes  nombres  que  recibe  un 
mismo  tipo  de diagramación o de maqueta, pues diferentes autores los denominan de diferente 
manera y no es una terminología que esté claramente asentada todavía. 
 
A  la  hora  de  realizar  la  diagramación  de  una  aplicación  web  lo  más  importante  es  que  sea 
comprensible  y  refleje  con  claridad  la  estructura,  el  flujo  de  navegación  y  la  relación  entre  los 
elementos. 
 
Existen  diferentes  propuestas  para  realizar  la  diagramación  de  una  aplicación  web.  Un 
vocabulario  muy  utilizado  y  que  os  recomiendo  conocer es el "Vocabulario visual para describir 
arquitectura  de  información  y  diseño  de  interacción"  de  James  Garrett,  uno  de  cuyos  libros  os 
recomendaba  anteriormente.  Garret  es  un  destacado  arquitecto  de  información,  muy conocido 
también por acuñar el término AJAX en el año 2005. 
 
El  diagrama  que  veis  en  pantalla  es  un ejemplo de diagramación de Garret de la aplicación web 
Yahoo Mail. 
 
En  su  artículo  podréis  descargar  librerías  para  aplicar  su  vocabulario  con  diferentes 
aplicaciones como PowerPoint o Visio. 
 
Pero  como  he  dicho,  no  es  la  única  propuesta  que  existe.  Lo  más  importante  es  que  la 
diagramación  sea  clara  y  compresible,  y  por  ello  es  muy  recomendable  incluir una leyenda con 
los símbolos utilizados. 
 
Además  de  estos  libros,  os  recomiendo  el  artículo  “La  diagramación  en  la  arquitectura  de 
información”  de  Ronda  León,  en  el  que  recopila  diferentes  propuestas  de  vocabularios,  entre 
ellos el suyo propio. 
 
Las  maquetas,  son  diagramas  de  presentación,  cuyo  objetivo  es  crear  una  referencia  visual  de 
la  estructura,  organización  e interacción a nivel de página. Vamos a ver que hay diferentes tipos 
y que distinguimos entre prototipos de baja fidelidad y alta fidelidad. 
 
En  ningún  caso  se  debe  incluir  diseño  gráfico  en  un  prototipo,  que  se  realiza  en  etapas 
posteriores,  y  que  es  importante  aclararle  al  cliente  cuando  se  le  presenta  el  prototipo.  No  se 
deben utilizar colores salvo los estrictamente necesarios, y por ello usamos gamas de grises. 
Los prototipos de baja fidelidad son dibujos estáticos. 
  
Hablamos  de  sketching  cuando  realizamos  bocetos  de  forma  rápida  e  informal,  con  lápiz  y 
papel, para transmitir una idea o concepto con rapidez y claridad. 
 
Es  una  técnica  muy  útil  en  las  entrevista  iniciales  con  el  cliente,  para  comunicar  conceptos  o 
proponerle  alternativas  a  un  problema,  durante  un  brainstorming  o  en  las  reuniones  internas 
con el equipo de trabajo. 
 
Antes  de  comenzar  un  prototipo  más  elaborado  es  conveniente  comenzar  con  este  tipo  de 
bocetos  para  trabajar  ágilmente  con  varias  ideas,  ir  esquematizando  las  páginas  y  definiendo 
las diferentes zonas de las mismas. 
 
Os recomiendo como libro de referencia "Sketching User Experience" de Bill Buxton. 
 
Un  wireframe  es  más  elaborado  e  incluye  el  inventariado  de  contenido,  es decir, qué contenido 
debe  estar  presente  en  cada  página.  Los  elementos  de  la  misma  como  cabeceras,  enlaces, 
listas,  formularios,  etc;  el  etiquetado  de  los  vínculos  o  de  los  títulos;  el  layout,  es  decir,  la 
ubicación,  colocación  y  agrupación  de  los  elementos  de  la  página,  así  como  la  estrategia  de 
navegación y la priorización de contenidos dentro de la misma. 
 
Un  wireframe,  asimismo,  debería  incluir  el  comportamiento  mediante  notas  asociadas  a  los 
elementos para indicar cómo deben mostrarse o para definir su comportamiento funcional. 
 
Cuando tenemos una secuencia de wireframes hablamos de un storyboard. 
 
Los  prototipos  funcionales  son  prototipos  de  alta  fidelidad,  también  llamados  a  menudo 
maquetas o mockups, que permiten detallar el proceso interactivo de una o varias tareas. 
 
Son  prototipos  o  maquetas  dinámicas,  normalmente  en  HTML,  que  simulan  o  tienen 
implementadas partes del sistema final a desarrollar como observamos en este ejemplo. 
 
Nunca  se  debe  comenzar  a  prototipar  sin  haber  definido  primero  los  objetivos  del  cliente,  las 
necesidades  de  los  usuarios,  los  requisitos  del  proyecto  y  la  arquitectura  de  información  de  la 
aplicación web. 
 
Os  recomiendo  la  lectura  de  mi  artículo  “Arquitectura  de  información.  Fundamentos”  y  el  libro 
“Arquitectura de información en entornos web” de Mario Pérez-Montoro Gutiérrez. 
 
La  importancia  de  prototipar  una  aplicación  antes  de  comenzar  el  diseño  gráfico  y  su 
implementación  es  vital.  En  primer  lugar,  el  equipo  y  el  cliente  se  centran  en  el  diseño  de 
contenidos e interacción y no en el diseño visual. 
 
El  cliente  además  ve  y  comprende  cómo  será  la  aplicación,  mucho  mejor  que  sí  se  ofrece 
descrita en un documento. 
 
El  prototipado  evita  malentendidos  entre  el  proveedor  y  el  cliente  o  incluso  entre  los  propios 
miembros  del  equipo,  ayuda  a  especificar  los requerimientos, a detectar inconsistencias o falta 
de funcionalidad, y se convierte en un complemento de gran valor en el análisis. 
 
En  segundo  lugar,  el  prototipo  se  modifica  con  facilidad  y rapidez, se evitan así modificaciones 
posteriores  mucho más costosas cuando la aplicación ya se está implementando, de modo que 
se reducen costes y tiempos. 
 
Y  en  tercer  lugar,  también  permite  realizar  pruebas  de  usabilidad,  como  test  con  usuarios,  en 
etapas  tempranas  del  proyecto. De este modo se detectan y solucionan los problemas antes de 
comenzar  su  implementación  y  el  resultado  son  aplicaciones  web  más  fáciles  de  entender,  de 
usar y que se ajustan mejor a las necesidades de los usuarios.   
 
Mi  experiencia  me  dice  que  los  beneficios  de  prototipar  una  aplicación  web  justifican  con 
creces  el  tiempo  que  se  invierte  en  él,  pues  se  reduce  en  gran  medida  el  tiempo  de  desarrollo 
posterior  y  aumenta  considerablemente  la  calidad  del resultado y la satisfacción del cliente y el 
usuario final.   
 
Además  de  las  referencias  que  os  he  ido  dado  a  lo  largo  del  video,  os  recomiendo  mi  artículo 
“Wireframes”,  donde  se  incluyen  referencias  de  interés,  entre  las  que  os  recomiendo el artículo 
”Prototipado”  de  la  Fundación  Sidar  y  el  blog  “Wireframes”  donde  encontraréis  ejemplos, 
plantillas, herramientas y otros recursos. 
 
También  puede  seros  útil  el  “Glosario  de  usabilidad  y  accesibilidad”  para  consultar  aspectos 
terminológicos. 
 
Aquí tenéis también otras dos presentaciones sobre prototipado que os pueden ser de utilidad y 
donde podéis ver más ejemplos. 
 
Para  terminar  me  gustaría  daros  cinco  consejos  básicos  para  realizar  un  buen  prototipo,  y que 
se  resumen  en:  sencillez  y  claridad;  hazlo  en  blanco  y  negro;  representa  los  tamaños  y 
proporciones  de  los  bloques  de  contenido;  ten  en  cuenta  las  pautas  de  usabilidad  y 
accesibilidad; y sobre todo, diseña para tus usuarios. 
 
En  resumen,  en  este  vídeo  hemos  hablado  de  la  importancia  de  prototipar  una  aplicación  web 
antes  de  realizar  su  diseño  gráfico  o  comenzar  su  implementación,  y  como,  a  su  vez,  el 
prototipado  no  debe  comenzarse  sin  haber  definido  primero  los  objetivos  del  sitio,  las 
necesidades  de  los  usuarios,  los  requisitos  del  proyecto  y  la  arquitectura  de  información  de  la 
aplicación web. 
 
Hemos visto que se distingue entre planos y maquetas. 
 
Los  planos  o  blueprints,  diagramas  de  contenido  o  flujo,  o  mapa  web,  sirven  para  mostrar  la 
estructura de la aplicación y su flujo de navegación. 
 
Por  su  parte,  las  maquetas  son  diagramas  de  presentación,  cuyo  objetivo  es  crear  una 
referencia  visual  de  la  estructura,  organización  e  interacción  a  nivel  de  página.  Hemos  visto 
también  que  se  distingue  entre  prototipos  de  baja  fidelidad,  que  son  estáticos,  y  prototipos  de 
alta fidelidad, que son dinámicos. 
 
Hemos  recomendado  comenzar  con  un sketch, es decir, un boceto rápido e informal con lápiz y 
papel. 
 
Y después un wireframe representará con más detalle la aplicación, incluyendo notas asociadas 
a los elementos sobre cómo se deben mostrar o su comportamiento funcional. 
 
Por  último,  los  prototipos  funcionales  son  maquetas  dinámicas,  normalmente  en  HTML,  que 
simulan o tienen implementadas partes del sistema final a desarrollar. 
 
Hemos  visto  que  la  terminología  es  muy  variada  y  no  siempre  unívoca,  pues  todavía  no  está 
claramente  asentada. Y por ello, al consultar la bibliografía y las referencias, os recomiendo que 
no  os  centréis  en  aspectos  terminológicos  sino  en  las  recomendaciones  para  realizar  buenos 
diagramas y prototipos de vuestras aplicaciones web.  
 
Muchas gracias por tu atención. 
 
AVISO IMPORTANTE 
Este  documento,  su  texto  y  gráficos  e  imágenes,  puede  ser  utilizado  bajo  una  licencia  Creative  Commons  de  tipo 
Atribución,  No-Comercial.  En  caso  de  utilizarse  este  material  o  de  la  creación  de  un  derivado,  la  atribución  se  debe 
respetar  citando  la  fuente  como  “Actívate,  Google  España”  y  expresamente, si es posible, mediante un enlace activo 
​ ttp://google.es/activate​.  
a​ h