Hva er en nettside Wireframe og hvordan kan det hjelpe deg med å utvikle nettstedet ditt?

På et teknisk nivå er et moderne nettsted ikke bare en ting. Det er en kompleks suppe med interaktiv teknologi, for eksempel HTML (markeringen du ser på siden), JavaScript (språket som kjører i nettleseren din, påvirker interaksjoner), CSS (språket for å angi sidens utseende) og mer. Men på et mer grunnleggende nivå er et nettsted en ide.

Hvis det er nettstedet ditt, vet du sikkert hva du vil at den skal gjøre, eller hva du vil at brukerne skal komme seg ut av det. Kanskje det skulle være et enkelt sted for dem å finne informasjon om teknologi; eller kanskje det bør forklare hvorfor du er den beste bandet eller hundevandleren rundt. Uansett, lenge før du må håndtere HTML, CSS, JavaScript eller en annen spesifikk webutviklingsteknologi, bør du ha en veldig klar ide om hva nettstedet ditt skal gjøre, og hva det generelt bør se ut. Og nettside wireframes er måten å størkne den ideen og kommunisere den.

Baksiden av et serviet

En nettside wireframe er bare en skisse av hva du vil at nettstedet ditt skal se ut. Det er ikke meningen å være pen, og du trenger ikke engang programvare for å lage den. Du kan bare ta et stykke papir, eller til og med en serviett, og begynne å blokkere på nettstedet ditt, element for element. “Tittelen går her ... og så har vi en navigasjonsmeny ... oh, og her kan jeg sette en søkeboks.” Bare i de generelle, enkle vilkårene, sett en del av nettstedet ditt sammen, til sluttresultatet ser noe ut som dette:

Som du kan se, er dette ikke datakode eller altfor teknisk eller komplisert. Alle kan se på denne raske skissen og umiddelbart finne ut hva de ser. Og det er poenget med wireframes: De er veldig raske til å lage, og lett å forstå. De lar deg få de viktige greiene riktig, som nettstedet layout, navigasjonsstruktur og annonseplassering, før du berører en enkelt linje med kode. Og hvis du jobber med andre mennesker, for eksempel en koder eller en designer, lar de deg alle komme til en avtale om hva sluttresultatet skal se ut. Dette kan spare tonnevis av forvirring og dobbeltarbeid, spesielt når det gjelder større prosjekter.

Det er viktig å merke seg mangelen på detaljer i trådrammen ovenfor: Bildene ved siden av hver artikkel er ikke “ekte” bilder, men åpenbare plassholdere. Selv artikkelen teksten er ikke fylt ut - det er bare en rekke linjer. Du kan ikke se hva fargeskjemaet skal være - det er bare svart-hvitt. Dette er hva en wireframe er ment å se ut som. Det er ikke meningen å være en fullstendig representasjon av det endelige nettstedet, men bare dets ånd eller essens, hvis du vil. Det er bare de viktigste tingene.

Verktøy For Wireframing

Som jeg tidligere har nevnt, er det beste verktøyet for wireframing ofte bare et stykke papir og en penn. Å komme seg vekk fra datamaskinen din kan virkelig bidra til å fjerne tankene dine og fokusere på hva du vil at nettstedet ditt skal se, uten irriterende avbrudd eller rote om å lære et nytt wireframing-verktøy. En matematisk notisbok (som vist ovenfor) virker som regel best fordi du sporer langs linjene, lager fine rektangler og enkelt justerer de ulike delene av nettstedet ditt sammen. Ta en, en penn eller to, og ta en kopp kaffe et sted langt borte fra datamaskinen din. Du kommer tilbake med en klar ide om hva du egentlig prøver å opprette.

Når det er sagt, er det noen ganger nødvendig med wireframing programvare. For eksempel kan du kanskje jobbe som en del av et lag som er spredt over hele landet eller kloden, eller kanskje skriver du et blogginnlegg om wireframing. I disse tilfellene er manuell skanning av trådrammer ikke en veldig praktisk løsning. Her er noen gratis programvareverktøy som kan hjelpe, hvis du virkelig ikke kan bruke en penn og papir:

• Lumzy: Et gratis, Flash-basert wireframing-verktøy med et rikt bibliotek med objekter. Dette er verktøyet jeg pleide å lage wireframe du ser over - det er raskt og smertefritt.
• QuirkTools Wires: Et enklere verktøy, uten justeringsalternativer. Det er imidlertid ikke Flash-basert.
• Mockingbird: Et kommersielt verktøy, men det har en begrenset fri plan.

Ikke bare for nettsteder

Du har sikkert forstått dette selv, men dette er et godt notat å ende opp med: Wireframes er et fantastisk verktøy for å lage noe produkt, ikke bare et nettsted. Kanskje du har en grov ide for en iPhone eller Android-app, eller til og med et fullverdig dataprogram. I disse tilfellene er nettside trådrammer uvurderlige for å vise hva alt ser ut, og kan til og med hjelpe deg med å få folk til å støtte prosjektet på forskjellige måter.

Har du noen gang laget en wireframe selv? Skal du begynne nå som du har lest dette? Gi meg beskjed i kommentarene!

Bildekreditter: Krummet serviettbilde via ShutterStock, Red notebook-bilde via ShutterStock

Utforsk mer om: Webdesign, webutvikling, verktøy for nettredaktører.