Un wireframe (ou estrutura do sitio) é un organigrama que define a estrutura e xerarquía das páxinas dun sitio web. O wireframe serve como base para o desenvolvemento do sitio web, axudando a organizar o contido e proporcionar unha navegación lóxica para os usuarios. Crear un sitio web é moito máis sinxelo que antes. Non obstante, este aínda é un proxecto significativo. E como calquera outro proxecto, necesitas un plan sólido.

O deseño do teu sitio web é a parte máis importante deste plan. As cores, os gráficos e outros contidos pódense cambiar moito máis facilmente que o deseño. Pensa no deseño como o esqueleto do teu sitio web. Define a estrutura de cada páxina, que será refinada máis adiante.

Un wireframe é un esquema aproximado do deseño dun sitio web. Mostra onde se situarán todos os diferentes elementos. Isto faino ideal punto de partida para crear un sitio web. As axencias de deseño web competentes sempre comezan cun wireframe. Cando desenvolvas o teu propio sitio web, xa sexa só ou en equipo, tamén atoparás un marco valioso.

O wireframe dun sitio web sempre se pode debuxar con lapis e papel. Non obstante, isto non é necesario se hai moitas ferramentas de wireframing dispoñibles.

Imos dar unha ollada a algunhas das ferramentas máis populares de creación de sitios web.

 

Por que usar unha ferramenta wireframe?

Mesmo nun campo moderno como o deseño web, algúns deseñadores aínda prefiren usar métodos antigos. Por suposto, non hai nada de malo en debuxar un sitio web en papel. Este é un método comprobado que funcionou moi ben para miles no pasado. deseñadores web. Non obstante, usar unha ferramenta de encadramento pode aforrar moito tempo e esforzo. Marco do sitio web

  • Usar unha ferramenta de wireframing ofrécelle un mellor punto de partida. 

Con lapis e papel, estás comezando literalmente cunha lousa en branco. As ferramentas de marco facilitan o inicio. A maioría ten pautas de deseño, aínda que sexa unha cuadrícula simple. Algúns incluso proporcionan elementos predeterminados que podes colocar na páxina para que non teñas que debuxar nada.

  • A edición e as correccións fixéronse moito máis fáciles. 

Se traballas en papel, terás que volver a debuxar todo o wireframe cada vez que fagas un gran cambio. Moitas ferramentas de wireframing permítenche simplemente arrastrar e soltar elementos. Isto pode aforrar horas de traballo, tanto se estás mellorando o orixinal deseñar ou facer cambios segundo a solicitude do cliente.

  • Os resultados parecen máis profesionais. 

Incluso o mellor deseñador pode carecer un pouco de habilidades de debuxo. Cunha ferramenta de wireframing, nunca tes que preocuparte de debuxar unha liña recta ou de asegurarte de que un elemento estea perfectamente centrado. Por suposto, dado que un wireframe é só un wireframe, o seu aspecto non é tan importante como o aspecto do sitio web acabado. Pero se ti traballar con clientes, un marco super limpo pode impresionalos. Isto tamén pode evitar malentendidos, como cando un cliente asume que un elemento non estará centrado simplemente porque foi debuxado lixeiramente descentrado na estructura.

  • É máis cómodo para o teu equipo. 

As ferramentas do marco facilitan moito a colaboración con outros. Moitas ferramentas permítenche conceder acceso a varios usuarios para que todos poidan traballar nos mesmos ficheiros. Coas funcións de colaboración, o teu equipo pode eliminar a necesidade de compartir a versión actual dun ficheiro. Todo o teu equipo pode traballar xuntos sen problemas, tanto se estás na mesma oficina como se non. Marco do sitio web

  • Isto é máis cómodo para os clientes de deseño web. 

Como usar unha ferramenta de wireframing é máis rápido e sinxelo para o teu equipo, tamén mellorará a calidade do servizo que ofreces se estás a desenvolver sitios web para outros. Os teus clientes poderán recibir mostras de wireframe máis rápido e será moito máis fácil para ti facer calquera cambio. Mellora calidade do servizo ao cliente. E, por suposto, os clientes satisfeitos son máis propensos a deixarche unha boa crítica ou recomendarche a outros clientes para o seu negocio.

Polo tanto, aínda que sexas un experto en debuxar rapidamente wireframes limpos en papel, paga a pena dedicarte o tempo a aprender a usar a ferramenta wireframe. Afortunadamente, moitas delas son gratuítas e moitas ferramentas de pago teñen probas gratuítas para axudarche a escoller a adecuada para ti e para o teu equipo. A ver que hai!

 

