Vad är wireframes för webbplatser?

Ursprungligen syftade termen "wireframe" på en visuell representation av tredimensionella objekt, som de som används inom produktdesign och produktutveckling. Nu används den även för att beskriva 3D-modellering inom datoranimering samt vid design och utveckling av tvådimensionella webbsidor och mobilappar.

Läs vidare för att lära dig mer om värdet av wireframes for webbplatser, hur UX och UI samspelar i tidig webb- och appdesign, och hur wireframe-programvara gör allt enklare, snabbare och mer effektivt.

Vad är wireframes?

Inom webbdesign är en wireframe eller ett wireframe-diagram en visuell representation i gråskala av strukturen och funktionaliteten hos en enskild webbsida eller mobilappskärm. Wireframes används tidigt i utvecklingsprocessen för att fastställa den grundläggande strukturen för en sida innan visuell design och innehåll läggs till. De kan skapas på papper, i programvaruappar eller läggas till direkt i HTML/CSS. Eftersom wireframes avsiktligt saknar visuella detaljer används de bäst som ett planeringsverktyg som klargör layout, hierarki och beteende innan man investerar i färdig design eller kod.

Använd en UX-wireframe för att besvara följande frågor:

• Vad kommer att visas i användargränssnittet?

• Var på sidan kommer de olika elementen att placeras?

• Hur kommer användarna att interagera med sidans element?

• Hur kommer webbsidan eller applikationen att fungera?

Wireframes jämfört med mockups och prototyper

Team använder ofta dessa termer synonymt, men de tjänar olika syften på olika detaljnivåer (fidelity). Wireframe-diagram skiljer sig från mockups och prototyper eftersom de är tänkta att vara en representation med låg detaljrikedom som fokuserar på layout och funktionalitet. Tänk på en wireframe som en ritning som visar föreslagna funktioner och hur en produkt förväntas fungera. Genom att hålla det enkelt blir det lättare att granska och förfina planen under arbetets gång.

De flesta exempel på wireframe-diagram innehåller enkla linjer och rutor med minimalt med färg och endast de mest grundläggande detaljerna. Dessa enkla former representerar UX-element som menyer, knappar, innehåll och navigeringsfunktioner. Till exempel kan en enkel rektangel med orden "Logotyp/Startsida" representera var företagets logotyp ska placeras och att logotypen kommer att länka till webbplatsens startsida.

I kontrast till detta är en mockup mer som en icke-funktionell modell. Den ger en mer komplett bild av hur den slutgiltiga produkten kommer att se ut med grafik, färger, varumärkesprofilering och typsnitt, men har inga aktiverade UI-funktioner.

En prototyp är närmare en fullt fungerande version av slutprodukten. Den kan användas för att demonstrera funktioner och funktionalitet samt för att testa UX och kvalitetssäkring.

Värdet av wireframes för webbplats- och apputveckling

I praktiken tenderar team att se värdet av wireframes på several återkommande sätt.

Hålla team fokuserade och på rätt spår

Wireframes ser till att alla som deltar i webbplatsutvecklingen är helt överens. Det innebär inte bara att designen är mer noggrant kalibrerad och att innehållsskapandet blir enklare, utan också att utvecklingsteamet får en djupare förståelse för vad de bygger. Det förhindrar också att team måste göra nödlösningar, korrigera eller helt bygga om saker längre fram i processen – något som annars kallas för ”scope creep” (ändrade projektmål).

När alla intressenter har godkänt innehållet och funktionaliteten som beskrivs i wireframen kan teamet gå vidare med tillförsikt. Allteftersom projektet fortskrider kan wireframen användas som en referens för att hjälpa de olika teamen att hålla sig till sina uppgifter.

Leverera en positiv varumärkesupplevelse

Wireframes minskar även risker för varumärket och ryktet genom att hjälpa team att upptäcka förvirrande eller frustrerande upplevelser innan de når användarna. När en webbplats eller applikations UX och UI är välformgivna är det ingen som tänker på det – produkten fungerar och alla är nöjda. Men om du levererar en dålig design kan de negativa effekterna orsaka bestående skada på ditt varumärke och rykte. Att skapa wireframes för appar och webbplatser är ett viktigt steg mot att uppnå en enastående UX-design.

