Bästa resurserna för sketching Grid-Based Wireframes

Processen utforma ett gränssnitt börjar alltid med idé generation. Detta inkluderar visualisering, undersökning av andra webbplatser och snabb prototypning. Denna tidiga idéfas är avgörande för förstå layout och användarupplevelse du tänker bygga. Så hur ska du faktiskt utföra wireframingarbetet på ett nytt projekt?

Jag är ett fan av traditionellt papper och penna med extra verktyg efter behov. Men digital trådframställning är också stor, och det är ett lönsamt alternativ för moderna designers. I den här artikeln vill jag dela med dig av de bästa resurserna för båda teknikerna för att hjälpa dig skapa din egen nätbaserade användargränssnitt.

Tidig UI / UX-konceptualisering

Låt oss börja med att klargöra skillnaderna mellan a trådmodell och a prototyp. Dessa två ord används ofta omväxlande eftersom de relaterar till samma process.

en trådmodell är en enkel statisk skiss av användargränssnittet på en webbsida eller en app. Det kan ha callouts för att förklara knapptext, marginaler, elementstorlekar eller till och med animeringar. Men wireframes är bara grova utkast för enskilda sidor.

På samma sätt a prototyp är som a flödesdiagram som visar hur olika sidor länkar samman. Så en prototyp ansluter wireframes för att visa hur olika knappar eller länkar borde leda till andra sidor.

Dessa definitioner är inte snidade i sten, vissa designers kan ha sin egen terminologi och kan inte hålla med min exakta ordalydelse. Men det här är hur jag har sett dem beskrivet, och det är så många designers som förstår dessa villkor.

Så vad ska du exakt göra med dessa tidiga konceptuella bitar? Är de verkligen nödvändiga? Jag skulle säga att prototyper inte alltid är nödvändiga, men det är en mycket bra idé, särskilt för att designa appar med komplexa interaktioner.

Men trådframställning är alltid en bra idé för varje nytt projekt. Det hjälper dig fokusera på den stora bilden utan att oroa sig för detaljer. Du får en känsla av hur den övergripande sidan är utlagd, och det är ovärderligt när du utformar en konkret layout.

Mål för Wireframing

Varje gång du börjar ett nytt projekt bör du tänka på vad du försöker lösa. Varje webbplats är byggd med ett specifikt mål i åtanke. Många webbplatser har till och med flera mål där vissa mål är viktigare än andra.

Använd wireframing som en guide för att hjälpa dig hitta den bästa strategin för fånga målen / målen på en webbplats. Detta kommer förmodligen inte att hända på den första wireframen, så var beredd att skissa många olika idéer.

Titta på andra liknande webbplatser och skriv ner de bästa funktionerna. Analysera hur innehållet är organiserat och hur du rör dig genom varje sida.

Tänk på trådramar från en interaktiv ståndpunkt. Det här är inte bara vackra bilder. De är representationer av digitala gränssnitt, och du vill skissa dina idéer med det i åtanke.

Att ha rutnätbaserade resurser till hands, oavsett om de är gjorda av papper eller om de är digitala, kan hjälpa till mycket i snabb skiss. Låt oss nu kolla in de bästa resurserna för att skapa wireframes.

Grid Sketchpads

Du kan alltid börja med grundläggande miniatyrskisser på skrivarpapper bara till kartlägga grova idéer. Personligen börjar jag vanligtvis jobba på skrivpapper, för det här sättet är jag mindre bekymrad över nät och mer om generera idéer.

Dot grid sketchpads är det bästa sättet att gå om du vill städa upp en idé, och ge det mer struktur. Nätet hjälper dig uppskatta avstånd mellan objekt på sidan och skapa ett slags symmetri i trådramen.

Det finns många bra produkter där ute om du vill starta trådframställning på papper, till exempel Rhodia Dot Pad kommer i olika storlekar för daglig användning. Den kommer bara med 80 sidor, men det är ganska typiskt för de flesta rutnät skissböcker.

En annan väldigt cool och anpassningsbar produkt är Dotgrid. Alla Dotgrids objekt är dyrare än Rhodia-böcker, men de kommer med mer material och anpassade omslagsdesign.

Dotgrid accepterar även skräddarsydda beställningar som låter dig designa din egen sketchpad. Varje bok innehåller knappt 100 ark, inklusive fronten och baksidan får du cirka 200 sidor för rutnätskissning.

Ett par andra prickskissböcker som jag vill nämna inkluderar Behance Dot Grid som är inbundet och spiralbundet, även om det bara innehåller 50 ark papper.

Responsive Design Sketchbook är en av de bästa resurserna för webbdesigners. Ingen annan produktdesigner skulle behöva en responsiv design skissbok, men webbdesigners dra stor nytta av friheten att generera idéer vid olika enhetens bredder ovanpå en rutnätlayout.

