Adobe Illustrator är på väg tillbaka i webbdesignvärlden. Det är inte bara SVG som börjar användas allmänt på nätet, utan fler och fler designers använder vektorer för wireframing. Följande tips hjälper dig att få ut det mesta av Illustrator som verktyg för wireframing.

Wireframing handlar om att arbeta snabbt och iterera snabbt. Målet är inte att skapa attraktiva gränssnitt, utan din främsta prioritet är att utforma information och upplevelser.

1. Go Monochrome

Wireframes tydliggör hierarkin på en webbsida; de visar visuellt i vilken ordning användarna ska bearbeta den tillgängliga informationen. Om du vill att användarna ska bearbeta rubriken innan de trycker på knappen ”köp nu” måste rubriken ”övertrumfa” knappen genom att kräva mer uppmärksamhet.

Denna visuella hierarki kan definieras på ett antal sätt. Vi kan använda storleken för att göra rubriken mer effektfull, vi kan använda positionering (genom att placera den före knappen). Vi skulle kunna använda färg, kontrast och en rad andra saker, men att göra det i en wireframe gör bara saker och ting mer förvirrande.

Om man tar bort färg från ekvationen blir det visuella förhållandet som definieras av position, storlek och (om man vill ta ett extra steg) kontrast mycket renare.

Vi bygger inte vackra, pixel-perfekta UI-kits här. Håll dig till ett begränsat utbud av gråtoner och använd färg endast för etiketter och anteckningar.

2. Behåll lager för specifika ändamål

När det gäller etiketter, anteckningar och kommentarer är det en bra idé att placera var och en av dem på ett särskilt lager. Samma sak gäller för allt annat som har ett specifikt syfte; till exempel beteende, interaktion, gester och så vidare.

Placera visuellt material på ett lager, beteende på ett annat och etiketter på ett annat, så att du enkelt kan växla deras synlighet när det behövs.

3. Utnyttja symboler

D.R.Y. används i allmänhet som en programmeringsterm, men är lika tillämpbart på arbetsflöde för design. I varje given wireframe kommer vi att använda och återanvända vissa objekt. Om du förvandlar dessa objekt till symboler kommer alla ändringar du gör i ett av dem omedelbart att återspeglas i resten.

Till exempel, här är ett enkelt formulärfält:

Låt oss dra det in i rutan Symboler (Skift + Kommando + F11)

Vi kan nu dra den här symbolen från rutan Symboler, så många gånger som vi vill, till artboarden. Genom att dubbelklicka på någon av dem isolerar vi den (lite som grupperade objekt) så att vi kan redigera den. Alla ändringar vi gör, i det här fallet avrundning av rektangelns hörn, kommer att tillämpas på var och en av de formulärfältssymboler vi har använt.

När vi har en samling symboler kan vi också spara dem som en uppsättning:

Detta gör det möjligt för oss att läsa in dem i andra filer i framtiden.

Om du vill lära dig mer om symbolpaletten kan du läsa Quick Tip: Arbeta med symboler i Adobe Illustrator.

4. Pilspetsar är perfekta för att peka

Ett bra tips är att utnyttja streckpilspetsar, något som är lättillgängligt i Illustrator direkt ur lådan sedan CS5. Wireframes är det perfekta tillfället att visuellt beskriva interaktioner, applikationsflöden, navigering och rörelser.

Nuförtiden kan vi enkelt lägga till pilspetsar till streck, direkt från rutan Stroke.

Vi kan till och med redigera Illustrators källfil ”Arrowheads.ai”, som Ryan Cornwell förklarar, och lägga till egna pilspetsar i blandningen.

Notera: Det är irriterande att droppverktyget inte tillämpar pilspetsar tillsammans med andra streckstilar, så det är inte så enkelt som det skulle kunna vara att duplicera den effekt du har valt. Men de är ändå perfekta för wireframing.

5. Snap to Grid för enhetligt avstånd och storlek

På många sätt är detta en fortsättning på att inte använda färg. Att förenhetliga dimensioner och avstånd tar bort ett element av distraktion från wireframes och hjälper oss att visuellt koncentrera oss på det som är viktigt.

Det spelar ingen roll om de exakta dimensionerna inte återspeglar hur användargränssnittet kommer att se ut längre fram; så länge hierarkin och relationerna förblir korrekta är vi redo.

Använd ett rutnät på ditt Artboard genom att gå till Visa > Visa rutnät. Om du väljer View > Snap to Grid kan du placera dina objekt med precision.

För att specificera exakt hur du vill att ditt rutnät ska se ut (och kom ihåg att du inte är ute efter små detaljer här) går du till Illustrator > Preferences > Guides & Grid.. Där kan du definiera avståndet mellan rasterlinjerna och sedan ange hur många underindelningar du vill ha inom dessa linjer.

Notera: Du får gärna färga ditt raster i något annat än grått; det kommer inte att vara en del av slutprodukten.

6. Använd grafiska stilar för flexibla knappar

Avhängigt av trovärdighetsnivån (hur trogen mot den slutliga webbplatsen du siktar på) kan du ha riktig text i till exempel knappar. För att få dessa knappar att växa och krympa beroende på innehållet i dem ska du inte använda objekt, utan grafiska stilar.

Låt oss börja med en sträng med blindtext.

Nu öppnar vi rutan Utseende genom att gå till Fönster > Utseende.

