En nettsteds wireframe (eller nettstedsstruktur) er et organisasjonskart som definerer strukturen og hierarkiet til sidene på et nettsted. Trådrammen fungerer som grunnlaget for utvikling av nettstedet, og hjelper til med å organisere innhold og gi logisk navigasjon for brukere. Å lage en nettside er mye enklere enn før. Dette er imidlertid fortsatt et betydelig prosjekt. Og som ethvert annet prosjekt trenger du en solid plan.
Utformingen av nettstedet ditt er den viktigste delen av denne planen. Farger, grafikk og annet innhold kan endres mye enklere enn oppsettet. Tenk på oppsettet som skjelettet til nettstedet ditt. Den definerer strukturen på hver side, som vil bli finjustert senere.
En wireframe er en grov oversikt over utformingen av et nettsted. Den viser hvor alle de forskjellige elementene vil være plassert. Dette gjør det ideell utgangspunkt for å lage en nettside. Kompetente webdesignbyråer starter alltid med en wireframe. Når du utvikler din egen nettside, enten alene eller i team, finner du også et verdifullt rammeverk.
Trådrammen til et nettsted kan alltid tegnes med blyant og papir. Dette er imidlertid ikke nødvendig hvis mange wireframing-verktøy er tilgjengelige.
La oss ta en titt på noen av de mest populære verktøyene for innramming av nettsteder.
Hvorfor bruke et wireframe-verktøy?
Selv i et moderne felt som webdesign, foretrekker noen designere fortsatt å bruke gamle metoder. Det er selvfølgelig ikke noe galt med å tegne en nettside på papir. Dette er en velprøvd metode som har fungert utmerket for tusenvis av webdesignere tidligere. Men å bruke et innrammingsverktøy kan spare mye tid og krefter. Nettstedets rammeverk
-
Å bruke et wireframing-verktøy gir deg et bedre utgangspunkt.
Med blyant og papir begynner du bokstavelig talt med et blankt ark. Rammeverktøy gjør det enkelt å komme i gang. De fleste har retningslinjer for layout, selv om det er et enkelt rutenett. Noen har til og med standardelementer som du kan plassere på siden slik at du ikke trenger å tegne noe.
-
Redigering og rettelser har blitt mye enklere.
Hvis du jobber på papir, må du tegne hele wireframen på nytt hver gang du gjør en stor endring. Mange wireframing-verktøy lar deg ganske enkelt dra og slippe elementer. Dette kan spare timer med arbeid, uansett om du foredler originalen designe eller gjøre endringer i henhold til kundens forespørsel.
-
Resultatene ser mer profesjonelle ut.
Selv den beste designeren kan mangle litt tegneferdigheter. Med et wireframing-verktøy trenger du aldri å bekymre deg for å tegne en rett linje eller sørge for at et element er perfekt sentrert. Naturligvis, siden en wireframe bare er en wireframe, er ikke utseendet like viktig som utseendet til det ferdige nettstedet. Men hvis du jobbe med kunder, kan en superren ramme imponere dem. Dette kan også forhindre misforståelser, for eksempel når en klient antar at et element ikke vil bli sentrert rett og slett fordi det ble tegnet litt utenfor midten av trådrammen.
-
Det er mer praktisk for teamet ditt.
Rammeverktøy gjør det mye enklere å samarbeide med andre. Mange verktøy lar deg gi tilgang til flere brukere slik at alle kan jobbe med de samme filene. Med samarbeidsfunksjoner kan teamet ditt eliminere behovet for å dele den gjeldende versjonen av en fil. Hele teamet ditt kan jobbe sømløst sammen, enten du er på samme kontor eller ikke. Nettstedets rammeverk
-
Dette er mer praktisk for webdesignklienter.
Fordi bruk av et wireframing-verktøy er raskere og enklere for teamet ditt, vil det også forbedre kvaliteten på tjenesten du yter hvis du utvikler nettsteder for andre. Kundene dine vil kunne motta wireframe-prøver raskere, og det vil være mye enklere for deg å gjøre endringer. Det forbedrer seg kvaliteten på kundeservice. Og selvfølgelig er det mer sannsynlig at fornøyde kunder gir deg en god anmeldelse eller anbefaler deg til andre kunder til virksomheten din.
Så selv om du er en ekspert på å raskt tegne rene wireframes på papir, er det verdt å ta deg tid til å lære hvordan du bruker wireframe-verktøyet. Heldigvis er mange av dem gratis, og mange betalte verktøy har gratis prøveversjoner for å hjelpe deg å velge den rette for deg og teamet ditt. La oss se hva som er der!
Wireframe.cc Nettstedsramme
Type: Webapplikasjon
kostnad: Gratis versjon tilgjengelig; premie fra 16 til 99 dollar per måned
wireframe.cc er et minimalistisk wireframing-verktøy for de som foretrekker blyant og papir. Den kjører rett i nettleseren din, så ingen nedlasting er nødvendig. Applikasjonen starter med et enkelt rutenett der du kan tegne ulike wireframe-elementer ved hjelp av ulike verktøy. Den er ekstremt enkel å bruke og har en gratisversjon. Hvis du bestemmer deg for at gratisversjonen er for begrenset i funksjoner, kan du oppgradere til en premium-plan for å låse opp flere funksjoner.
Jumpchart Site Wireframe
Type: Webapplikasjon
kostnad: Gratis versjon tilgjengelig; premium $5 – $50/måned.
Jumpchart ikke beregnet for visuell nettsidedesign. I stedet er den utformet for å hjelpe deg med å planlegge hvordan de enkelte sidene dine forholder seg til hverandre. Dette er like viktig for UX (brukeropplevelse) som sideoppsett, og derfor er Jumpchart en annen verdifull gratis verktøy, som kan legges til planleggingsarsenalet for nettstedet ditt. Som du forventer, har gratisplanen sine begrensninger (ett prosjekt på opptil 10 sider og 2 brukere), men det er et flott utgangspunkt for å planlegge et enkelt nettsted. Betalte planer gir deg flere alternativer og lar deg jobbe med flere sider og teammedlemmer, samt flere prosjekter samtidig.
Hvis du er en ambisiøs webdesigner på et budsjett, vil bruk av Wireframe.cc og Jumpchart sammen gi deg alt du trenger for å planlegge et nettsted. Dette er det visuelle oppsettet som dekkes av førstnevnte og områdekartplanleggingen som dekkes av sistnevnte. Begge applikasjonene utfyller hverandre veldig godt og er tilgjengelige gratis uten nedlasting.
Gliffy/Site wireframe
Type: Webapplikasjon
kostnad: Gratis versjon tilgjengelig; fullversjon $7,99/måned
Gliffy ikke bare for wireframes. Dette er et nettbasert diagramprogram, men det inkluderer wireframes og andre typer oppsett. Det er litt mindre intuitivt enn Wireframe.cc eller Jumpchart, men det er fortsatt enkelt å bruke (dra og slipp) og kan tjene formålene til begge appene ovenfor kombinert. Med Gliffy kan du lage wireframes for nettsider, samt flytskjemaer for å representere nettstedskartet ditt. Den har en rekke innebygde elementer for å representere ulike deler av en nettside eller annen layout, og du kan også laste opp dine egne bilder. Du kan også finne det nyttig for andre design- eller planleggingsoppgaver som involverer å lage diagrammer. Nettstedets rammeverk
MockFlow
Type: Webapplikasjon
kostnad: Gratis versjon tilgjengelig; premium $19–45/md.
MockFlow kombinerer også funksjoner for å lage wireframes og planlegge nettstedskart. Det er mer spesialisert enn Gliffy, så det er mer fokusert på nettsteder og teamsamarbeid enn diagrammer. Dens wireframing-verktøy er utmerket, med et ferdig bibliotek med layouter og komponenter for å komme i gang. Du kan enkelt lage en wireframe på få minutter og deretter redigere den som du ønsker. Premium-planer låser opp tilleggsfunksjoner som verdifulle teamsamarbeidsfunksjoner og mer. Hvis du betaler årlig, får du 20 % rabatt, pluss noen få bonusfunksjoner som offline-modus og ekstra verktøy. Nettstedets rammeverk
Lerret
Type: Webapplikasjon
kostnad: Gratis versjon tilgjengelig; fullversjon $9,99/måned (faktureres årlig)
Lerret er et populært nettverktøy for å lage grafikk av profesjonell kvalitet, selv om du ikke er designer. Den er lastet med maler, illustrasjoner, bilder og mer. Fordi det ikke er et dedikert wireframing-verktøy, mangler det noen av funksjonene til andre løsninger vi har sett på så langt. Du kan imidlertid fortsatt bruke den til å lage wireframes veldig enkelt ved å dra og slipp.
Adobe XD/Site Framework
Type: Programvare; tilgjengelig for Mac og Windows
kostnad: Gratis versjon tilgjengelig; fullversjonen starter på $9,99 per måned.
Adobe XD er et avansert UX-designverktøy laget av utviklerne av Photoshop, Illustrator, InDesign og annen kjent profesjonell programvare. Hvis du er kjent med Adobe-programvare, er du klar over den høye graden av spesialisering og kraft i hver av deres applikasjoner. Så lenge du er villig til å klatre på læringskurven, gir verktøyene deres deg massevis av kontroll som kan tillate deg å produsere nesten alt du tenker på. Adobe XD er ikke annerledes, og gir et rikt og robust sett med webdesignverktøy. Det går utover nettsteds wireframes og lar deg også lage komplette mockups og til og med prototyper i en enkelt prosjektfil. Heldigvis er det også lettere å lære å bruke enn annen Adobe-programvare, så det er absolutt verdt et forsøk hvis du ser etter en mer avansert løsning. Nettstedets rammeverk
figma
Type: Tilgjengelig som webapplikasjon og som programvare for Mac, Windows og Linux.
kostnad: Gratis versjon tilgjengelig; premium $12–45/md.
figma sterkt fokusert på sanntidssamarbeid mellom teammedlemmer. Imidlertid hans verktøy er like nyttige selv for solodesignere. Figma gir alt du trenger for å lage en wireframe, enten du leter etter et grunnleggende design eller ønsker å gå mer avansert. Redigeringsverktøyene tilbyr en høy grad av presisjon slik at du kan justere designet etter behov. Figma er også ekstremt kompatibel med flere operativsystemer, så det kan være en ideell løsning for et Linux-utviklingsteam.
Hvordan velge et innrammingsverktøy
Ditt valg av verktøy bør alltid avhenge av dine behov. Et nettstedsrammeverk er ikke forskjellig fra noe annet prosjekt i denne forbindelse. Det er også viktig å velge riktig verktøy på forhånd. Selvfølgelig kan du starte med et mindre budsjett og deretter oppgradere hvis det er mulig. Men du vil unngå å bruke verktøy som ikke i det hele tatt passer for dine behov. Nettstedets rammeverk
Så hvordan velger du det beste wireframing-verktøyet for webdesign? Still deg selv følgende spørsmål:
- Hva er budsjettet mitt? Beregn hvor mye du har råd til å bruke på programvare eller tilgang til premium-apper. Husk at dette vanligvis er en månedlig eller årlig avgift.
- Hvor mange teammedlemmer trenger tilgang til verktøyene? Dette kan bety forskjellen mellom å oppgradere til premium eller bruke en gratis konto.
- Hvilket operativsystem skal verktøyet kjøre på? Hvis du er usikker, er det tryggest å holde deg til nettapper.
- Hvilke funksjoner trenger jeg? Sammenlign de tilgjengelige funksjonene med størrelsen på prosjektet ditt. Hvis du bare trenger å lage en enkel wireframe, vil et mer begrenset verktøy duge. Men hvis du trenger å utforske wireframes og prototyper fullt ut, eller du også trenger å planlegge nettstedskartstrukturen, vil du ha det bedre med et mer avansert verktøy (eller en kombinasjon av begge).
- Hva er komfortnivået mitt med et spesifikt verktøy? Når du har begrenset alternativene dine basert på dine behov, prøv alle verktøy som oppfyller disse kravene. Dra full nytte av gratis prøveversjoner! Selv verktøy med lignende funksjoner kan ha svært forskjellige brukeropplevelser. Velg en som er enkel (eller til og med morsom) for deg å jobbe med.
Nøkkelpunkter/Site Framework
Webdesign er et givende felt med mange tilgjengelige verktøy for å gjøre det enklere. Et wireframing-verktøy kan forenkle arbeidsflyten din og bli en sentral del av designprosessen. La oss oppsummere hva vi har dekket:
- Et wireframe-verktøy vil gjøre webdesign mye enklere og raskere for en designer, enten han jobber alene eller med et byrå.
- Det er mange gode alternativer tilgjengelig, enten du vil bruke en nettapp eller installere programvare på datamaskinen.
- Ulike rammeverkverktøy kan være bedre for større team og/eller større prosjekter. Andre er mer begrenset.
- Mange wireframing-verktøy tilbyr en gratisversjon, og betaling kan fjerne mange av disse begrensningene.
- For å finne det riktige wireframing-verktøyet, må du stille deg selv noen grunnleggende spørsmål.
- Se alltid etter en gratis prøveversjon som du kan bruke for å bli kjent med programvaren.
Enten du er en erfaren designer eller bare har begynt, er det noe for deg perfekt layoutverktøy. Når du først har funnet det, vil du aldri gå tilbake til blyant og papir igjen!
Оставить комментарий