Dessa reagerande designkuddar har också 50 ark totalt 100 sidor, men varje sida har fyra olika responsiva nät representerar olika brytpunkter i responsiv design: skrivbord, bärbar dator, surfplattform och smartphone.

Även om designen är intetsägande jämfört med Dotgrid-böckerna, har ingen annan ansett responsiva skissböcker för webbdesigners. Om du är i den där typen är det värt att beställa en för en provkörning.

Om du verkligen är in i handgjorda saker, och vill inte spendera några pengar kan du också skriv ut dina egna sidor med gränssnittskiss. Denna gratis webbplats erbjuder olika gallermallar som du kan skriva ut och använda för handdragen trådramar.

Gridarna finns i A4- och US-bokstorlekar för olika stilar av skrivarpapper. Du kan välja mellan många alternativ, till exempel mallar för en webbläsare med full längd eller olika iPhone-skärmar.

Alla dessa alternativ är stora, och väl värda att utforska om du är in penna skiss. Papper är ett av de enklaste mediet för att snabbt hitta nya idéer, så det är ofta det föredragna valet även av UI-designers.

Digitala verktyg och webbapplikationer

Det finns så många bra wireframingprogram där ute, att de knappast kan täckas utan att riskera analysförlamning, så låt oss nu fokusera på några av de bästa alternativen för nätbaserad trådframställning.

Först vill jag nämna att du kan använda Adobe-verktyg som Illustrator till skapa egna trådramar. Det här är inte en del av allas arbetsflöde och Illustrator är verkligen inte ledigt. Men om du redan arbetar med Adobe Creative Cloud så kan det vara ett bra ställe att börja.

1. Moqups

Moqups är ett av de bästa onlineverktygen för wireframing. Du arbetar med en visuell redaktör och ett bibliotek med tillgångar för att dra och släppa över hela sidan.

Varje nytt Moqups-projekt har en fördefinierat rutnät, och använder ljusa lila linjer för att hjälpa dig att snäppa in elementen i linje. Det är ett bra webbverktyg som gör det enklare att designa med ett rutnät.

Webbplatsen fungerar som standard på en fri plan som begränsar användaren till 300 sidobjekt. Webbplatsen har premiumalternativ men betala en månadsavgift kan vara mer irriterande än att bara gå med Adobe-verktyg eller ett enstaka köp av Sketch.

2. Grid Papr

Grid Papr webapp är helt gratis, och erbjuder både offentliga och privata konton för dina trådramar. Du skapar ett namn för ditt projekt och får din egen unika URL för den trådframställning som du kan redigera från vilken dator som helst.

Varje ny trådram kommer med ett rutnät som låter dig utföra snap-to-grid på alla element. Funktionerna är enkla, men de räcker till Skapa en lo-fi wireframe på några minuter. Dra bara vad du vill ha på sidan, och följ rutnätet för att skapa en stellar wireframe.

3. Wireframe.cc

Wireframe.cc är ett av de enklaste och mest minsta verktygen du kan använda för trådframställning. Den har en ruttfritt gränssnitt med en förbyggt rutnät och organiserade verktygsfält. Du klickar helt enkelt och dra för att skapa nya element på duken. Du kan också spara och dela ditt arbete.

Detta är ett annat verktyg som erbjuds gratis med tilläggsplaner. Varje plan faktureras månadsvis, så det ligner mycket på Moqups i prisstruktur. Det fria verktyget kan användas från vilken dator som helst utan ett konto.

4. Mockingbird

Mockingbird är ett annat bra alternativ, som erbjuder mycket fler funktioner än de flesta wireframingverktyg. Du kan komma igång gratis men rättegången är begränsad till 7 dagar. Detta kan vara irriterande för vissa användare, men verktyget är verkligen otroligt och körs i alla webbläsare.

Mockingbird har ett oändligt bibliotek av UI-element såsom flikar, dragspel, rullgardinsmenyer, videospelare och enkla textlänkar. Standardnätet använder 960gs-nätverket, men du kan välja mellan 12, 16 och 24 kolumner.

Slutord

Oavsett om du väljer traditionell eller digital wireframing handlar det alltid om produktionens kvalitet. Det finns mycket att lära sig när du gör den här typen av arbete, så hitta vilket verktyg som helst som är mest bekvämt för dig.

Att flytta fram det bästa att göra är bara starta wireframing. Få en känsla för vad du gillar bäst (papper eller digitalt), och gör det själv. Resurserna i den här artikeln bör ge dig mer än tillräckligt för att komma igång med trådframställning av egna digitala gränssnitt.

(Cover foto av Oykun Yilmaz)