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.
-
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.
-
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.
-
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.
-
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.