Säkerställa att webbplatsen eller appen byggs enligt målen

Att se funktioner tydligt med minimal kreativ inverkan gör att intressenter kan fokusera på andra aspekter av projektet. Wireframing sätter förväntningar på hur funktioner kommer att implementeras genom att visa hur de kommer att fungera, var de kommer att placeras och hur mycket nytta de kommer att göra. En funktion kan tas bort om den inte passar in i webbplatsens mål.

Fokus på användbarhet

Wireframing ger en objektiv blick på länknamn, konverteringsvägar, användarvänlighet, navigering och placering av funktioner. Wireframes hjälper dig utforma och identifiera brister i webbplatsens arkitektur eller funktioner och låter dig visualisera flödet ur ett användarperspektiv. Att fokusera på användbarhet tidigt är särskilt viktigt eftersom det är mycket billigare och enklare att åtgärda problem i designfasen än efter att du har börjat skriva kod.

Förstå kapaciteten för innehållstillväxt

Om du vet att din webbplats kommer att växa inom en snar framtid måste den kunna hantera den tillväxten med minimal inverkan på webbplatsens arkitektur, användbarhet och design. Wireframing kan avslöja dessa viktiga möjligheter för innehållstillväxt och hur de kan passas in.

Integrera feedback och uppmuntra till samarbete tidigt

Inför varje nytt projekt eller omdesign av en produkt vill du få tidig input och feedback så att du inte slösar för mycket tid och pengar på att utveckla i fel riktning. En wireframe är ett utmärkt sätt att snabbt förmedla idéer och få tidig feedback som hjälper dig att designa en bättre produkt.

Genom att arbeta med kunder och andra produktintressenter kan ni samarbeta och nå konsensus om hur gränssnittet ska se ut, hur det ska fungera och vilka element som ska ingå.

Att dela wireframe-diagram med din kund, designers, utvecklingsteamet och andra som är involverade i produktutvecklingen uppmuntrar till en öppen dialog för feedback och samarbete, vilket säkerställer att alla är överens tidigt i projektet.

Förbättra agil utveckling

Wireframes fungerar utmärkt i agila miljöer. Du kan arbeta med produktchefer och utvecklare för att identifiera vilka delar av designen som ska utvecklas i varje iteration. Genom att utveckla produkten i iterativa delar blir det lättare att få feedback och förfina design- och utvecklingsprocessen efter behov. Det är alltid bäst att få feedback tidigt innan för mycket tid läggs på utveckling.

Spara tid och pengar

En välutformad wireframe kan spara tid och pengar eftersom ditt utvecklingsteam får en bättre förståelse för den övergripande produkten de ska bygga och kan undvika att behöva åtgärda problem senare. Teamet slipper göra sista minuten-lösningar för att få funktioner att fungera korrekt.

Andra team som använder wireframe-diagram

Eftersom wireframes stöder samordning mellan olika roller är de särskilt användbara som en gemensam referens för hela produktteamet – inte bara för designers.

Kunder och intressenter

Wireframes ger dina kunder (eller intressenter inom ditt företag, som marknadsföringsteamet) en lättförståelig och övergripande bild av vad som utvecklas. Granskare kan ska snabbt bedöma om designen uppfyller deras förväntningar, avgöra om något saknas, utforska tillgängliga åtgärder och se hur gränssnittselementen hänger ihop.

Att visa wireframes för kunder kan lyfta fram potentiella problem eller saknade element som tidigare förbisetts eller inte tagits i beaktande. Det är mycket enklare och mindre kostsamt att åtgärda problem när man bygger wireframes än att försöka lösa dem efter att koden har skrivits.

Projektledare

Projektledare använder wireframes för att säkerställa att alla intressenter är överens. Genom att dela wireframen med alla blir det lättare för alla att se vart projektet är på väg, identifiera problem som kan uppstå, föreslå förbättringar och enas om vad som ska byggas.

