10 Tips for Byggewireframes med Illustrator
er

Adobe Illustrator opplever et come-back i verden av web design. Ikke bare er SVG blir ofte brukt på nettet, men flere og flere designere bruker vektorer for Wireframing. Følgende tips vil hjelpe deg å få mest mulig ut av Illustrator som Wireframing verktøy.

Wireframing handler om å jobbe raskt og itera raskt. Målet er ikke å skape attraktive grensesnitt; din første prioritet er å utforme informasjon og erfaringer.

1. Gå monokrome

Wireframes gjøre klart hierarkiet på en nettside; De visuelt viser rekkefølgen i hvilke brukere som skal behandle den tilgjengelige informasjonen. Hvis du ønsker at brukerne skal behandle overskriften før du trykker "kjøp nå" -knappen, må overskriften til "trumf" knappen ved å kreve mer oppmerksomhet.

Denne visuelle hierarkiet kan defineres på flere måter. Vi kunne bruke størrelse for å gjøre overskriften mer slagkraftige, vi kunne bruke posisjonering (ved å plassere den før den knappen). Vi kunne bruke farger, kontrast og en rekke andre ting, men gjør det på en wireframe bare gjør ting mer forvirrende.

Ved å fjerne farge fra ligningen, det visuelle forholdet definert av posisjon, størrelse og (hvis du ønsker å gå den ekstra trinn) derimot, er mye renere.
varm monokromatisk palett av Eric Miller Design sin UX Kits

Vi er ikke bygge pen, pixel-perfekt UI kits her. Hold deg til et begrenset utvalg av gråtoner, og deretter bruke farge bare for etiketter og notater.

2. Hold Layers for bestemte formål

Speaking av etikette, notater og kommentarer, er det en god idé å plassere hver enkelt på en dedikert lag. Det samme gjelder for noe annet, som har et bestemt formål; slik som atferd, samspill, gester og så videre.

Plasser grafikk på ett lag, atferd på en annen, og etiketter på en annen, slik at du enkelt kan slå sin synlighet når det trengs.

3 . Utnytt Symboler

D.R.Y. brukes vanligvis som et programmerings sikt, men er like aktuelt å utforme arbeidsflyt. I en gitt ramme svømmebassenger, vi skal bruke og gjenbruk av visse objekter. Slå disse objektene til symboler og eventuelle endringer du gjør vil umiddelbart bli reflektert i resten

For eksempel, her er en enkel form felt.

La oss dra den inn i Symboler ruten (< b> Shift + Command + F11
)

Vi kan nå trekke dette symbolet fra Symboler
ruten, så mange ganger som vi liker, på artboard. Ved å dobbeltklikke på en av dem, vil vi isolere det (litt som grupperte objekter) slik at vi kan redigere den. Eventuelle endringer vi gjør, i dette tilfellet avrunding hjørnene av rektangelet, vil bli brukt til hver og en av de skjemafelt symbolene vi har brukt.

Når vi har en samling av symboler, Vi kan også lagre dem som et sett.

Dette vil gi oss mulighet til å laste dem inn i andre filer for fremtiden

Hvis du ønsker å lære mer om symboler paletten , ta en titt på Quick Tips: Arbeide med symboler i Adobe Illustrator

4.. Pilspisser er perfekte for Peke

En stor tips er å utnytte slagpilspisser, noe lett tilgjengelig i Illustrator rett ut av boksen siden CS5. Trådmodeller er en ideell mulighet til å visuelt beskrive interaksjoner, søknad flyt, navigasjon og bevegelse.

I disse dager vi enkelt kan legge til pilspisser til slag, direkte fra Strek-panelet.

Vi kan også redigere Illustrator source "Arrowheads.ai" fil, som forklart av Ryan Cornwell, og legge våre egne pilspisser til mix

Merk Bilde:. grammatikken, ikke dropper verktøyet gjelder ikke pilspisser og andre strekstiler, så det er ikke så lett som det kan være å duplisere den effekten du har valgt. Men likevel, de er perfekte for Wireframing.

5. Fest til rutenettet for Unified Mellomrom og liming

På mange måter følger dette på manglende bruk farge. Samlende dimensjoner og avstand fjerner et element av distraksjon fra trådmodeller, hjelper oss visuelt konsentrere seg om det som er viktig

Det spiller ingen rolle om de nøyaktige målene ikke reflekterer hva UI vil være som lenger ned linjen.; så lenge hierarkiet og relasjoner forblir sant, vi er godt å gå

Bruk et rutenett til din Artboard ved å gå View >.; Vis Grid
. Velge View > Fest til rutenettet
vil hjelpe deg å plassere dine gjenstander med presisjon.

For å spesifisere nøyaktig hva du vil at rutenettet skal se ut (og husk, er du ikke kommer for liten detalj her) gå til Illustrator > Preferanser > Guides & Grid ..
Der kan du definere avstanden mellom rutenettlinjene, og deretter oppgi hvor mange underinndelinger du vil innenfor disse linjene

Merk Bilde:. Føl deg fri til å farge rutenettet i noe annet enn grå; det vil ikke være en del av det endelige produktet.

6. Bruk Graphic Styles for Fleksible Knapper

Avhengig av nivået på troskap (hvor sant til finalen nettsiden du sikter til) kan du ha selve teksten innenfor, for eksempel knapper. For å få disse knappene for å vokse og krympe avhengig av innholdet i dem, ikke bruke objekter, bruker grafiske stiler.

La oss begynne med en streng med dummy tekst.

Nå skal vi åpne opp Utseende-panelet ved å gå Vindu > Utseende
.

