Bedste Ressourcer til Sketching Grid-Based Wireframes

Processen af design af en grænseflade begynder altid med ide generation. Dette omfatter visualisering, undersøgelse af andre websteder og hurtig prototyping. Denne tidlige idefase er afgørende for forstå layout og brugeroplevelse du har til hensigt at bygge. Så hvordan skal du faktisk udføre wireframingsarbejdet på et nyt projekt?

Jeg er fan af traditionelt papir og blyant med ekstra værktøjer efter behov. Men digital wireframing er også stor, og det er en levedygtig mulighed for moderne designere. I denne artikel vil jeg gerne dele de bedste ressourcer til begge teknikker for at hjælpe dig med at oprette din egen netbaserede brugergrænseflader.

Tidlig UI / UX konceptualisering

Lad os begynde med at præcisere forskellene mellem a wireframe og a prototype. Disse to ord bruges ofte udbyrdes, fordi de vedrører den samme proces.

EN wireframe er en enkelt statisk skitse af brugergrænsefladen på en webside eller en app. Det kan have callouts at forklare knaptekst, margener, elementstørrelser eller endda animationer. Men wireframes er bare uslebne udkast til individuelle sider.

Tilsvarende a prototype er som a flowchart, der viser, hvordan forskellige sider knytter sammen. Så en prototype forbinder wireframes for at demonstrere, hvordan forskellige knapper eller links skal føre til andre sider.

Disse definitioner er ikke udskåret i sten, nogle designere kan have deres egen terminologi og kan være uenige med min præcise formulering. Men sådan har jeg set dem beskrevet, og det er så mange designere, der forstår disse vilkår bedst.

Så hvad skal du præcis gøre med disse tidlige konceptuelle stykker? Er de virkelig nødvendige? Jeg vil sige prototyping er ikke altid nødvendigt, men det er en meget god ide, især for at designe apps med komplekse interaktioner.

Men wireframing er altid en god ide for hvert nyt projekt. Det hjælper dig fokus på det store billede uden at bekymre sig om detaljer. Du får en følelse af, hvordan den overordnede side er lagt ud, og det er uvurderligt, når du designer et konkret layout.

Mål for Wireframing

Hver gang du starter et nyt projekt, bør du overveje hvad du forsøger at løse. Hvert websted er bygget med et specifikt mål i tankerne. Mange steder har endda flere mål, hvor nogle mål er vigtigere end andre.

Brug wireframing som vejledning til at hjælpe dig med at finde den bedste strategi for fange mål (er) på et websted. Dette vil sandsynligvis ikke ske på den første wireframe, så vær forberedt på det skitser mange forskellige ideer.

Kig på andre lignende websteder, og skriv ned deres bedste funktioner. Analyser, hvordan indholdet er organiseret, og hvordan du bevæger dig gennem hver side.

Tænk på wireframes fra en interaktivt synspunkt. Det er ikke bare smukke billeder. De er repræsentationer af digitale grænseflader, og du vil skitsere dine ideer med det i tankerne.

At have netbaserede ressourcer til rådighed, uanset om de er lavet af papir, eller de er digitale, kan hjælpe meget ved hurtig skitsering. Lad os nu se de bedste ressourcer til at skabe wireframes.

Gitter Sketchpads

Du kan altid starte med grundlæggende miniatureskitser på printerpapir bare til kortlægge uslebne ideer. Personligt begynder jeg som regel at arbejde på printerpapir, fordi denne måde er jeg mindre bekymret for net og mere om generere ideer.

Prickegitter sketchpads er den bedste vej at gå, hvis du vil rydde op en ide, og giv det mere struktur. Gitteret hjælper dig estimere afstande mellem elementer på siden og opret en slags symmetri i wireframe.

Der er mange gode produkter derude, hvis du vil start wireframing på papir, For eksempel kommer Rhodia Dot Pad i forskellige størrelser til daglig brug. Den kommer kun med 80 sider, men det er ret typisk for de fleste netskitsebøger.

Et andet meget cool og brugerdefineret produkt er Dotgrid. Alle Dotgrids varer er dyrere end Rhodia bøger, men de leveres med flere materialer og brugerdefinerede cover designs.

Dotgrid accepterer endda skræddersyede ordrer, der giver dig mulighed for design din egen sketchpad. Hver bog indeholder lige under 100 ark, så inklusiv forsiden og bagsiden får du ca. 200 sider til netskitse.

Et par andre dotgitter skitsebøger, jeg vil nævne, inkluderer Behance Dot Grid, som er indbundet og spiralbundet, selvom det kun indeholder 50 ark papir.

Responsive Design Sketchbook er et af de bedste ressourcer til webdesignere. Ingen anden produktdesigner ville have brug for en responsiv design skitsebog, men webdesignere har stor gavn af friheden til generere ideer ved forskellige enhedsbredder oven på et gitterlayout.

