Webs per a la creació de maquetes

Els llocs web de maquetes, també coneguts com a editors gràfics en línia o eines de disseny, permeten als usuaris crear diversos dissenys gràfics, il·lustracions, bàners, logotips, presentacions i molt més directament des del seu navegador web sense necessitat d'instal·lar programari especialitzat al seu ordinador. Aquestes eines en línia solen oferir una varietat de funcions i plantilles que faciliten el procés de creació del disseny.

A diferència dels prototips, que se suposa que funcionen realment, les maquetes són elements visuals estàtics destinats a mostrar els dissenys, l'atmosfera, el color i l'estètica general. Alguns dissenyadors prefereixen crear tots els botons i icones des de zero, però si voleu avançar o jugar per inspirar-vos, els dissenys de llocs web i el programari vénen precarregats amb aquests elements i poden ser més fàcils d'utilitzar que el programari de disseny gràfic.

Els llocs següents us ajudaran a crear maquetes de pantalla de llocs web, maquetes de pantalla d'aplicacions, maquetes de productes i molt més. La majoria inclou plantilles de disseny de llocs web o kits d'interfície d'usuari que us permeten dissenyar amb elements preconstruïts, com ara botons. Són un gran estalvi de temps si mai us trobeu en un pessic i necessiteu lliurar un disseny ràpidament. Per a cadascun analitzarem el preu, pros i contres, així com a qui es recomanen.

1. Adobe XD. Webs per a la creació de maquetes

Adobe XD és la resposta de la família Adobe al programari de disseny digital. Té tots els detalls i matisos que esperaries de l'empresa darrere Photoshop i Illustrator, però també ofereix un preu igual de elevat.

Tanmateix, si busqueu dissenys de qualitat professional amb tots els detalls, Adobe XD us té cobert. Gestiona tot el procés de disseny, inclosos els prototips interactius, i fins i tot s'integra amb altres programaris d'Adobe si voleu crear o personalitzar elements a Photoshop o Illustrator.

També és bastant sofisticat en les seves característiques, amb efectes 3D, animacions i la possibilitat de crear una biblioteca de components, un lloc per emmagatzemar tots els vostres elements, com ara botons i icones, perquè el vostre equip els pugui tornar a utilitzar en un altre projecte (això ajuda els clients repetits si veuen els mateixos controls al nou producte). També hi ha funcions especials com Repeat Grid, que estalvia temps quan necessiteu copiar i enganxar un patró una vegada i una altra, i Padding, que protegeix mides de píxels en editar diferents capes dels mateixos elements.

cost:

• 9,99 $/mes
• 99,99 dòlars anuals (prepagament)

Avantatges: Llocs web per crear dissenys

• Apte per a tot el procés de disseny, inclosos els prototips interactius
• característiques sofisticades: efectes 3D, animació i biblioteca de components
• Funcions convenients per estalviar temps: sagnat, patrons de repetició i edició fàcil
• S'integra amb altres programes d'Adobe

Contres:

• excessiu si només voleu un disseny senzill i ràpid

Recomanat per…

• persones prou serioses amb el disseny digital com per voler programari de primer nivell
• disseny normal - no per a projectes puntuals o individuals

2. Interfície d'usuari fluida. Webs per a la creació de maquetes

Encara que tècnicament per a prototips, IU fluida és prou robust per crear maquetes impressionants que després es poden convertir en prototips interactius. Aquesta és una opció excel·lent per a dissenyadors i equips de disseny experimentats que treballen en tot l'abast d'un projecte.

La interfície d'usuari flexible no és tan fàcil d'utilitzar com altres llocs web de disseny populars, que potser no atreuen als principiants. Tanmateix, té totes les funcions de grau professional que necessiteu per al disseny web i d'aplicacions, incloses les estructures de cable i una biblioteca de components i icones d'interfície d'usuari preconstruïts. Un dels seus avantatges són les seves eines de col·laboració, que permeten als usuaris veure, comentar i editar els mateixos fitxers des de qualsevol lloc del món.

