# L\u00e5t oss s\u00e4ga att du \u00e4r p\u00e5 ett bibliotek. Det vore inte alls trevligt om du inte kunde r\u00f6ra dig p\u00e5 grund av de \u00f6verfulla hyllorna och salarna, medan bibliotekarien st\u00e4ndigt uppmanade dig med de senaste b\u00f6ckerna som kommit. Det \u00e4r samma sak med vitt utrymme som anv\u00e4nds i webbdesign: det ger utrymme att andas till m\u00e5nga webbplatselement. Vitt utrymme \u00e4r extremt viktigt i webbdesign f\u00f6r anv\u00e4ndbarhet och l\u00e4sbarhet och det betonar s\u00e4rskilda element. F\u00f6rest\u00e4ll dig hur det skulle vara om det fanns m\u00e5nga ord som klistrade ihop. Anv\u00e4ndarupplevelsen skulle definitivt vara mycket obehaglig och det skulle kr\u00e4vas mycket anstr\u00e4ngning f\u00f6r att f\u00f6rst\u00e5 budskapen p\u00e5 en webbplats. Vitt utrymme \u00e4r ocks\u00e5 k\u00e4nt som ”negativt utrymme” och h\u00e4nvisar till det tomma utrymmet runt och mellan flera delar av en design eller sidlayout. Det kallas ocks\u00e5 ”andningsrum”. Och det beh\u00f6ver inte vara vitt. f\u00e4rg skulle passa s\u00e5 l\u00e4nge det skapar en ren och snygg design. \u00c4ven om negativt utrymme inte inneh\u00e5ller n\u00e5got kan det definiera och f\u00f6rst\u00e4rka det positiva utrymmet. ##### Vitt utrymme \u2013 ett aktivt element Negativt utrymme har ansetts vara ett passivt element, men det spelar en extremt viktig roll f\u00f6r att f\u00f6rb\u00e4ttra varum\u00e4rkesexponeringen och f\u00f6rb\u00e4ttra hela den visuella layouten. Att skapa och leverera en fantastisk anv\u00e4ndarupplevelse inneb\u00e4r mer \u00e4n att anv\u00e4nda blankt utrymme, men vi kan inte f\u00f6rneka den enorma betydelsen av detta element. Den guidar anv\u00e4ndare p\u00e5 en sida, skapar sofistikering och en harmonisk layout, kommunicerar det som beh\u00f6ver mer uppm\u00e4rksamhet p\u00e5 en webbplats och underl\u00e4ttar skanningsbarhet. Vitt utrymme anv\u00e4nds mellan flera element som sidof\u00e4lt, texter, sidf\u00f6tter, sidhuvuden och bilder. En r\u00f6rig sida, s\u00e4rskilt om det inte finns n\u00e5gon hierarki i texten, f\u00f6rs\u00e4mrar l\u00e4shastigheten och f\u00f6rst\u00e5elsen. Negativt utrymme kan bli lika v\u00e4rdefullt som sj\u00e4lva inneh\u00e5llet. Detta g\u00e4ller s\u00e4rskilt viktiga varum\u00e4rken eftersom det tillf\u00f6r en ton av elegans. ##### Rollen av vitt utrymme i webbdesign Det finns tv\u00e5 typer av vitt utrymme: mikro- och makrovitt utrymme. Micro white space \u00e4r utrymmet mellan dessa mindre element: mellan bokst\u00e4ver, ord, listobjekt, mellan en bild och en bildtext. T\u00e4nk till exempel p\u00e5 en n\u00e4ttidning. Den beh\u00f6ver ha utrymme runt tecken och mellan stycken f\u00f6r att g\u00f6ra inneh\u00e5llet l\u00e4ttl\u00e4st och ge tidningen en ren och l\u00e4tt k\u00e4nsla. Makroutrymme betyder utrymmet mellan st\u00f6rre element, vilket anv\u00e4nds mycket f\u00f6r till exempel Googles webbplats. Den har en ren design, fokus ligger p\u00e5 sidans huvudsyfte, medan andra aspekter inte \u00e4r s\u00e5 betonade. F\u00f6r att testa hur webbplatsen du bygger ser ut n\u00e4r det g\u00e4ller f\u00e4rger \u00e4r Adobe Kuler r\u00e4tt verktyg. Du kan skapa, redigera och ladda upp olika f\u00e4rgscheman. Dessutom, om du \u00e4r os\u00e4ker och inte vet vilka typsnitt som skulle vara l\u00e4mpligare, prova Google Webfonts. V\u00e4lj olika typsnitt och se hur de sammanfl\u00e4tar med blanksteg. Om du inte \u00e4r s\u00e4ker p\u00e5 var och hur du anv\u00e4nder blanksteg n\u00e4r du bygger och anpassar en webbplats kan Balsamiq vara till hj\u00e4lp. Det hj\u00e4lper dig att arbeta snabbare och enklare genom att \u00e5terskapa en skiss p\u00e5 en whiteboard, men genom din dator. Eftersom alla webbplatser har webbformul\u00e4r. Det \u00e4r oerh\u00f6rt viktigt var du placerar dem och hur du anv\u00e4nder negativt utrymme i detta sammanhang. Och eftersom att skapa webbformul\u00e4r vanligtvis inneb\u00e4r kodning, beh\u00f6ver du ett verktyg f\u00f6r att f\u00f6renkla ditt arbete och spara tid. 123ContactForm webbformul\u00e4rbyggare kr\u00e4ver ingen kodning och \u00e4r idealiskt \u00e4ven n\u00e4r du anv\u00e4nder blanksteg f\u00f6r att bygga ett webbformul\u00e4r. Vitt utrymme kan vara aktivt och passivt. Aktivt negativt utrymme leder en l\u00e4sare fr\u00e5n ett element till ett annat, skapar harmoni och kan positionera ett varum\u00e4rke mycket b\u00e4ttre. Passivt blanksteg \u00e4r faktiskt det vita utrymmet som omger utsidan av en sida eller tomma omr\u00e5den inuti inneh\u00e5llet, vilket ibland betraktas som d\u00e5lig design. Negativt utrymme skapar balans, ett bra \u00f6vergripande fl\u00f6de och p\u00e5verkar l\u00e4sarna, vilket g\u00f6r att de stannar mer p\u00e5 en sida. Och detta g\u00e4ller inte bara en n\u00e4ttidning, utan vilken webbplats som helst. Ibland st\u00e4lls webbdesigners inf\u00f6r olika plattformar, sk\u00e4rmuppl\u00f6sningar eller webbl\u00e4sare. Det \u00e4r d\u00e4rf\u00f6r det finns kompositions\u00f6vningar f\u00f6r webbdesignstudenter. Dessa \u00f6vningar hj\u00e4lper dem att inse vikten av negativt utrymme och hur man anv\u00e4nder det effektivt. ##### Negativt utrymme har ett stort inflytande. Ta reda p\u00e5 varf\u00f6r! White space ger hj\u00e4rnan visuella ledtr\u00e5dar om vilka element som \u00e4r separerade och vilka som h\u00f6r ihop. Det b\u00e4sta exemplet best\u00e5r av flera rader med telefonnummer eller e-postadresser p\u00e5 en webbplats separerade av blanksteg, vilket signalerar din hj\u00e4rna att var och en \u00e4r en annan sekvens och inte ett s\u00e4rskilt l\u00e5ngt nummer. Om det finns mer vitt utrymme kommer en webbplats att se mer elegant ut. Denna anv\u00e4ndning av negativt utrymme \u00e4r vanligt i dyra och eleganta tidningar f\u00f6r kvinnor. N\u00e4stan alla annonser har mycket vitt utrymme, det finns tillr\u00e4ckligt med utrymme f\u00f6r bakgrundsbilder och texter \u00e4r knappa. Ett motsatt exempel \u00e4r en direkt e-postannons som vi alla har f\u00e5tt minst en g\u00e5ng. Kommer du ih\u00e5g att det var s\u00e5 lite negativt utrymme kombinerat med m\u00e5nga och stora textblock som inte s\u00e5g bra ut? S\u00e5 det har ett enormt inflytande. Det \u00e4r d\u00e4rf\u00f6r webbdesigners m\u00e5ste arbeta med det i \u00e5tanke innan de skapar och anpassar en viss webbplats. Det finns n\u00e5gra grundl\u00e4ggande principer f\u00f6r att skapa en bra webbdesign. Negativt utrymme ska separera element som sidhuvud, sidfot och navigering. Och n\u00e4sta g\u00e5ng du designar en sida, analysera marginalerna och vaddera mer ist\u00e4llet f\u00f6r att undra hur mycket utrymme du beh\u00f6ver f\u00f6r lite text. ##### Kunder b\u00f6r ocks\u00e5 f\u00f6rst\u00e5 vikten av vitt utrymme Om du har tvivel eller om dina kunder inte riktigt f\u00f6rst\u00e5r vikten av negativt utrymme, s\u00e5 h\u00e4r kan du g\u00f6ra: bygga din design p\u00e5 tv\u00e5 olika s\u00e4tt. En med mindre negativt utrymme f\u00f6r att f\u00f6rmedla en mer praktisk och l\u00e5gm\u00e4ld ton och den andra med mer vitt utrymme f\u00f6r en sofistikerad k\u00e4nsla. T\u00e4nk p\u00e5 att du b\u00f6r anv\u00e4nda samma element i dina tv\u00e5 m\u00f6nster. Det enda du b\u00f6r g\u00f6ra annorlunda \u00e4r att \u00e4ndra avst\u00e5ndet mellan alla dessa element. Det kanske b\u00e4sta s\u00e4ttet att se hur vitt utrymme anv\u00e4nds och l\u00e4ra sig mer om dess betydelse \u00e4r att ta en titt p\u00e5 flera webbplatser. De kan inspirera och hj\u00e4lpa dig med dina framtida projekt. Ta bara en titt p\u00e5 f\u00f6ljande webbplatser, frig\u00f6r din fantasi och resultatet kommer att bli utm\u00e4rkt! [Madebysofa.com](http:\/\/www.madebysofa.com\/) anv\u00e4nder vitt utrymme f\u00f6r att skapa en ren, minimalistisk look. P\u00e5 detta s\u00e4tt ligger tonvikten p\u00e5 webbplatskategorier och l\u00e4nkar. [](http:\/\/www.madebysofa.com\/) [Vertigo Visual](http:\/\/www.vertigo.com.mk\/) h\u00e5ller det enkelt och anv\u00e4nder massor av vitt utrymme f\u00f6r att l\u00e4gga till en touch av stil och personlighet. [](http:\/\/www.vertigo.com.mk\/) [Cultured Code](https:\/\/culturedcode.com\/) \u00e4r ett exempel d\u00e4r vitt utrymme inte \u00e4r vitt, utan ljusbl\u00e5tt. Det finns ocks\u00e5 n\u00e5gra f\u00e4rgade geometriska element som f\u00f6rst\u00e4rker vissa kategorier. [](https:\/\/culturedcode.com\/) [Philip House NYC](http:\/\/www.philiphousenyc.com\/) har mycket vitt utrymme. Syftet h\u00e4r \u00e4r att f\u00e5nga \u00f6gat och f\u00f6rb\u00e4ttra n\u00e5gra bilder och kategorier som visas p\u00e5 webbsidan. [](http:\/\/www.philiphousenyc.com\/) [Byggd av Buffalo](http:\/\/builtbybuffalo.com\/) anv\u00e4nder vitt utrymme mycket klokt. Det betonar alla kategorier och logotyper. I mitten av sidan finns det flera f\u00e4rgade avsnitt som leder till viktig information. N\u00e4r du rullar ned\u00e5t kan du m\u00e4rka att blanksteg fortfarande dominerar, men fokus ligger fortfarande p\u00e5 andra avsnitt. [](http:\/\/builtbybuffalo.com\/) [Ditto](https:\/\/www.ditto.com\/) \u00e4r ocks\u00e5 en webbplats som anv\u00e4nder vitt utrymme f\u00f6r att l\u00e4gga till sofistikering och elegans. Samtidigt anv\u00e4nds negativt utrymme f\u00f6r att b\u00e4ttre visa upp produkterna. [](https:\/\/www.ditto.com\/) [Metta Skincare](http:\/\/www.mettaskincare.com\/) har en snygg design. Fokus ligger p\u00e5 produkter, USP och webbplatskategorier. [](http:\/\/www.mettaskincare.com\/) [Fell Swoop](http:\/\/www.fellswoop.com\/) inkluderade vitt utrymme f\u00f6r att skapa k\u00e4nslor och \u00f6ka anv\u00e4ndarens engagemang. [](http:\/\/www.fellswoop.com\/) [Attitude Design](http:\/\/www.attitudedesign.co.uk\/) kombinerar vitt utrymme med ”f\u00e4rgat” vitt utrymme f\u00f6r att f\u00e5 uppm\u00e4rksamhet till n\u00e5gra viktiga punkter p\u00e5 webbplatsen. Enkel men effektiv! [](http:\/\/www.attitudedesign.co.uk\/) [Super Real](http:\/\/www.superreal.de\/) -webbplatsen har en touch av elegans och sofistikering p\u00e5 grund av vitt utrymme. Negativt utrymme anv\u00e4nds h\u00e4r f\u00f6r att f\u00f6rst\u00e4rka huvudkategorierna. [](http:\/\/www.superreal.de\/) [Handiemail](http:\/\/www.handiemail.com\/) har en enkel, vit layout som h\u00e5ller bes\u00f6karna intresserade. Allt \u00e4r s\u00e5 l\u00e4tt att l\u00e4sa p\u00e5 grund av en s\u00e5 ren design. [](http:\/\/www.handiemail.com\/) [Suki](http:\/\/www.suki.co.il\/) \u00e4r en webbplats som f\u00e5ngar din uppm\u00e4rksamhet n\u00e4stan omedelbart. Det \u00e4r fantastiskt hur negativt utrymme v\u00e4xlar med bilder, videor och uppmaningar. Bara ta en titt! [](http:\/\/www.suki.co.il\/) [Tom Reinert](http:\/\/www.tomreinert.de\/) \u00e4r en webbplats d\u00e4r dominansen av vitt utrymme separerar flera element. Helhetsintrycket \u00e4r en ren, vacker och l\u00e4ttl\u00e4st sida. [](http:\/\/www.tomreinert.de\/) [Webydo](http:\/\/www.webydo.com\/) utnyttjar negativt utrymme och anv\u00e4nder det kring bilder, kolumner och uppmaningar f\u00f6r att visa upp olika delar av webbplatsen, kontaktuppgifter och mer. [](http:\/\/www.webydo.com\/) [PlainWhite](http:\/\/plainwhite.co\/) \u00e4r ett annat bra exempel p\u00e5 blanksteg som anv\u00e4nds i webbdesign. Som vi kan se h\u00e4r v\u00e4gleder den dina \u00f6gon och bidrar till en snygg och luftig design. P\u00e5 s\u00e5 s\u00e4tt visas alla webbplatskategorier vackert. [](http:\/\/plainwhite.co\/) [Beanstalk](http:\/\/beanstalkapp.com\/) \u00e4r ett bra exempel p\u00e5 hur vitt utrymme inte bara \u00e4r ”vitt”. Det skapar harmoni, balans, f\u00e5r hemsidan att se stilren ut och lyfter fram inneh\u00e5llet. [](http:\/\/beanstalkapp.com\/) [Pulp Fingers](http:\/\/pulpfingers.com\/) visar ocks\u00e5 effektiviteten av ”f\u00e4rgat” negativt utrymme. H\u00e4r har vi en dj\u00e4rv f\u00e4rg som framh\u00e4ver meddelanden, uppmaningar, knappar p\u00e5 sociala medier, kontaktf\u00e4lt och webbplatskategorier. [](http:\/\/pulpfingers.com\/) [No Leath](http:\/\/www.noleath.com\/noleath\/) har vitt utrymme, som faktiskt \u00e4r en ljusgr\u00e5 nyans kombinerad med stor grafik f\u00f6r att visa sina produkter s\u00e5 bra som m\u00f6jligt. [](http:\/\/www.noleath.com\/noleath\/) [Dropbox](https:\/\/www.dropbox.com\/) \u00e4r en f\u00f6respr\u00e5kare av negativt utrymme. Den h\u00e4r webbplatsen visar att mindre \u00e4r mer. Och detta uppn\u00e5s genom att bara beh\u00e5lla de element som \u00e4r riktigt viktiga. White space h\u00e4r \u00f6kar l\u00e4sbarheten och anv\u00e4ndbarheten, vilket g\u00f6r allt p\u00e5 webbplatsen extremt l\u00e4tt att l\u00e4sa och f\u00f6rst\u00e5. [](https:\/\/www.dropbox.com\/) [Something Splendid](http:\/\/somethingsplendid.com\/) har mycket vitt utrymme kombinerat med f\u00e4rgglada inslag. Detta g\u00f6r sidan extremt l\u00e4ttnavigerad. Dessutom \u00e4r det en trevlig upplevelse att interagera med en s\u00e5dan webbplats. Varje kategori \u00e4r mer m\u00e4rkbar, utan att g\u00f6ra designen r\u00f6rig. [](http:\/\/somethingsplendid.com\/) Det h\u00e4r \u00e4r bara n\u00e5gra av de webbplatser som anv\u00e4nder blankt utrymme p\u00e5 b\u00e4sta s\u00e4tt. \u00c4ven om vitt utrymme \u00e4r ett kontroversiellt element, hittar du flera webbplatser som anv\u00e4nder det, p\u00e5 grund av dess f\u00f6rdelar. Om det anv\u00e4nds som det ska bidrar negativt utrymme till fantastiska anv\u00e4ndarupplevelser. Vitt utrymme orsakar ofta friktion mellan webbdesigners och deras kunder. Ibland vill kunderna inte se n\u00e5got tomt utrymme p\u00e5 sin webbplats och t\u00e4nker att det m\u00e5ste vara t\u00e4ckt med inneh\u00e5ll. Det \u00e4r d\u00e4rf\u00f6r designers m\u00e5ste f\u00f6rklara sina kunder rollen av negativt utrymme. Det kan vara sv\u00e5rt, \u00e5tminstone f\u00f6r nyb\u00f6rjare, att formulera inflytandet av det. T\u00e4nk \u00e4nd\u00e5 inte p\u00e5 vitt utrymme som ”tomt utrymme”, utan mening. Ja, det kan se tomt och vanligt ut, men kom ih\u00e5g att du har anv\u00e4nt det speciellt f\u00f6r att det verkligen f\u00f6rb\u00e4ttrar den \u00f6vergripande designen, inte f\u00f6r att det inte fanns n\u00e5got annat att l\u00e4gga till d\u00e4r. Det kan vara sv\u00e5rt att f\u00f6rklara det f\u00f6r dina kunder, men jag hoppas att den h\u00e4r artikeln hj\u00e4lper dig med det.<\/p>\n","protected":false},"excerpt":{"rendered":"
L\u00e5t oss s\u00e4ga att du \u00e4r p\u00e5 ett bibliotek. Det vore inte alls trevligt om du inte kunde r\u00f6ra dig p\u00e5 grund av de \u00f6verfulla hyllorna och salarna, medan bibliotekarien st\u00e4ndigt uppmanade dig med de senaste b\u00f6ckerna som kommit. Det \u00e4r samma sak med vitt utrymme som anv\u00e4nds i webbdesign: det ger utrymme att andas till m\u00e5nga webbplatselement. Vitt utrymme \u00e4r extremt viktigt i webbdesign f\u00f6r anv\u00e4ndbarhet och l\u00e4sbarhet och det betonar s\u00e4rskilda element. F\u00f6rest\u00e4ll dig hur det skulle vara om det fanns m\u00e5nga ord som klistrade ihop. Anv\u00e4ndarupplevelsen skulle definitivt vara mycket obehaglig och det skulle ta mycket anstr\u00e4ngning …<\/p>\n","protected":false},"author":1,"featured_media":131571,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[61,204,152],"tags":[],"class_list":["post-265434","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-och-wordpress","category-webbdesign","category-webbtips-och-tricks"],"_links":{"self":[{"href":"https:\/\/inform.click\/sv\/wp-json\/wp\/v2\/posts\/265434","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inform.click\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inform.click\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inform.click\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inform.click\/sv\/wp-json\/wp\/v2\/comments?post=265434"}],"version-history":[{"count":0,"href":"https:\/\/inform.click\/sv\/wp-json\/wp\/v2\/posts\/265434\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inform.click\/sv\/wp-json\/wp\/v2\/media\/131571"}],"wp:attachment":[{"href":"https:\/\/inform.click\/sv\/wp-json\/wp\/v2\/media?parent=265434"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inform.click\/sv\/wp-json\/wp\/v2\/categories?post=265434"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inform.click\/sv\/wp-json\/wp\/v2\/tags?post=265434"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}