Wireframe.cc Marco do sitio

Wireframe.cc Marco do sitio web

Tipo: aplicación web

custo: Versión gratuíta dispoñible; prima de 16 a 99 dólares ao mes

armazón.cc é unha ferramenta de wireframing minimalista para aqueles que prefiren lapis e papel. Funciona directamente no teu navegador web, polo que non é necesaria ningunha descarga. A aplicación comeza cunha cuadrícula sinxela na que podes debuxar varios elementos de armazón usando varias ferramentas. É moi sinxelo de usar e ten unha versión gratuíta. Se decides que a versión gratuíta é demasiado limitada en funcións, podes actualizar a un plan premium para desbloquear máis funcións.

 

Jumpchart Site Wireframe

Gráfico de saltos

Tipo: aplicación web

custo: Versión gratuíta dispoñible; Premium $5 - $50/mes.

Gráfico de saltos non está destinado ao deseño visual de sitios web. Pola contra, está deseñado para axudarche a planificar como se relacionan as túas páxinas individuais entre si. Isto é tan importante para UX (experiencia do usuario) como os deseños de páxina, polo que Jumpchart é outro valioso ferramenta gratuíta, que se pode engadir ao arsenal de planificación do seu sitio web. Como era de esperar, o plan gratuíto ten as súas limitacións (un proxecto ata 10 páxinas e 2 usuarios), pero é un excelente punto de partida para planificar un sitio web sinxelo. Os plans de pago ofrécenche máis opcións e permítenche traballar con máis páxinas e membros do equipo, así como con varios proxectos á vez.

Se es un aspirante a deseñador web cun orzamento, usar Wireframe.cc e Jumpchart xuntos darache todo o que necesitas para planificar un sitio web. Este é o deseño visual cuberto polo primeiro e a planificación do mapa do sitio cuberto polo segundo. Ambas aplicacións complétanse moi ben e están dispoñibles de balde sen descarga.

 

Gliffy/Fireframe do sitio

Gliffy/ Wireframe do sitio web

Tipo: aplicación web

custo: Versión gratuíta dispoñible; versión completa $7,99/mes

reluciente non só para wireframes. Esta é unha aplicación de diagramación baseada na web, pero inclúe wireframes e outros tipos de deseños. É un pouco menos intuitivo que Wireframe.cc ou Jumpchart, pero aínda é fácil de usar (arrastrar e soltar) e pode servir para os propósitos das dúas aplicacións anteriores combinadas. Con Gliffy, pode crear wireframes para páxinas web, así como diagramas de fluxo para representar o seu mapa do sitio. Ten unha serie de elementos incorporados para representar diferentes partes dunha páxina web ou outro deseño, e tamén pode cargar as súas propias imaxes. Tamén pode resultar útil para outras tarefas de deseño ou planificación que impliquen a creación de diagramas. Marco do sitio web

 

MockFlow

MockFlow

Tipo: aplicación web

custo: Versión gratuíta dispoñible; Premium $ 19-45/mes.

MockFlow tamén combina funcións para crear wireframes e planificar mapas do sitio. É máis especializado que Gliffy, polo que está máis centrado nos sitios web e na colaboración en equipo que nos diagramas. As súas ferramentas de wireframing son excelentes, cunha biblioteca preparada de deseños e compoñentes para comezar. Podes crear facilmente un wireframe en minutos e logo editalo como queiras. Os plans Premium desbloquean funcións adicionais, como valiosas funcións de colaboración en equipo e moito máis. Se pagas anualmente, obterás un desconto do 20 %, ademais dalgunhas funcións extra como o modo sen conexión e ferramentas adicionais. Marco do sitio web

 

Canva

Canva

Tipo: aplicación web

custo: Versión gratuíta dispoñible; versión completa $9,99/mes (facturado anualmente)

Canva é unha ferramenta en liña popular para crear gráficos de calidade profesional, aínda que non sexas un deseñador. Está cargado de modelos, ilustracións, fotos e moito máis. Como non é unha ferramenta de wireframing dedicada, carece dalgunhas das características doutras solucións que analizamos ata agora. Non obstante, aínda pode usalo para crear wireframes moi facilmente usando arrastrar e soltar.

 

Adobe XD/Site Framework

Adobe XD/Wireframe do sitio web

