Et websteds wireframe (eller webstedsstruktur) er et organisationsdiagram, der definerer strukturen og hierarkiet af sider på et websted. Wireframen tjener som grundlag for hjemmesideudvikling, hjælper med at organisere indhold og give logisk navigation til brugerne. At oprette en hjemmeside er meget nemmere end før. Dette er dog stadig et væsentligt projekt. Og som ethvert andet projekt har du brug for en solid plan.
Layoutet af din hjemmeside er den vigtigste del af denne plan. Farver, grafik og andet indhold kan ændres meget nemmere end layoutet. Tænk på layoutet som skelettet på din hjemmeside. Den definerer strukturen på hver side, som vil blive forfinet senere.
En wireframe er en grov oversigt over layoutet af en hjemmeside. Det viser, hvor alle de forskellige elementer vil være placeret. Dette gør det ideelt udgangspunkt for at lave en hjemmeside. Kompetente webdesignbureauer starter altid med en wireframe. Når du udvikler din egen hjemmeside, uanset om du er alene eller i et team, finder du også en værdifuld ramme.
En hjemmesides wireframe kan altid tegnes med blyant og papir. Dette er dog ikke nødvendigt, hvis mange wireframing-værktøjer er tilgængelige.
Lad os tage et kig på nogle af de mest populære værktøjer til indramning af websteder.
Hvorfor bruge et wireframe-værktøj?
Selv i et moderne felt som webdesign foretrækker nogle designere stadig at bruge gamle metoder. Der er selvfølgelig ikke noget galt i at tegne en hjemmeside på papir. Dette er en gennemprøvet metode, der har fungeret godt for tusindvis af webdesignere i fortiden. Brug af et indramningsværktøj kan dog spare en masse tid og kræfter. Hjemmesideramme
-
Brug af et wireframing-værktøj giver dig et bedre udgangspunkt.
Med blyant og papir starter du bogstaveligt talt med en blank tavle. Rammeværktøjer gør det nemt at komme i gang. De fleste har retningslinjer for layout, selvom det er et simpelt gitter. Nogle giver endda standardelementer, som du kan placere på siden, så du ikke behøver at tegne noget.
-
Redigering og rettelser er blevet meget nemmere.
Hvis du arbejder på papir, bliver du nødt til at tegne hele wireframen om, hver gang du foretager en stor ændring. Mange wireframing-værktøjer giver dig mulighed for blot at trække og slippe elementer. Dette kan spare timers arbejde, uanset om du forfiner originalen designe eller foretage ændringer efter kundens ønske.
-
Resultaterne ser mere professionelle ud.
Selv den bedste designer kan mangle lidt i tegnefærdigheder. Med et wireframing-værktøj behøver du aldrig at bekymre dig om at tegne en lige linje eller sørge for, at et element er perfekt centreret. Da en wireframe kun er en wireframe, er dens udseende naturligvis ikke så vigtigt som udseendet af den færdige hjemmeside. Men hvis du arbejde med kunder, kan en super ren ramme imponere dem. Dette kan også forhindre misforståelser, som f.eks. når en klient antager, at et element ikke vil blive centreret, blot fordi det er tegnet en smule off-center i wireframen.
-
Det er mere bekvemt for dit team.
Rammeværktøjer gør det meget nemmere at samarbejde med andre. Mange værktøjer giver dig mulighed for at give adgang til flere brugere, så alle kan arbejde på de samme filer. Med samarbejdsfunktioner kan dit team eliminere behovet for at dele den aktuelle version af en fil. Hele dit team kan arbejde problemfrit sammen, uanset om du er på samme kontor eller ej. Hjemmesideramme
-
Dette er mere bekvemt for webdesignkunder.
Fordi det er hurtigere og nemmere for dit team at bruge et wireframing-værktøj, vil det også forbedre kvaliteten af den service, du yder, hvis du udvikler websteder for andre. Dine kunder vil være i stand til at modtage wireframe-prøver hurtigere, og det vil være meget nemmere for dig at foretage ændringer. Det forbedres kvaliteten af kundeservice. Og selvfølgelig er der større sandsynlighed for, at tilfredse kunder giver dig en god anmeldelse eller anbefaler dig til andre kunder til din virksomhed.
Så selvom du er ekspert i hurtigt at tegne rene wireframes på papir, er det værd at tage sig tid til at lære at bruge wireframe-værktøjet. Heldigvis er mange af dem gratis, og mange betalte værktøjer har gratis prøveversioner, der hjælper dig med at vælge den rigtige for dig og dit team. Lad os se, hvad der er der!
Wireframe.cc Site frame
Type: webapplikation
omkostninger: Gratis version tilgængelig; præmie fra 16 til 99 dollars om måneden
wireframe.cc er et minimalistisk wireframing-værktøj til dem, der foretrækker blyant og papir. Den kører direkte i din webbrowser, så ingen download er nødvendig. Applikationen starter med et simpelt gitter, hvorpå du kan tegne forskellige wireframe-elementer ved hjælp af forskellige værktøjer. Det er ekstremt nemt at bruge og har en gratis version. Hvis du beslutter dig for, at den gratis version er for begrænset i funktioner, kan du opgradere til en premium-plan for at låse op for flere funktioner.
Jumpchart Site Wireframe
Type: webapplikation
omkostninger: Gratis version tilgængelig; præmie $5 – $50/måned.
Jumpchart ikke beregnet til visuelt webstedsdesign. I stedet er det designet til at hjælpe dig med at planlægge, hvordan dine individuelle sider relaterer til hinanden. Dette er lige så vigtigt for UX (brugeroplevelse) som sidelayouts, hvorfor Jumpchart er en anden værdifuld gratis værktøj, som kan føjes til dit webstedsplanlægningsarsenal. Som du kunne forvente, har den gratis plan sine begrænsninger (et projekt på op til 10 sider og 2 brugere), men det er et godt udgangspunkt for at planlægge en simpel hjemmeside. Betalte planer giver dig flere muligheder og giver dig mulighed for at arbejde med flere sider og teammedlemmer samt flere projekter på én gang.
Hvis du er en håbefuld webdesigner med et budget, vil det at bruge Wireframe.cc og Jumpchart sammen give dig alt, hvad du behøver for at planlægge et websted. Dette er det visuelle layout, der er dækket af førstnævnte, og sitemap-planlægningen dækket af sidstnævnte. Begge applikationer supplerer hinanden meget godt og er tilgængelige gratis uden download.
Gliffy/Site wireframe
Type: webapplikation
omkostninger: Gratis version tilgængelig; fuld version $7,99/måned
Gliffy ikke kun til wireframes. Dette er en webbaseret diagramapplikation, men den inkluderer wireframes og andre typer layouts. Det er lidt mindre intuitivt end Wireframe.cc eller Jumpchart, men det er stadig nemt at bruge (træk og slip) og kan tjene formålene med begge ovenstående apps kombineret. Med Gliffy kan du oprette wireframes til websider samt flowcharts til at repræsentere dit sitemap. Den har en række indbyggede elementer til at repræsentere forskellige dele af en webside eller andet layout, og du kan også uploade dine egne billeder. Du kan også finde det nyttigt til andre design- eller planlægningsopgaver, der involverer oprettelse af diagrammer. Hjemmesideramme
MockFlow
Type: webapplikation
omkostninger: Gratis version tilgængelig; præmie $19-45/md.
MockFlow kombinerer også funktioner til oprettelse af wireframes og planlægning af sitemaps. Det er mere specialiseret end Gliffy, så det er mere fokuseret på websteder og teamsamarbejde end diagrammer. Dens wireframing-værktøjer er fremragende med et færdiglavet bibliotek af layouts og komponenter til at komme i gang. Du kan nemt oprette en wireframe på få minutter og derefter redigere den, som du ønsker. Premium-planer låser op for yderligere funktioner, såsom værdifulde teamsamarbejdsfunktioner og mere. Hvis du betaler årligt, får du 20 % rabat plus et par bonusfunktioner som offline-tilstand og ekstra værktøjer. Hjemmesideramme
Canva
Type: webapplikation
omkostninger: Gratis version tilgængelig; fuld version $9,99/måned (faktureres årligt)
Canva er et populært onlineværktøj til at skabe grafik i professionel kvalitet, selvom du ikke er designer. Den er fyldt med skabeloner, illustrationer, fotos og mere. Fordi det ikke er et dedikeret wireframing-værktøj, mangler det nogle af funktionerne i andre løsninger, vi har set på indtil videre. Du kan dog stadig bruge det til at oprette wireframes meget nemt ved hjælp af træk og slip.
Adobe XD/Site Framework
Type: Software; tilgængelig til Mac og Windows
omkostninger: Gratis version tilgængelig; den fulde version starter ved $9,99 per måned.
Adobe XD er et avanceret UX-designværktøj skabt af udviklerne af Photoshop, Illustrator, InDesign og anden berømt professionel software. Hvis du er fortrolig med Adobe-software, er du klar over den høje grad af specialisering og kraft i hver af deres applikationer. Så længe du er villig til at forcere indlæringskurven, giver deres værktøjer dig et væld af kontrol, der kan give dig mulighed for at producere næsten alt, hvad du tænker på. Adobe XD er ikke anderledes og giver et rigt og robust sæt webdesignværktøjer. Det går ud over hjemmesidens wireframes og giver dig også mulighed for at oprette komplette mockups og endda prototyper i en enkelt projektfil. Heldigvis er det også nemmere at lære at bruge end anden Adobe-software, så det er bestemt et forsøg værd, hvis du leder efter en mere avanceret løsning. Hjemmesideramme
figma
Type: Tilgængelig som webapplikation og som software til Mac, Windows og Linux.
omkostninger: Gratis version tilgængelig; præmie $12-45/md.
figma stærkt fokuseret på samarbejde i realtid mellem teammedlemmer. Dog hans værktøjer er lige så nyttige selv for solodesignere. Figma giver alt, hvad du behøver for at skabe en wireframe, uanset om du leder efter et grundlæggende design eller ønsker at gå mere avanceret. Redigeringsværktøjerne tilbyder en høj grad af præcision, så du kan justere designet efter behov. Figma er også ekstremt kompatibel med flere operativsystemer, så det kan være en ideel løsning for et Linux-udviklingsteam.
Sådan vælger du et indramningsværktøj
Dit valg af værktøjer bør altid afhænge af dine behov. En hjemmesideramme adskiller sig ikke fra noget andet projekt i denne henseende. Det er også vigtigt at vælge de rigtige værktøjer på forhånd. Du kan selvfølgelig starte med et mindre budget og derefter opgradere, hvis det er muligt. Men du vil gerne undgå at bruge værktøjer, der slet ikke passer til dine behov. Hjemmesideramme
Så hvordan vælger du det bedste wireframing-værktøj til webdesign? Stil dig selv følgende spørgsmål:
- Hvad er mit budget? Beregn, hvor meget du har råd til at bruge på software eller adgang til premium-apps. Husk, at dette normalt er et månedligt eller årligt gebyr.
- Hvor mange teammedlemmer har brug for adgang til værktøjerne? Dette kan betyde forskellen mellem at opgradere til premium eller bruge en gratis konto.
- Hvilket operativsystem skal værktøjet køre på? Hvis du er usikker, er det sikrest at holde sig til webapps.
- Hvilke funktioner har jeg brug for? Sammenlign de tilgængelige funktioner med størrelsen på dit projekt. Hvis du kun skal lave en simpel wireframe, vil et mere begrænset værktøj duge. Men hvis du har brug for at udforske wireframes og prototyper fuldt ud, eller du også skal planlægge din sitemapstruktur, vil du være bedre stillet med et mere avanceret værktøj (eller en kombination af begge).
- Hvad er mit komfortniveau med et specifikt værktøj? Når du har indsnævret dine muligheder baseret på dine behov, kan du prøve alle værktøjer, der opfylder disse krav. Udnyt det fulde udbytte af gratis prøveperioder! Selv værktøjer med lignende muligheder kan have meget forskellige brugeroplevelser. Vælg en, der er nem (eller endda sjov) for dig at arbejde med.
Nøglepunkter/Site Framework
Webdesign er et givende felt med mange tilgængelige værktøjer til at gøre det nemmere. Et wireframing-værktøj kan forenkle din arbejdsgang og blive en central del af din designproces. Lad os opsummere, hvad vi har dækket:
- Et wireframe-værktøj vil gøre webdesign meget nemmere og hurtigere for en designer, uanset om du arbejder alene eller med et bureau.
- Der er mange gode muligheder tilgængelige, uanset om du vil bruge en webapp eller installere software på din computer.
- Forskellige rammeværktøjer kan være bedre til større teams og/eller større projekter. Andre er mere begrænsede.
- Mange wireframing-værktøjer tilbyder en gratis version, og betaling kan fjerne mange af disse begrænsninger.
- For at finde det rigtige wireframing-værktøj skal du stille dig selv et par grundlæggende spørgsmål.
- Søg altid efter en gratis prøveperiode, som du kan bruge til at blive fortrolig med softwaren.
Uanset om du er en erfaren designer eller lige er startet, er der noget for dig ideal layoutværktøj. Når du først har fundet det, vil du aldrig gå tilbage til blyant og papir igen!
Efterlad en kommentar