Vad är wireframes för webbplatser?

Ursprungligen betydde termen ”wireframe” en visuell representation av tredimensionella objekt, som de som används i produktdesign och -utveckling. Nu används ordet även för att beskriva 3D-modellering inom datoranimering samt vid design och utveckling av webbsidor och mobilappar i 2D.

Inom webbdesign är en wireframe eller ett wireframe-diagram en visuell representation i gråskala av strukturen och funktionaliteten hos en enskild webbsida eller en mobilappskärm. Wireframes används tidigt i utvecklingsprocessen för att skapa den grundläggande strukturen för en sida innan visuell design och innehåll läggs till. De kan skapas på papper, direkt i HTML/CSS eller med hjälp av program.

Wireframes ersätter den abstrakta karaktären hos webbplatskartan, som vanligtvis är det första steget i webbplatsutveckling, med något mer påtagligt och begripligt. Det finns flera relaterade syften för wireframes:

• Se till att webbplatsen eller appen byggs enligt målen.

  Genom att se funktioner tydligt med minimal kreativ påverkan kan intressenterna fokusera på andra aspekter av projektet. Wireframing sätter förväntningarna på hur funktioner ska implementeras genom att visa hur de kommer att fungera, var de kommer att finnas och hur mycket nytta de kommer att ge. En funktion kan tas bort om den inte passar in i målen för webbplatsen.

• Fokus på användbarhet.

  Wireframing ger en objektiv vy av länknamn, konverteringsvägar, användarvänlighet, navigering och placering av funktioner. Med wireframes kan du enklare identifiera brister i webbplatsens arkitektur eller funktioner och visa hur bra den flyter ur ett användarperspektiv.

• Kapacitet för nytt innehåll.

  Om du vet om att din webbplats snart kommer att växa, måste tillväxten kunna hanteras med minimal påverkan på arkitektur, användbarhet och design. Med wireframes kan olika möjligheter för att lägga till ytterligare innehåll undersökas och anpassas.

• Feedback och smärtfria iterationer.

  Istället för att slå samman och utveckla funktionalitet, layout och kreativa element i ett enda steg kan du med wireframes göra dessa överväganden var för sig. Därmed kan intressenterna ge feedback mycket tidigare i processen. Att skapa wireframes med hjälp av programvara gör den iterativa processen – en naturlig del av webbdesign – mycket mindre krävande.

Värdet av wireframes i webb- och apputveckling

Med wireframes får alla deltagare i ett webbutvecklingsprojekt en gemensam bild. Och vad är då poängen med det? Det finns flera aspekter: designen kan anpassas mer exakt; utvecklingsteamet får en bättre förståelse av vad de utvecklar; det blir enklare att ta fram innehåll; du undviker behovet av tillfälliga lösningar, korrigeringar och total ombyggnad senare i processen – något som kallas ”ambitionsglidning” eller ”scope creep”. Vad är värdet med det? Att det sparar tid och pengar.

Design av användarupplevelsen (UX) är en metod för att öka kundlojaliteten och kundnöjdheten genom att förbättra användarvänligheten och kundupplevelsen i interaktionen mellan kunden och webbplatsen, appen eller produkten. Design av användargränssnittet (UI) ligger närmare grafisk design, även om uppgifterna är något mer komplexa. Oftast designas användarupplevelsen före användargränssnittet. UX och UI tenderar att – och bör! – överlappa under wireframe-designen. Bland de centrala områdena finns:

Informationsarkitektur och wireframes 

En del av den övergripande processen för webbplatsutveckling och wireframing är informationsarkitektur (IA), som handlar om att placera och prioritera information på ett sätt som gör att framtida användare av en webbplats eller mobilapp förstår vad de ska göra. Det finns fyra grundläggande delar, enligt Information Architecture for the World Wide Web:

• Organisationsscheman och strukturer: att kategorisera och strukturera information
• Benämningssystem: att representera information
• Navigationssystem: att förflytta sig genom information
• Söksystem: att leta efter och hitta information

Bra IA börjar med en omfattande affärsanalys för att utveckla en innehållsstrategi som ger en helhetsbild av struktur, innehåll och designstil med utgångspunkt i företagets mål. För att bekräfta att analysen och strategin är korrekt ä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, något som hjälper till att förebygga kostsamma ändringar när webbplatsen väl är publicerad. Prototyp- och wireframe-testning gör det också enklare att bedöma olika designer när det gäller effektivitet och användarpreferenser för att därigenom skapa bästa tänkbara produkt.

