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 de deseñadores web no pasado. Non obstante, usar unha ferramenta de enmarcado 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
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
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
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
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
Tipo: aplicación web
custo: Versión gratuíta dispoñible; versión completa $9,99/mes (facturado anualmente)
Canva é unha popular ferramenta en liña 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
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
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!
Deixe un comentario