Bruke Utseende ruten kan du legge til flere fyllinger til ett objekt. Vi kan laget disse fyllingene i den rekkefølgen vi ønsker dem til å vise; i dette bildet kan du se flere, alle stablet oppå hverandre.

For nå trenger vi bare to fills, så la oss legge en mørk fyll for teksten, deretter en blekere farge for bakgrunnen. < .no>

For øyeblikket kan vi ikke se blek grå bakgrunn, fordi det er akkurat den samme formen som den øverste fyll. Men vi kan isolere og manipulere hver fylling separat. Velg bunnen fylle i Utseende-panelet, og deretter gå til Effect > Konverter til figur > Avrundet rektangel ...

Enter noen innstillinger, uansett hva du ser passe, sørg bare for at størrelsen er i forhold til objektet vi bruke denne til.

Den lysegrå fill på undersiden har nå tatt form av et avrundet rektangel, i forhold til størrelsen av teksten. En knapp! Hvis du vil bruke denne utseendet til andre objekter, åpne opp Graphic Styles panelet og dra hele knappen inn i den. Sine opptredener vil bli lagret som en stil som du kan bruke om igjen.

For eksempel, her er en lengre tekststreng. Med den markerte teksten, klikker du på den nyopprettede Grafisk stil (som jeg dobbeltklikket og omdøpt) for å bruke det umiddelbart.

7. Setup noen brukte tegnebord

Speed ​​er navnet på spillet med Wireframing! Skrible ned et oppsett, gå videre, skrible ned en annen, gå videre. Det gjør derfor fornuftig å ha et ferdig utgangspunkt du kan få tilgang lett. Du kan finne du fungerer best på en massiv artboard første, trekke sluttbehandlet gjenstander inn i en egen fil, eller kanskje du foretrekker å arbeide direkte med riktig størrelse illustrasjonsbrett.

Her, for eksempel, er en layout med en iPad skjerm (1536x2048px) og fire iPhone 4S skjermer (640x960px), men du kan lage en fil med en rekke skjermenhet eksempler. Enten angi dine foretrukne dimensjoner manuelt, eller velge fra noen av de tilgjengelige forhåndsinnstillinger fra Artboard alternativer:

Ta med noen felles guider, lagnavn, symbolsett etc. som du kan bruke, og deretter lagre det hele som en mal for fremtidig bruk ( Fil > Lagre som mal ..
) Dette utgangspunktet vil da være tilgjengelig for deg ved å gå Fil > Ny fra mal ..
, komplett med alle biter og stykker du dro dit.

8. Bruk TextExpander for Dummy Text
ikke

Illustrator ikke med noen dummy tekst verktøy. Det er noen scripts som er verdt å spille med, men den enkleste måten å få dummy tekst i Illustrator Wireframes er å bruke TextExpander

Merk Bilde:. Hvis du er en Windows-bruker, PhraseExpress tilbyr lignende funksjonalitet til TextExpander

Legg til en serie av tekstbiter som du finner deg selv ofte bruker for trådmodeller (for eksempel en stor overskrift, en kort overskrift, kropp kopi av varierende lengde, typisk knapp tekst, menyelementer og så på) slik at de er lett tilgjengelig fra i Illustrator.

Ved å definere en nøkkel setning for hver tekstutdrag, TextExpander vil erstatte dette uttrykket med innholdet ditt når du skriver det, sparer du poser av gangen. . Du kan også bruke mappealternativer for å sørge for at disse tekstutdragene bare tre i kraft i Illustrator, bør du ønsker å

Hvis du vil vite mer om hvordan du kan optimalisere TextExpander arbeidsflyt, ta en titt på Master TextExpander med disse nyttige tips & Triks.

9. Praksis Logisk File Naming

Å kunne raskt visualisere endringer og ideer er i hjertet av Wireframing, men dette kan føre til en enorm haug av uorganiserte filer hvis du ikke er forsiktig. Nøkkelen er å spare på vesentlige trinn og med logiske fil navnekonvensjoner.

For eksempel kan vi ønsker å begynne hvert filnavn med navnet på den siden vi jobber med. Da kan det være fornuftig å bruke noen slags variant navn, etter som versjonsnummeret: page-variant-version.ai

For eksempel kan vi jobbe på en destinasjonsside; en som konsentrerer seg om å fremme enten en e-postkampanje, eller en eBok. Vi kan ha filnavn som:

Ikke bare gjør dette holde prosjektmapper organisert, men det fungerer som en form for manuell versjons. Matt Smith drøfter ideen mer i sin artikkel Wireframing Med Illustrator og InDesign.

10. Lagre i Dropbox for Easy Versjons

Ta ideen om versjons ytterligere, lagring av filer direkte i Dropbox vil fjerne denne oppgaven fra todo liste helt. Selv gratis plan fra Dropbox vil lagre en kopi av filene dine hver gang du lagrer dem, for tretti dager.

På samme måte Layervault tilbyr lignende awesomeness i sin gratis plan.

I begge tilfeller, Dette er spesielt nyttig hvis du samarbeider med et team. Etter å ha alle medlemmer som arbeider fra ett sentralt sted, med mulighet til å gjenopprette alle versjoner hvis noen gjør noe rart, er ideelt for teamarbeid.

Konklusjon

Mange av disse tipsene er helt personlig til min egen arbeidsflyt og kan ikke oversette perfekt inn i din egen måte å gjøre ting på. Men jeg håper de i det minste utløse noen nysgjerrighet, for å få deg å tenke på den måten du ramme svømme web oppsett. Hvis du har noen andre tips til din egen, kan du dele dem i kommentarfeltet!

Videre Reading

Wireframing Med InDesign og Illustrator

Wireframing Med Illustrator og InDesign (subtile forskjellen!)

En nybegynners guide til Wireframing

Illustrator og Pilspisser