Projektledare kan använda wireframes som en checklista för att följa framsteg och säkerställa att allt implementeras enligt överenskommelse.

Utvecklare

Utvecklare använder wireframes för att förstå tekniska krav och identifiera var de kan behöva implementera specifik funktionalitet. Flera wireframes som används för att bygga en storyboard hjälper utvecklare att avgöra hur användarinteraktioner ska eller kan fungera tillsammans. Storyboarding med wireframes ger utvecklare en känsla för hur data ska flöda och hjälper dem att identifiera potentiella flaskhalsar.

UX-, UI- och wireframe-design

User experience-design (UX) är en medveten metod för att öka kundlojalitet och kundnöjdhet genom att förbättra användbarhet och nöje i interaktionen mellan kunden och webbplatsen, appen och produkten. User interface-design (UI) ligger närmare grafisk design, även om ansvarsområdena är något mer komplexa. Generellt sett kommer UX-design före UI-design. UX och UI brukar, och bör, överlappa varandra i wireframe-designprocessen. Fokusområdena inkluderar:

Informationsarkitektur och wireframes

Som en del av den övergripande processen för webbplatsutveckling och wireframing handlar informationsarkitektur om att placera och prioritera information på ett sätt som gör den begriplig för framtida användare av en webbplats eller mobilapp. Det finns fyra grundläggande element enligt Information Architecture for the World Wide Web:

• Organisationsschema och strukturer: kategorisering och strukturering av information

• Märkningssystem: representation av information

• Navigeringssystem: förflyttning genom information

• Söksystem: sökning efter och lokalisering av information

Bra informationsarkitektur börjar med en omfattande affärsanalys för att utveckla en innehållsstrategi som ger en helhetsbild av struktur, innehåll och design baserat på företagets mål. För att bekräfta att analysen och strategin är korrekta är wireframes och pappersprototyper ett viktigt första steg. Att testa prototyper och wireframes är det bästa sättet att få feedback från användare tidigt i designprocessen, vilket hjälper till att förhindra kostsamma omkonstruktioner när webbplatsen väl är live. Prototyp- och wireframe-testning hjälper dig också att utvärdera olika utföranden när det gäller prestanda och användarpreferenser för att skapa bästa möjliga slutprodukt.

I wireframing-skedet handlar informationsdesign också om att förutse vad olika användartyper behöver se först och vilka åtgärder de troligen kommer att vidta. Till exempel, om din webbplats erbjuder en meddelandetjänst faller de flesta användare som besöker webbplatsen under en av två kategorier: återkommande användare och nya besökare. Återkommande användare vill troligen logga in, medan nya besökare vill skapa ett konto eller bara lära sig mer om din tjänst. På din startsida måste du ta hänsyn till båda typerna av besökare och ge dem tillräckligt med information för att uppnå sina respektive mål. Denna information kanske kommuniceras via knappar: logga in, registrera dig eller mer info. Informationsdesign handlar om att bestämma vad som ska inkluderas och var det ska placeras.

Navigeringsdesign och wireframes

Navigeringssystemet innehåller en rad element på skärmen som gör att användaren kan flytta från sida till sida. Navigeringsdesignen bör klargöra förhållandet mellan länkar så dass användarna naturligt förstår sina navigeringsalternativ. Vanligtvis erbjuder webbplatser flera navigeringssystem, såsom global, lokal, kompletterande, kontextuell och anpassad navigering.

Som namnet antyder avgör navigeringsdesign hur användare rör sig genom din app eller webbplats. Från en viss skärm kan en användare navigera till ett antal andra skärmar. De vet dock inte om detta såvida du inte berättar det för dem: Rullgardinsmenyer, klickbara länkar och rullningslister är alla exempel på visuella element som hjälper användare att navigera i din produkt.

User interface-design och wireframes

UI-design innebär att välja och arrangera gränssnittselement som hjälper användare att interagera med systemfunktioner på ett sätt som maximerar effektivitet och användarvänlighet. Vanliga UI-element inkluderar knappar, textinmatningsfält, kryssrutor, menyer och alternativknappar.

