Vad är Wireframe?

En wireframe är en enkel skiss av hur en webbsida eller app-skärm ska vara uppbyggd. Här finns inga färger, inga snygga bilder och ingen färdig text — bara grå lådor och streck som visar VAR saker ska placeras. Var ska rubriken sitta? Var hamnar menyn, bilden, knappen? En wireframe svarar på just den sortens frågor.

Den bästa liknelsen är en ritning av ett hus innan man börjar bygga. Ritningen visar var rummen, dörrarna och fönstren ska vara — men den säger ingenting om väggfärg, möbler eller gardiner. På samma sätt bestämmer en wireframe strukturen, medan färger och visuell design kommer i ett senare steg (då blir det en mockup istället).

Poängen med att skissa så avskalat är att man kan diskutera och ändra strukturen snabbt och billigt, innan någon lagt tid på finlir. Det är mycket lättare att flytta en grå låda i en skiss än att bygga om en färdig sida.

Varför är wireframes viktiga för ditt företag?

Wireframes gör att du och byrån är överens om upplägget INNAN någon börjar bygga. Du ser tidigt hur sidan är tänkt att fungera och kan säga "flytta upp kontaktknappen" medan det fortfarande bara är en skiss — inte en färdig kodad sida.

Det sparar både tid och pengar. Ändringar som görs i skiss-stadiet tar minuter, medan samma ändringar i en färdig produkt kan ta dagar. Wireframes minskar helt enkelt risken för dyra missförstånd.

Wireframe i praktiken

Säg att ett Jönköpingsföretag vill ha en ny startsida. Innan vi rör en enda färg eller bild ritar vi en wireframe: en grå låda överst för logga och meny, en stor ruta för budskapet, tre lådor för tjänsterna och en kontaktknapp längst ner.

Kunden tittar på skissen och säger "vi vill ha kundomdömena högre upp". Det tar oss två minuter att flytta lådan. Först när strukturen känns rätt går vi vidare till design och bygge. Så undviker vi att bygga fel och sedan behöva göra om.