Navigationsdesign och wireframes

Navigationssystemet inkluderar en rad element på skärmen som gör att användaren kan förflytta sig från sida till sida. Navigationsdesignen bör tydliggöra förhållandet mellan länkar så att användaren naturligt förstår vilka navigeringsalternativ som finns. Vanligtvis erbjuder webbplatser flera navigationssystem, till exempel global, lokal, kompletterande och kontextuell navigation samt snabbnavigation.

Design av användargränssnitt och wireframes

UI-design innebär bland annat att välja och arrangera gränssnittselement som hjälper användarna att interagera med systemfunktioner på ett sätt som ger maximal effektivitet och användarvänlighet. Bland vanliga UI-element finns knappar, textfält, kryssrutor, menyer och alternativknappar.

Lär dig mer om wireframe-verktyg för UI

Det finns fyra olika typer av wireframes, från den enklaste typen (svartvita skisser) till den mest komplexa (som nästan motsvarar den äkta varan):

• Grundläggande wireframes. Kallas ibland lågupplösta renderingar och är väldigt enkla sidskisser, oftast i svartvitt.

• Kommenterade wireframes.Dessa innehåller kompletterande information om en grundläggande wireframe.Kommentarerna är korta anteckningar, vanligtvis vid sidan om eller under en wireframe, som beskriver varje objekt på wireframen. Kommentarerna separeras ofta efter innehåll och funktionalitet och anger (kortfattat) orsaken och syftet med varje objekt.

• Wireframes för användarflöde. När kommentarer inte räcker för att visa hur en användare av webbplatsen eller appen kommer att gå igenom innehållet från sida till sida, kan mer information behövas. Dessa wireframes för användarflöde kan vara statiska vyer av en helt interaktiv wireframe, men de kan också inkludera ett bildspel eller en serie wireframes för att visa ett primärt användarflöde, eller flera användarflöden.

• Interaktiva, högupplösta wireframes.

   Du kan uppleva interaktioner (som tryck, klick och svep) inom eller mellan individuella wireframes. Att lägga till interaktioner innan du går till fullständiga mockups eller live-prototyper sparar tid för designer och utvecklare. Denna variant av wireframes kan endast göras i program för presentation och grafisk design, eller särskilda wireframe- och prototypprogram.

Nu när vi har tittat på de grundläggande komponenterna i wireframes, låt oss ta en titt på hur man sätter ihop allt för att designa och skapa en enkel wireframe. 

1. Fundera på målet med webbplatsen 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, lågupplöst återgivning av webbsidan uppdelad i tre delar: sidhuvudet (det första användarna ser överst på sidan), webbsidans centrala del och sidfoten (som vanligtvis innehåller mindre viktig information).

3. Fokusera därefter på navigeringen. Lägg till knappar och länkar så att användare kan besöka de viktigaste delarna av din webbplats: olika innehållsområden, sökning och användarinloggning.

4. Använd kommentarer för att förtydliga din wireframe. 

När du har kommit till det här stadiet kan du dela wireframen med intressenter innan du går vidare till nästa steg. Du kan skissa den första wireframen för hand på papper eller en whiteboard, men när du väl har kommit till steg 4 kommer du sannolikt att använda programvara för att utveckla den ytterligare.

Vill du veta mer om hur du skapar din egen wireframe? Ta en titt på den här Lucidchart-handledningen.

Du kan försöka föreställa dig slutresultatet av en webbplats eller app i huvudet, men det blir mycket enklare om du förbereder en wireframe i förväg och tar reda vad du behöver göra innan du börjar. Med wireframe-program och -verktyg kan du skapa flexibla exempeldesigner med tidsbesparande funktioner. Längs vägen kan du vidareutveckla idéer, se helheten och undvika misstag. Mallar kan göra det ännu enklare att snabbt visualisera dina idéer, göra justeringar och arbeta igenom och lösa eventuella problem.

Lär dig mer om hur du använder program och verktyg för att designa wireframes för webbplatser.

Läs mer om hur du använder program och verktyg för att designa wireframes för appar.

