Hoe Wireframes op uw tablet te ontwerpen
Het lijdt geen twijfel dat mobiele apparaten "het (huidige) grote ding" zijn. Dit is precies waar tientallen jaren van computertechnologie ons heeft geleid. Deze kleine tablets en telefoons (en nu horloges) ... dit zijn de schermen waarvan de meesten van ons informatie gebruiken.
Die informatie zou honderdveertig tekens lang kunnen zijn, onze favoriete programma's op Netflix ( hoest Ridders van Sidonia- hoest ), of gewoon goede muziek. We lezen e-mails, chatten en spelen spellen.
Langzaam beginnen we ook inhoud op deze apparaten te creëren. Tabletten kunnen best goed zijn om te schrijven en de camera's op onze telefoons worden elk jaar beter. We nemen podcasts op iPhones op en er zijn zelfs een paar apps om audio / video te bewerken.
De desktopcomputer lijkt te zijn gedegradeerd tot resource-intensieve taken. Het wordt het domein van hobbyisten, knutselaars en high-end gamers. Oh, en webontwerpers.
We hebben misschien nooit pixel-precieze grafische bewerkingen op een tablet. Dat is prima. Er zijn echter delen van het ontwerpproces die kunnen worden verplaatst naar het aanraakscherm.
Wat ik nodig heb in een wire-framing-app
Dit is wat ik nodig heb in een wire-framing-app:
- een paar basisvormen om mee te werken;
- om deze objecten eenvoudig te kunnen plaatsen, rangschikken en opnieuw in te delen;
- functies voor samenwerking, delen en exporteren.
De apps
Mijn favoriete wire-framing-app aller tijden is Google's Drawing-applicatie. Het doet alles wat ik nodig heb en heeft bovendien geweldige functies voor delen en samenwerken.
Hoewel Google Android-apps heeft gemaakt voor de tekstdocumenten en spreadsheets, is er een manier om Google Draw op Android te laten werken. Het werkt ook niet in de browsers.
Er zijn een aantal speciaal voor Android ontwikkelde apps die wel werken. Deze zal ik grondig bespreken, omdat ik ze heb kunnen uittesten. Ik zal ook een paar apps voor iOS vermelden.
Native Android-apps
Mocking Pal (gratis)
Voor zijn prijs, Mocking Pal doet fantastisch werk. Het bereik van beschikbare elementen is eenvoudig, maar voldoende voor de meeste web-wire-frame projecten. De prestaties zijn redelijk en de app bevat enkele slimme opties.
Het echt coole ding, denk ik, is Live Share. Kortom, u kunt een link naar uw project delen en iedereen die naar die link gaat, kan het draadframe bekijken terwijl u het in realtime bouwt.
Mockups voor Android (ongeveer $ 5)
Mockups voor Android kost ongeveer 5 USD, maar het bevat veel functies. Het heeft niet veel UI-elementen, maar het werkt snel en doet zijn werk goed. Wanneer u klaar bent, kan het uw projecten naar verschillende bitmapindelingen en SVG exporteren.
Het belangrijkste nadeel is dat het in het begin niet erg gebruiksvriendelijk is. Je moet aan de werkstroom wennen. Toch is het niet slecht.
Mockups.me Wireframes ($ 20)
Met een gewicht van 20 USD, deze app geeft je het gevoel dat het beter is om geweldig te zijn! En het is best gaaf. Waar de andere wire-framing-apps die beschikbaar zijn voor Android, beperkte bibliotheken met UI-elementen hebben, heeft deze tonnen.
Het moet, omdat het compatibel is met Balsamiq bestanden, zodat u dingen in Balsamiq kunt maken en overal mee naartoe kunt nemen.
De killer-functie is volgens mij de implementatie van gebaren. Je kunt snel elementen aan je canvas toevoegen door er alleen maar op te tekenen.
Last but not least zijn er web- en desktopversies van de app, wat betekent dat u online kunt samenwerken en overal toegang hebt tot uw werk.
FlexiSketch
Een gratis app met geweldige prestaties, FlexiSketch is geen op zichzelf staande app om draadlijsten te maken, maar kan er snel één worden. Het is een app voor het tekenen van vectoren, maar hier is de draai: elk object dat u tekent, kan snel worden opgeslagen als zijn eigen "objecttype".
Je kunt meer van elk objecttype naar wens naar het canvas slepen en neerzetten, waardoor je in essentie je eigen bibliotheek met elementen creëert. Als u veel aangepaste elementen nodig heeft, is dit de app voor u.
Native iOS-apps
Mockups.me Wireframes ($ 20)
Dat is juist! Er is een iOS-versie van deze app ook. Het heeft exact dezelfde functionaliteit als zijn Android-tegenhanger, dus het moet redelijk goed zijn.
De prijs is ook hetzelfde. Als je het geld hebt, zeg ik: "Heb er zin in!"
iMockups ($ 7)
Deze is een andere met ondersteuning voor Balsamiq, maar het kost slechts 7 USD. Met lovende kritieken van veel mensen richt iMockups zich op het gebruik van de multi-touch-ondersteuning en andere functies van iPads om het draadaanlegproces te versnellen.
Keynote ($ 10)
Nee, eigenlijk maak ik geen grapje. Deze 10 dollar app voor het maken van presentaties heeft eigenlijk een vrij grote fanfare met een draadframe.
En waarom niet? Het zijn allemaal vectorafbeeldingen. Het formaat is standaard in het Apple-couplet. U kunt schermen aan elkaar koppelen om een interactiever prototype te maken, de werken! Er is zelfs een toolkit of twee daar om het inlijsten van de app gemakkelijker te maken.
Adobe Ideas (gratis)
Eindelijk! Een gratis optie! Onthoud, deze is technisch gezien geen app om draadlijsten te maken. Het is meer een app voor het tekenen van vectoren. In sommige opzichten maakt dit het minder nuttig, en in andere, krachtiger.
Algemene problemen
Wire-framing op een tablet kan lastig zijn. Sommige van de apps die ik tegenkwam zijn resource-hogs. Bovendien is het moeilijk om elementen gelijkmatig te plaatsen. Er zijn 'snap-to-guide'-functies in de meeste van deze apps, maar ze zijn beperkt. Ik wou dat het "snapping" effect een beetje sterker was.
Mocking Pal lost dit probleem op door enkele richtingspijlen te bieden die het geselecteerde element één pixel per keer verplaatsen. Dit is echter een langzame oplossing en daarom niet helemaal ideaal. Het is ook de enige app die ik heb geprobeerd die het probleem daadwerkelijk aanpakt.
Welke oplossing u uiteindelijk kiest, hangt af van uw voorkeur. Maar er zijn absoluut enkele sterke opties die ervoor zorgen dat je vast komt te zitten in je woon-werkverkeer, in bad, of in je plaatselijke koffiewinkel.