Tipo: Software; dispoñible para Mac e Windows

custo: Versión gratuíta dispoñible; a versión completa comeza en 9,99 dólares ao mes.

Adobe XD é unha ferramenta de deseño UX avanzada creada polos desenvolvedores de Photoshop, Illustrator, InDesign e outro software profesional famoso. Se estás familiarizado co software de Adobe, sabes o alto grao de especialización e potencia de cada unha das súas aplicacións. Sempre que estea disposto a escalar a curva de aprendizaxe, as súas ferramentas ofrécenche un montón de control que poden permitirche producir case todo o que penses. Adobe XD non é diferente, proporcionando un conxunto rico e robusto de ferramentas de deseño web. Vai máis alá dos wireframes de sitios web e tamén che permite crear maquetas completas e incluso prototipos nun único ficheiro de proxecto. Afortunadamente, tamén é máis fácil de aprender a usar que outros programas de Adobe, polo que definitivamente paga a pena probalo se estás a buscar unha solución máis avanzada. Marco do sitio web

 

figma

figma

Tipo: Dispoñible como aplicación web e como software para Mac, Windows e Linux.

custo: Versión gratuíta dispoñible; Premium $ 12-45/mes.

figma fortemente centrado na colaboración en tempo real entre os membros do equipo. Porén, o seu ferramentas son igualmente útiles mesmo para deseñadores solistas. Figma ofrece todo o que necesitas para crear un wireframe, tanto se buscas un deseño básico como se queres avanzar. As ferramentas de edición ofrecen un alto grao de precisión para que poidas modificar o deseño segundo sexa necesario. Figma tamén é moi compatible con varios sistemas operativos, polo que pode ser unha solución ideal para un equipo de desenvolvemento de Linux.

 

Como elixir unha ferramenta de encadramento

A súa elección de ferramentas sempre debe depender das súas necesidades. Un marco do sitio web non é diferente de ningún outro proxecto neste sentido. Tamén é importante escoller as ferramentas adecuadas con antelación. Por suposto, pode comezar cun orzamento menor e despois actualizar se é posible. Pero quere evitar o uso de ferramentas que non son nada adecuadas ás súas necesidades. Marco do sitio web

Entón, como elixes a mellor ferramenta de wireframing para o deseño web? Faite as seguintes preguntas:

  • Cal é o meu orzamento? Calcula o que podes gastar en software ou acceder a aplicacións premium. Lembra que esta adoita ser unha cota mensual ou anual.
  • Cantos membros do equipo precisan acceder ás ferramentas? Isto podería significar a diferenza entre actualizar a Premium ou usar unha conta gratuíta.
  • En que sistema operativo debería funcionar a ferramenta? Se non estás seguro, o máis seguro é seguir coas aplicacións web.
  • Que funcións necesito? Compara as funcións dispoñibles co tamaño do teu proxecto. Se só precisa crear unha estrutura simple, unha ferramenta máis limitada servirá. Pero se necesitas explorar completamente os wireframes e prototipos, ou tamén necesitas planificar a estrutura do teu mapa do sitio, estarás mellor cunha ferramenta máis avanzada (ou unha combinación de ambas).
  • Cal é o meu nivel de confort cunha ferramenta específica? Unha vez que restrinxiches as túas opcións en función das túas necesidades, proba as ferramentas que cumpran eses requisitos. Aproveita ao máximo as probas gratuítas! Incluso ferramentas con capacidades similares poden ter experiencias de usuario moi diferentes. Escolla un que sexa fácil (ou incluso divertido) para traballar.

 

Puntos clave/Marco do sitio

O deseño web é un campo gratificante con moitas ferramentas dispoñibles para facilitalo. Unha ferramenta de wireframing pode simplificar o seu fluxo de traballo e converterse nunha parte central do seu proceso de deseño. Imos resumir o que cubrimos:

  • Unha ferramenta wireframe fará que o deseño web sexa moito máis sinxelo e rápido para un deseñador, xa sexa que traballe só ou cunha axencia.
  • Hai moitas opcións fantásticas dispoñibles, tanto se queres utilizar unha aplicación web como instalar software no teu ordenador.
  • As diferentes ferramentas de marco poden ser mellores para equipos máis grandes e/ou proxectos máis grandes. Outros son máis limitados.
  • Moitas ferramentas de wireframing ofrecen unha versión gratuíta e pagar pode eliminar moitas destas limitacións.
  • Para atopar a ferramenta de wireframing adecuada, cómpre facerse algunhas preguntas básicas.
  • Busca sempre unha versión de proba gratuíta que poidas usar para familiarizarte co software.