cost:

• Pla gratuït (1 projecte)
• 8,25 $/mes (facturat anualment) [Solo]
• 19,08 $ al mes (facturat anualment) [Pro]
• 41,58 $ al mes (facturat anualment) [Equip]

Avantatges: Llocs web per crear dissenys

• funcions avançades adequades per a professionals
• una mica més barat que els llocs web de maqueta similars
• cooperació de primer nivell
• gran biblioteca de components integrada
• aplicacions mòbils i canvi de dispositiu facilitar la creació de dissenys per a dispositius mòbils

Contres:

• corba d'aprenentatge

Recomanat per…

• persones que volen una eina de disseny completa, però també tenen en compte el seu pressupost

3. InVision. Webs per a la creació de maquetes

Invisió és un competidor directe d'Adobe XD i és una altra eina de maqueta i prototipat tot en un, també amb una costosa subscripció mensual. InVision comparteix moltes de les funcions sofisticades d'Adobe XD, incloses eines d'animació precises per a la creació de prototips, però és una mica menys fàcil d'utilitzar quan es tracta d'eficiència i racionalització de les tasques.

També val la pena assenyalar que InVision és principalment una eina de prototipatge, de manera que moltes de les seves característiques se centren en la interactivitat i els efectes en lloc d'imatges estàtiques. Tanmateix, té tot el que necessiteu per crear grans dissenys perfecte amb píxels, inclosa la integració amb Photoshop i Sketch, i amb el complement gratuït Inspect, podeu transformar fàcilment qualsevol disseny en codi de desenvolupador. I per acabar, hi ha una versió gratuïta per sempre.

cost:

• Versió gratuïta
• 7,95 dòlars al mes (facturat anualment)

Avantatges: Llocs web per crear dissenys

• Apte per a tot el procés de disseny, inclosos els prototips interactius
• funcions avançades com ara animació i efectes interactius
• s'integra amb Photoshop i Sketch
• versió gratuïta

Contres:

• la usabilitat és una mica més complexa que Adobe XD

Recomanat per…

• persones que necessiten principalment una eina de prototipatge, però amb capacitats de maqueta

4. Modificador de suports. Webs per a la creació de maquetes

Allunyem-nos dels dissenys de llocs web de nivell professional... lluny des de l'hotel. Modificador de mitjans està a l'altre extrem de l'espectre: molt limitat en característiques i profunditat, però extremadament convenient. Tu pots descàrrega gratuïta de maquetes directament des del lloc, però per eliminar la marca d'aigua i obtenir versions d'alta qualitat, hauràs de pagar.

Mediamodifier és similar a un editor de fotos en línia, però amb plantilles d'aplicacions carregades prèviament i dissenys de llocs web. També tenen milers de plantilles per a més que dissenys digitals: samarretes, tasses de cafè, portades de llibres etc. Tot el que has de fer és trobar una plantilla que t'agradi, afegir la teva pròpia imatge i... bé, això és tot el que pots fer, de veritat. Aquest és un lloc web senzill amb dissenys per quan necessiteu alguna cosa ràpida i fàcil, però no per quan necessiteu impressionar algú amb gràfics d'alta qualitat.

cost:

• Pla gratuït
• 9 dòlars al mes (facturat anualment)

Avantatges: Llocs web per crear dissenys

• fàcil d'usar
• pot crear dissenys en segons
• moltes plantilles per triar

Contres:

• característiques nues
• heu de pagar per una resolució d'alta qualitat
• cal pagar per eliminar les marques d'aigua

Recomanat per…

• quan només necessites alguna cosa senzilla i ràpida
• ja heu creat una imatge, però heu de col·locar-la al fons del vostre telèfon/escriptori
• bona selecció de fons

5. MockFlow

