{"id":265216,"date":"2023-08-09T14:36:00","date_gmt":"2023-08-09T11:36:00","guid":{"rendered":"https:\/\/inform.click\/varfor-att-tanka-negativt-faktiskt-ar-bra-for-webbdesign\/"},"modified":"2023-08-09T15:12:00","modified_gmt":"2023-08-09T12:12:00","slug":"varfor-att-tanka-negativt-faktiskt-ar-bra-for-webbdesign","status":"publish","type":"post","link":"https:\/\/inform.click\/sv\/varfor-att-tanka-negativt-faktiskt-ar-bra-for-webbdesign\/","title":{"rendered":"Varf\u00f6r att t\u00e4nka negativt faktiskt \u00e4r bra f\u00f6r webbdesign"},"content":{"rendered":"

\n Konventionell visdom s\u00e4ger att ”du m\u00e5ste t\u00e4nka positivt f\u00f6r att uppn\u00e5 ett viktigt m\u00e5l.” Men ofta kan f\u00f6r mycket positivt t\u00e4nkande g\u00f6ra dig besviken.\n<\/p>\n

\n \u00c4ven om det \u00e4r sant att pessimister (och skeptiker) har fungerat som drivkrafter bakom f\u00f6rb\u00e4ttringen av m\u00e4nskligheten, men negativt t\u00e4nkande \u00e4r den st\u00f6rsta orsaken till v\u00e5r \u00f6verlevnad i v\u00e4rlden \u2013 det hj\u00e4lper till att avv\u00e4rja alla faror. Detsamma g\u00e4ller f\u00f6r webbdesign.\n<\/p>\n

\n Undrar hur?\n<\/p>\n

\n Tja, m\u00e5nga av er (helst webbdesigners) kommer att h\u00e5lla med mig om att n\u00e4r vi arbetar med vilken webbdesign som helst, tenderar vi att bli \u00f6verv\u00e4ldigade av positiva webbdesignelement (som navigering, inneh\u00e5ll, bilder, etc.) s\u00e5 mycket att vi slutar upp g\u00f6r v\u00e5r design fylld med on\u00f6dig svullnad. Negativt utrymme kan dock hj\u00e4lpa till att separera elementen i en webbdesign och d\u00e4rigenom f\u00e5 designen att se mer strukturerad och begriplig ut f\u00f6r anv\u00e4ndarna.\n<\/p>\n

\n Negativt utrymme, \u00e4ven kallat vitt utrymme, \u00e4r en viktig visuell komponent i webbdesign – som hj\u00e4lper till att \u00f6ka dess anv\u00e4ndbarhet. En bra webbdesign anv\u00e4nder negativt utrymme f\u00f6r att skapa avst\u00e5nd mellan webbdesignelementen. S\u00e5ledes \u00e4r negativt utrymme lika viktigt f\u00f6r inneh\u00e5llet p\u00e5 din webbplats. Det \u00e4r trots allt ingen som gillar att l\u00e4sa text i stycken \u2013 som kl\u00e4ms p\u00e5 lite utrymme.\n<\/p>\n

\n Men att anv\u00e4nda r\u00e4tt m\u00e4ngd vitt utrymme bidrar till att l\u00e4gga till sk\u00f6nhet till en webbdesign genom att skapa en fin balans i designens element och inneh\u00e5ll.\n<\/p>\n

\n Exakt vad \u00e4r negativt utrymme i webbdesign?\n<\/p>\n

\n Negativt utrymme \u00e4r i grunden utrymmen utan n\u00e5got inneh\u00e5ll p\u00e5 en webbsida. F\u00f6r att vara mer specifik \u00e4r negativt utrymme \u2013 avst\u00e5ndet mellan text, bilder och andra objekt som undviker att de \u00f6verlappar varandra. \u00c4ven om det kallas f\u00f6r vitt utrymme, men negativt utrymme beh\u00f6ver inte n\u00f6dv\u00e4ndigtvis vara vitt, utan det kan vara av vilken f\u00e4rg som helst.\n<\/p>\n

\n \u00c4ven om negativt utrymme \u00e4r en viktig designfaktor, men f\u00f6rbises ofta av webbdesigners. Det grundl\u00e4ggande syftet med negativt utrymme \u00e4r att det hj\u00e4lper till att l\u00e4gga till symmetri till en webbsideslayout och d\u00e4rmed hj\u00e4lpa till att g\u00f6ra layouten ren och l\u00e4tt f\u00f6r bes\u00f6kare att skanna.\n<\/p>\n

\n Betydelsen av negativt utrymme i webbdesign
\n<\/h3>\n

\n Negativt utrymme kan spela en avg\u00f6rande roll f\u00f6r framg\u00e5ng och misslyckande f\u00f6r din webbdesign. Nedan finns n\u00e5gra exempel som visar hur ”negativt utrymme \u00e4r viktigt i en webbdesign”:\n<\/p>\n

\n Exempel 1 \u2013 Rensa visuell hierarki
\n<\/h5>\n

\n Ibland n\u00e4r du tittar p\u00e5 en webbplats som du tycker \u00e4r attraktiv kan det k\u00e4nnas som om n\u00e5got saknas. Webbplatsen kan ha interaktiv grafik, fantastiska f\u00e4rger och bra inneh\u00e5ll, men det kan fortfarande verka intets\u00e4gande f\u00f6r dig. Detta problem kan bero p\u00e5 bristen p\u00e5 visuell hierarki i designlayouten.\n<\/p>\n

\n Att inte kunna etablera en tydlig hierarki i din visuella design kan g\u00f6ra det sv\u00e5rt f\u00f6r tittarna att l\u00e4sa informationen p\u00e5 sidan. \u00c5 andra sidan kan en visuell design med en tydlig hierarki av information och grafik f\u00e5 dina tittare att f\u00f6lja den \u00f6nskade v\u00e4gen \u2013 den du har angett f\u00f6r dina anv\u00e4ndare.\n<\/p>\n

\n F\u00f6r att uppr\u00e4tth\u00e5lla visuell hierarki m\u00e5ste du strukturera ditt budskap, vilket kr\u00e4ver att du fokuserar p\u00e5 de typsnitt du anv\u00e4nder f\u00f6r att visa texten p\u00e5 dina webbsidor. Viktigast av allt, du m\u00e5ste \u00f6verv\u00e4ga att anv\u00e4nda det korrekta vita utrymmet runt elementen i din webbdesign.\n<\/p>\n

\n Negativt utrymme (eller blanksteg) hj\u00e4lper till att \u00f6ka synligheten f\u00f6r specifika element p\u00e5 sidan, och undviker att dessa element kl\u00e4mmas ihop. Detta g\u00f6r inte bara grafiken och inneh\u00e5llet i webbdesignen organiserad, utan hj\u00e4lper ocks\u00e5 till att f\u00e5 det viktigaste elementet att sticka ut (mot mindre viktiga) i den \u00f6vergripande visuella kompositionen.\n<\/p>\n

\n Till exempel: Webbplatsen ”Hobson Bernardino + Davis LLP” anv\u00e4nder blankt utrymme effektivt \u2013 vare sig det \u00e4r i mitten av sidan, i logotypen, navigeringen etc. Detta hj\u00e4lper till att g\u00f6ra webbplatsens layout med en tydlig visuell hierarki, som omedelbart ger fokusera p\u00e5 de viktigaste delarna av sajten och f\u00f6rb\u00e4ttrar l\u00e4sbarheten.\n<\/p>\n

\n
\n Effektiv anv\u00e4ndning av vitt utrymme p\u00e5 ' Hobson Bernardino + Davis LLP<\/a> ' webbplats.\n<\/p>\n

\n Exempel 2 \u2013 Skapa en balanserad layout
\n<\/h5>\n

\n Att uppr\u00e4tth\u00e5lla visuell balans \u00e4r viktigt f\u00f6r att l\u00e4gga till ett elegant utseende till din webbdesign. Dessutom g\u00f6r en balanserad layout webbdesignen enkel att anv\u00e4nda och f\u00f6rb\u00e4ttrar UX (anv\u00e4ndarupplevelsen). Negativt utrymme anses vara ett av de mest effektiva s\u00e4tten som kan hj\u00e4lpa till att uppn\u00e5 balans.\n<\/p>\n

\n Till exempel: Webbplatsen ”Enterprise Foundation” anv\u00e4nder negativt utrymme som hj\u00e4lper till att skapa en perfekt balans mellan webbplatsens nyckelkomponenter, inklusive rubrik, inneh\u00e5llsomr\u00e5den och sidfot. Trots att textblocken \u00e4r t\u00e4ta, men inte p\u00e5 ett tr\u00e5ngt s\u00e4tt, p\u00e5 grund av den korrekta anv\u00e4ndningen av negativt utrymme i den \u00f6vergripande layouten – som g\u00f6r designen estetiskt balanserad.\n<\/p>\n

\"\"<\/a> Negativt utrymme p\u00e5 Enterprise Foundations<\/a> webbplats.<\/p>\n

\n Dessutom skapar det omv\u00e4xlande (och r\u00e4tt kontrast) f\u00e4rgschemat som anv\u00e4nds i bakgrunden och texten ocks\u00e5 en k\u00e4nsla av en rymlig och rymlig design. Inneh\u00e5llsomr\u00e5dena i mitten i designen av hemsidan f\u00f6r Enterprise Foundation ser breda ut, eftersom den anv\u00e4nder mycket extra utrymme i form av utfyllnad. Detta extra utrymme hj\u00e4lper till att skilja inneh\u00e5llsomr\u00e5dena \u00e5t.\n<\/p>\n

\n Du kanske inte kan m\u00e4rka korrekt negativt utrymme i en webbdesign, men om det saknas \u2013 de fullproppade sidavsnitten och inneh\u00e5llsomr\u00e5dena skulle s\u00e4kert f\u00e5 dig att m\u00e4rka fr\u00e5nvaron av negativt utrymme.\n<\/p>\n

\n I ett n\u00f6tskal, balans \u00e4r inte n\u00e5got som ”kan ses med dina bara \u00f6gon”, eftersom det \u00e4r mer en abstrakt k\u00e4nsla. D\u00e4rf\u00f6r, om negativt utrymme inte anv\u00e4nds korrekt i din webbplatslayout, kommer det att se ostadigt och oj\u00e4mnt ut f\u00f6r dina tittare \u2013 vilket g\u00f6r l\u00e4sningen sv\u00e5r f\u00f6r dem.\n<\/p>\n

\n Exempel 3 \u2013 Skapa effektiv typografi
\n<\/h5>\n

\n Under de senaste \u00e5ren har typografi dykt upp som en av de hetaste trenderna. Enligt The Aesthetics of Reading<\/a>, en artikel skriven av Rosalind Picard (MIT) och Kevin Larson (Microsoft), ”p\u00e5verkar typografi en l\u00e4sares hum\u00f6r och kognitiva prestanda”.\n<\/p>\n

\n Enkelt uttryckt: en effektiv typografisk design kan hj\u00e4lpa dig att g\u00f6ra ett gott intryck p\u00e5 dina anv\u00e4ndare.\n<\/p>\n

\n Negativt utrymme spelar en viktig roll f\u00f6r att skapa bra typografi. Kom ih\u00e5g att en bra typografisk design inte bara beh\u00f6ver stora bokst\u00e4ver, utan ocks\u00e5 kr\u00e4ver att du anv\u00e4nder r\u00e4tt utrymme f\u00f6r att skapa en k\u00e4nsla av skillnad mellan bokst\u00e4ver och ord.\n<\/p>\n

\n Faktum \u00e4r att typografi ocks\u00e5 s\u00e4kerst\u00e4ller att inneh\u00e5llshierarkin uppr\u00e4tth\u00e5lls. Dina webbsidors rubriker m\u00e5ste l\u00e4tt k\u00e4nnas igen som de ”h\u00e4rskande” komponenterna i inneh\u00e5llet p\u00e5 din sida. Och rubrikerna m\u00e5ste omedelbart kunna f\u00e5nga anv\u00e4ndarnas uppm\u00e4rksamhet, eftersom de hj\u00e4lper till att avg\u00f6ra vad inneh\u00e5llet handlar om.\n<\/p>\n

\n Vidare m\u00e5ste textblocken eller styckena under rubrikerna placeras n\u00e4rmare rubriken, f\u00f6r att hj\u00e4lpa l\u00e4sarna att f\u00f6rst\u00e5 f\u00f6rh\u00e5llandet mellan dem b\u00e5da, och s\u00e5 vidare.\n<\/p>\n

\n Till exempel: ”HDLive 2012” visar upp en utm\u00e4rkt anv\u00e4ndning av f\u00f6rstorad typografi med r\u00e4tt avst\u00e5nd. N\u00e4r du rullar ner p\u00e5 webbplatsen eller kommer \u00e5t de inre sidorna kommer du att m\u00e4rka att texten p\u00e5 webbsidorna inneh\u00e5ller mycket radh\u00f6jd och subtila kontrasterande f\u00e4rger mot sidbakgrunden. Detta \u00e4r viktigt f\u00f6r att underl\u00e4tta f\u00f6r anv\u00e4ndare med en f\u00f6rb\u00e4ttrad l\u00e4supplevelse.\n<\/p>\n

\"\"<\/a> R\u00e4tt f\u00f6rdelad typografi p\u00e5 HDLive 2012-<\/a> webbplatsen.<\/p>\n

\n Att designa typografi med v\u00e4l f\u00f6rdelade f\u00f6rem\u00e5l skapar naturlig rytm, vilket g\u00f6r det l\u00e4ttare f\u00f6r dina bes\u00f6kare att f\u00e5 en trevlig l\u00e4supplevelse \u2013 oavsett storleken p\u00e5 din webbsida.\n<\/p>\n

\n Hur ska du anv\u00e4nda negativt utrymme i design?
\n<\/h3>\n

\n F\u00f6r att anv\u00e4nda negativt utrymme korrekt i en webbdesign m\u00e5ste du bekanta dig med de tv\u00e5 olika typerna av negativt utrymme, n\u00e4mligen: mikro- och makronegativt utrymme.\n<\/p>\n

\n Mikronegativt utrymme
\n<\/h5>\n

\n Det \u00e4r utrymmet inom de mindre (sidans) elementen, s\u00e5som marginalerna (v\u00e4nster eller h\u00f6ger) runt elementen p\u00e5 en webbsida eller utrymmet mellan ord, bokst\u00e4ver och tecken. Till exempel: Utrymmet mellan en bild och dess bildtext \u00e4r mikronegativt utrymme.\n<\/p>\n

\n Mikronegativt utrymme anv\u00e4nds i typografisk design och hj\u00e4lper till att f\u00f6rb\u00e4ttra textens l\u00e4sbarhet och l\u00e4sbarhet. N\u00e4r du anv\u00e4nder mikronegativt utrymme m\u00e5ste du se till att utrymmet mellan dina inneh\u00e5llsblock m\u00e5ste vara sn\u00e4vt, men det b\u00f6r inte g\u00f6ra dem tr\u00e5ngt. Detta kan uppn\u00e5s genom att se till att du inte l\u00e4gger till f\u00f6r mycket radh\u00f6jd mellan din rubrik och stycken. Men se samtidigt till att linh\u00f6jden inte f\u00e5r underg\u00f6ras lika bra.\n<\/p>\n

\n Ett bra exempel p\u00e5 mikronegativt utrymme \u00e4r W3Avenues hemsida nedan. Webbplatsen inneh\u00e5ller mycket inneh\u00e5ll (med flera artiklar placerade i olika kategorier), men layouten f\u00f6rvirrar inte anv\u00e4ndarna. L\u00e4mpligt utrymme i rubriken, och korrekt placerade objekt i inneh\u00e5llet i mitten och i sidof\u00e4ltsannonserna, g\u00f6r webbplatsens layout ren och strukturerad.\n<\/p>\n

\"\"<\/a> Mikronegativt utrymme p\u00e5 W3Avenues<\/a> webbplats.<\/p>\n

\n Makro negativt utrymme
\n<\/h5>\n

\n Denna typ av negativt utrymme skapar ett avst\u00e5nd mellan de stora webbdesignelementen. Dessa utrymmen \u00e4r bredare j\u00e4mf\u00f6rt med mikronegativa utrymmen och blir d\u00e4rf\u00f6r direkt uppenbara. Marginalerna mellan sidhuvud, navigering, inneh\u00e5ll och sidfotsomr\u00e5den kallas makronegativt utrymme. Dessutom \u00e4r utrymmet mellan sidof\u00e4lten, bakgrunden och andra delar av webbsidan ett makronegativt utrymme.\n<\/p>\n

\n Dessa utrymmen kan ge gott om utrymme mellan designelementen (j\u00e4mf\u00f6rt med mikronegativt utrymme), men det ger fortfarande inte mer utrymme att andas in.\n<\/p>\n

\n Utrymmet anv\u00e4nds i f\u00f6rsta hand f\u00f6r att separera, samt koppla samman webbdesignelement. Men ofta best\u00e5r m\u00e5nga m\u00f6nster av l\u00e5dor (i form av b\u00e5rder) \u2013 som anv\u00e4nds f\u00f6r att separera och koppla ihop element. Men \u00e4ven om l\u00e5dor visar sig vara anv\u00e4ndbara f\u00f6r att separera saker, kan de misslyckas med att uppr\u00e4tth\u00e5lla enhet \u00f6ver hela designen. Det \u00e4r h\u00e4r makrorymden kommer till din r\u00e4ddning.\n<\/p>\n

\n Att anv\u00e4nda makronegativt utrymme snarare \u00e4n rutor kan hj\u00e4lpa till att separera och koppla ihop alla element i din webbdesign effektivt. Medan det st\u00f6rre utrymmet hj\u00e4lper till att separera elementen, kommer smalare utrymme att hj\u00e4lpa till att ansluta dem, vilket hj\u00e4lper till att bibeh\u00e5lla enhetens enhet.\n<\/p>\n

\n Obs<\/strong>: Majoriteten av webbdesigner som inneh\u00e5ller makronegativa utrymme \u00e4r symmetriska \u2013 med ett rytmiskt och upprepande m\u00f6nster.\n<\/p>\n

\n Stripe Connect-m\u00e5lsidan \u00e4r ett perfekt exempel p\u00e5 att anv\u00e4nda makronegativt utrymme i en webbdesign.\n<\/p>\n

\"\"<\/a> Makro negativt utrymme p\u00e5 Stripe Connect<\/a> -m\u00e5lsidan.<\/p>\n

\n Direkt fr\u00e5n navigeringsobjekten som placerats i rubriken, och en betydande m\u00e4ngd negativt utrymme runt uppmaningarna, g\u00f6r att Stripe-m\u00e5lsidan sticker ut.\n<\/p>\n

\n Summering!
\n<\/h3>\n

\n Negativt utrymme eller blanksteg kan g\u00f6ra eller f\u00f6rst\u00f6ra din webbdesign. Du kanske l\u00e4gger tid p\u00e5 att skapa en visuellt tilltalande design med massor av sp\u00e4nnande funktioner, men som du kanske vet \u00e4r f\u00f6r mycket av allt inte bra. Och s\u00e5, f\u00f6r att skapa en bra webbplats, m\u00e5ste du se till att du anv\u00e4nder r\u00e4tt negativt utrymme i din webbdesign.\n<\/p>\n

\n Att anv\u00e4nda negativt utrymme p\u00e5 r\u00e4tt s\u00e4tt hj\u00e4lper till att skapa en l\u00e4ttf\u00f6rst\u00e5elig visuell hierarki, balanserad layout och producerar effektiv typografi \u2013 alla dessa faktorer \u00e4r avg\u00f6rande f\u00f6r framg\u00e5ngen f\u00f6r en webbdesign. Ut\u00f6ver detta finns det tv\u00e5 olika typer av negativt utrymme som du beh\u00f6ver f\u00f6rst\u00e5, f\u00f6r att kunna anv\u00e4nda negativt utrymme p\u00e5 r\u00e4tt s\u00e4tt, kallat mikro- och makronegativt utrymme. B\u00e5da dessa koncept \u00e4r viktiga och hj\u00e4lper till att uppr\u00e4tth\u00e5lla en h\u00e4lsosam balans i en webbdesign.\n<\/p>\n

\n Hoppas att l\u00e4sningen av det h\u00e4r inl\u00e4gget hj\u00e4lper dig att ge en b\u00e4ttre uppfattning om hur negativt t\u00e4nka (i rymden) kan vara bra i en webbdesign.\n<\/p>\n<\/p>\n

\n Inspelningsk\u00e4lla: instantshift.com<\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

Konventionell visdom s\u00e4ger att ”du m\u00e5ste t\u00e4nka positivt f\u00f6r att uppn\u00e5 ett viktigt m\u00e5l.” Men ofta kan f\u00f6r mycket positivt t\u00e4nkande g\u00f6ra dig besviken. \u00c4ven om det \u00e4r sant att pessimister (och skeptiker) har fungerat som drivkrafter bakom f\u00f6rb\u00e4ttringen av m\u00e4nskligheten, men negativt t\u00e4nkande \u00e4r den st\u00f6rsta orsaken till v\u00e5r \u00f6verlevnad i v\u00e4rlden \u2013 det hj\u00e4lper till att avv\u00e4rja alla faror. Detsamma g\u00e4ller f\u00f6r webbdesign. Undrar hur? Tja, m\u00e5nga av er (helst webbdesigners) kommer att h\u00e5lla med mig om att n\u00e4r vi arbetar med vilken webbdesign som helst, tenderar vi att bli \u00f6verv\u00e4ldigade av positiva …<\/p>\n","protected":false},"author":1,"featured_media":160736,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[61,204,152],"tags":[],"class_list":["post-265216","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\/265216","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=265216"}],"version-history":[{"count":0,"href":"https:\/\/inform.click\/sv\/wp-json\/wp\/v2\/posts\/265216\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inform.click\/sv\/wp-json\/wp\/v2\/media\/160736"}],"wp:attachment":[{"href":"https:\/\/inform.click\/sv\/wp-json\/wp\/v2\/media?parent=265216"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inform.click\/sv\/wp-json\/wp\/v2\/categories?post=265216"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inform.click\/sv\/wp-json\/wp\/v2\/tags?post=265216"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}