Adobe Illustrator is bezig aan een comeback in de wereld van webdesign. Niet alleen wordt SVG steeds vaker online gebruikt, maar ook maken steeds meer ontwerpers gebruik van vectoren voor wireframing. Met de volgende tips haal je het meeste uit Illustrator als tool voor wireframing.

Wireframing draait om snel werken en snel itereren. Het doel is niet om aantrekkelijke interfaces te maken; je eerste prioriteit is om informatie en ervaring te ontwerpen.

1. Ga monochroom

Wireframes maken de hiërarchie op een webpagina duidelijk; ze laten visueel zien in welke volgorde gebruikers de beschikbare informatie moeten verwerken. Als je wilt dat gebruikers eerst de kop lezen voordat ze op de “koop nu”-knop drukken, moet de kop de knop “overtroeven” door meer aandacht te vragen.

Deze visuele hiërarchie kan op een aantal manieren worden gedefinieerd. We kunnen de grootte van de kop gebruiken om hem meer impact te geven, we kunnen hem positioneren (door hem vóór de knop te plaatsen). We kunnen kleur, contrast en nog veel meer gebruiken, maar als we dat in een wireframe doen, wordt het alleen maar verwarrender.

Door kleur uit de vergelijking te halen, wordt de visuele relatie die wordt bepaald door positie, grootte en (als je een stapje verder wilt gaan) contrast, veel zuiverder.

We bouwen hier geen mooie, pixel-perfecte UI-kits. Blijf bij een beperkt aantal grijstinten en gebruik kleur alleen voor labels en notities.

2.

Over labels, notities en opmerkingen gesproken, het is een goed idee om ze allemaal op een aparte laag te zetten. Hetzelfde geldt voor al het andere dat een specifiek doel heeft, zoals gedrag, interactie, gebaren enzovoort.

Plaats visuals op de ene laag, gedrag op een andere en labels op een andere, zodat je gemakkelijk tussen hun zichtbaarheid kunt schakelen wanneer dat nodig is.

3. Gebruik symbolen

D.R.Y. wordt over het algemeen gebruikt als een programmeerterm, maar is net zo goed van toepassing op de ontwerpworkflow. In een bepaald wireframe gaan we bepaalde objecten gebruiken en hergebruiken. Zet deze objecten om in symbolen en alle wijzigingen die u in één object aanbrengt, worden direct doorgevoerd in de rest.

Een eenvoudig formulierveld bijvoorbeeld:

Sleep het naar het deelvenster Symbolen (Shift + Command + F11)

Dit symbool kunnen we nu zo vaak als we willen van het deelvenster Symbolen naar het tekenbord trekken. Door op een van deze symbolen te dubbelklikken, kunnen we het isoleren (een beetje zoals gegroepeerde objecten) zodat we het kunnen bewerken. Alle wijzigingen die we aanbrengen, in dit geval het afronden van de hoeken van de rechthoek, zullen worden toegepast op elk van de formulierveldsymbolen die we hebben gebruikt.

Als we eenmaal een verzameling symbolen hebben, kunnen we ze ook opslaan als een set:

Dit stelt ons in staat om ze in de toekomst in andere bestanden te laden.

Als u meer wilt weten over het symbolenpalet, kijkt u dan eens naar Snelle tip: Werken met symbolen in Adobe Illustrator.

4. Pijlpunten zijn perfect om te wijzen

Een geweldige tip is om gebruik te maken van pijlpunten, iets dat sinds CS5 direct uit de doos beschikbaar is in Illustrator. Wireframes zijn de ideale gelegenheid om interacties, applicatiestromen, navigatie en beweging visueel te beschrijven.

Dezer dagen kunnen we gemakkelijk pijlpunten toevoegen aan lijnen, rechtstreeks vanuit het deelvenster Lijn.

We kunnen zelfs het Illustrator-bronbestand “Arrowheads.ai” bewerken, zoals uitgelegd door Ryan Cornwell, en onze eigen pijlpunten toevoegen aan de mix.