Gränssnittsdesign sammanför allt: information, navigering och allt annat i din wireframe. Både navigeringsdesign och informationsdesign har skärmkomponenter som knappar och menyer. Gränssnittsdesign avser hur element införlivas i användargränssnittet som helhet, inklusive textrutor, rubrikbilder och sidofält.

Olika typer av wireframes

Det finns fyra olika typer av wireframes:

• Grundläggande wireframes. Dessa kallas även low-fidelity-renderingar och är mycket enkla sidscheman, vanligtvis i svartvitt.

• Annoterade wireframes. Dessa lägger till en mängd detaljer till en grundläggande wireframe. Annotationer är korta anteckningar, vanligtvis på sidan eller längst ner på en wireframe, som beskriver varje objekt. De är oftast uppdelade efter innehålls- och funktionsområden och visar kortfattat orsaken till och syftet med varje objekt.

• Användarflödes-wireframes. Nerk annotationer inte räcker till för att visar hur en webbplats- eller appanvändare logiskt rör sig genom innehållet från sida till sida kan det krävas mer information. Dessa användarflödes-wireframes kan vara statiska vyer av en helt interaktiv wireframe, men de kan också innehålla ett bildspel eller en serie av wireframes för att visa ett primärt användarflöde eller en uppsättning flöden.

• Interaktiva high-definition-wireframes. Här kan du uppleva interaktioner (t.ex. tryck, klick och svepningar) inom eller mellan enskilda wireframes. Genom att lägga till interaktioner innan man går vidare till fullständiga mockups eller live-prototyper sparar man designtimmar och utvecklingstid. Den här typen av wireframes kan endast skapas i presentations- och grafisk designprogramvara eller i specifik programvara för wireframing och prototypframställning.

Hur man designar och skapar en enkel wireframe

Nu när vi har tittat på de grundläggande komponenterna i en wireframe ska vi titta på hur man sätter ihop allt för att designa och skapa en enkel wireframe.

Och kom ihåg: När det gäller wireframing – ju tidigare du börjar, desto bättre.

1. Tänk på webbplatsens slutgiltiga mål och designa med det målet i åtanke. Tänk på hur användaren kommer att interagera med gränssnittet.

2. Börja med en enkel representation av webbsidan med låg detaljrikedom, uppdelad i tre delar: rubriken (det första användarna ser längst upp på sidan), webbsidans brödtext och sidfoten, som vanligtvis innehåller mindre viktig information.

3. Tänk sedan på navigeringen. Lägg till knappar och länkar så att användare kan besöka webbplatsens huvudsektioner, inklusive innehållsområden, sökning och användarinloggning.

4. Annotera din wireframe for ökad tydlighet.

När du har nått det här stadiet kan du dela wireframen med intressenter innan du går vidare till nästa steg. Du kan rita upp den första skissen för hand på papper eller en whiteboard, mas när du har nått slutskedet kommer du troligen att använda en programvara för att utveckla den vidare.

Om du designar något utöver en enskild landningssida hjälper det också att planera de olika skärmar du behöver innan du börjar rita enskilda layouter. Oavsett om du gör wireframes för an app eller en webbplats kan du vara säker på en sak: du kommer att behöva skapa mer än en wireframe. Wireframing handlar helt och hållet om användarflöde. Hur rör sig användaren genom din app? Finns det en specifik plats du vill att de ska hamna på?

Olika projekt kräver olika arbetsflöden, men som en allmän regel bör du rita din första wireframe i antingen initierings- eller planeringsfasen av projektets livscykel. Innan du börjar med dina diagram bör du kartlägga de möjliga vägar en användare kan ta och lista varje ny skärm de kan stöta på. För varje ytterligare skärm behöver du en extra wireframe. Wireframes tenderar också att utvecklas i detaljrikedom i takt med att ett projekt rör sig från tidig utforskning till konkret planering.