Med hjälp av rutan Utseende kan du lägga till flera fyllningar till ett objekt. Vi kan lägga dessa fyllningar i lager i den ordning vi vill att de ska visas; i den här bilden kan du se flera, alla staplade ovanpå varandra.

För tillfället behöver vi bara två fyllningar, så låt oss lägga till en mörk fyllning för texten och sedan en ljusare färg för bakgrunden.

För tillfället kan vi inte se den ljusgrå bakgrunden, eftersom den har exakt samma form som den översta fyllningen. Vi kan dock isolera och manipulera varje fyllning separat. Välj den nedre fyllningen i rutan Utseende och gå sedan till Effekt > Konvertera till form > Avrundad rektangel…

Inställ några inställningar, vad du vill, se bara till att storleken är relativ till objektet vi tillämpar det här på.

Den ljusgrå fyllningen längst ner har nu fått formen av en avrundad rektangel, i förhållande till textens storlek. En knapp! Om du vill tillämpa det här utseendet på andra objekt öppnar du rutan Grafiska stilar och drar in hela knappen i den. Dess utseende kommer att sparas som en stil som du kan återanvända.

Till exempel, här är en längre textsträng. När texten är markerad klickar du på den nyskapade grafiska stilen (som jag dubbelklickade på och döpte om) för att tillämpa den direkt.

7. Konfigurera några vanligt förekommande artboards

Snabbhet är A och O vid wireframing! Klottra ner en layout, gå vidare, klottra ner en annan, gå vidare. Det är därför vettigt att ha en färdig startpunkt som du lätt kan komma åt. Du kanske tycker att du arbetar bäst med en stor artboard först och drar de färdiga objekten till en separat fil, eller så föredrar du att arbeta direkt med artboards i rätt storlek.

Här är till exempel en layout med en iPad-skärm (1536x2048px) och fyra iPhone 4S-skärmar (640x960px), men du kan förbereda en fil med ett valfritt antal exempel på enhetsskärmar. Du kan antingen ställa in dina önskade dimensioner manuellt eller välja någon av de tillgängliga förinställningarna från Artboard Options:

Inkludera alla gemensamma guider, lagernamn, symboluppsättningar osv. som du kan komma att använda, och spara sedan det hela som en mall för framtida användning (Fil > Spara som mall…) Den här utgångspunkten kommer sedan att vara tillgänglig för dig genom att gå till Fil > Nytt från mall…, komplett med alla de bitar som du lämnade där.

8. Använd TextExpander för blindtext

Illustrator levereras inte med några verktyg för blindtext. Det finns några skript som är värda att leka med, men det enklaste sättet att få in dummytext i dina Illustrator Wireframes är att använda TextExpander.

Notera: Om du är Windows-användare erbjuder PhraseExpress liknande funktionalitet som TextExpander

Lägg till en serie textstycken som du ofta använder för wireframes (t.ex. en stor rubrik, en kort rubrik, textstycken i olika längder, typisk knapptext, menyalternativ och så vidare), så att de är lättillgängliga i Illustrator.

Du definierar en nyckelfras för varje utdrag och TextExpander ersätter den frasen med ditt innehåll när du skriver det, vilket sparar massor av tid. Du kan också använda mappalternativen för att se till att dessa utdrag endast gäller i Illustrator om du vill det.

Om du vill veta mer om hur du optimerar ditt TextExpander-arbetsflöde kan du ta en titt på Master TextExpander With These Helpful Tips & Tricks.

9. Öva på logisk filnamnering

Att snabbt kunna visualisera ändringar och idéer är kärnan i wireframing, men det kan leda till en stor hög med oorganiserade filer om du inte är försiktig. Nyckeln är att spara i viktiga skeden och med logiska filnamnskonventioner.

Till exempel kanske vi vill börja varje filnamn med namnet på den sida vi arbetar på. Sedan kan det vara förnuftigt att använda något slags variantnamn och därefter versionsnumret: page-variant-version.ai

Till exempel kan vi arbeta på en landningssida, en sida som är inriktad på att marknadsföra antingen en e-postkampanj eller en e-bok. Vi kan ha filnamn som:

Detta håller inte bara projektmapparna organiserade, utan fungerar också som en form av manuell versionshantering. Matt Smith diskuterar idén mer i sin artikel Wireframing With Illustrator and InDesign.

10. Spara i Dropbox för enkel versionshantering

Om du går ännu längre med idén om versionshantering kan du spara dina filer direkt i Dropbox och ta bort den uppgiften helt och hållet från din todo-lista. Även den kostnadsfria planen från Dropbox lagrar en kopia av dina filer varje gång du sparar dem, i trettio dagar.

Likaså erbjuder Layervault liknande fantastiska saker i sin kostnadsfria plan.

I båda fallen är detta särskilt användbart om du samarbetar med ett team. Att ha alla medlemmar som arbetar från en central plats, med möjlighet att återställa alla versioner om någon gör något konstigt, är idealiskt för lagarbete.

Slutsats

Många av de här tipsen är helt personliga för mitt eget arbetsflöde och kanske inte kan översättas perfekt till ditt eget sätt att göra saker och ting. Jag hoppas dock att de åtminstone väcker lite nyfikenhet, för att få dig att tänka på hur du utformar webblayouter. Om du har några andra egna tips, dela gärna med dig av dem i kommentarerna!

Fortsatt läsning

• Wireframing med InDesign och Illustrator
• Wireframing med Illustrator och InDesign (subtil skillnad!)
• En nybörjarguide för wireframing
• Illustrator och pilspetsar