Un wireframe de lloc (o estructura de lloc) és un organigrama que defineix l'estructura i la jerarquia de les pàgines d'un lloc web. El wireframe serveix com a base per al desenvolupament del lloc web, ajudant a organitzar el contingut i proporcionar una navegació lògica als usuaris. Crear un lloc web és molt més fàcil que abans. No obstant això, aquest encara és un projecte important. I com qualsevol altre projecte, cal un pla sòlid.
El disseny del vostre lloc web és la part més important d'aquest pla. Els colors, els gràfics i altres continguts es poden canviar molt més fàcilment que el disseny. Penseu en el disseny com l'esquelet del vostre lloc web. Defineix l'estructura de cada pàgina, que es perfeccionarà més endavant.
Un wireframe és un esquema aproximat de la disposició d'un lloc web. Mostra on s'ubicaran tots els diferents elements. Això ho fa ideal punt de partida per crear un lloc web. Les agències de disseny web competents sempre comencen amb una estructura de filferro. Quan desenvolupeu el vostre propi lloc web, ja sigui sol o en equip, també trobareu un marc valuós.
L'estructura d'un lloc web sempre es pot dibuixar amb llapis i paper. Tanmateix, això no és necessari si hi ha moltes eines de wireframing disponibles.
Fem un cop d'ull a algunes de les eines d'enquadrament de llocs web més populars.
Per què utilitzar una eina d'estructura de filferro?
Fins i tot en un camp modern com el disseny web, alguns dissenyadors encara prefereixen utilitzar mètodes antics. Per descomptat, no hi ha res dolent a dibuixar un lloc web en paper. Aquest és un mètode provat que ha funcionat molt bé per a milers de dissenyadors web en el passat. Tanmateix, utilitzar una eina d'enquadrament pot estalviar molt de temps i esforç. Marc del lloc web
-
L'ús d'una eina de wireframing us ofereix un millor punt de partida.
Amb llapis i paper, estàs començant literalment amb una pissarra en blanc. Les eines de marc faciliten començar. La majoria tenen directrius de disseny, encara que sigui una graella senzilla. Alguns fins i tot proporcionen elements predeterminats que podeu col·locar a la pàgina perquè no hàgiu de dibuixar res.
-
L'edició i les correccions s'han tornat molt més fàcils.
Si treballeu en paper, haureu de tornar a dibuixar tot el filferro cada vegada que feu un canvi important. Moltes eines de wireframing us permeten simplement arrossegar i deixar anar elements. Això pot estalviar hores de treball, tant si estàs perfeccionant l'original dissenyar o fer canvis segons la sol·licitud del client.
-
Els resultats semblen més professionals.
Fins i tot el millor dissenyador pot faltar una mica en habilitats de dibuix. Amb una eina de wireframing, mai us haureu de preocupar per dibuixar una línia recta o assegurar-vos que un element estigui perfectament centrat. Naturalment, com que un wireframe és només un wireframe, el seu aspecte no és tan important com l'aspecte del lloc web acabat. Però si tu treballar amb clients, un marc súper net els pot impressionar. Això també pot evitar malentesos, com ara quan un client assumeix que un element no es centrarà simplement perquè s'ha dibuixat lleugerament descentrat a l'estructura de filferro.
-
És més convenient per al teu equip.
Les eines de marc faciliten molt la col·laboració amb altres persones. Moltes eines us permeten concedir accés a diversos usuaris perquè tothom pugui treballar en els mateixos fitxers. Amb les funcions de col·laboració, el vostre equip pot eliminar la necessitat de compartir la versió actual d'un fitxer. Tot el vostre equip pot treballar junts sense problemes, tant si sou a la mateixa oficina com si no. Marc del lloc web
-
Això és més convenient per als clients de disseny web.
Com que utilitzar una eina de wireframing és més ràpid i fàcil per al vostre equip, també millorarà la qualitat del servei que proporcioneu si esteu desenvolupant llocs web per a altres. Els vostres clients podran rebre mostres de wireframe més ràpidament i us serà molt més fàcil fer qualsevol canvi. Es millora qualitat del servei al client. I, per descomptat, és més probable que els clients satisfets et deixin una bona ressenya o et recomanin als altres clients al teu negoci.
Per tant, fins i tot si sou un expert en dibuixar ràpidament marcs nets sobre paper, val la pena dedicar-vos el temps a aprendre a utilitzar l'eina de filferro. Afortunadament, moltes d'elles són gratuïtes i moltes eines de pagament tenen proves gratuïtes per ajudar-vos a triar la més adequada per a vosaltres i el vostre equip. A veure què hi ha!
Wireframe.cc Marc del lloc
Tipus: aplicació web
cost: Versió gratuïta disponible; prima de 16 a 99 dòlars al mes
Wireframe.cc és una eina d'estructura de filferro minimalista per a aquells que prefereixen el llapis i el paper. S'executa directament al vostre navegador web, de manera que no cal descarregar-lo. L'aplicació comença amb una quadrícula senzilla sobre la qual podeu dibuixar diversos elements de filferro mitjançant diverses eines. És extremadament fàcil d'utilitzar i té una versió gratuïta. Si decidiu que la versió gratuïta és massa limitada en funcions, podeu actualitzar a un pla premium per desbloquejar més funcions.
Jumpchart Site Wireframe
Tipus: aplicació web
cost: Versió gratuïta disponible; premium de 5 $ a 50 $/mes.
Gràfic de salts no està pensat per al disseny visual de llocs web. En canvi, està dissenyat per ajudar-vos a planificar com es relacionen les vostres pàgines individuals entre elles. Això és tan important per a l'UX (experiència d'usuari) com els dissenys de pàgina, per això Jumpchart és un altre valuós eina gratuïta, que es pot afegir a l'arsenal de planificació del vostre lloc web. Com és d'esperar, el pla gratuït té les seves limitacions (un projecte fins a 10 pàgines i 2 usuaris), però és un gran punt de partida per planificar un lloc web senzill. Els plans de pagament us ofereixen més opcions i us permeten treballar amb més pàgines i membres de l'equip, així com amb diversos projectes alhora.
Si sou un aspirant a dissenyador web amb un pressupost, utilitzar Wireframe.cc i Jumpchart junts us donarà tot el que necessiteu per planificar un lloc web. Aquest és el disseny visual cobert pel primer i la planificació del mapa del lloc cobert pel segon. Ambdues aplicacions es complementen molt bé i estan disponibles de forma gratuïta sense descàrregues.
Gliffy/Estructura de filferro del lloc
Tipus: aplicació web
cost: Versió gratuïta disponible; versió completa 7,99 $/mes
lluentosa no només per a wireframes. Es tracta d'una aplicació de diagrames basada en web, però inclou marcs i altres tipus de dissenys. És una mica menys intuïtiu que Wireframe.cc o Jumpchart, però encara és fàcil d'utilitzar (arrossegar i deixar anar) i pot servir per als propòsits de les dues aplicacions anteriors combinades. Amb Gliffy, podeu crear marcs per a pàgines web, així com diagrames de flux per representar el vostre mapa del lloc. Té una sèrie d'elements integrats per representar diferents parts d'una pàgina web o un altre disseny, i també podeu pujar les vostres pròpies imatges. També us pot resultar útil per a altres tasques de disseny o planificació que impliquen la creació de diagrames. Marc del lloc web
MockFlow
Tipus: aplicació web
cost: Versió gratuïta disponible; premium de 19 a 45 $/mes.
MockFlow també combina funcions per crear marcs i planificar mapes del lloc. És més especialitzat que Gliffy, de manera que està més centrat en llocs web i col·laboració en equip que en diagrames. Les seves eines de wireframing són excel·lents, amb una biblioteca preparada de dissenys i components per començar. Podeu crear fàcilment un marc en qüestió de minuts i editar-lo com vulgueu. Els plans Premium desbloquegen funcions addicionals, com ara valuoses funcions de col·laboració en equip i molt més. Si pagueu anualment, obtindreu un descompte del 20%, a més d'algunes funcions de bonificació com el mode fora de línia i eines addicionals. Marc del lloc web
Canva
Tipus: aplicació web
cost: Versió gratuïta disponible; versió completa 9,99 $/mes (facturació anual)
Canva és una eina en línia popular per crear gràfics de qualitat professional, fins i tot si no sou dissenyador. Està carregat de plantilles, il·lustracions, fotos i molt més. Com que no és una eina de wireframing dedicada, no té algunes de les característiques d'altres solucions que hem analitzat fins ara. Tanmateix, encara podeu utilitzar-lo per crear marcs de filferro molt fàcilment mitjançant arrossegar i deixar anar.
Adobe XD/Site Framework
Tipus: programari; disponible per a Mac i Windows
cost: Versió gratuïta disponible; versió completa comença a 9,99 dòlars al mes.
Adobe XD és una eina avançada de disseny d'UX creada pels desenvolupadors de Photoshop, Illustrator, InDesign i un altre programari professional famós. Si esteu familiaritzat amb el programari d'Adobe, sou conscient de l'alt grau d'especialització i poder de cadascuna de les seves aplicacions. Sempre que estigueu disposat a pujar la corba d'aprenentatge, les seves eines us ofereixen un munt de control que us permetrà produir gairebé qualsevol cosa que penseu. Adobe XD no és diferent, ja que ofereix un conjunt ric i robust d'eines de disseny web. Va més enllà dels wireframes de llocs web i també us permet crear maquetes completes i fins i tot prototips en un sol fitxer de projecte. Afortunadament, també és més fàcil d'aprendre a utilitzar que altres programaris d'Adobe, per la qual cosa val la pena provar-ho si busqueu una solució més avançada. Marc del lloc web
figma
Tipus: Disponible com a aplicació web i com a programari per a Mac, Windows i Linux.
cost: Versió gratuïta disponible; premium de 12 a 45 $/mes.
figma molt centrat en la col·laboració en temps real entre els membres de l'equip. Tanmateix, la seva les eines són igualment útils fins i tot per a dissenyadors en solitari. Figma ofereix tot el que necessiteu per crear una estructura de filferro, tant si busqueu un disseny bàsic com si voleu anar més avançat. Les eines d'edició ofereixen un alt grau de precisió perquè pugueu modificar el disseny segons sigui necessari. Figma també és extremadament compatible amb diversos sistemes operatius, de manera que pot ser una solució ideal per a un equip de desenvolupament de Linux.
Com triar una eina d'enquadrament
L'elecció de les eines sempre ha de dependre de les vostres necessitats. Un marc de web no és diferent de qualsevol altre projecte en aquest sentit. També és important triar les eines adequades per endavant. Per descomptat, podeu començar amb un pressupost més petit i després actualitzar-lo si és possible. Però voleu evitar l'ús d'eines que no s'adapten gens a les vostres necessitats. Marc del lloc web
Aleshores, com escolliu la millor eina de wireframing per al disseny web? Fes-te les preguntes següents:
- Quin és el meu pressupost? Calcula quant et pots permetre gastar en programari o accedir a aplicacions premium. Recordeu que sol ser una quota mensual o anual.
- Quants membres de l'equip necessiten accedir a les eines? Això podria significar la diferència entre actualitzar a premium o utilitzar un compte gratuït.
- Amb quin sistema operatiu hauria de funcionar l'eina? Si no esteu segurs, el més segur és seguir amb les aplicacions web.
- Quines característiques necessito? Compareu les funcions disponibles amb la mida del vostre projecte. Si només necessiteu crear una estructura senzilla, una eina més limitada ho farà. Però si necessiteu explorar completament els wireframes i prototips, o també necessiteu planificar l'estructura del vostre mapa del lloc, us sortirà millor amb una eina més avançada (o una combinació d'ambdues).
- Quin és el meu nivell de comoditat amb una eina específica? Un cop hàgiu reduït les opcions en funció de les vostres necessitats, proveu qualsevol eina que compleixi aquests requisits. Aprofita al màxim les proves gratuïtes! Fins i tot les eines amb capacitats similars poden tenir experiències d'usuari molt diferents. Trieu-ne un que sigui fàcil (o fins i tot divertit) per treballar-hi.
Punts clau/Marc del lloc
El disseny web és un camp gratificant amb moltes eines disponibles per facilitar-ho. Una eina de wireframing pot simplificar el vostre flux de treball i esdevenir una part central del vostre procés de disseny. Resumim el que hem tractat:
- Una eina de wireframe farà que el disseny web sigui molt més fàcil i ràpid per a un dissenyador, ja sigui que treballi sol o amb una agència.
- Hi ha moltes opcions disponibles, tant si voleu utilitzar una aplicació web com si voleu instal·lar programari al vostre ordinador.
- Les diferents eines de marc poden ser millors per a equips més grans i/o projectes més grans. Altres són més limitats.
- Moltes eines de wireframing ofereixen una versió gratuïta i el pagament pot eliminar moltes d'aquestes limitacions.
- Per trobar l'eina de wireframing adequada, us heu de fer algunes preguntes bàsiques.
- Busqueu sempre una prova gratuïta que pugueu utilitzar per familiaritzar-vos amb el programari.
Tant si ets un dissenyador experimentat com si estàs començant, hi ha alguna cosa per a tu ideal eina de maquetació. Un cop el trobeu, no tornareu mai més al llapis i al paper!
Deixa un comentari