Att hoppa direkt in i wireframing-processen utan en tydlig uppfattning om användarflödet leder till förvirrande och röriga diagram.

Ett mer detaljerat arbetsflöde steg för steg

Om du vill ha en mer detaljerad process än de fyra stegen ovan kan följande arbetsflöde hjälpa dig att gå från en grov layout till delbara wireframes med högre detaljrikedom.

1. Börja lägga till grundläggande former

Efter noggrann planering bör du vara redo att utforma din wireframe. Börja med genom att välja en ”ram” (frame) för ditt diagram. Om du skapar en wireframe för en app väljer du en form som liknar skärmen på en mobil enhet. För en wireframe för en webbplats väljer du en form som liknar ett webbläsarfönster. De flesta digitala wireframing-plattformar har båda dessa grundläggande ramar tillgängliga i sitt formbibliotek.

Lägg sedan till de största elementen i din wireframe. Dessa bör vara grundläggande former och behållare som representerar objekt som ett rubrikfält, en sidokolumn eller en textruta. Det finns inget behov av att inkludera text eller bilder i det här skedet – etablera bara den allmänna layouten. Upprepa denna process för varje wireframe du behöver skapa.

2. Lägg till knappar och länkar

När du har etablerat layouten för din wireframe är det dags att lägga till lite funktionalitet. På en given skärm i din produkt finns det troligen flera knappar som leder användaren till en ny skärm. Du kanske lade till dessa som former i förra steget, men om inte väljer du en grundläggande form för att representera varje knapp och lägger till dem nu. Du kan också lägga till texten som ska visas på knappen (till exempel ”hem”). Om din wireframing-plattform har länkfunktioner kan du länka varje knapp till den wireframe den ska leda användaren till.

3. Samla in feedback och redigera

Nu är det dags att dela din wireframe med andra intressenter för feedback, revideringar och godkännande.

4. Lägg till detaljer

Vid det här laget är ditt diagram troligen en wireframe med medelhög detaljrikedom (mid-fidelity). När den grundläggande designen är godkänd kan du börja förfina detaljerna. Lägg till bilder och text. Använd färg för att skilja olika element på sidan åt, men håll dig till gråskala. Se till att allt har rätt storlek ända ner på pixelnivå.

5. Dela din wireframe

Du bör nu ha en fungerande wireframe med hög detaljrikedom (high-fidelity). Dela den med projektintressenter och relevanta team.

Wireframe-mallar och exempel

Wireframe-mallar kan hjälpa dig att designa en ny webbsida eller applikation snabbare. De flesta programvaror för webbplats- och appdesign erbjuder ett brett utbud av mallar.

Oavsett vilken bransch du befinner dig i eller vilken plattform du designar för kan wireframes hjälpa dig att utforma och förverkliga den perfekta användarupplevelsen. Ta en titt på dessa wireframe-exempel, inklusive några som kombineras med användar- eller uppgiftsflöden.

Använda wireframe-programvara och verktyg för att designa webbsidor och appar

Du kan försöka föreställa dig slutresultatet av en webbplats eller app i huvudet, men det är mycket lättare om du skapar en wireframe i förväg och får koll på vad du behöver göra innan du sätter igång. Wireframe-programvara och verktyg låter dig skapa exempeldesigner med flexibilitet och tidsbesparande funktioner. Du kan bygga vidare på idéer, se helheten och undvika misstag längs vägen. Mallar kan göra det ännu enklare att snabbt visualisera dina idéer, göra justeringar samt arbeta igenom och lösa eventuella problem.

Wireframing-verktyg kan också göra det lättare för icke-designers att bidra på ett meningsfullt sätt till tidiga UX-diskussioner. UX-designers använder ofta wireframe-diagram för att demonstrera för kunder, produktdesigners och andra teammedlemmar hur användargränssnittet kommer att se ut och fungera. Men även produktchefer och andra intressenter kan använda wireframes för att kommunicera den funktionalitet eller design de är ute efter – även om de inte har så mycket erfarenhet av design.

Mockups och mockup-verktyg

