{"id":265553,"date":"2024-03-10T07:08:00","date_gmt":"2024-03-10T04:08:00","guid":{"rendered":"https:\/\/inform.click\/nar-och-hur-man-anvander-minimalism-i-webbdesign\/"},"modified":"2024-03-10T07:08:00","modified_gmt":"2024-03-10T04:08:00","slug":"nar-och-hur-man-anvander-minimalism-i-webbdesign","status":"publish","type":"post","link":"https:\/\/inform.click\/sv\/nar-och-hur-man-anvander-minimalism-i-webbdesign\/","title":{"rendered":"N\u00e4r och hur man anv\u00e4nder minimalism i webbdesign"},"content":{"rendered":"

\n L\u00e5t oss f\u00f6rst f\u00e5 en missuppfattning om minimalism ur v\u00e4gen. Bara f\u00f6r att det finns mindre att se betyder det inte att det \u00e4r l\u00e4ttare. I sj\u00e4lva verket \u00e4r det helt tv\u00e4rtom. Ju mindre du har, desto mer tid beh\u00f6ver du spendera f\u00f6r att se till att varje element du har \u00e4r r\u00e4tt f\u00f6r pengarna.\n<\/p>\n

\n N\u00e4r allt kommer omkring, om du har ett tr\u00e5ngt gr\u00e4nssnitt och om n\u00e5got \u00e4r justerat n\u00e5got till v\u00e4nster om mitten, eller ett teckensnitt som inte \u00e4r helt optimalt f\u00f6r det du anv\u00e4nder, kommer det f\u00f6rmodligen inte ens att m\u00e4rkas bland de andra detaljerna.\n<\/p>\n

\n Det kommer dock inte att vara sant om du anv\u00e4nder en minimalistisk webbdesign, eftersom det inte finns n\u00e5got f\u00f6r ditt misstag eller d\u00e5liga val att g\u00f6mma sig bakom. De kommer att sticka ut i skarpa detaljer \u2013 som en neonskylt p\u00e5 ett japanskt hus. Vad det betyder \u00e4r att om du bara f\u00f6rs\u00f6ker s\u00e4tta ihop en sida s\u00e5 \u00e4r minimalism inte r\u00e4tt v\u00e4g att g\u00e5. Minimalism \u00e4r till f\u00f6r perfektionisterna, de tv\u00e5ngsm\u00e4ssiga, de laserfokuserade, h\u00e5ll dig uppe-till-tre-p\u00e5-morgonen-f\u00f6r-att-f\u00e5-den-titeln-precis-r\u00e4tt typ av webbdesigner. Om det inte \u00e4r du s\u00e5 \u00e4r det inte f\u00f6r dig.\n<\/p>\n

\n Om det sedan \u00e4r l\u00e4s vidare, l\u00e4s vidare! Nedf\u00f6r kaninh\u00e5let g\u00e5r vi.\n<\/p>\n

\n Negativt utrymme
\n<\/h4>\n

\n L\u00e5t oss b\u00f6rja med att titta p\u00e5 vad en minimalistisk webbplats kommer att ha mest av \u2013 negativt utrymme, \u00e4ven om du kanske k\u00e4nner det som ”bakgrunden”. F\u00f6rutom att det i minimalistisk design inte \u00e4r ”tillbaka” alls. Ist\u00e4llet \u00e4r det front and center, d\u00e4r det spelar en avg\u00f6rande roll, genom att det manipulerar anv\u00e4ndarens visuella fl\u00f6de.\n<\/p>\n

\n Kraften med negativt utrymme \u00e4r att ju mer du har av det, desto mer kommer allt annat du har p\u00e5 sidan att dyka upp. Det \u00e4r d\u00e4rf\u00f6r industriella designers ofta anv\u00e4nder minimalistiska layouter. P\u00e5 s\u00e5 s\u00e4tt kommer deras produkter ist\u00e4llet f\u00f6r att tona in i allt annat att f\u00e5 den uppm\u00e4rksamhet de letar efter. Och eftersom det \u00e4r vad de f\u00f6rs\u00f6ker s\u00e4lja eller \u00e5tminstone visa upp som g\u00f6r det h\u00e4r tilltalande f\u00f6r dem och alla andra som har statiska f\u00f6rem\u00e5l att visa, som inredningsarkitekter och fotografer.\n<\/p>\n

\n Negativt utrymme kan vara ett kraftfullt verktyg f\u00f6r att skapa en oas av lugn, samt f\u00f6r att f\u00e5 anv\u00e4ndare att inte k\u00e4nna sig \u00f6verv\u00e4ldigade. Det \u00e4r d\u00e4rf\u00f6r spa och h\u00e4lsocenter ofta v\u00e4ljer denna typ av layout.\n<\/p>\n

\n Observera att negativt utrymme inte betyder att det inte finns n\u00e5got d\u00e4r. Sj\u00e4lvklart m\u00e5ste utrymmet fyllas med n\u00e5got och \u00e4ven om vitt \u00e4r ett sj\u00e4lvklart val \u00e4r det l\u00e5ngt ifr\u00e5n det enda. Dessutom har olika f\u00e4rger helt olika effekter p\u00e5 anv\u00e4ndarna, s\u00e5 se till att du spenderar lite tid p\u00e5 forskningen. En sak jag skulle vilja p\u00e5peka \u00e4r att man inte v\u00e4ljer en \u00f6verm\u00e4ttad f\u00e4rg. Detta \u00e4r ett grundl\u00e4ggande misstag som m\u00e5nga f\u00f6rstag\u00e5ngsdesigners g\u00f6r. Problemet \u00e4r att det kan vara ganska sm\u00e4rtsamt f\u00f6r anv\u00e4ndarna, vilket d\u00e4rf\u00f6r g\u00f6r en av de stora f\u00f6rdelarna med minimalism ogiltig.\n<\/p>\n

\n Foton
\n<\/h4>\n

\"\"<\/a><\/p>\n

\n Om bara en f\u00e4rg \u00e4r f\u00f6r mycket av det goda finns det naturligtvis m\u00f6jligheten att ta ett foto av n\u00e5got slag. Naturligtvis, om du v\u00e4ljer en bild, se till att den st\u00e4mmer med den anda av minimalism som du g\u00e5r efter. Bilden beh\u00f6ver inte vara f\u00f6r upptagen.\n<\/p>\n

\n Jag menar det p\u00e5 tv\u00e5 s\u00e4tt.\n<\/p>\n

    \n
  1. Se sj\u00e4lvklart till att bilden inte \u00e4r alltf\u00f6r belamrad med f\u00f6rem\u00e5l eller m\u00e4nniskor, eftersom detta kommer att besegra hela syftet med din minimalistiska design.\n <\/li>\n
  2. Det r\u00e4cker dock inte, eftersom implikationen av snabb r\u00f6relse eller fara \u00e4r lika kapabel att dra \u00f6gat till bilden och bort fr\u00e5n huvudelementet som du f\u00f6rs\u00f6ker visa. Faktum \u00e4r att \u00e4ven uppvisningen av en negativ k\u00e4nsla kan distrahera m\u00e4nniskor fr\u00e5n det du verkligen vill att de ska fokusera p\u00e5.\n <\/li>\n<\/ol>\n

    \n Av denna anledning, n\u00e4r du surfar genom minimalistiska webbplatser, kommer du att se m\u00e5nga foton med mycket neutrala och statiska bakgrunder. H\u00e4r \u00e4r n\u00e5gra bra exempel<\/a>.\n<\/p>\n

    \n Typografi
    \n<\/h4>\n

    \"\"<\/a><\/p>\n

    \n Du kan klippa ut m\u00e5nga saker fr\u00e5n din minimalistiska sida, som en menyrad, knappar p\u00e5 sociala medier och annonser, men en sak du inte klarar dig utan \u00e4r ord. S\u00e5 sm\u00e5ningom kommer du att beh\u00f6va n\u00e5gra. Men hur presenterar du dem? Du b\u00f6r \u00f6verv\u00e4ga mycket noggrant vilket typsnitt du best\u00e4mmer dig f\u00f6r att anv\u00e4nda (och om du best\u00e4mmer dig f\u00f6r att g\u00f6ra ditt eget), s\u00e4rskilt eftersom olika typsnitt kommer att framkalla olika k\u00e4nslor och olika sinnestillst\u00e5nd.\n<\/p>\n

    \n Till exempel serif-teckensnitt (det \u00e4r de d\u00e4r de snirkliga bitarna sticker ut under och ovanf\u00f6r linjen) l\u00e4ses mer flytande \u00e4n sans serif-teckensnitt och anses d\u00e4rf\u00f6r vara l\u00e4ttare att f\u00f6rst\u00e5. P\u00e5 samma s\u00e4tt, eftersom instruktionerna \u00e4r skrivna i renare, ses mer l\u00e4sbara typsnitt (som Ariel till exempel) som mer begripliga \u00e4n de som \u00e4r skrivna i mer f\u00f6rvirrande och jobbigare teckensnittsval, vilket g\u00f6r att dessa instruktioner anses vara l\u00e4ttare att utf\u00f6ra.\n<\/p>\n

    \n Men l\u00e4sbarheten \u00e4r f\u00f6rst\u00e5s inte det enda som beh\u00f6ver beaktas, man m\u00e5ste ocks\u00e5 t\u00e4nka p\u00e5 vilka k\u00e4nslor typsnitten v\u00e4cker. Ja, det st\u00e4mmer, olika typsnitt p\u00e5verkar m\u00e4nniskor olika, med typsnitt som Times New Roman oftare f\u00f6rknippas med k\u00e4nslor som ”rolig” och ”arg” \u00e4n Ariel.\n<\/p>\n

    \n Jag varnade dig f\u00f6r att minimalism inte var f\u00f6r svaga hj\u00e4rtan!\n<\/p>\n

    \n En annan sak att t\u00e4nka p\u00e5 \u00e4r vilka typsnitt du anv\u00e4nder var, eftersom du sj\u00e4lvklart inte beh\u00f6ver anv\u00e4nda samma typsnitt genomg\u00e5ende. Och eftersom det inte finns n\u00e5got annat som distraherar din publik, om du anv\u00e4nder olika teckensnittsstilar och typografier kommer din anv\u00e4ndare att vara mycket mer ben\u00e4gen att l\u00e4gga m\u00e4rke till dem.\n<\/p>\n

    \n Detta kan d\u00e4rf\u00f6r vara en mycket effektiv strategi f\u00f6r att f\u00e5 din publik att uppm\u00e4rksamma specifika omr\u00e5den. \u00d6verv\u00e4g till exempel att skriva den text som du vill att anv\u00e4ndarna ska l\u00e4sa f\u00f6rst i fet stil, med tjocka streck, medan de delar som ska l\u00e4ggas m\u00e4rke till senare skrivs i mer neutrala teckensnitt. Anv\u00e4ndarens blick kommer omedelbart att dras till den fetare texten medan den andra texten kommer att konsumeras senare.\n<\/p>\n

    \n Kontrast och positionering
    \n<\/h4>\n

    \"\"<\/a><\/p>\n

    \n Ett av de mest kraftfulla verktygen som finns tillg\u00e4ngliga f\u00f6r en minimalistisk webbdesigner \u00e4r kontrast. Om du vill anv\u00e4nda kontrast f\u00f6r b\u00e4sta effekt m\u00e5ste du v\u00e4lja ljusa bakgrunder \u2013 vit \u00e4r det dominerande valet, eftersom detta ger den b\u00e4sta effekten. Det \u00e4r d\u00e4rf\u00f6r minimalistiska sidor ofta anv\u00e4nder svart p\u00e5 vit bakgrund eftersom dessa skarpa linjer \u00e4r oerh\u00f6rt visuellt tilltalande. H\u00e4r \u00e4r ett bra exempel<\/a>. Dessutom kan den minsta f\u00e4rgen, som en st\u00e4nk av gult, vara mycket effektiv. T\u00e4nk bara p\u00e5 flickans kappa i Schindlers lista.\n<\/p>\n

    \n En designer kan skapa ett kontrakt med m\u00e5nga olika saker, inklusive f\u00e4rg, form, plats, skala och storlek. Om det anv\u00e4nds p\u00e5 r\u00e4tt s\u00e4tt kan det vara otroligt anv\u00e4ndbart f\u00f6r att leda din anv\u00e4ndare till de delar som de b\u00f6r vara uppm\u00e4rksamma p\u00e5 f\u00f6rst (ungef\u00e4r som jag f\u00f6rklarade i termer av typografi ovan, n\u00e4r jag diskuterade feta kontra mer neutrala texter). Det \u00e4r dock inte l\u00e4tt, och f\u00f6r att anv\u00e4nda det p\u00e5 b\u00e4sta s\u00e4tt \u00e4r det n\u00f6dv\u00e4ndigt att ha en grundl\u00e4ggande f\u00f6rst\u00e5else f\u00f6r hur anv\u00e4ndare konsumerar internetsidor.\n<\/p>\n

    \n Studier av \u00f6gonr\u00f6relser har gett oss stor insikt i var m\u00e4nniskor tittar f\u00f6rst, d\u00e4r de vanligtvis b\u00f6rjar l\u00e4ngst upp till v\u00e4nster och sedan, beroende p\u00e5 om det \u00e4r mycket text eller inte, antingen skannar sidan i ett ”F” eller ett ”Z”-m\u00f6nster.\n<\/p>\n

    \n Eftersom din minimalistiska sida inte kommer att vara tung med text, vill du d\u00e4rf\u00f6r ordna de viktigaste aspekterna av din sida i ett Z-m\u00f6nster, med de saker som dina anv\u00e4ndare b\u00f6r l\u00e4gga m\u00e4rke till f\u00f6rst (du \u00e4r dina menyalternativ) en position mer uppe till v\u00e4nster p\u00e5 din sida, medan de saker som b\u00f6r uppm\u00e4rksammas senare (t.ex. dina upphovsr\u00e4ttsanspr\u00e5k) kommer ner l\u00e4ngre och l\u00e4ngre till h\u00f6ger. P\u00e5 s\u00e5 s\u00e4tt kommer du att g\u00f6ra konsumtionen av din sida mer flytande och mer naturlig.\n<\/p>\n

    \n Hamburgerknappen och andra layouter
    \n<\/h4>\n

    \"\"<\/a><\/p>\n

    \n Det enda som \u00e4r viktigt att komma ih\u00e5g med minimalistisk design \u00e4r att bara f\u00f6r att det inte finns mycket att se per sida betyder det inte att det inte finns mycket inneh\u00e5ll \u00f6verlag; f\u00f6r det mesta \u00e4r all den informationen bara undang\u00f6md i undermenyer och sekund\u00e4ra sidor. Ett popul\u00e4rt (men kontroversiellt) s\u00e4tt att g\u00f6ra detta p\u00e5 \u00e4r genom det som kallas ”hamburgerknappen”, eller de tre linjerna som du nu ser \u00f6verallt, som i krom uppe till h\u00f6ger s\u00e5v\u00e4l som p\u00e5 iPhone. Och ja, om du har druckit ett par drinkar ser det ut som en hamburgare (jag hittade inte p\u00e5 namnet).\n<\/p>\n

    \n Personligen \u00e4r jag inget stort fan d\u00e5 detta g\u00e5r emot mina minimalistiska instinkter. Vad \u00e4r po\u00e4ngen med att skapa en enkel sida om du sedan ska skapa en r\u00f6rig meny f\u00f6r att surfa p\u00e5 resten av din webbplats? F\u00f6r mig \u00e4r en mycket b\u00e4ttre strategi att dela upp din hamburgerknapp i flera menyval som \u00e4r uppenbara och l\u00e4tta att f\u00f6rst\u00e5 och som kommer att engagera dina l\u00e4sare, men det \u00e4r i slut\u00e4ndan upp till dig.\n<\/p>\n

    \n En viktig faktor att t\u00e4nka p\u00e5 n\u00e4r du funderar p\u00e5 om du ska skapa flera menyalternativ eller anv\u00e4nda en knapp \u00e4r hur gammal din publik \u00e4r. Ju \u00e4ldre de \u00e4r, desto mindre bekanta kommer de att vara med denna design och desto mer sannolikt kommer de d\u00e4rf\u00f6r inte att hitta dina undermenyer, vilket kan g\u00f6ra din sida v\u00e4rdel\u00f6s. S\u00e5 \u00e4r din sida fr\u00e4mst riktad till millennials? Vars\u00e5god och anv\u00e4nd den. Betj\u00e4nar du pension\u00e4rer? Det \u00e4r nog klokt att t\u00e4nka om.\n<\/p>\n

    \n Visuell stil
    \n<\/h4>\n

    \"\"<\/a><\/p>\n

    \n Och s\u00e5 \u00e4r det hur din sida \u00e4r t\u00e4nkt att vara upplagd. N\u00e4r du best\u00e4mmer dig f\u00f6r att v\u00e4lja en minimalistisk stil m\u00e5ste du v\u00e4lja en layoutstil och sedan h\u00e5lla fast vid den. Detta beror p\u00e5 att din publik omedelbart kommer att b\u00f6rja g\u00f6ra omedvetna antaganden om hur din webbsida passar ihop och om du sedan bryter mot dessa antaganden kommer dina anv\u00e4ndare att k\u00e4nna att din sida \u00e4r ”st\u00f6kig” och ”oorganiserad”. Det \u00e4r en d\u00f6dsst\u00f6t f\u00f6r minimalism (och de flesta andra sidor ocks\u00e5, \u00e4rligt talat).\n<\/p>\n

    \n Av denna anledning m\u00e5ste du v\u00e4lja ett rutn\u00e4t, vilket i princip betyder kolumnerna d\u00e4r du har delat upp din sida, och h\u00e5lla fast vid det. Hur m\u00e5nga kolumner vill du ha? Hur kommer de att f\u00f6rdelas? Hur mycket negativt utrymme kommer att finnas kvar mellan dem? Dessa \u00e4r alla viktiga fr\u00e5gor som du beh\u00f6ver svara p\u00e5 innan du ens b\u00f6rjar l\u00e4gga ut sidan.\n<\/p>\n

    \n Tanken h\u00e4r \u00e4r inte att bilder inte kan \u00f6verskrida gr\u00e4nserna f\u00f6r dessa rutn\u00e4tslinjer. Ofta sprider bilder hela din sida. I det h\u00e4r fallet skulle texten om bilden som presenteras nedan arrangeras i de kolumner du valt. P\u00e5 samma s\u00e4tt, om du har flera bilder p\u00e5 din sida, b\u00f6r de f\u00f6lja rutn\u00e4tet du har skapat s\u00e5 att din sida \u00f6verlag kommer att se ren och professionell ut.\n<\/p>\n

    \n \u00c4r minimalism v\u00e4rt det?
    \n<\/h5>\n

    \n Det beror \u00e4rligt talat p\u00e5 vad du f\u00f6rs\u00f6ker g\u00f6ra (och naturligtvis \u00e4mnet f\u00f6r din sida). Om du f\u00f6rs\u00f6ker minska ditt arbete, s\u00e5 \u00e4r som redan sagt minimalism inte n\u00e5got f\u00f6r dig. Om \u00e5 andra sidan den h\u00e4r typen av layout instinktivt tilltalar dig och passar den typ av produkt du trycker p\u00e5, s\u00e5 \u00e4r det v\u00e4gen fram\u00e5t.\n<\/p>\n

    \n Saken \u00e4r den att minimalism kr\u00e4ver en annan kompetens \u00e4n standarddesign, eftersom du inte bara kan anv\u00e4nda vanliga bitar och s\u00e4tta ihop dem f\u00f6r att skapa en sida. Om du f\u00f6rs\u00f6ker g\u00f6ra det, kommer du att sluta med n\u00e5got som inte \u00e4r visuellt tilltalande eller s\u00e5 informativt. Det v\u00e4rsta av tv\u00e5 v\u00e4rldar med andra ord.\n<\/p>\n

    \n Ist\u00e4llet kommer du att beh\u00f6va spendera lite tid p\u00e5 att l\u00e4ra dig hur du undergr\u00e4ver dina grundl\u00e4ggande instinkter som du har plockat upp fr\u00e5n tidigare siddesigner du har gjort. D\u00e5 m\u00e5ste du s\u00e4tta dig ner och ta reda p\u00e5 vad som \u00e4r viktigt f\u00f6r din sida.\n<\/p>\n

    \n Och du kommer att beh\u00f6va ta tag i kontrakt, typsnitt och foton som du aldrig har gjort f\u00f6rut. Det \u00e4r n\u00e4stan som att du l\u00e4r dig ett nytt formspr\u00e5k. Det kan vara sv\u00e5rt.\n<\/p>\n

    \n Grejen med att l\u00e4ra sig ett nytt spr\u00e5k \u00e4r dock att det f\u00e5r dig att inse saker om ditt originalspr\u00e5k som du aldrig lagt m\u00e4rke till tidigare. Och detta \u00e4r lika sant med att l\u00e4ra sig minimalistisk webbdesign. Sj\u00e4lva handlingen att f\u00f6rs\u00f6ka l\u00e4ra sig att designa p\u00e5 detta s\u00e4tt kommer att f\u00e5 dig att inse saker om design som du aldrig visste f\u00f6rut.\n<\/p>\n

    \n Och det kan mycket v\u00e4l g\u00f6ra allt svettande och h\u00e5rt arbete v\u00e4rt det.\n<\/p>\n

    \n Gl\u00f6mde f\u00f6r \u00f6gonblicket att minimalistiska sidor helt enkelt \u00e4r vackra, f\u00f6rst\u00e5s.\n<\/p>\n<\/p>\n

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

    L\u00e5t oss f\u00f6rst f\u00e5 en missuppfattning om minimalism ur v\u00e4gen. Bara f\u00f6r att det finns mindre att se betyder det inte att det \u00e4r l\u00e4ttare. I sj\u00e4lva verket \u00e4r det helt tv\u00e4rtom. Ju mindre du har, desto mer tid beh\u00f6ver du spendera f\u00f6r att se till att varje element du har \u00e4r r\u00e4tt f\u00f6r pengarna. N\u00e4r allt kommer omkring, om du har ett tr\u00e5ngt gr\u00e4nssnitt och om n\u00e5got \u00e4r justerat n\u00e5got till v\u00e4nster om mitten, eller ett teckensnitt som inte \u00e4r helt optimalt f\u00f6r det du anv\u00e4nder, kommer det f\u00f6rmodligen inte ens att m\u00e4rkas bland de andra detaljerna. Det kommer inte att vara sant om du anv\u00e4nder en minimalistisk webb …<\/p>\n","protected":false},"author":1,"featured_media":149268,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[399,230,360,61],"tags":[],"class_list":["post-265553","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-2","category-larobocker","category-underhallning","category-web-och-wordpress"],"_links":{"self":[{"href":"https:\/\/inform.click\/sv\/wp-json\/wp\/v2\/posts\/265553","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=265553"}],"version-history":[{"count":0,"href":"https:\/\/inform.click\/sv\/wp-json\/wp\/v2\/posts\/265553\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inform.click\/sv\/wp-json\/wp\/v2\/media\/149268"}],"wp:attachment":[{"href":"https:\/\/inform.click\/sv\/wp-json\/wp\/v2\/media?parent=265553"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inform.click\/sv\/wp-json\/wp\/v2\/categories?post=265553"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inform.click\/sv\/wp-json\/wp\/v2\/tags?post=265553"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}