{"id":3522,"date":"2022-09-12T20:26:00","date_gmt":"2022-09-12T20:26:00","guid":{"rendered":"https:\/\/hostium.com\/?p=3522"},"modified":"2022-08-24T14:05:10","modified_gmt":"2022-08-24T14:05:10","slug":"25-herramientas-para-hacer-bocetos-de-paginas-web","status":"publish","type":"post","link":"https:\/\/hostium.com\/25-herramientas-para-hacer-bocetos-de-paginas-web\/","title":{"rendered":"25 herramientas para hacer bocetos de p\u00e1ginas web"},"content":{"rendered":"\n
En esta completa gu\u00eda de herramientas aprender\u00e1s qu\u00e9 es, para qu\u00e9 sirven y c\u00f3mo crear bocetos para tu sitio web. \u00a1Acomp\u00e1\u00f1anos!<\/em><\/p>\n\n\n\n El apasionante mundo de los sitios web tiene muchas formas de ser explorado, una de ellas es desde su arquitectura y dise\u00f1o. <\/p>\n\n\n\n \u00a1No te ofusques! No vamos a hablar de desarrollo y programaci\u00f3n esta vez, pero s\u00ed de algunas formas de bocetar o mapear tu sitio para que a la hora de activarlo responda a tus necesidades.<\/p>\n\n\n\n As\u00ed tengas por delante el desaf\u00edo de hacer bocetos de p\u00e1ginas web para venta de ropa,<\/strong> o solo porque quieras crear bocetos<\/strong> para explorar este universo, como sea, te invitamos a leer este art\u00edculo en donde no tendr\u00e1s pocos recursos para usar, sino \u00a125 herramientas para hacer bocetos web<\/strong>!<\/p>\n\n\n\n \u00a1Empecemos!<\/p>\n\n\n\n Los bocetos de p\u00e1ginas webs son esquemas estructurados que se realizan para visualizar los elementos que van a componer tu sitio web antes de comenzar el proceso de dise\u00f1o.<\/p>\n\n\n\n Tambi\u00e9n llamado wireframe, un boceto web permite reconocer la ubicaci\u00f3n y el orden de las partes que hacen al contenido, como las im\u00e1genes, los botones, los videos, slides, formularios y textos, por supuesto. <\/p>\n\n\n\n Las ventajas de iniciar este proceso con un boceto web son:<\/p>\n\n\n\n S\u00ed, puedes hacer un boceto web en Word. De hecho, es un recurso gratuito que muchos usan cuando no conocen o no tienen dominio de otros programas m\u00e1s especializados.<\/p>\n\n\n\n Para ello, abren una nueva p\u00e1gina y luego utilizan saltos de p\u00e1gina en lugar de dejar la hoja que com\u00fanmente se utiliza en Word. De esta forma se logra dimensionar el espacio casi de la misma forma que con un programa para bocetos web.<\/p>\n\n\n\n Luego, mediante la herramienta de gr\u00e1ficos o de l\u00edneas, insertas en los espacios en donde destinar\u00e1s im\u00e1genes, botones, recuadros o galer\u00edas.<\/p>\n\n\n\n Claramente, otros programas ser\u00e1n de mayor ayuda pudiendo linkear con comodidad y sin tener que jugar con las l\u00edneas de espacio que habilita Word.<\/p>\n\n\n\n En tal caso, el boceto web se debe realizar siguiendo, al menos, estos pasos:<\/p>\n\n\n\n No te deshagas de tu wireframe<\/em>, a\u00fan cuando hayas hecho cambios, trata de reservar cada versi\u00f3n porque ser\u00e1 de gran ayuda para ver la evoluci\u00f3n de tu sitio o para retomar una funci\u00f3n antes testeada que m\u00e1s adelante ser\u00e1 valorada por tu tr\u00e1fico.<\/p>\n\n\n\n \u00bfQuieres una ayuda para hacer tus bocetos web? Te compartimos los 25 programas m\u00e1s usados y t\u00fa elige el que m\u00e1s te convenga: <\/p>\n\n\n\n Es una extensi\u00f3n de Google Chrome que tambi\u00e9n est\u00e1 disponible para los usuarios de Firefox con la cual puedes conocer el c\u00f3digo de color que utiliza una web. Es muy simple de usar, descarga la extensi\u00f3n y luego activa el cuentagotas cuando quieras indagar los colores de un sitio. <\/p>\n\n\n\n Si de elecci\u00f3n de colores hablamos no basta con saber el c\u00f3digo del color que usa una web que te cruzas al navegar internet. Puestos a bocetar tu propio sitio prueba esta herramienta para armar una paleta de colores acorde a tu marca. <\/p>\n\n\n\n Otro de los aspectos que hablan de tu marca por medio de tu sitio web es la tipograf\u00eda. Utiliza Google Fonts para encontrar las mejores fuentes, hacer combinaciones y bocetar la que ser\u00e1 parte de tu web.<\/p>\n\n\n\n De la misma forma que Colorzilla te ayudar\u00e1 a encontrar el c\u00f3digo del color que te gusta, WhatFont es otra de las extensiones para Google Chrome con la cual puedes marcar una oraci\u00f3n o un p\u00e1rrafo cualquiera en internet, activar la extensi\u00f3n y listo, con eso ya sabes cu\u00e1l es el nombre de la fuente que usa. <\/p>\n\n\n\n Si quieres mejorar la velocidad de tu sitio web<\/a>, una de los puntos que debes considerar es qu\u00e9 cantidad y calidad de im\u00e1genes vas a subir. \u00bfPuedes determinar esto en tu boceto web? \u00a1Claro que s\u00ed! Mide cada imagen y utiliza PageRuler para reconocer las dimensiones exactas que tienes que considerar al maquetar.<\/p>\n\n\n\n Es una gran herramienta para generar las primeras maquetas de tu sitio web, guardar borradores y comparar alternativas. Tambi\u00e9n puedes modificar la estructura de contenidos de las p\u00e1ginas del sitio de manera de hacerlo de forma estrat\u00e9gica. <\/p>\n\n\n\n La mejor herramienta para encontrar im\u00e1genes acordes a tu sitio web o, al menos, a ese boceto que est\u00e1s trabajando. Est\u00e1n en buena calidad y lo mejor es que puedes obtenerlas con una descarga gratuita. <\/p>\n\n\n\n Esta herramienta fue creada para que dise\u00f1ar no fuera algo inalcanzable. Es una plataforma online y colaborativa con muchos recursos gratuitos con los cuales puedes hacer un boceto en muy poco tiempo, compartirlo con tu equipo de trabajo e incluso crear una publicaci\u00f3n online con la versi\u00f3n premium. <\/p>\n\n\n\n Con esta herramienta podr\u00e1s comprimir los contenidos gr\u00e1ficos sin con ello resignar su calidad. Arrastras la imagen al tablero y Tinypng las comprime en pocos segundos. <\/p>\n\n\n\n Los \u00edconos tambi\u00e9n son elementos de un sitio web y por tanto los tienes que considerar en tu boceto. Con Iconfinder encuentras los \u00edconos m\u00e1s \u00fatiles, profesionales y diversos. <\/p>\n\n\n\n Empieza a incursionar en el mundo del dise\u00f1o con c\u00f3digo CSS por medio de esta extensi\u00f3n que sirve para sacar un c\u00f3digo CSS, modificarlo y pegarlo en tu boceto. <\/p>\n\n\n\n Ahora bien, si quieres ir un nivel m\u00e1s arriba con la programaci\u00f3n en HTML, CSS y JavaScript, elige este editor de c\u00f3digo que es muy simple de usar y que por esta particularidad es un buen iniciador en programaci\u00f3n. \u00bfListo para un boceto nivel experto?<\/p>\n\n\n\n Del boceto a la p\u00e1gina con esta herramienta que te permite saltear el uso de un CMS. Aunque pr\u00e1cticamente lo puedes usar para bocetar, la suma de particularidades de Notepad++ posibilitan que trabajes los colores como un verdadero dise\u00f1ador. <\/p>\n\n\n\n Una vez hecho el boceto, y como te anticipamos, pasas ese esquema al dise\u00f1o web. Con GTMetrix puedes optimizar todos los aspectos relacionados con el dise\u00f1o para que la carga de la web sea efectiva. <\/p>\n\n\n\n \u00bfBuscas recursos gr\u00e1ficos e im\u00e1genes de alta calidad o vectorizadas? Esta es la herramienta que necesitas. Como si hicieras una b\u00fasqueda de Google, introduce los t\u00e9rminos y Freepik te lanzar\u00e1 los resultados que est\u00e1s esperando. <\/p>\n\n\n\n Hasta que no empiezas a bocetar los espacios con call to action no te das cuenta cu\u00e1nto necesitas esta herramienta. Genera botones personalizados con el texto y la tipograf\u00eda que quieras. A la hora de bocetar tu web como un profesional, no puedes desconocer Figma, un programa que te permitir\u00e1 trabajar en equipo y de manera colaborativa. Cuentas con un amplio espacio de trabajo y muchos recursos gr\u00e1ficos para crear.<\/p>\n\n\n\n Boceta tu sitio web din\u00e1mico con InVision Studio que te permite dise\u00f1ar interfaces interactivas con animaciones y transiciones hechas por t\u00ed. <\/p>\n\n\n\n Esta es otra soluci\u00f3n m\u00e1s para comprimir tus im\u00e1genes y que no sean la raz\u00f3n por la cual tu sitio demore en cargar o tenga una velocidad inapropiada. Arrastra la imagen hasta la interfaz y listo, ya la podr\u00e1s obtener para tu boceto e incluso para tu web.<\/p>\n\n\n\n Esta herramienta es, en verdad, un plugin de WordPress muy \u00fatil para maquetar tu sitio y seleccionar todos los elementos m\u00e1s creativos y funcionales que quieras en tu web. <\/p>\n\n\n\n Es un plugin que lleg\u00f3 a las vidas de los sitios web de WordPress para solucionar la creaci\u00f3n de los formularios de suscripci\u00f3n. Con Bloom podr\u00e1s hacerlos en pocos clics, con el dise\u00f1o que quieras. <\/p>\n\n\n\n Pero si de formularios hablamos, nunca te olvides de tener tu formulario de contacto en el boceto web. Esta herramienta facilita el dise\u00f1o del mismo con todos los campos que necesites, incluso, con la opci\u00f3n de adjuntar documentos. <\/p>\n\n\n\n \u00bfExiste un elegido? Es este plugin y es que la mayor\u00eda de las plantillas ya lo contienen. Aunque tiene las mismas particularidades que Ninja Forms, sigue siendo el m\u00e1s elegido. <\/p>\n\n\n\n Aunque WordPress provee a su comunidad de varias plantillas y temas gratuitos, existe un rango de estos que son pagos. Son, en concreto, m\u00e1s convenientes porque otorgan m\u00e1s recursos para adaptarlos al dise\u00f1o de marca propia. <\/p>\n\n\n\n Si no te decides por ninguna plantilla en particular pero navegando en internet encuentras la que consideras que se ajusta a tu boceto, utiliza esta herramienta para saber si este theme est\u00e1 disponible, c\u00f3mo se llama y cu\u00e1les son sus caracter\u00edsticas..<\/p>\n\n\n\n Estamos seguros de que todos estos recursos ser\u00e1n m\u00e1s que \u00fatiles para que puedas crear de una buena vez ese boceto definitivo con el cual podr\u00e1s crear tu sitio web.<\/p>\n\n\n\n Ahora cu\u00e9ntanos si ya conoc\u00edas estos recursos y qu\u00e9 resultados te dieron. \u00bfNos ha quedado alguna herramienta sin nombrar? \u00a1Te leemos!<\/p>\n","protected":false},"excerpt":{"rendered":" En esta completa gu\u00eda de herramientas aprender\u00e1s qu\u00e9 es, para qu\u00e9 sirven y c\u00f3mo crear bocetos para tu sitio web. \u00a1Acomp\u00e1\u00f1anos! Tabla de contenidos \u00bfQu\u00e9 son los bocetos de p\u00e1ginas web? Las ventajas de crear bocetos de una p\u00e1gina web online \u00bfSe puede hacer un boceto de p\u00e1gina web en word? Las 25 herramientas para […]<\/a><\/p>\n","protected":false},"author":4,"featured_media":3524,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"acf":[],"yoast_head":"\nTabla de contenidos<\/h3>\n\n\n\n
\u00bfQu\u00e9 son los bocetos de p\u00e1ginas web?<\/h1>\n\n\n\n
Las ventajas de crear bocetos de una p\u00e1gina web online<\/h1>\n\n\n\n
\u00bfSe puede hacer un boceto de p\u00e1gina web en Word?<\/h1>\n\n\n\n
Las 25 herramientas para hacer bocetos web<\/h1>\n\n\n\n
<\/p>\n\n\n\nHerramientas para hacer bocetos web para WordPress<\/h2>\n\n\n\n