Disse responsive designpuder har også 50 ark i alt 100 sider, men hver side har fire forskellige lydhør repræsenterer forskellige breakpoints i responsivt design: desktop, laptop, tablet og smartphone.

Selv om designet er intetsigende i forhold til Dotgrid-bøgerne, har ingen andre overvejet responsive skitsebøger til webdesignere. Hvis du er i den slags ting, så er det værd at bestille en til et testdrev.

Hvis du virkelig er i håndlavede ting, og ikke ønsker at bruge penge, kan du også Udskriv dine egne net sider med interface skitse. Denne gratis side tilbyder forskellige gitterskabeloner at du kan udskrive og bruge til håndtrukne trådrammer.

Rutenettet leveres i A4- og US-brevstørrelser til forskellige stilarter af printerpapir. Du kan vælge mellem mange muligheder, såsom skabeloner til en fuld længde web browser eller forskellige iPhone skærmbilleder.

Alle disse muligheder er fantastiske, og værd at udforske, hvis du er i blyantskitse. Papir er et af de nemmeste medier for hurtigt at komme ned nye ideer, så det er ofte det foretrukne valg selv ved UI-designere.

Digitale værktøjer og Web Apps

Der er så mange gode wireframing-programmer derude, at de næsten ikke kan dækkes uden at risikere analyseforlamning, så lad os nu fokusere på nogle af de bedste muligheder for gitterbaseret wireframing.

For det første vil jeg gerne nævne, at du kan bruge Adobe-værktøjer som Illustrator til lav dine egne wireframes. Dette er ikke en del af alles workflow, og Illustrator er bestemt ikke gratis. Men hvis du allerede arbejder med Adobe Creative Cloud, kan det være et godt sted at starte.

1. Moqups

Moqups er et af de bedste online værktøjer til wireframing. Du arbejder med en visuel editor og et bibliotek af aktiver for at trække og slippe over hele siden.

Hvert nyt Moqups-projekt har en foruddefineret net, og bruger lyse lilla linjer til at hjælpe dig med at snappe elementer ind i justering. Det er et fantastisk webværktøj, der gør design med et net så meget lettere.

Webstedet fungerer som standard på en gratis plan, der begrænser brugeren til 300 siderobjekter. Webstedet har premium muligheder, men at betale et månedligt gebyr kan være mere irriterende end bare at gå med Adobe-værktøjer eller et engangs køb af Sketch.

2. Gitter Papr

Grid Papr webapp er helt gratis, og tilbyder både offentlige og private konti til dine wireframes. Du opretter et navn til dit projekt og får din egen unikke URL til wireframe, som du kan redigere fra enhver computer.

Hver ny wireframe leveres med et gitter som lader dig udføre snap-to-grid på alle elementer. Funktionerne er enkle, men de er nok til Opret en lo-fi wireframe på få minutter. Du skal bare trække, hvad du vil have på siden, og følg gitteret for at skabe en stjernekabel.

3. Wireframe.cc

Wireframe.cc er et af de enkleste og mest minimale værktøjer, du kan bruge til wireframing. Det har a rodfri grænseflade med en præbygget gitter og organiserede værktøjslinjer. Du skal blot klikke og trække for at oprette nye elementer på lærredet. Du kan også gemme og dele dit arbejde.

Dette er endnu et værktøj, der tilbydes gratis med valgfrie præmieplaner. Hver plan faktureres hver måned, så det ligner meget på Moqups i prisstruktur. Det gratis værktøj kan bruges fra enhver computer uden en konto.

4. Mockingbird

Mockingbird er en anden stor mulighed, som tilbyder mange flere funktioner end de fleste wireframing værktøjer. Du kan komme i gang gratis, men forsøget er begrænset til 7 dage. Dette kan være en irritation for nogle brugere, men værktøjet er virkelig utroligt og kører i alle browsere.

Mockingbird har et uendeligt bibliotek af UI elementer såsom faner, harmonikaler, dropdown-menuer, videospilere og enkle tekstforbindelser. Standardgitteret bruger 960gs gittersystemet, men du kan vælge mellem 12, 16 og 24 kolonner.

Endelige Ord

Uanset om du vælger traditionel eller digital wireframing, handler det altid om kvalitet af produktionen. Der er meget at lære, når du laver denne slags arbejde, så find det, hvad værktøjet føles mest behageligt for dig.

At flytte frem det bedste at gøre er bare start wireframing. Få en fornemmelse for, hvad du kan lide det bedste (papir eller digital), og gør det til dit eget. Ressourcerne i denne artikel skal give dig mere end nok til at komme i gang med wireframing dine egne digitale grænseflader.

(Cover foto af Oykun Yilmaz)