Sin dudas, debes recordar c\u00f3mo era la d\u00e9cada de los 90′, llena de elementos coloridos y animaciones en flash. Podemos decir que era un verdadero \u201crelajo animado\u201d. <\/p>\n
Felizmente, en la actualidad, las empresas se preocupan con la experiencia del usuario. Las interfaces son m\u00e1s clean<\/em> y elegantes, y los wireframes son uno de los principales motivos de esta evoluci\u00f3n. <\/p>\n Existen cada vez m\u00e1s profesionales preocupados con la presencia de las marcas en los medios digitales<\/a>. <\/p>\n Sabemos que un sitio web o aplicaci\u00f3n bien estructurado es esencial para obtener buenos resultados en esas plataformas<\/strong>. <\/p>\n Si a\u00fan tienes dudas, basta acceder a Google Anaytics<\/a> y verificar los indicadores de performance. <\/p>\n Evitar errores en un proyecto, es fundamental para que los recursos no sean usados de manera excesiva, por eso es tan importante seguir una planeaci\u00f3n de manera rigurosa. <\/p>\n Este texto te abrir\u00e1 la mente sobre los wireframes. <\/p>\n Ac\u00e1 encontrar\u00e1s fant\u00e1sticas informaciones sobre qu\u00e9 son y cu\u00e1l es su importancia para el \u00e9xito de un proyecto en la web. <\/p>\n \u00bfQuieres dar un paso a m\u00e1s en tu jornada de Marketing Digital<\/a> y conocer el mundo de los wireframes? \u00a1Contin\u00faa leyendo este art\u00edculo! <\/p>\n Tambi\u00e9n llamado plan de pantalla por algunos profesionales, el wireframe es un prototipo de p\u00e1gina web o de una aplicaci\u00f3n<\/a>. <\/p>\n Esto significa que, antes de la elaboraci\u00f3n del layout, se crea una especie de esquema. De esta manera, conseguimos entender c\u00f3mo quedar\u00e1 el producto<\/a> final. Caso sean verificado errores o aspectos negativos, es posible modificar el esquema varias veces hasta llegar al resultado deseado. <\/p>\n De esta manera, queda m\u00e1s f\u00e1cil entender que el wireframe sirve como una gu\u00eda para auxiliar para la diagramaci\u00f3n de la p\u00e1gina<\/strong>. <\/p>\n Pese a su amplia utilizaci\u00f3n en el inicio de cada proyecto, tambi\u00e9n puede ser sumamente \u00fatil cuando es necesario efectuar cambios como, por ejemplo, la implementaci\u00f3n de una nueva funcionalidad en la aplicaci\u00f3n de la empresa. <\/p>\n Existen diversas maneras de elaborar un wireframe: puedes utilizar una hoja de papel y luego, un software<\/a> de edici\u00f3n. Lo m\u00e1s importante en este caso no es la herramienta, sino la idea en ejecuci\u00f3n. <\/p>\n Imag\u00ednate que tienes una empresa que desarrolla sitios web<\/a> y acabas de cerrar negocio con un cliente. Haces el briefing y ejecutas el proyecto de acuerdo con lo hablado en la reuni\u00f3n. <\/p>\n Llega la hora de entregar el producto y tu cliente<\/a> dice que no le ha gustado el resultado y que debes partir de cero. <\/p>\n Esta situaci\u00f3n es bastante inc\u00f3moda y suele suceder con frecuencia. Al elaborar wireframes antes de entregar un proyecto final, evitas esos momentos, gastos y retrasos innecesarios. <\/p>\n Incluso, es importante mencionar que, alterar un esquema es mucho m\u00e1s f\u00e1cil que hacerle cambios a un sitio finalizado<\/strong>. <\/p>\n Otro aspecto que debemos destacar, es que el cliente queda m\u00e1s tranquilo cuando participa de las etapas del proyecto, principalmente porque evita situaciones desagradables a futuro. <\/p>\n Muchas veces sucede que, lo que imaginamos luego de ejecutado no resulta en un producto de calidad. Por eso es tan necesario colocar en el papel y experimentar para validar (o no) la idea inicial<\/a>. <\/p>\n En la pr\u00e1ctica, un wireframe ayuda a visualizar el trayecto del usuario, marcando los puntos de interacci\u00f3n clave mucho antes de poner una sola l\u00ednea de c\u00f3digo. A veces, es incre\u00edble c\u00f3mo peque\u00f1os ajustes en el flujo \u2013 el simple cambio de un bot\u00f3n de sitio, por ejemplo \u2013 pueden ahorrar horas de programaci\u00f3n y dolores de cabeza. Y ni hablar cuando se trata de equipos grandes: tener un mapa visible para todos realmente acorta discusiones interminables sobre \u201cd\u00f3nde va qu\u00e9\u201d.<\/p>\n Si alguna vez participaste en un proyecto donde todo se fue construyendo \u201csobre la marcha\u201d, probablemente recuerdes el caos: se solapan funciones, faltan pantallas importantes, y al final algo essencial queda fuera y nadie sabe qui\u00e9n deb\u00eda haberlo notado. Los wireframes, aunque puedan parecer un paso lento al principio, funcionan como red de seguridad y br\u00fajula. Honestamente, cuando uno los adopta de verdad, raramente vuelve a querer volar a ciegas.<\/p>\n Existen diversas herramientas de creaci\u00f3n de wireframes que permiten realizar esos tests de navegaci\u00f3n. <\/p>\n Con el esquema listo, consigues hacer que todos los involucrados, como los dise\u00f1adores web y los programadores<\/a>, tengan la misma visi\u00f3n del proyecto. Por ende, se logra disminuir los errores en la comunicaci\u00f3n. <\/p>\n Recuerda que tienes pocos segundos para llamar la atenci\u00f3n de un visitante que ingresa en tu sitio por primera vez. <\/p>\n Si este usuario no se siente a gusto o no encuentra las informaciones que necesita, es probable que no regrese a tu sitio. <\/p>\n Por eso, es muy importante no dar espacio para los errores y entregarle al usuario una buena experiencia<\/a>. <\/p>\n M\u00e1s all\u00e1 de la idea del wireframe ser algo simples para iniciar un proyecto, es fundamental tener algunos cuidados. <\/p>\n Cuando tu planeaci\u00f3n es bien ejecutada, en el momento de poner las manos en la masa todo fluye de forma natural. <\/p>\n A continuaci\u00f3n, f\u00edjate en algunos puntos importantes para la creaci\u00f3n del dise\u00f1o de tu sitio web<\/a> o aplicaci\u00f3n.<\/p>\n El primer paso es hacer un briefing<\/a> con el cliente. <\/p>\n En caso de que el proyecto sea para tu propia empresa, a\u00fan es indispensable reunir todas las informaciones en un documento para guiar tus acciones en la elaboraci\u00f3n de los wireframes<\/strong>. <\/p>\n A parte de considerar los puntos m\u00e1s importantes mencionados por el cliente, es imprescindible comprender la experiencia del usuario. <\/p>\n A veces, un logotipo gigante de la empresa en la p\u00e1gina inicial puede generar rechazo por parte de los visitantes, por lo que el dise\u00f1o de las p\u00e1ginas a las que accede el usuario tiene que ofrecerle una experiencia agradable<\/a>. <\/p>\n Lo ideal es hacer verificaciones de usabilidad<\/a> incluso en tus wireframes. Para esto, debes solicitar el auxilio de un tercero que no participe del proyecto, pedir que realice algunas acciones sin ayuda y ver c\u00f3mo se siente. <\/p>\n Recuerda que no basta con tener un sitio o aplicaci\u00f3n bonita, esta debe ser funcional<\/strong>. Si se detecta que la interfaz de usuario<\/a> es \u00fanicamente bella y llamativa, lo ideal es que el proyecto sea reiniciado. <\/p>\n Es fundamental jerarquizar las informaciones de acuerdo con el objetivo del sitio<\/strong>. Un sitio de una pizzer\u00eda cuyo foco es el delivery<\/em>, por ejemplo, debe colocar el men\u00fa en un local de f\u00e1cil acceso. <\/p>\n El tama\u00f1o de los elementos, su posici\u00f3n y sus colores influyen bastante en esta cuesti\u00f3n. La estructura de una p\u00e1gina, por lo general, es formada por un encabezado, un cuerpo y un pie de p\u00e1gina. Estas divisiones ser\u00e1n tu gu\u00eda para posicionar los botones y todas las informaciones. <\/p>\n Los colores deben ser arm\u00f3nicos y contrastantes para que las informaciones sean visualizadas f\u00e1cilmente. <\/p>\n Una forma de conseguir una buena combinaci\u00f3n es por medio del uso de herramientas digitales<\/a> como Adobe Color. <\/p>\n Pero, si es para una empresa que tiene una identidad visual bien trabajada, es en ella que debes centrar tu atenci\u00f3n. <\/p>\n A lo largo del proceso de creaci\u00f3n, es altamente recomendable solicitar feedbacks<\/a>, tanto del cliente como de tu equipo. <\/p>\n Cuando te dedicas a un trabajo, es complicado identificar problemas que, muchas veces, son evidentes para otras personas. Al tener varias mentes pensando, se obtienen mejores resultados. <\/p>\n Considerando estas cuestiones, se entiende la raz\u00f3n por la cu\u00e1l es tan importante evitar \u201centregar la mochila\u201d a apenas una persona. Lo ideal es hacer que el proceso sea colaborativo y exitoso<\/strong>. <\/p>\n Como dijimos hace poco, puedes crear tus wireframes con apenas una hoja y un lapicero, o utilizar alguna herramienta digital. Lo ideal es usar los recursos en conjunto para conseguir un buen resultado. <\/p>\n Esto es, comienzas haciendo un esquema en un pedazo de papel y luego, pasas a la computadora, donde podr\u00e1s utilizar m\u00e1s funcionalidades. <\/p>\n \u00a1F\u00edjate en estos tres principales tipos de wireframe! <\/p>\n Este es el modelo m\u00e1s simple de todos. Normalmente, es hecho manualmente, sin colores y con pocos detalles. <\/p>\n Es el modelo intermedio entre el de baja y el de alta fidelidad. A parte de los elementos visuales organizados, simulando una p\u00e1gina, puedes colocar anotaciones y subt\u00edtulos. <\/p>\n Este modelo es el m\u00e1s pr\u00f3ximo de una versi\u00f3n final. Ac\u00e1 debes usar alg\u00fan software que permita interacciones como hacer clic en los botones. <\/p>\n Como estamos hablando de wireframes, no necesitan ser muy bien desarrollados como la versi\u00f3n finalizada del layout. <\/p>\n El punto central es mostrar con claridad toda la estructura del producto final<\/strong>. Caso contrario, el concepto de crear un esquema y agilizar el proceso ser\u00eda perdido. <\/p>\n No existe un programa que supere otros, cada uno tiene sus particularidades. <\/p>\n Por este motivo, debes conocer algunos de los mejores del mercado y sus precios.<\/p>\n Cuando hablamos sobre edici\u00f3n, es imposible dejar de lado a los productos de la gigante Adobe, \u00bfverdad? <\/p>\n Puedes utilizar Photoshop o Ilustrator para crear un wireframe, sin embargo, existe un software propio para eso que se llama Adobe XD<\/a>. <\/p>\n Incluso, podemos decir que esta es la soluci\u00f3n ideal para quienes tienen contratado el paquete completo de Adobe. <\/p>\n Precio<\/strong>: Gratuito para un proyecto o pago para proyectos ilimitados. El plan m\u00e1s econ\u00f3mico de la versi\u00f3n paga es de US$9,99 por mes. <\/p>\n Esta es una de las herramientas de creaci\u00f3n m\u00e1s popular entre los profesionales del \u00e1rea. Una de las razones es que Axure<\/a> dispone de diversas funcionalidades. Excelente si deseas verificar la navegaci\u00f3n de tu sitio. <\/p>\n Precio<\/strong>: a partir de US$29,90 por mes o US$ 495 en el plan vitalicio. <\/p>\n Aunque no sea una herramienta de creaci\u00f3n de wireframes, es una excelente alternativa para crear flujogramas y diagramas antes de la elaboraci\u00f3n de un proyecto. <\/p>\n Lucidchart<\/a> cuenta con m\u00e1s de 15 millones de usuarios y tiene dos versiones, la gratuita y la paga. Esta \u00faltima tiene un valor bastante accesible. <\/p>\n Precio:<\/strong> US$ 9,95 por mes en el plan anual. <\/p>\n Su aspecto es bastante peculiar, siendo que los elementos creados en NinjaMock<\/a> parecen ser dibujados a mano y no cuenta con funcionalidades avanzadas para interacci\u00f3n. <\/p>\n Siendo as\u00ed, podemos considerar que es una herramienta de baja fidelidad. Su principal ventaja es ser de f\u00e1cil utilizaci\u00f3n. Particularmente, es indicada para el inicio de un proyecto. <\/p>\n Precio<\/strong>: A partir de US$10 por mes. <\/p>\n Esta herramienta se encuentra en la categor\u00eda de alta fidelidad, pues los prototipos de Hotgloo<\/a> son totalmente interactivos. <\/p>\n Precio<\/strong>: A partir de US$ 12 por mes, pero puedes probar gratis por siete d\u00edas. <\/p>\n Si deseas algo m\u00e1s minimalista, intuitivo y f\u00e1cil de usar, considera contratar Wireframe.cc<\/a>. Ac\u00e1 encontrar\u00e1s una hoja en blanco para crear formas geom\u00e9tricas, insertar textos, listas, anotaciones, etc. <\/p>\n Basta hacer clic en las opciones, arrastrar para la pantalla y redimensionar los elementos. <\/p>\n Precio<\/strong>: A partir de US$16,00 por mes o US$144,00 por a\u00f1o. <\/p>\n Canva<\/a> es unja herramienta muy conocida por los nuevos profesionales del \u00e1rea justamente por ser una herramienta de f\u00e1cil utilizaci\u00f3n, creaci\u00f3n de im\u00e1genes para publicaciones, realizaci\u00f3n de tarjetas, etc. <\/p>\n Pese a ser un recurso muy utilizado, pocos saben que es posible crear wireframes usando esta herramienta. <\/p>\n Precio<\/strong>: Gratis por 30 d\u00edas o a partir de US$12,95 para acceder a todas las herramientas. <\/p>\n\u00bfQu\u00e9 es un wireframe? <\/h2>\n
\u00bfCu\u00e1l es la importancia del wireframe para un proyecto digital? <\/h2>\n
\u00bfQu\u00e9 debes considerar al crear un dise\u00f1o de wireframe? <\/h2>\n
Briefing <\/h3>\n
UX (User Experience) <\/h3>\n
Posicionamiento y colores <\/h3>\n
Feedback <\/h3>\n
\u00bfCu\u00e1les son los principales tipos de wireframes? <\/h2>\n
Baja Fidelidad <\/h3>\n
Anotado <\/h3>\n
Alta fidelidad <\/h3>\n
8 herramientas para la creaci\u00f3n de un\u00a0wireframe\u00a0<\/h2>\n
1. Adobe XD\u00a0<\/h3>\n
2. Axure\u00a0<\/h3>\n
3. Lucidchart\u00a0<\/h3>\n
4. NinjaMock\u00a0<\/h3>\n
5. Hotgloo\u00a0<\/h3>\n
6. Wireframe.cc\u00a0<\/h3>\n
7. Canva\u00a0<\/h3>\n
8. InVision\u00a0<\/h3>\n