Wireframe-mallar är nödvändiga när du börjar designa en ny webbsida eller applikation. Det går att hitta gratis wireframe-mallar online. De flesta program för webb- och appdesign innehåller också ett brett utbud av mallar. Här är några exempel på fungerande mallar från Lucidchart för att hjälpa dig förstå hur designprocessen för wireframing kan fungera:

I en wireframe ingår bara platshållare för designelement, men i en prototyp eller mockup visas även de visuella detaljerna som färger, typografi och varumärkeskomponenter. Även om en mockup har samma syfte som en wireframe – att dokumentera och samordna teamets vision – så ger den ett tydligare visuellt intryck, något som gör den mer användbar för beslutsfattare. Med andra ord: en prototyp eller mockup lägger till en visuell känsla till den strukturerade grund som finns i en wireframe.

 

Ett program för wireframes ska göra det snabbt och enkelt att utveckla alla fyra typerna av wireframes: grundläggande wireframes, kommenterade wireframes, wireframes för användarflöde och interaktiva wireframes. Här är några saker att tänka på innan du bestämmer dig:

• Hur ”verkligt” behöver det vara?

  Designmöjligheterna inom vissa program är mycket begränsade och diagrammen ser handritade ut, medan andra ligger närmare enkla prototyper med mer fullständiga användarupplevelser och gränssnitt. Vad du väljer beror på hur pass färdig din slutprodukt behöver uppfattas.

• Är det viktigt att kunna dela?

  Vissa produkter ger möjlighet 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 antal människor behöver ett program som underlättar delning för granskning, samarbete och godkännande – exempelvis de program som är online- eller molnbaserade.

• Vilken plattform föredrar du?

  Användare som behöver möjlighet att dela och arbeta med team på en mängd olika datorer kommer sannolikt att efterfråga en produkt med online- eller molnbaserad åtkomst. Vissa användare arbetar på en enda enhet, och det finns företag som vill ha sin design lokalt lagrad och använda programvara som kan installeras.

• Behöver du åtkomst offline?

  Webbläsarbaserade produkter kan endast användas via webbläsare. Användare med webbläsarbaserade produkter kanske inte kan spara sina designer lokalt eller arbeta utan internetåtkomst. Webbläsarbaserade produkter är ofta inte lika svårarbetade och uppdateras oftare, men kan däremot sakna offlineåtkomst.

Letar du efter mallar och bibliotek? De gör det mycket enklare att skapa wireframes. Program som erbjuder mallar för mobila applikationer, webbläsardesigner och andra format sparar mycket tid och är särskilt användbara när du designar ett stort antal olika wireframes. Dessutom tillhandahåller många wireframe-produkter bibliotek med ikoner, widgets och teman.

Varför Lucidchart är rätt onlineapplikation för wireframes

Alla kan använda Lucidchart inom några få minuter, oavsett om de är ingenjörer eller nybörjare. Skapa en interaktiv demo av en webbplats på några få minuter! Ingen nerladdning krävs. Nu kan du skapa robusta diagram i molnet med hjälp av din webbläsare. En licens kan användas på vilken dator eller surfplatta som helst.

• Enkelhet:

  Rullgardinsmenyer, knappar och användbara element hjälper dig att skissa på ett nytt koncept eller förbättra ett gammalt. Med hjälp av hotspots (klickbara områden) kan du efterlikna webbplatsnavigering genom att flytta mellan sidor, länka till en extern sida, spela upp en video med mera.

• Säkert och pålitligt:

  Amazon Web Services säkerhetsprotokoll på enterprise-nivå håller din information säker. När du skapar diagram i Lucidchart sparas dina ändringar kontinuerligt på flera olika geografiska platser. Vi meddelar dig till och med om anslutningsproblem hindrar oss från att spara ditt senaste utkast.

• Interaktiva element:

  Nöj dig inte med en statisk wireframe.Bygg istället en interaktiv prototyp som ger möjlighet att klicka på knappar, titta på videor, bläddra i menyer och prova andra länkar.

• Smidigt samarbete:

  Minska utvecklingstiden genom att få med alla i processen. Dina kunder, innehållsproducenter och programmerare kan enkelt chatta och ge feedback.

• Rika funktioner:

  Kunderna uppskattar en interaktiv wireframe som demonstrerar användarupplevelsen. Aktivera demoläget för att ge dina designers och kunder en funktionell prototyp av en app eller webbplats.

• Publicera och dela:

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