Tanto se es un deseñador experimentado como se estás comezando, hai algo para ti perfecto ferramenta de deseño. Unha vez que o atopes, nunca volverás ao papel e a lapis!

 АЗБУКА 

FAQ. Marco do sitio.

  • Que é un wireframe de sitio web?

    Un wireframe de sitio web, ou wireframe, é unha representación esquemática do deseño dunha páxina web. Mostra a estrutura e colocación de elementos básicos como menús, botóns, bloques de texto e imaxes, sen entrar en detalles detallados do deseño.

  • Por que é importante crear un marco de sitio web?

    • Planificación da estrutura: Axuda aos desenvolvedores e deseñadores a planificar a estrutura e a disposición dos elementos nunha páxina.
    • Simplificación da comunicación: Facilita a discusión e o acordo de ideas con clientes e equipo.
    • Aforro de tempo: Axuda a identificar problemas e facer cambios no inicio do desenvolvemento, aforrando tempo e recursos.

  • Cales son os elementos principais dun framework de sitios web?

    • Títulos e subtítulos: Indica o contido principal e de apoio.
    • Bloques de contido: Bloques de texto, imaxes, vídeos.
    • Menú de navegación: Menú principal e secundario para a navegación do sitio.
    • Botóns e ligazóns: Elementos de interacción do usuario co sitio.
    • Formas: Campos de entrada, botóns de envío.

  • Que tipos de cadros hai?

    • Baixo detalle (baixa fidelidade): Un marco sinxelo, en branco e negro, sen elementos detallados, centrado na estrutura xeral.
    • Alta fidelidade: Wireframe máis detallado que mostra dimensións exactas, fontes e outros elementos de deseño.

  • Que ferramentas podes usar para crear wireframes de sitios web?

    • Debuxo manual: Papel e lapis para crear rapidamente bosquexos.
    • Servizos e programas en liña:
      • Balsamiq: Unha ferramenta para crear wireframes sinxelos e comprensibles.
      • Boceto: Software de deseño de interfaces, incluíndo ferramentas de wireframing.
      • Adobe XD: Unha poderosa ferramenta para crear wireframes e prototipos con elementos interactivos.
      • Figura: Editor en liña para colaboración en wireframes e prototipos.
      • Axure RP: Unha ferramenta profesional para a creación de wireframes e prototipos detallados.
      • InVision: Unha plataforma para a creación e colaboración interactiva de prototipos.

  • Cales son os pasos para crear un wireframe de sitio web?

    • Requisitos de recollida: Define os obxectivos do sitio, o público obxectivo e os principais elementos funcionais.
    • Creación dun esquema: Debuxa un esquema xeral da estrutura do sitio.
    • Colocación dos elementos: Distribuír os elementos principais (encabezados, bloques de contido, navegación) na páxina.
    • Revisión e corrección: Discuta o marco co equipo e co cliente e faga os cambios necesarios.
    • Detalle: Engade detalles adicionais e elementos interactivos segundo sexa necesario.

  • Cales son as mellores prácticas á hora de crear wireframes de sitios web?

    • Centrarse na funcionalidade: O cadro debe centrarse en elementos funcionais máis que no deseño.
    • Sinxeleza: Evite os detalles innecesarios e a complexidade, especialmente nas fases iniciais.
    • Usabilidade: Considere a experiencia do usuario e a facilidade de navegación.
    • Гибкость: Estea preparado para facer cambios e axustes en función dos comentarios.

  • En que se diferencia un wireframe dun sitio web dun prototipo?

    • Marco: Representación esquemática da estrutura e dos elementos principais sen detalles de deseño.
    • Prototipo: Unha vista máis detallada que inclúe deseño, elementos interactivos e animacións.

  • Como probar un marco de sitio web?

    • Comentarios: Obtén comentarios do teu equipo e clientes.
    • Probas de usabilidade: Proba con usuarios reais para identificar problemas.
    • Análise: Analiza os resultados das probas e fai os axustes necesarios.

  • Que exemplos de wireframes exitosos hai?

    • Elementos de Google Framework: Exemplos de wireframes sinxelos e claros de Google.
    • Bibliotecas e modelos: Moitos recursos en Internet ofrecen modelos e bibliotecas xa preparadas para crear wireframes.