Quan parlem de llocs web de maquetes que són adequats per a tot el procés de disseny, realment no parlem de maquetes. MockFlow és una de les eines de disseny veritablement versàtils que us portarà des de wireframes, passant per maquetes i fins a prototips.

A més de les capacitats de wireframing, MockFlow també ofereix una major flexibilitat amb complements addicionals a MockStore. Allà podeu trobar "accessoris" com ara paquets d'interfície d'usuari addicionals, plantilles de disseny de llocs web addicionals i funcions especials com ara persones d'usuari, sistemes de disseny o traductors. MockFlow també és conegut per la seva facilitat per col·laborar i compartir, el que el converteix en una solució fantàstica per als equips. Webs per a la creació de maquetes

Cost: Llocs web per crear maquetes

• Pla gratuït
• 14 $/mes (facturat anualment) [Premium]
• 30 $/mes (facturat anualment) [TeamPack amb 3 usuaris]

Pros:

• excel·lents capacitats de modelatge de filferro
• MockStore ofereix funcions addicionals
• Àmplia selecció de paquets i plantilles d'interfície d'usuari a través de MockStore

Contres:

• El pla premium costa més que un altre programari de disseny, però costa menys

Recomanat per…

• persones que necessiten eines addicionals, com ara sistemes de disseny o guió gràfic
• equips grans que necessiten funcions de col·laboració avançades
• projectes senzills i puntuals que es poden beneficiar del pla gratuït

6. Sinson. Webs per a la creació de maquetes

Sinsonte és un bon terme intermedi entre funcions àmplies i usabilitat simplificada (tot i que està qualificada com una eina de gamma alta). La característica més atractiva és el senzill editor WYSIWYG on simplement arrossegueu i deixeu anar els elements a la ubicació desitjada. Altres llocs web de maquetes principals tenen editors d'arrossegar i deixar anar, però la interfície d'usuari de Mockingbird és tan senzilla i directa que està clarament dirigida a principiants i novells.

No obstant això, el preu no és tan convenient. Amb un preu mínim d'11 dòlars al mes, aquest és un dels llocs web de disseny més cars, tot i que en realitat no ofereix res. D'altra banda, és el mateix preu per a qualsevol nombre d'empleats, així que si tens un equip prou gran, pots justificar el cost. Webs per a la creació de maquetes

cost:

• 11 $/mes (facturat anualment): 3 projectes
• 17 $ // mensual (facturat anualment): 10 projectes
• 32 $/mes (facturat anualment): 25 projectes
• 68 $ // mensual (facturat anualment): projectes il·limitats

Pros:

• extremadament còmode
• Interfície WYSIWYG
• prova gratuïta en línia

Contres: Llocs per crear dissenys

• car
• El conjunt de funcions no és tan robust com altres llocs web de disseny populars

Recomanat per…

• principiants que es veuen intimidats per interfícies més complexes
• equips grans que no poden permetre's la pertinença individual a altres llocs web de maqueta

7. MaquetesJar. Webs per a la creació de maquetes

MaquetesJar és el mateix lloc de disseny gratuït que Mediamodifier: trieu la vostra plantilla i superposeu-hi la vostra pròpia imatge. Igual que Mediamodifier, ofereixen una selecció de fotos d'arxiu, des d'ordinadors portàtils fins a tasses i samarretes, però, en A diferència Mediamodifier, podeu descarregar la versió d'alta qualitat gratuïtament. Webs per a la creació de maquetes

És possible que MockupsJar no tingui tantes plantilles de maqueta de llocs web com Mediamodifier, però la possibilitat de pujar una imatge d'alta qualitat sense pagar ho compensa. Tanmateix, només podeu pujar 20 imatges d'alta resolució; després haureu de pagar o descarregar-lo en baixa resolució. La versió gratuïta també té anuncis, però en general no està gens malament per a un lloc web de maqueta gratuït.

Cost: Llocs web per crear maquetes

• Pla gratuït
• 5 €/mes (pagament mensual)

Pros:

• fàcil només
• El pla gratuït ofereix 20 imatges d'alta resolució
• sense filigranes

