{"id":8355,"date":"2022-01-28T13:00:00","date_gmt":"2022-01-28T12:00:00","guid":{"rendered":"https:\/\/carontestudio.com\/blog\/?p=8355"},"modified":"2025-08-22T15:02:11","modified_gmt":"2025-08-22T13:02:11","slug":"que-es-un-wireframe-y-para-que-sirve","status":"publish","type":"post","link":"https:\/\/carontestudio.com\/blog\/que-es-un-wireframe-y-para-que-sirve\/","title":{"rendered":"\u00bfQu\u00e9 es un wireframe y para qu\u00e9 sirve?"},"content":{"rendered":"\n

En el proceso de dise\u00f1o de una web, el wireframe es un boceto de las diferentes secciones del sitio web<\/strong>, a trav\u00e9s del cual podremos estructurar y jerarquizar el contenido<\/strong> de la web que se vaya a desarrollar. En al art\u00edculo de hoy veremos qu\u00e9 es un wireframe, para qu\u00e9 sirve y diferentes herramientas gratuitas para dise\u00f1arlo.<\/p>\n\n\n\n

\u00bfQu\u00e9 es un wireframe y para qu\u00e9 sirve?<\/h2>\n\n\n\n
\n
\n
\"Proceso<\/figure>\n<\/div>\n\n\n\n
\n

Una vez definido el proyecto con el cliente, estudiados los objetivos de la web, definido el alcance y el briefing, estos son los pasos a seguir en el proceso de dise\u00f1o de un sitio web:<\/p>\n\n\n\n

    \n
  1. Arquitectura.<\/li>\n\n\n\n
  2. Wireframe.<\/li>\n\n\n\n
  3. Prototipado web<\/a>.<\/li>\n\n\n\n
  4. Desarrollo web<\/a>.<\/li>\n\n\n\n
  5. Pruebas.<\/li>\n\n\n\n
  6. Lanzamiento.<\/li>\n<\/ol>\n<\/div>\n<\/div>\n\n\n\n

    Arquitectura<\/h3>\n\n\n\n

    El primer paso es definir la arquitectura que tendr\u00e1 el sitio web, es decir, la forma en la que las p\u00e1ginas de un sitio web est\u00e1n conectadas o enlazadas entre s\u00ed. Una buena arquitectura web har\u00e1 que el sitio web sea lo m\u00e1s intuitivo posible de cara a la experiencia del usuario<\/a><\/strong>, y facilitar\u00e1 a los motores de b\u00fasqueda encontrar e indexar todas las p\u00e1ginas del sitio web.<\/p>\n\n\n\n

    \n
    \n

    Wireframe<\/h3>\n\n\n\n

    Una vez definida la arquitectura, con todas sus p\u00e1ginas y enlaces entre otras, el siguiente paso en el dise\u00f1o web es el wireframe. Los wireframes son bocetos esquem\u00e1ticos de c\u00f3mo ser\u00e1n cada una de las p\u00e1ginas de un sitio web<\/strong>. Estos ayudan, de alguna manera, a materializar lo abstracto que puede resultar muchas veces para nuestros clientes la arquitectura de una web. Convirti\u00e9ndolo en algo m\u00e1s tangible y f\u00e1cil de visualizar. Sin entrar en elementos visuales de dise\u00f1o que se llevar\u00e1n a cabo m\u00e1s adelante en el proceso.<\/p>\n\n\n\n

    Los wireframes nos permiten tener un feedback del cliente anterior al dise\u00f1o y al desarrollo del sitio web<\/strong>. De esta manera, podemos ir avanzando en el proyecto por fases, aprobando paso a paso la arquitectura y el wireframe antes de seguir con el desarrollo de la web, para evitar retrocesos en el proceso por no haber concretado y aprobado los cimientos de la nueva web.<\/p>\n\n\n\n

    \u00bfPara qu\u00e9 sirve un wireframe?<\/h2>\n\n\n\n

    El objetivo de los wireframes, es centrarse en la estructura y la jerarqu\u00eda de todos los elementos de una web, dejando a un lado los colores, im\u00e1genes, logotipos o tipograf\u00edas<\/strong>. De esta manera, podemos poner el foco en el flujo de la informaci\u00f3n y en c\u00f3mo estructurarla<\/strong> de la mejor manera posible para que el contenido sea ordenado y coherente para el usuario, y llevar su atenci\u00f3n hacia los puntos importantes del sitio web.<\/p>\n\n\n\n

    Con el objetivo de centrarnos \u00fanicamente en la estructura, se recomienda crear el wireframe en blanco, negro o gris, sin im\u00e1genes ni textos reales. Estos pueden dise\u00f1arse en papel, aunque existen diferentes aplicaciones web con las que poder crearlos f\u00e1cilmente, hoy veremos algunas de las herramientas m\u00e1s sencillas para dise\u00f1ar wireframes.<\/p>\n<\/div>\n\n\n\n

    \n
    \"Prototipado<\/figure>\n<\/div>\n<\/div>\n\n\n\n

    Herramientas gratuitas para crear un wireframe<\/h2>\n\n\n\n

    En uno de nuestros art\u00edculos anteriores, hablamos sobre las mejores herramientas para el prototipado web, en esta ocasi\u00f3n, veremos otras herramientas que puedan facilitarnos la creaci\u00f3n de un wireframe para el dise\u00f1o de una web: <\/p>\n\n\n\n

    \n
    \"Herramienta<\/figure>\n\n\n\n
    \"Invision<\/figure>\n\n\n\n
    \"Con<\/figure>\n\n\n\n
    \"Herramienta<\/figure>\n\n\n\n
    \"Lucidchart<\/figure>\n\n\n\n
    \"Moqups\"<\/figure>\n\n\n\n
    \"Whimsical\"<\/figure>\n\n\n\n
    \"Wireframe<\/figure>\n<\/figure>\n\n\n\n
      \n
    1. Figma<\/a>. Los expertos en UX y UI recomiendan Figma y sus avanzadas funcionalidades para el prototipado web. Esta potente herramienta puede utilizarse tambi\u00e9n para el proceso anterior al prototipado web, para la creaci\u00f3n del wireframe de la web.<\/li>\n\n\n\n
    2. Invision<\/a>. La aplicaci\u00f3n de Freehand, Invision, ofrece la posibilidad de desarrollar el proceso del prototipado web desde cero. Pudiendo desarrollar con el equipo desde la fase de ideaci\u00f3n y brainstorming del proyecto, pasando por la creaci\u00f3n de un diagrama de la arquitectura de la web hasta el wireframe. Aunque la versi\u00f3n gratuita solo permite un \u00fanico usuario por proyecto.<\/li>\n\n\n\n
    3. Miro<\/a> ofrece crear proyectos colaborativos desde reuniones, lluvias de ideas, diagramas y wireframes hasta planificaci\u00f3n y visualizaci\u00f3n del proyecto final.<\/li>\n\n\n\n
    4. Mockflow<\/a> es una herramienta dise\u00f1ada para generar wireframes desde 0. Ofrecen realizar desde el bocetado del wireframe, hasta el prototipado de alta fidelidad sin salir de la aplicaci\u00f3n.<\/li>\n\n\n\n
    5. Lucidchart<\/a>. Esta aplicaci\u00f3n de creaci\u00f3n de diagramas online en equipo se puede utilizar tambi\u00e9n para crear wireframes de forma sencilla. Puedes registrarte gratis y partir de una plantilla o comenzar a dise\u00f1ar tu wireframe desde 0.<\/li>\n\n\n\n
    6. Moqups<\/a>. La aplicaci\u00f3n web Moqups tambi\u00e9n nos permite crear proyectos colaborativos de estructuras, maquetas, diagramas, wireframes y prototipos. La versi\u00f3n gratuita de moqups \u00fanicamente ofrece la creaci\u00f3n de un proyecto, con l\u00edmite de 5 GB de almacenamiento.<\/li>\n\n\n\n
    7. Whimsical<\/a>. Esta herramienta online es tambi\u00e9n perfecta para el dise\u00f1o de wireframes por su interfaz sencilla e intuitiva.<\/li>\n\n\n\n
    8. Wireframe.cc<\/a>. Esta aplicaci\u00f3n online tiene como caracter\u00edstica principal su sencillez. Aunque no ofrezca tantas herramientas y posibilidades como ofrecen algunas de las aplicaciones que hemos visto hoy, puede ser perfectamente v\u00e1lida para el dise\u00f1o de wireframes sencillos.<\/li>\n<\/ol>\n\n\n\n

      Ventajas de usar un wireframe<\/h2>\n\n\n\n

      Estas son algunas de las ventajas por las cuales deber\u00eda hacerse un wireframe antes de empezar con el proceso de prototipado y programaci\u00f3n de un sitio web:<\/p>\n\n\n\n

      \n
      \n