Hvad er wireframes og hvorfor består det bare af grå bokse og lorem ipsum tekst?
Når man skal opbygge et website fra bunden, eller blot skal lave en landing page, gøre den bedre til mobilen mm. kan det nogle gange være besværligt at gå direkte fra tanke til handling. Specielt hvis det ikke er dig selv, der både designer og udvikler sitet.
Undgå misforståelser
Skal tankerne videreformidles til en designer eller til en udvikler kan wireframes forhindrer misforståelse. Med wireframes sikrer man, at man er på bølgelængde og at man får alle de grundlæggende funktioner og elementer med.
Men nej, wireframes er da ikke det mest appetitvækkende i hele verden. Det består jo i bund og grund blot af en masse bokse i forskellige nedtonede farver (hvis grå overhovedet kan anses som en farve i den her sammenhæng), samt lorem ipsum tekster.
Selvom wireframes ikke er det mest inspirerende og appetitvækkende, så er det alligevel en vigtig grundsten i et godt website. Selvom det æstetiske er vigtigt, når vi snakker webdesign, så er der bare en masse andet i det også. Der er nemlig selve opbygning og funktioner. Se wireframes som er de knoglerne. Det er strukturen – grundstenen. Så fylder vi noget hud på senere. Okay, ikke det bedste billede – but you get the point.
Hold fokus på websitets grundlæggende layout
Mange tror at det hele handler om farver og fonte – og jo, det er da også vigtigt, da det kan fremkalde en masse følelser overfor brugerne (vi har faktisk skrevet et helt indlæg om farvepsykologi) – men selve det at tilføje farver og fonte vil ikke i sig selv kunne løse udfordringen med websitet. Det er derfor det her kønsløse, sort-hvide wireframing er så vigtigt.
Wireframes hjælper med at holde fokus på sitets grundlæggende layout, og det giver en hurtigere og nemmere mulighed for at rokere rundt og ændre placering af bokse og elementer uden at skulle forholde sig til farver, samt ændrer kode mm.
Derudover er det en god måde, at visualiserer tanker og idéer ned.
To værktøjer du kan bruge, når du skal lave wireframes:
Wireframes skal ikke være flotte. Har du en blog og en kuglepen, så er du klar. Men der findes også forskellige værktøjer, som kan hjælpe dig med wireframing.
Her er et par stykker:
Balsamiq
Balsamiq inkluderer flere forskellige drag-and-drop elementer. Lige fra knapper til lister og andre web elementer. Stilen er håndtegnet og giver det noget charme og personlighed.
Adobe XD
Adobe XD giver mulighed for at lave wireframes – med deres forskellige skabeloner, er der mulighed for hurtigt og nemt, at hente forskellige templates og elementer og derefter tilpasse dem. Når man har udarbejdet wireframes, så er det muligt at dele dem med designere og udviklere, som selv har mulighed for at rette, tilføje kommentarer og hente data. Det kan også blot deles som en præsentation. Derudover giver det mulighed for at omdanne disse wireframes til funktionelle prototyper.
Som sagt behøver du ikke et fancy program for at komme i gang med wireframes. En kuglepen og et stykke papir er nok.
Husk mobile-first
En god idé er ikke kun, at lave wireframes af desktopsitet, men også mobilversionen. Når vi designer websites, tænker vi altid mobile first. Flere og flere bruger mobilen, når de browser på nettet og det er vigtigt, at have tænkt det med, når man designer websites. Det er ikke bare at kopiere desktopversionen 1-1 ned til mobilen. Tegn, udfordr og test. Når der først er styr på wireframes delen, så kan vi kigge på mockups, hvor der leges med det mere æstetiske i form af farver, billeder, skrifttyper mm. Det er der vi kommer hud på.
Opsummering
Så helt kort bruges wireframes til at skabe et overblik over websitets struktur og hierarki, samt hvilke elementer, der skal være. Det hjælper med at holde fokus på det grundlæggende layout af en side og gør det hurtigt og nemt, at rykke rundt på sidens elementer.
Man behøver ikke være mega kreativ eller kunstnerisk for at lave wireframes, men det er dog vigtigt at have brugeren i mente. Det handler om at lave det bedste website, landing page, mobile oplevelse for dine brugere. Når først det grundlæggende er på plads, kan vi begynde at lave mockups – det er her websitet kommer til live med hud, hår og hele molevitten!