Contres:

• característiques nues
• cal crear imatges en un altre lloc

Recomanat per…

• persones que els agrada la plataforma Mediamodifier però no volen pagar per eliminar les marques d'aigua

8.Moqups. Webs per a la creació de maquetes

Moqups és un altre dissenyador digital versàtil per a maquetes, prototips i, per descomptat, maquetes. El seu editor és una gran combinació de funcions avançades i controls WYSIWYG, adequat tant per a dissenyadors principiants com experimentats. Tanmateix, només tenen dos plans de preus, depenent de quants usuaris tinguis, de manera que els equips més grans de tres hauran de pagar més. Webs per a la creació de maquetes

Els usuaris lloen la capacitat de Moqups per crear diagrames de flux, que no és precisament útil per als dissenys, però és bo per a tot el procés de disseny. Tot i que una mica d'usabilitat pot ser incòmode, en general és una alternativa viable a altres llocs web de disseny genèric, sobretot si esteu igualment interessats en wireframes i prototips.

cost:

• 16 $/mes (facturat anualment) [Pro - 3 editors]
• 49 $/mes (facturat anualment) [Il·limitat - Editors il·limitats]

Avantatges: Llocs web per crear dissenys

• eina ben equilibrada per dissenyar estructures, prototips i maquetes
• Prou fàcil d'utilitzar per a principiants, prou avançat per als experts
• Funcions de planificació excel·lents, com ara diagrames de flux, mapes del lloc i guió gràfic

Contres:

• pel costat més car

Recomanat per…

• persones que prioritzen maquetes i prototips al mateix nivell que les maquetes

9. Smartmockups. Webs per a la creació de maquetes

maquetes intel·ligents està a la mateixa categoria que Mediamodifier i MockupsJar, però amb una millor integració. Això és molt important si heu fet una captura de pantalla d'alta resolució de la vista prèvia a l'aplicació Marvel i només voleu col·locar-la en un fons d'escriptori de mostra. Smartmockups també té més funcions de personalització que altres llocs web gratuïts amb maquetes, com ara canviar els colors, però aquesta funció només està disponible amb un pla de pagament. Webs per a la creació de maquetes

Igual que amb altres llocs web de maquetes gratuïts, no espereu massa més enllà de tenir la vostra imatge superposada al fons de la plantilla. La versió de pagament té accés a més de 6000 plantilles d'imatge per a una varietat de fons, com ara samarretes, targetes de visita i dispositius digitals. El pla gratuït encara ofereix unes 800 plantilles de disseny, però haureu de fer front a les filigranes.

cost:

• Versió gratuïta
• 9 dòlars al mes

Avantatges: Llocs web per crear dissenys

• s'integra amb Marvel App, Dropbox, Figma, Unsplash i Canva
• el pla de pagament us permet personalitzar la imatge
• ràpid i fàcil

Contres:

• El pla gratuït té marques d'aigua
• cal crear imatges en un altre lloc

Recomanat per…

• treballes principalment a Marvel App, Canva o Figma

Per què no ser un professional?

Com dèiem anteriorment, l'únic propòsit de les maquetes és tenir un bon aspecte. Si l'èxit de la vostra maqueta és molt important (potser necessiteu guanyar-vos a una part interessada insatisfet o presentar una idea per obtenir més finançament), definitivament voleu que la vostra maqueta sembli perfecta. En aquest cas, per què no deixar-ho en mans d'un professional. Webs per a la creació de maquetes

Quan contracteu un dissenyador autònom, esteu posant el vostre disseny en mans d'un expert que entén els detalls del disseny. No us haureu de preocupar pels preus del programari o les corbes d'aprenentatge perquè el dissenyador s'encarregarà de fer-ho per vosaltres. I amb la nostra comunitat de dissenyadors d'arreu del món, segur que hi trobareu dissenyar amb aquest estilel que necessites!

  «АЗБУКА»