Si aún no conoces los wireframes o hace poco que te has decidido por el desarrollo web, te recomiendo encarecidamente este artículo que te será muy útil para empezar con buen pie cualquier proyecto.
Es muy frecuente que alguien tenga una buena idea, se imagina como será su página web y acto seguido empieza a crearla. Por desgracia, también es muy frecuente que si no se ha hecho un buen trabajo previo, este se pueda ir al garete en cuestión de segundos.
Que levante la mano el desarrollador web que no se ha pasado unas cuantas horas preparando un diseño para un cliente y este ha llegado, lo ha visto y ha dicho que no le gusta.
Tanto si creas una web para otro, como si la creas para ti mismo, es bueno hacer un mínimo de planificación para detectar posibles problemas y evitar trabajos innecesarios.
¿Qué es un Wireframe?
Un wireframe o prototipo no es más que un boceto donde se representa visualmente, de una forma muy sencilla y esquemática la estructura de una página web.
El objetivo de estos es definir el contenido y la posición de los diversos bloques de tu web. Esto incluye menús de navegación, bloques de contenido, etc… Además, te permite como interactuarán estos elementos entre sí.
En los wireframes no se utilizan ni colores, ni tipografías ni cualquier elemento gráfico. Lo importante es centrarse en la funcionalidad del sitio y la experiencia del usuario. La prioridad son los contenidos de la web.
Al ser representaciones tan simples, te permiten crear múltiples versiones de un mismo proyecto de una forma rápida, así como aplicar cambios o nuevas ideas que aparezcan a posteriori. Lo importante es tener clara la estructura de la web o aplicación antes de empezar con el HTML y el CSS para comprobar que no haya fallos importantes de base que luego te podrían suponer muchas horas de trabajo subsanar.
Y como casi siempre, una imagen vale más que mil palabras:
Ventajas de usar Wireframes
Rápidos y baratos de crear: Como son bocetos esquemáticos son rápidos de crear y tienen un coste muy bajo. Esto te permite realizar múltiples versiones hasta encontrar la adecuada sin que ello suponga un problema de tiempo o dinero.
Detectar y corregir los problemas antes: Al ser sencillos y rápidos de realizar te permiten exponerlos rápidamente a feedback y resolver problemas básicos relacionados con la usabilidad y funcionalidades propuestas.
Mejoras sencillas: En poco tiempo podrás mostrar los primeros Wireframes a amigos, clientes o repasarlos tu mismo para repasar las mejoras que se puedan realizar en el diseño, el posicionamiento de los elementos o la estructura de los contenidos.
Mejor usabilidad: Planear previamente la estructura y los elementos de la página web te permitirá ofrecer una mejor usabilidad al no improvisar sobre la marcha y haber definido previamente estos elementos.
Herramientas para crear Wireframes
Yo los hago de tres formas distintas. Dependiendo de la complejidad y el destinatario de los wireframes. Aunque tengo que reconocer que el papel y el lápiz me tiran mucho. Para mí los wireframes hechos a mano son una forma de pasar un rato entretenido y de desconectar un poco la vista de tanta pantalla, que también lo agradece.
Wireframes creados a mano
Es la forma más sencilla y económica de crear wireframes. Solo necesitas papel y lápiz y un poco de imaginación. No hace falta ser un Picasso, ni siquiera parecerlo de lejos. Cualquiera sabe dibujar cuatro líneas y dibujar un esquema sencillo como el que hemos visto un poco mas arriba.
Puedes utilizar diferentes tamaños de papel para representar los distintos dispositivos en los que se verá la web y crear así diferentes estructuras para planear un diseño responsive.
Utilizar plantillas imprimibles para wireframes
La segunda opción, también barata y muy sencilla es imprimirse algunas plantillas predeterminadas para crear los wireframes.
Hay multitud de ellas en la web. Para que no tengas que buscar mucho, te dejo una pequeña selección para que escojas la que más te guste.
Esta plantilla esta pensada para imprimir en A4 y para diseñar paginas web a una resolución de 1024×758.
Esta plantilla en pdf también esta pensada para diseñar páginas web de 1024x780px, pero cuenta ademas, con unas guías para diseños de 960px o 800px. Cuenta además con un grid de 32x32px para facilitarte la labor de crear los elementos y ajustar las proporciones.
Estos son los que más me gustan. Están pensados para diseñar páginas web responsive y en un mismo pack encontrarás diversas plantillas para que escojas la más adecuada para cada proyecto.
Si quieres hacer wireframes en papel con aspecto profesional o eres un poco friki (si, yo también lo soy, un poco), puedes pasarte por Sticky Jots. Una empresa creada por dos estudiantes de diseño donde podrás encontrar unos kits de prototipado bastante curiosos. Al menos échales un vistazo que están divertidos.
Utilizar un programa o aplicación
Por desgracia algunas de las mejores aplicaciones son de pago. Aunque no muy caras y funcionan de maravilla. Podrás crear unos wireframes para tus páginas web muy profesionales y son muy sencillos de usar. Para que te hagas una idea, Balsamiq por ejemplo, tiene aplicación para iPad, con lo que solo necesitarás una pantalla táctil para crear prototipos de muy buena calidad.
Incluyen ademas infinidad de elementos predeterminados, con lo que crear un elemento será tan fácil como arrastrarlo hasta su posición, seleccionar el tamaño y editar los detalles si es necesario.
Mockflow es una aplicación para crear wireframes en la nube. Sólo necesitas un navegador y una cuenta para empezar a crear tus prototipos. Tiene una versión gratuita, que aunque con limitaciones, te permitirá empezar a sumergirte en el mundo del diseño de prototipos. Sus versiones de pago empiezan desde 14$ al mes, así que si vas a utilizarla con frecuencia, puede ser una buena opción.
Balsamiq Mockups es otra gran aplicación para crear tus wireframes o prototipos. Me atrevería a decir que casi casi es la aplicación por excelencia. Dispone de versión de escritorio, para Windows y Mac con un coste único de 89$, una versión para tablets al mismo precio y una version web como Mockflow a partir de 12$ al mes.
Las dos son muy buenas opciones. Si quieres mi consejo, yo probaría las dos. Mockflow te permite crear una cuenta gratuita y Balsamiq Mockups te da 30 dias de prueba gratis de sus productos.
¿Habrá que aprovechar no?
Evidentemente, hay también otras aplicaciones gratuitas, pero para mí estas dos son las mejores y tienen un precio decente si se las va a dar un uso habitual.
¿Y tu que aplicación utilizas?
¿Eres de los de papel y lápiz como yo?
Y ya para acabar, me gustaría dejarte una web muy interesante donde podrás ver y comparar multitud de proyectos iniciados a partir de un wireframe. Podríamos decir que es una galería de prototipos. Con la singularidad que con solo pasar el ratón por encima de los proyectos podrás ver de un vistazo el prototipo y la web acabada para comparar.
Es la primera vez que envió este formulario, estoy construyendo mi sitio y me gustarían consejos al respecto.
Hola Virgilio, muchas gracias por comentar. Tu pregunta es muy genérica, si puedes ser un poco mas especifico sobre que necesitas ayuda, estaré encantado de ayudarte en todo lo que pueda.
Saludos!
Y Virgilio nunca mas aparecio. Cuenta la leyenda que no pudo crear su pagina web, enloquecio y se suicido.
Hola Santi, tengo como tarea crear un prototipo de una página web, para el curso de E-commerce y Mobile Marketing. Qué me recomiendas? Ya que soy nueva en esto, y se me complica un poco por los términos utilizados. Gracias..
Cualquiera de las herramientas que te muestro en el post te servirá. Yo probaría al menos dos o tres y me quedaría con la que te sea mas fácil trabajar.
Saludos
Hola santi son las 3:00a.m. En mi país por lo que esto del desarrollo en android me esta quitando el sueño?, gracias por colaborarnos con toda esta información tan valiosa para los que estamos iniciando en este universo del desarrollo.
Gracias a ti por pasarte y comentar.
Gracias !! año 2020 – Colombia, muy útil su información.
hola me ha ayudado mucho la información para sustentar mi diseño en mi tesis pero no se cual es el autor del articulo
Yo mismo, Santi Centelles 😀
Gracias por la info encontre justo lo que queria, soy de Perú.
Me podrías dar recomendaciones para mejorar el aspecto de mi sitio web por favor, es http://www.hchumpitaz.com. Escríbeme a mi correo por favor.
Gracias
¿Cual es la mejor forma de llevar un proyecto?, es decir a modo de receta,¿que pasos debo seguir para un óptimo desarrollo de un sitio?
Excelenete materia, muy bueno Gracias por compartir…
tengo una duda, quizas no encaje aca, pero la el maquetado solo aplica a la parte FrontEnd. para diseño de paginas Web, que pasa cuando se quiere contruir sistemas de ecosistema web. Existe por ejemplo modelos como el MVC (Modelo Vista Controlador). Donde aca solo podriamos reprecentar la «V» o dicho de otra forma solo la parte que el usuario final puede ver.
Llevo algun tiempo en el campo de desarrollo web y por experiencia afirmo lo que aqui plantean. pero mi duda es como puedo hacer si el proyecto es un tanto más complejo? como represento el modelo de los datos sin desvincularme de la funcionalidad general de mi website, portal o sistema web?
Ah y bueno eso solo para pensar en algo porque si a lo anteriormente dicho añadimos el hecho de los modelos más reciente como trabajar en función a componentes. donde la vista se contruye desde un JavaScript por ejemplo, como el caso de React.js donde junta toda la logica. seria mas dificil poder concretar el proyecto.
Bueno espero puedan ayudarme a esclarecer mis dudas… Seguire buscando algo que se adapte a mis necesidades y ps lo compartire con ustedes si lo encuentro… Saludos y gracias por su tiempo.
Excelente artículo! Me estoy adentrando en el mundo del diseño web. Por todas partes se enseña HTML y CSS, pero pocas veces he visto que le den importancia a este tema del wireframe, y me parece que es clave en un buen diseño. Felicitaciones por tu trabajo! Saludos desde Córdoba, Argentina.
Muchas gracias por la información…
También hay algunas herramientas que podemos probar, ya que algunas tienen pruebas gratuitas por 30 dias y podemos sacarle un buen provecho. Encontré estas espero les sirvan Saludos
Hola, saludos. Muy buenas tus sugerencias y aclaratorias. Me haz ayudado un mundo, hay cosas que he manejado, pero ignoraba la terminología comercial o estas herramientas para ahorrar tiempo. Te sugiero realizar tu sitio y sugerencias en tercera persona o de manera impersonal, por otro lado sería genial que tu punto de partida fuera UX y como se relaciona con wireframes y mockups, desarrollar cada uno de los temas. Aparte de diferenciar bien UI de UX. Gracias☺
¿Puedo desarrollar un proyecto web sin guiarme de los Wireframe?
Por supuesto que si, aunque siempre viene bien tener un esquema claro para trabajar mas rápido luego…
Te faltó UXpin, otra de las grandes herramientas. Muy buen post, sobre todo lo de las descargas.
Sabrías alguna herramienta para pasar de forma fácil una web a un wireframe?
Pingback: Un enfoque visual de la publicidad interactiva: ¿Cómo se hace el diseño de una aplicación desde el departamento de Diseño Gráfico? – El diseño gráfico en la publicidad interactiva
Util.
Gracias por la información, muy amplia y buena. estoy haciendo un curso de Asistente web y hace referencia a este tema lo cual desconocía e hice pausa y busqué para saber sobre que hacía mención.
Muy interesante el artículo, sobre todo por las recomendaciones de herramientas. Revisaría la ortografía, faltan muchas tildes. Gracias.
Excelente artículo amigo, muchas gracias.
He experimentado en carne propia las consecuencias de no hacer un diseño previo detallado de la página. No sabía que existían herramientas para facilitar la elaboración de estos prototipos.
Gracias
Gracias a ti por leerlo :p
hola estoy empezando a empaparme en esto de desarrollo de paginas web aparte de lo estudiado investigo por mi cuenta y me gusto mucho articulo porque nos ayuda a comprender un poco mejor lo aprendido
Gracias por comentar!!!
Que página recomiendan para empezar a crear un juego, un prototipo??
Gracias Santi. Muy útil el contenido
Hola buehnas, gracias por la informacion soy rumano pero vivo en españa cracks
Pingback: ¿Cómo hacer una app? Esta sencilla guía te dará lo los pasos.
¿Qué tipo de Prototipo podría realizar con este aquello?
Pingback: Wiframes – Roberto Munizaga Diaz
Pingback: Clase 9 Wireframe / Modulo 2 – CLaudio Zavala
Pingback: 38. UX/UI – Avance proyecto – Maca Díaz
Pingback: Clase 38: Wireframes y Prototipos – lunataliablog
Pingback: Evidencias Modulo 2 – lunataliablog
Pingback: Jueves 27 de mayo – Belén Ardiles / Curso UX-UI
Pingback: Clase 38: Wireframes y Prototipos – MacaCouble
super gracias amigo!
Pingback: Wireframe – Portafolio Walter Villagran
Pingback: CLASE 11 M5- Avanzando – Portafolio JM
Hola amigo importante información. Soy estudiante y tengo que elaborar un wireframe de un sitio web de un Hotel, no tengo idea de como hacerlo, que es lo primero que tengo que tener en cuenta.
Mil gracias por su atención y colaboración.
Gran artículo, muy útil. No sabía que hubiera tantas app que permitan hacerlo tán fácil la verdad, estoy acostumbrado a hacerlo a mano y hay veces que es un poco caos…
¡Gracias!