Share
Adobe Illustrator maakt een come-back door in de wereld van webdesign. Niet alleen wordt SVG vaak online gebruikt, maar steeds meer ontwerpers gebruiken vectoren voor wireframing. De volgende tips helpen u om Illustrator optimaal te gebruiken als hulpmiddel voor wireframing.
Wireframing gaat over snel werken en snel itereren. Het doel is niet om aantrekkelijke interfaces te creëren; uw eerste prioriteit is het ontwerpen van informatie en ervaring.
Wireframes maken de hiërarchie op een webpagina duidelijk; ze tonen visueel de volgorde aan waarin gebruikers de beschikbare informatie moeten verwerken. Als u wilt dat gebruikers de kop verwerken voordat ze op de knop 'Nu kopen' klikken, moet de kop de knop 'troeven' door meer aandacht te vragen.
Deze visuele hiërarchie kan op een aantal manieren worden gedefinieerd. We zouden formaat kunnen gebruiken om de kop meer impactvol te maken, we zouden positionering kunnen gebruiken (door het vóór de knop te plaatsen). We zouden kleur, contrast en een reeks andere dingen kunnen gebruiken, maar dat doen in een draadframe maakt het alleen maar verwarrend.
Door de kleur uit de vergelijking te verwijderen, is de visuele relatie gedefinieerd door positie, grootte en (als je de extra stap wilt gaan) contrast, veel schoner.
Het warme monochrome palet van de UX-kits van Eric Miller DesignWe bouwen hier geen mooie, pixel-perfecte gebruikersinterfaces. Blijf bij een beperkt aantal grijstinten en gebruik kleuren alleen voor labels en notities.
Over labels, notities en opmerkingen gesproken, het is een geweldig idee om elk label op een speciale laag te plaatsen. Hetzelfde geldt voor al het andere dat een specifiek doel heeft; zoals gedrag, interactie, gebaren enzovoort.
Plaats afbeeldingen op één laag, gedrag op een andere laag en labels op een andere laag, zodat u hun zichtbaarheid eenvoudig kunt wijzigen wanneer dat nodig is.
DROOG. wordt over het algemeen gebruikt als een programmeerterm, maar is ook van toepassing op de ontwerpworkflow. In een bepaald draadframe zullen we bepaalde objecten gebruiken en hergebruiken. Verander deze objecten in symbolen en alle wijzigingen die u aanbrengt in een, worden direct zichtbaar in de rest.
Hier is bijvoorbeeld een eenvoudig formulierveld:
Laten we het naar het deelvenster Symbolen slepen (Shift + Command + F11)
We kunnen nu dit symbool uit de Symbolen deelvenster, zo vaak als we willen, op het tekengebied. Door erop te dubbelklikken, isoleren we het (een beetje zoals gegroepeerde objecten), zodat we het kunnen bewerken. Alle wijzigingen die we aanbrengen, in dit geval de hoeken van de rechthoek afronding, worden toegepast op elk formulierveldsymbool dat we hebben gebruikt.
Zodra we een verzameling symbolen hebben, kunnen we ze ook als een set opslaan:
Hierdoor kunnen we ze in de toekomst in andere bestanden laden.
Als u meer wilt weten over het symbolenpalet, neemt u een kijkje bij Snelle tip: Werken met symbolen in Adobe Illustrator.
Een goede tip is om gebruik te maken van slagpijlers, iets wat in Illustrator direct beschikbaar is sinds CS5. Wireframes zijn de ideale gelegenheid om interacties, applicatieflow, navigatie en beweging visueel te beschrijven.
Tegenwoordig kunnen we eenvoudig pijlpunten toevoegen aan lijnen, rechtstreeks vanuit het deelvenster Lijn.
We kunnen zelfs het bestand "Arrowheads.ai" van Illustrator bewerken, zoals uitgelegd door Ryan Cornwell, en onze eigen pijlpunten aan de mix toevoegen.
Notitie: Vervelend is dat het pipet niet van toepassing is op pijlpunten samen met andere lijnstijlen, dus het is niet zo eenvoudig als het zou kunnen zijn om het effect dat u heeft gekozen te dupliceren. Maar toch zijn ze perfect voor wireframing.
In veel opzichten volgt dit uit het niet gebruiken van kleur. Unificerende dimensies en spatiëring verwijderen een element van afleiding van wireframes, zodat we ons visueel kunnen concentreren op wat belangrijk is.
Het maakt niet uit of de exacte afmetingen niet overeenkomen met hoe de gebruikersinterface verderop zal zijn; Zolang de hiërarchie en relaties waar blijven, zijn we goed om te gaan.
Pas een rooster toe op je tekengebied door te gaan Beeld> Raster weergeven. selecteren Beeld> Uitlijnen op raster zal u helpen uw objecten nauwkeurig te positioneren.
Om precies te specificeren hoe je rooster eruit moet zien (en onthoud dat je hier niet voor kleine details gaat) ga naar Illustrator> Voorkeuren> Gidsen & raster ... Eenmaal daar kunt u de afstand tussen de rasterlijnen definiëren en vervolgens aangeven hoeveel onderverdelingen u wilt binnen die regels.
Notitie: Voel je vrij om je raster in iets anders dan grijs te kleuren; het maakt geen deel uit van het eindproduct.
Afhankelijk van het niveau van trouw (hoe trouw aan de uiteindelijke website die u nastreeft), heeft u misschien daadwerkelijke tekst in bijvoorbeeld knoppen. Om deze knoppen te laten groeien en krimpen afhankelijk van de inhoud erin, geen objecten gebruiken, grafische stijlen gebruiken.
Laten we beginnen met een reeks dummy-tekst.
Laten we nu het deelvenster Uiterlijk openen door te gaan Venster> Uiterlijk.
Met behulp van het deelvenster Vormgeving kunt u meerdere vullingen aan één object toevoegen. We kunnen die vullingen in de volgorde plaatsen die we willen dat ze weergeven; in deze afbeelding zie je verschillende, allemaal opgestapeld bovenop elkaar.
Voorlopig hebben we slechts twee vullingen nodig, dus laten we een donkere vulling voor de tekst toevoegen en vervolgens een bleker kleur voor de achtergrond.
Momenteel kunnen we de lichtgrijze achtergrond niet zien, omdat deze exact dezelfde vorm heeft als de bovenste vulling. We kunnen echter elke vulling afzonderlijk isoleren en manipuleren. Selecteer de onderste vulling in het deelvenster Vormgeving en ga vervolgens naar Effect> Omzetten in vorm> Afgeronde rechthoek ...
Voer een aantal instellingen in, wat je ook maar wilt, zorg er gewoon voor dat de grootte relatief is aan het object waarop we dit toepassen.
De lichtgrijze vulling op de bodem heeft nu de vorm aangenomen van een afgeronde rechthoek, in verhouding tot de grootte van de tekst. Een knop! Als u deze vormgeving wilt toepassen op andere objecten, opent u het deelvenster Grafische stijlen en sleept u de hele knop erin. De verschijningen worden opgeslagen als een stijl die u opnieuw kunt gebruiken.
Hier is bijvoorbeeld een langere reeks tekst. Terwijl de tekst is geselecteerd, klikt u op de nieuw gemaakte grafische stijl (waarop ik dubbelklik en hernoemd) om deze onmiddellijk toe te passen.
Snelheid is de naam van het spel met wireframing! Krabbel een lay-out door, ga verder, krabbel naar beneden, ga verder. Het is daarom logisch om een kant-en-klaar startpunt te hebben waar je gemakkelijk toegang toe hebt. Misschien vindt u het beste dat u het eerst werkt op een massaal tekengebied, waarbij u voltooide objecten naar een apart bestand sleept, of als u liever direct met de juiste tekengebieden werkt..
Hier is bijvoorbeeld een lay-out met een iPad-scherm (1536x2048px) en vier iPhone 4S-schermen (640x960px), maar u kunt een bestand voorbereiden met een willekeurig aantal voorbeelden van apparaatschermen. Stel uw voorkeursafmetingen handmatig in of kies een van de beschikbare presets uit de Artboard-opties:
Neem alle gangbare handleidingen, laagnamen, symbolensets enz. Op die u zou kunnen gebruiken en bewaar het geheel als een sjabloon voor toekomstig gebruik (Bestand> Opslaan als sjabloon ... ) Dit startpunt zal dan beschikbaar zijn door te gaan Bestand> Nieuw van sjabloon ... , compleet met alle stukjes en beetjes die je daar achterliet.
Illustrator komt niet met dummy teksttools. Er zijn enkele scripts die de moeite waard zijn om mee te spelen, maar de gemakkelijkste manier om dummy-tekst in uw Illustrator Wireframes te krijgen is door TextExpander te gebruiken.
Notitie: als u een Windows-gebruiker bent, biedt PhraseExpress dezelfde functionaliteit als TextExpander
Voeg een reeks tekstfragmenten toe die u vaak gebruikt voor wireframes (zoals een grote kop, een korte kop, een kopie van verschillende lengten, typische knoptekst, menu-items, enzovoort), zodat ze direct beschikbaar zijn vanuit Illustrator.
Door een sleutelzin voor elk fragment te definiëren, vervangt TextExpander die zin door uw inhoud wanneer u deze typt, waardoor u tijdwinst bespaart. U kunt ook de mapopties gebruiken om ervoor te zorgen dat deze fragmenten alleen van kracht worden in Illustrator, als u dat wilt.
Voor meer informatie over het optimaliseren van uw TextExpander-workflow, bekijkt u Master TextExpander met deze handige tips en trucs.
Snel veranderingen en ideeën kunnen visualiseren is de kern van wireframing, maar dit kan leiden tot een enorme stapel ongeorganiseerde bestanden als je niet voorzichtig bent. De sleutel is om te besparen in belangrijke stadia en met logische bestandsnaamgevingsconventies.
We willen bijvoorbeeld elke bestandsnaam beginnen met de naam van de pagina waaraan we werken. Dan is het misschien verstandig om een soort variantnaam te gebruiken, waarna het versienummer: page-variant-version.ai
We werken bijvoorbeeld mogelijk aan een bestemmingspagina; een die zich concentreert op het promoten van een e-mailcampagne of een e-boek. We kunnen bestandsnamen hebben zoals:
Dit houdt niet alleen projectmappen georganiseerd, maar het werkt ook als een vorm van handmatige versiebeheer. Matt Smith bespreekt het idee meer in zijn artikel Wireframing With Illustrator en InDesign.
Als je het idee van versioning nog verder ontwikkelt en je bestanden direct in Dropbox opslaat, wordt die taak volledig uit je takenlijst verwijderd. Zelfs het gratis plan van Dropbox bewaart dertig keer een kopie van je bestanden telkens wanneer je ze opslaat.
Op dezelfde manier biedt Layervault een soortgelijke awesomeness in zijn gratis plan.
In beide gevallen is dit vooral handig als u samenwerkt met een team. Als alle leden vanaf één centrale locatie werken, met de optie om elke versie te herstellen als iemand iets vreemds doet, is dit ideaal voor teamwork.
Veel van deze tips zijn volledig persoonlijk voor mijn eigen workflow en vertalen zich misschien niet perfect in je eigen manier van doen. Ik hoop echter dat ze op zijn minst enige nieuwsgierigheid opwekken, om je aan het denken te zetten over de manier waarop je weblay-outs invoert. Als u nog andere eigen tips heeft, deel deze dan in de opmerkingen!
Accentsconagua