Wireframes fungerar som platshållare för designen, medan en mockup fyller i de visuella detaljerna, såsom färger, typografi och varumärkeselement. Även om en mockup delar wireframens syfte att dokumentera och samordna teamets vision, har den den extra fördelen av sin överlägsna visuella utformning, vilket gör mockups mer användbara för beslutsfattare. I grund och botten tillför en mockup visuell finess till den skiss som lagts fram i en wireframe.

Hur man utvärderar appar och programvaruverktyg för wireframing

Programvara för wireframing ska göra det enkelt att snabbt och smidigt utveckla någon av de fyra typerna av wireframes: grundläggande, annoterade, användarflöden och interaktiva. Här är några saker att tänka på innan du fattar ett beslut:

• Hur verklighetstrogen behöver den vara? Designkapaciteten i viss programvara är mycket enkel och ser handritad ut, medan andra ligger närmare en minimal prototyp med en mer färdigställd användarupplevelse och gränssnitt. Vad du väljer beror på hur färdig din slutprodukt behöver se ut.

• Är delning en prioritet? Vissa produkter har förmågan att exportera wireframes i en mängd olika format, medan andra kräver att alla som tittar på designen har produkten installerad på sin dator. Användare som vill dela sin design med ett stort acronym personer behöver ett program som gör delning för granskning, samarbete och godkännande enklare, till exempel online- eller molnbaserade verktyg.

• Vilken plattform föredrar du? Användare som söker delnings- och teamdesignfunktioner på en mängd olika datorer kommer troligen att kräva en produkt med online- eller molnbaserad åtkomst.

• Behöver du offlineåtkomst? Webbläsarbaserade produkter är enbart tillgängliga via webbläsare. Användare med webbläsarbaserade produkter kanske inte kan spara designfiler lokalt eller arbeta utan internetanslutning. Webbläsarbaserade produkter brukar vara mer lättviktiga och uppdateras mer frekvent, men kan förlora offlineåtkomst som ett resultat av detta.

• Letar du efter mallar och bibliotek? Dessa gör det mycket lättare att skapa wireframes. Programvara som erbjuder mallar för mobilapplikationer, webbläsardesigner och andra format sparar mycket tid och är särskilt användbart när du designar ett stort antal och en stor variation av wireframes. Dessutom erbjuder många wireframing-produkter bibliotek med ikoner, widgetar och teman.

Varför Lucidchart är den bästa applikationen för wireframing

Lucidchart gör det möjligt för både tekniska och icke-tekniska användare att skapa wireframes på valfri internetansluten enhet utan att behöva ladda ner någon programvara. Lucidchart är känt för sin:

• Enkelhet: Rullgardinsmenyer, knappar och allmänna element hjälper dig att skissa upp ett nytt koncept eller förbättra ett gammalt. Åtgärder låter dig efterlikna navigering på en webbplats genom att flytta från sida till sida, länka till en extern sida, spela upp en video och mycket mer.

• Säkerhet och tillförlitlighet: När du skapar diagram i Lucidchart sparas och lagras dina ändringar säkert på flera platser. Vi meddelar dig till och med om anslutningsproblem hindrar oss från att spara ditt senaste utkast.

• Interaktiva element: Förlita dig inte bara på en statisk wireframe. Bygg istället en interaktiv mockup som ger möjlighet att klicka på knappar, titta på videor, bläddra i menyer och testa andra länkar.

• Smidigt samarbete: Minska utvecklingstiden genom att låta alla delta i processen. Dina kunder, innehållsproducenter och programmerare kan enkelt chatta och ge feedback.

• Rika funktioner: Kunder kommer att uppskatta en interaktiv wireframe som demonstrerar användarupplevelsen. Ge dina designers och kunder en fungerande prototyp av en app eller webbplats.

• Enkel publicering och delning: När du är klar med din wireframe är det enkelt att dela den. Spara till en mängd olika bildfilformat, skriv ut den eller skicka den via e-post. Du kan till och med publicera den på somiala medier eller dela den privat för att få feedback.