{"id":236124,"date":"2021-12-02T15:43:00","date_gmt":"2021-12-02T12:43:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=236124"},"modified":"2022-05-16T15:04:26","modified_gmt":"2022-05-16T12:04:26","slug":"9-enkla-designregler-for-att-gora-din-webbplats-vackrare","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/sv\/9-enkla-designregler-for-att-gora-din-webbplats-vackrare\/","title":{"rendered":"9 enkla designregler f\u00f6r att g\u00f6ra din webbplats vackrare"},"content":{"rendered":"

"Jag suger p\u00e5 design."<\/p>\n

Jag har h\u00f6rt det m\u00e5nga g\u00e5nger f\u00f6rut.<\/p>\n

Jag k\u00e4nner m\u00e5nga m\u00e4nniskor som driver webbplatser och skapar bra inneh\u00e5ll men insisterar p\u00e5 att de inte har n\u00e5gon designsmak.<\/p>\n

dumheter!<\/p>\n

Jag tror att vem som helst kan sk\u00e4rpa \u00f6gat f\u00f6r design, men om du kan beh\u00f6va lite hj\u00e4lp s\u00e5 \u00e4r det h\u00e4r inl\u00e4gget f\u00f6r dig.<\/p>\n

I den h\u00e4r handledningen hittar du 9 grundl\u00e4ggande designprinciper som du kan till\u00e4mpa p\u00e5 allt du g\u00f6r.<\/p>\n

Jag har skrivit dessa tips f\u00f6r att vara s\u00e5 handlingskraftiga som m\u00f6jligt s\u00e5 att de \u00e4r enkla att implementera p\u00e5 din webbplats.<\/p>\n

Konsultera den h\u00e4r listan n\u00e4r du beh\u00f6ver g\u00f6ra ett designval och jag lovar att resultatet kommer att bli lite vackrare.<\/p>\n

L\u00e5t oss b\u00f6rja med\u2026<\/p>\n

1 Anv\u00e4nd aldrig f\u00e4rgad text<\/h2>\n

Om du inte vet vad du g\u00f6r, tenderar f\u00e4rgad text att vara ful och sv\u00e5r att l\u00e4sa.<\/p>\n

Som en tumregel, g\u00f6r alltid din text svart eller vit<\/strong>.<\/p>\n

Om du har f\u00e4rgad text p\u00e5 din webbplats b\u00f6r du v\u00e4lja att anv\u00e4nda f\u00e4rg i n\u00e4rheten ist\u00e4llet.<\/p>\n

H\u00e4r \u00e4r vad jag menar.<\/p>\n

Exempel #1<\/h3>\n

Den h\u00e4r knappen har bl\u00e5 text och en ljusgr\u00e5 bakgrund. Det ser lite platt ut och texten \u00f6verv\u00e4ldigar formen p\u00e5 knappen:<\/p>\n

Om jag v\u00e4nder p\u00e5 f\u00e4rgerna med den bl\u00e5a f\u00f6r bakgrunden och ljus text, ser det mycket b\u00e4ttre ut:<\/p>\n

Och medan vi pratar knappar…<\/p>\n

Om din knapp har en f\u00e4rgad bakgrund kommer den n\u00e4stan alltid att se b\u00e4st ut med vit text.<\/p>\n

Svart text tenderar att se hemsk ut ovanp\u00e5 f\u00e4rgen om inte den f\u00e4rgen \u00e4r riktigt blek eller bara en ljusare gr\u00e5:<\/p>\n

Om du ofta anv\u00e4nder f\u00e4rgad text i dina inl\u00e4gg kommer du att uppskatta id\u00e9erna i n\u00e4sta exempel.<\/p>\n

Exempel #2<\/h3>\n

Som ett annat exempel kan du ha lite f\u00e4rgad text i ett inl\u00e4gg f\u00f6r att du vill att det ska sticka ut, s\u00e5 h\u00e4r:<\/p>\n

Den h\u00e4r texten ser inte bra ut eftersom den \u00e4r bl\u00e5!<\/p>\n

Det finns ett mer estetiskt tilltalande s\u00e4tt att f\u00e5 uppm\u00e4rksamhet med f\u00e4rg. F\u00f6r att inte n\u00e4mna, vissa f\u00e4rger (som bl\u00e5) f\u00e5r vanlig text att se ut som en l\u00e4nk.<\/p>\n

Ett annat s\u00e4tt att f\u00e5 uppm\u00e4rksamhet med f\u00e4rg \u00e4r att g\u00f6ra texten vit och bakgrunden bl\u00e5:<\/p>\n

Det h\u00e4r \u00e4r mycket f\u00e4rg, s\u00e5 anv\u00e4nd sparsamt!<\/p>\n

Eller s\u00e5 kan du s\u00e4nka m\u00e4ttnaden s\u00e5 att bakgrunden \u00e4r v\u00e4ldigt blek och sedan g\u00f6ra texten svart f\u00f6r en mer subtil look:<\/p>\n

Svart text ser bra ut p\u00e5 bleka bakgrunder.<\/p>\n

Eller s\u00e5 kan du l\u00e4mna texten svart och l\u00e4gga till en touch av f\u00e4rg som en kant runt texten:<\/p>\n

Detta \u00e4r en enklare look som fortfarande f\u00e5r uppm\u00e4rksamhet.<\/p>\n

Eller s\u00e5 kan du kombinera en bakgrund och ram:<\/p>\n

Detta \u00e4r ett annat attraktivt s\u00e4tt att anv\u00e4nda f\u00e4rg.<\/p>\n

F\u00f6r att sammanfatta reglerna f\u00f6r f\u00e4rgad text:<\/p>\n

Du b\u00f6r anv\u00e4nda en f\u00e4rgad bakgrund eller en f\u00e4rgad ram runt text ist\u00e4llet f\u00f6r att \u00e4ndra f\u00e4rgen p\u00e5 texten. Dessutom ser vitt alltid b\u00e4ttre ut p\u00e5 f\u00e4rgade bakgrunder om inte f\u00e4rgen \u00e4r mycket blek.<\/p>\n

L\u00e5t oss nu v\u00e4lja de f\u00e4rger du ska anv\u00e4nda.<\/p>\n

Bara s\u00e5 att du vet var jag tvungen att skriva lite CSS f\u00f6r att l\u00e4gga till gr\u00e4nser till styckena ovan. Gutenberg har inget gr\u00e4nsalternativ \u00e4nnu. Du kan l\u00e4gga till ramar redan med Elementor-<\/a> widgets.<\/p>\n

2 Anv\u00e4nd en f\u00e4rgpalett<\/h2>\n

Att v\u00e4lja f\u00e4rger i farten \u00e4r ett stort nyb\u00f6rjarmisstag.<\/p>\n

N\u00e4r du anv\u00e4nder f\u00e4rg p\u00e5 din webbplats b\u00f6r du alltid v\u00e4lja en f\u00e4rg fr\u00e5n din palett<\/strong>.<\/p>\n

Genom att anv\u00e4nda en palett kan du helt enkelt v\u00e4lja bland dina befintliga f\u00e4rger och du vet att resultatet kommer att se snyggt ut och "m\u00e4rkt" utan anstr\u00e4ngning.<\/p>\n

Och h\u00e4r \u00e4r grejen…<\/p>\n

Jag har varit webbdesigner i flera \u00e5r och jag k\u00e4mpar fortfarande med att skapa snygga f\u00e4rgpaletter.<\/p>\n

Och det \u00e4r d\u00e4rf\u00f6r jag fuskar \ud83d\ude09<\/p>\n

Jag skapar aldrig mina egna f\u00e4rgpaletter. Ist\u00e4llet hittar jag en underbar f\u00e4rgpalett som redan \u00e4r gjord och sedan anpassar jag den f\u00f6r att m\u00f6ta mina designbehov.<\/p>\n

Min hemliga resurs f\u00f6r att hitta f\u00e4rgpaletter \u00e4r Color Hunt<\/a>.<\/p>\n

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

Denna fantastiska webbplats har en grupp medlemmar som skapar och delar f\u00e4rgpaletter de designar.<\/p>\n

Om du bl\u00e4ddrar p\u00e5 hemsidan hittar du en o\u00e4ndlig lista med vackra paletter att v\u00e4lja mellan. Genom att klicka p\u00e5 valfri palett kommer du till dess sida d\u00e4r relaterade paletter listas nedan.<\/p>\n

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

\u00c4rligt talat \u00e4r det v\u00e4ldigt roligt att bl\u00e4ddra i paletterna och f\u00e5 id\u00e9er och inspiration till din webbplats.<\/p>\n

Om du redan har en nyans i \u00e5tanke kan du v\u00e4lja en f\u00e4rg att b\u00f6rja med med hj\u00e4lp av s\u00f6kf\u00e4ltet.<\/p>\n

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

Det finns ocks\u00e5 f\u00f6rdefinierade s\u00f6kord tillg\u00e4ngliga som "varm" och "kall" f\u00f6r att hitta l\u00e4mpliga paletter.<\/p>\n

N\u00e4r du v\u00e4l v\u00e4ljer en palett du gillar och implementerar f\u00e4rgerna p\u00e5 din webbplats kommer du att bli f\u00f6rv\u00e5nad \u00f6ver hur stor skillnad det g\u00f6r.<\/p>\n

De tv\u00e5 f\u00f6rsta tipsen b\u00f6r lura dina bes\u00f6kare att tro att du \u00e4r en f\u00e4rgstark designm\u00e4stare.<\/p>\n

Nu ska vi prata typsnitt!<\/p>\n

3 Anv\u00e4nd endast 1 eller 2 teckensnitt<\/h2>\n

F\u00e4rger b\u00f6r v\u00e4ljas fr\u00e5n din palett. Teckensnitt \u00e4r liknande.<\/p>\n

Du b\u00f6r v\u00e4lja ett eller tv\u00e5 teckensnitt och sedan \u00e5teranv\u00e4nda dem f\u00f6r allt.<\/p>\n

Ofta, n\u00e4r WordPress-anv\u00e4ndare l\u00e4r sig hur man \u00e4ndrar typsnitt p\u00e5 sin webbplats, vill de pl\u00f6tsligt anv\u00e4nda dem alla!<\/p>\n

Till exempel har jag sett m\u00e4nniskor \u00e4ndra teckensnittet f\u00f6r ett stycke f\u00f6r att f\u00e5 det att sticka ut i ett inl\u00e4gg. Det \u00e4r en d\u00e5lig id\u00e9. Om du beh\u00f6ver text f\u00f6r att sticka ut i ett inl\u00e4gg kan du:<\/p>\n