Opmerking: het is vervelend dat het pipet-gereedschap geen pijlpunten toepast samen met andere lijnstijlen, dus het is niet zo eenvoudig als het zou kunnen zijn om het effect dat je hebt gekozen te dupliceren. Maar toch, ze zijn perfect voor wireframing.

5. Snap to Grid for Unified Spacing and Sizing

In veel opzichten is dit een vervolg op het niet gebruiken van kleur. Het uniformeren van afmetingen en spatiëring verwijdert een element van afleiding uit wireframes, waardoor we ons visueel kunnen concentreren op wat belangrijk is.

Het maakt niet uit als de exacte afmetingen niet weergeven hoe de UI er later uit zal zien; zolang de hiërarchie en relaties kloppen, zijn we goed om te gaan.

Toepassen van een raster op uw Artboard door te gaan naar Beeld > Toon raster. Door Beeld > Aan raster vastklikken te selecteren, kunt u uw objecten met precisie positioneren.

Om precies aan te geven hoe u wilt dat uw raster eruit ziet (en onthoud, u gaat hier niet voor kleine details) gaat u naar Illustrator > Voorkeuren > Hulplijnen & Raster. Daar kunt u de afstand tussen de rasterlijnen bepalen, en vervolgens aangeven hoeveel onderverdelingen u binnen die lijnen wilt.

Note: Voel u vrij om uw raster in iets anders dan grijs te kleuren; het zal geen deel uitmaken van het eindproduct.

6. Gebruik Grafische Stijlen voor Flexibele Knoppen

Afhankelijk van de mate van waarheidsgetrouwheid (hoe waarheidsgetrouw de uiteindelijke website is die u voor ogen hebt) kunt u tekst in bijvoorbeeld knoppen hebben. Om deze knoppen te laten groeien en krimpen afhankelijk van de inhoud, gebruik je geen objecten, maar grafische stijlen.

Laten we beginnen met een reeks dummy tekst.

Nu openen we het paneel Uiterlijk door naar Venster > Uiterlijk te gaan.

Met het deelvenster Uiterlijk kunt u meerdere vullingen aan een object toevoegen. We kunnen deze vullingen in lagen aanbrengen in de volgorde waarin we ze willen weergeven; in deze afbeelding zie je er meerdere, allemaal boven op elkaar gestapeld.

Voorlopig hebben we slechts twee vullingen nodig, dus laten we een donkere vulling toevoegen voor de tekst, en vervolgens een lichtere kleur voor de achtergrond.

Op dit moment kunnen we de lichtgrijze achtergrond niet zien, omdat deze precies dezelfde vorm heeft als de bovenste vulling. We kunnen echter elke vulling apart isoleren en manipuleren. Selecteer de onderste vulling in het deelvenster Uiterlijk en ga dan naar Effect > Converteren naar vorm > Afgeronde rechthoek…

Voer enkele instellingen in, wat u maar nodig acht, zorg er alleen voor dat de grootte relatief is aan het object waarop we dit toepassen.

De lichtgrijze vulling aan de onderkant heeft nu de vorm van een afgeronde rechthoek gekregen, relatief aan de grootte van de tekst. Een knop! Om dit uiterlijk op andere objecten toe te passen, opent u het deelvenster Grafische stijlen en sleept u de hele knop erin. De verschijningsvorm wordt opgeslagen als een stijl die u kunt hergebruiken.

Hier vindt u bijvoorbeeld een langere reeks tekst. Als de tekst is geselecteerd, klikt u op de nieuwe grafische stijl (die ik heb gedubbelklikt en hernoemd) om deze direct toe te passen.

7. Stel enkele veelgebruikte tekenborden op

Snelheid is de naam van het spel bij wireframing! U krabbelt een lay-out neer, gaat verder, krabbelt een andere neer, gaat verder. Daarom is het zinvol om een kant-en-klaar startpunt te hebben waar je makkelijk bij kunt. Misschien werkt u het beste op een groot artboard en zet u de uiteindelijke objecten in een apart bestand, of werkt u liever direct met artboards van de juiste afmetingen.

Hier ziet u bijvoorbeeld een lay-out met een iPad-scherm (1536x2048px) en vier iPhone 4S-schermen (640x960px), hoewel u een bestand kunt maken met een willekeurig aantal schermvoorbeelden van apparaten. Stel de gewenste afmetingen handmatig in, of kies uit een van de beschikbare voorinstellingen in de Artboard-opties:

Voeg alle gebruikelijke hulplijnen, laagnamen, symbolensets enz. die u zou kunnen gebruiken, sla het geheel dan op als sjabloon voor toekomstig gebruik (Bestand > Opslaan als sjabloon..) Dit uitgangspunt zal dan beschikbaar zijn voor u door te gaan naar Bestand > Nieuw van sjabloon.., compleet met alle stukjes en beetjes die u daar hebt achtergelaten.

8. Gebruik TextExpander voor dummytekst

Illustrator wordt niet geleverd met dummytekst tools. Er zijn enkele scripts die de moeite waard zijn om mee te spelen, maar de eenvoudigste manier om dummytekst in je Illustrator Wireframes te krijgen, is door TextExpander te gebruiken.

Note: als je een Windows-gebruiker bent, biedt PhraseExpress vergelijkbare functionaliteit als TextExpander

Voeg een reeks tekstfragmenten in die je vaak gebruikt voor wireframes (zoals een grote koptekst, een korte koptekst, tekst van verschillende lengtes, typische knoptekst, menu-items enzovoort), zodat ze direct beschikbaar zijn vanuit Illustrator.

Door voor elk knipsel een sleutelzin te definiëren, vervangt TextExpander die zin door uw inhoud wanneer u die typt, waardoor u zakken met tijd bespaart. U kunt ook de mapopties gebruiken om ervoor te zorgen dat deze knipsels alleen in Illustrator worden toegepast, mocht u dat willen.

Om meer te weten te komen over het optimaliseren van uw TextExpander-workflow, kunt u een kijkje nemen op Master TextExpander With These Helpful Tips & Tricks.

9. 9. Oefen Logische Bestandsbenaming

Het snel kunnen visualiseren van veranderingen en ideeën is de kern van wireframen, maar dit kan leiden tot een enorme stapel ongeorganiseerde bestanden als je niet oppast. De sleutel is om op te slaan in belangrijke stadia en met logische bestandsnaam conventies.

Bij voorbeeld, we zouden elke bestandsnaam kunnen beginnen met de naam van de pagina waar we aan werken. Daarna zou het verstandig kunnen zijn om een soort variantnaam te gebruiken, waarna het versienummer volgt: page-variant-version.ai

Bij wijze van voorbeeld, we werken aan een landingspagina; een pagina die zich concentreert op het promoten van een e-mailcampagne, of een ebook. We zouden bestandsnamen kunnen hebben als:

Niet alleen houdt dit projectmappen georganiseerd, maar het werkt ook als een vorm van handmatige versiebeheer. Matt Smith bespreekt het idee meer in zijn artikel Wireframing met Illustrator en InDesign.

10. Opslaan in Dropbox voor eenvoudig versiebeheer

Als je het idee van versiebeheer nog verder doorvoert, kun je bestanden rechtstreeks opslaan in Dropbox en die taak volledig van je takenlijst verwijderen. Zelfs het gratis plan van Dropbox bewaart dertig dagen lang een kopie van je bestanden telkens wanneer je ze opslaat.

Ook Layervault biedt in zijn gratis plan iets soortgelijks.

In beide gevallen is dit vooral handig als je met een team samenwerkt. Alle leden laten werken vanaf één centrale locatie, met de mogelijkheid om elke versie terug te zetten als iemand iets vreemds doet, is ideaal voor teamwork.

Conclusie

Veel van deze tips zijn geheel persoonlijk voor mijn eigen workflow en vertalen zich misschien niet perfect naar uw eigen manier van doen. Ik hoop echter dat ze in ieder geval nieuwsgierigheid opwekken en u aan het denken zetten over de manier waarop u web lay-outs wireframet. Als u zelf nog andere tips hebt, deel ze dan in de reacties!

Verder lezen

• Wireframen met InDesign en Illustrator
• Wireframen met Illustrator en InDesign (subtiel verschil!)
• Een beginnersgids voor wireframen
• Illustrator en pijlpunten