...
✅ WEB- och WordPress -nyheter, teman, plugins. Här delar vi tips och bästa webbplatslösningar.

9 enkla designregler för att göra din webbplats vackrare

41

"Jag suger på design."

Jag har hört det många gånger förut.

Jag känner många människor som driver webbplatser och skapar bra innehåll men insisterar på att de inte har någon designsmak.

dumheter!

Jag tror att vem som helst kan skärpa ögat för design, men om du kan behöva lite hjälp så är det här inlägget för dig.

I den här handledningen hittar du 9 grundläggande designprinciper som du kan tillämpa på allt du gör.

Jag har skrivit dessa tips för att vara så handlingskraftiga som möjligt så att de är enkla att implementera på din webbplats.

Konsultera den här listan när du behöver göra ett designval och jag lovar att resultatet kommer att bli lite vackrare.

Låt oss börja med…

1 Använd aldrig färgad text

Om du inte vet vad du gör, tenderar färgad text att vara ful och svår att läsa.

Som en tumregel, gör alltid din text svart eller vit.

Om du har färgad text på din webbplats bör du välja att använda färg i närheten istället.

Här är vad jag menar.

Exempel #1

Den här knappen har blå text och en ljusgrå bakgrund. Det ser lite platt ut och texten överväldigar formen på knappen:

Om jag vänder på färgerna med den blåa för bakgrunden och ljus text, ser det mycket bättre ut:

Och medan vi pratar knappar…

Om din knapp har en färgad bakgrund kommer den nästan alltid att se bäst ut med vit text.

Svart text tenderar att se hemsk ut ovanpå färgen om inte den färgen är riktigt blek eller bara en ljusare grå:

Om du ofta använder färgad text i dina inlägg kommer du att uppskatta idéerna i nästa exempel.

Exempel #2

Som ett annat exempel kan du ha lite färgad text i ett inlägg för att du vill att det ska sticka ut, så här:

Den här texten ser inte bra ut eftersom den är blå!

Det finns ett mer estetiskt tilltalande sätt att få uppmärksamhet med färg. För att inte nämna, vissa färger (som blå) får vanlig text att se ut som en länk.

Ett annat sätt att få uppmärksamhet med färg är att göra texten vit och bakgrunden blå:

Det här är mycket färg, så använd sparsamt!

Eller så kan du sänka mättnaden så att bakgrunden är väldigt blek och sedan göra texten svart för en mer subtil look:

Svart text ser bra ut på bleka bakgrunder.

Eller så kan du lämna texten svart och lägga till en touch av färg som en kant runt texten:

Detta är en enklare look som fortfarande får uppmärksamhet.

Eller så kan du kombinera en bakgrund och ram:

Detta är ett annat attraktivt sätt att använda färg.

För att sammanfatta reglerna för färgad text:

Du bör använda en färgad bakgrund eller en färgad ram runt text istället för att ändra färgen på texten. Dessutom ser vitt alltid bättre ut på färgade bakgrunder om inte färgen är mycket blek.

Låt oss nu välja de färger du ska använda.

Bara så att du vet var jag tvungen att skriva lite CSS för att lägga till gränser till styckena ovan. Gutenberg har inget gränsalternativ ännu. Du kan lägga till ramar redan med Elementor- widgets.

2 Använd en färgpalett

Att välja färger i farten är ett stort nybörjarmisstag.

När du använder färg på din webbplats bör du alltid välja en färg från din palett.

Genom att använda en palett kan du helt enkelt välja bland dina befintliga färger och du vet att resultatet kommer att se snyggt ut och "märkt" utan ansträngning.

Och här är grejen…

Jag har varit webbdesigner i flera år och jag kämpar fortfarande med att skapa snygga färgpaletter.

Och det är därför jag fuskar 😉

Jag skapar aldrig mina egna färgpaletter. Istället hittar jag en underbar färgpalett som redan är gjord och sedan anpassar jag den för att möta mina designbehov.

Min hemliga resurs för att hitta färgpaletter är Color Hunt.

9 enkla designregler för att göra din webbplats vackrare

Denna fantastiska webbplats har en grupp medlemmar som skapar och delar färgpaletter de designar.

Om du bläddrar på hemsidan hittar du en oändlig lista med vackra paletter att välja mellan. Genom att klicka på valfri palett kommer du till dess sida där relaterade paletter listas nedan.

9 enkla designregler för att göra din webbplats vackrare

Ärligt talat är det väldigt roligt att bläddra i paletterna och få idéer och inspiration till din webbplats.

Om du redan har en nyans i åtanke kan du välja en färg att börja med med hjälp av sökfältet.

9 enkla designregler för att göra din webbplats vackrare

Det finns också fördefinierade sökord tillgängliga som "varm" och "kall" för att hitta lämpliga paletter.

När du väl väljer en palett du gillar och implementerar färgerna på din webbplats kommer du att bli förvånad över hur stor skillnad det gör.

De två första tipsen bör lura dina besökare att tro att du är en färgstark designmästare.

Nu ska vi prata typsnitt!

3 Använd endast 1 eller 2 teckensnitt

Färger bör väljas från din palett. Teckensnitt är liknande.

Du bör välja ett eller två teckensnitt och sedan återanvända dem för allt.

Ofta, när WordPress-användare lär sig hur man ändrar typsnitt på sin webbplats, vill de plötsligt använda dem alla!

Till exempel har jag sett människor ändra teckensnittet för ett stycke för att få det att sticka ut i ett inlägg. Det är en dålig idé. Om du behöver text för att sticka ut i ett inlägg kan du:

  • Öka teckensnittets vikt (fetstil)
  • Öka teckenstorleken
  • Lägg till färg

När det kommer till typsnitt bör du välja ett eller två för hela din webbplats, och om du tror att du behöver mer än så, överväg detta…

Google designade Roboto-teckensnittet (som du också kan använda – det finns på Google Fonts ), och de använder det här typsnittet överallt.

De använder det för Google.com, Youtube, Gmail, Google Docs, Chrome – bokstavligen alla deras produkter använder det här typsnittet för all text.

Så om du är övertygad om att du behöver mer än ett typsnitt för en vacker webbplats, tänk om!

4 Använd ett populärt sans serif-teckensnitt

Jag har en annan genväg till dig.

Istället för att bläddra bland hundratals typsnitt rekommenderar jag att du väljer bland de mest framgångsrika typsnitten på webben.

Detta tillvägagångssätt garanterar i princip att din webbplats kommer att se bra ut.

För att göra detta besöker du Google Fonts så hittar du de populära typsnitten listade på startsidan.

9 enkla designregler för att göra din webbplats vackrare

För att förfina resultaten, klicka på rullgardinsmenyn Kategorier och avmarkera alla alternativ utom Sans Serif.

9 enkla designregler för att göra din webbplats vackrare

Om du väljer något av typsnitten som listas nu kommer din webbplats att se fantastisk ut.

Tänk på att majoriteten av texten på din webbplats dyker upp i dina inlägg och så den viktigaste kvaliteten på typsnittet är att det är lätt att läsa.

Alla de mest populära sans serif-teckensnitten är populära eftersom de är både läsbara och attraktiva. Och om du undrar…

Det här gör jag också!

När jag designar nya teman brukar jag gå till Google Fonts och söka efter de trendiga typsnitten för inspiration.

När jag vill lägga till lite mer karaktär i designen använder jag denna nästa taktik.

Den här webbplatsen använder också ett populärt sans serif-teckensnitt som heter Proxima Nova som är tillgängligt med Adobe Typekit.

5 Använd ett visningsteckensnitt för rubriker

Om du är nöjd med ett typsnitt kan du hoppa över den här taktiken.

Men om du känner att din kreativitet är lite hämmad av ett så enkelt urval, här är vad du kan göra…

Använd ett visningsteckensnitt för din webbplats rubriker.

Det första teckensnittet du valde var designat för att läsas i små storlekar, men ett displayteckensnitt är speciellt utformat för stora storlekar (som stora skärmar, förstår du?).

Saken är den att visningsteckensnitt ofta är väldigt snygga så att överanvändning av dem kan få din webbplats att se grym ut.

Rubriker är det perfekta stället att använda visningsteckensnitt eftersom:

  • De är alltid stora
  • De används sparsamt

Om du vill kan du återanvända visningsteckensnittet för din webbplatstitel (eller logotyp).

För att hitta ett visningsteckensnitt för din webbplats, besök Google Fonts igen, men den här gången ändrar du kategorierna så att de bara inkluderar visningsteckensnitt, så här:

9 enkla designregler för att göra din webbplats vackrare

Du ser direkt från de populära typsnitten hur mycket mer variation det finns med displayteckensnitt.

9 enkla designregler för att göra din webbplats vackrare

Det finns cirka 300 visningsteckensnitt på Google Fonts från och med nu, så ha kul när du surfar och kom ihåg att bara välja ett!

Här är ytterligare ett textbaserat designtips som kommer att göra din webbplats vackrare.

Om du inte vet hur du ändrar teckensnittet på din webbplats, följ den här handledningen.

Av alla designtips som listas i det här inlägget är det här det enklaste att implementera.

Ta en titt på menyn Tävla teman:

9 enkla designregler för att göra din webbplats vackrare

Menyalternativen är proportionerliga och jämnt fördelade vilket gör att det ser snyggt ut.

När du skapar din meny bör du göra varje menyalternativ till ett ord. Anledningen beror på mellanrum.

Titta till exempel på hur jämnt fördelade menyalternativen är på The New York Times.

9 enkla designregler för att göra din webbplats vackrare

Det är lätt att bläddra i ämnena och skilja på var och en.

När du lägger till fler ord i ett menyalternativ stör det avståndet. Menyalternativet blir mycket längre än de andra och mellanrummen mellan orden skapar en ojämnhet i designen.

I skärmdumpen nedan har jag lagt till falska menyalternativ i NYT-menyn med flera ord. Titta på hur förvirrande menyn blir:

9 enkla designregler för att göra din webbplats vackrare

Mellanrummen inuti menyalternativen är svåra att skilja från mellanrummen mellan menyalternativen

Även om menyalternativ med ett ord fungerar bäst, är det okej att ibland använda ett andra ord om du måste. Se bara till att det finns mycket mer utrymme mellan menyalternativen än mellan orden i menyalternativen.

Wistia använder två ord i menyalternativ och det ser bra ut eftersom det finns så mycket utrymme mellan menyalternativen:

9 enkla designregler för att göra din webbplats vackrare

Att förkorta långa menyalternativ tar bara några minuter och omedelbart göra din webbplats mer attraktiv.

Och om du inte visste detta kan du göra dina menyalternativs etiketter annorlunda än sidrubrikerna. Den här videon lär dig hur du skapar anpassade menyer och ändrar menyetiketterna:

De följande tipsen hjälper dig att göra ditt innehåll mer attraktivt.

7 Balansera text med media

Om du vill att din webbplats ska se fantastisk ut måste själva innehållet vara vackert.

Studera innehållet på populära webbplatser som Buzzfeed, Washington Post eller Bloomberg Businessweek och du kommer att hitta samma mönster.

De bryter ständigt upp text med bilder, kartor, videor, citat, tweets och andra visuella element.

9 enkla designregler för att göra din webbplats vackrare

Denna Buzzfeed-lista innehåller bilder, delningsknappar, länkar och rubriker efter nästan varje stycke

Jag kallar det, 4 paragrafregeln.

När du redigerar dina inlägg, se till att inkludera ett visuellt element ungefär vart fjärde stycke.

Målet är att hålla innehållet visuellt intressant så att det inte blir monotont och tråkigt när läsarna bläddrar förbi ett vanligt stycke efter stycke. Visuella element gör också innehållet mer informativt och roligt att läsa.

Med övning lär du dig hur du gör detta på ett naturligt sätt medan du skriver, men du kan alltid skumma igenom ditt inlägg när det är klart och hitta platser där du kan inkludera nya bilder.

För att dela upp en lång rad stycken kan du lägga till:

  • Bilder
  • Blockcitat
  • videoklipp
  • Inbäddade tweets
  • Annonser
  • Tabeller
  • Nya rubriker
  • Listor 😉

Det är också en bra idé att använda fetstil på viktiga delar av din text för att få uppmärksamhet och skapa mer visuellt intresse.

Och bara så det är klart: du behöver inte inkludera ett visuellt element exakt vart fjärde stycke. Det är bara en bra uppskattning att använda medan du behärskar den här tekniken.

Eftersom jag precis har sagt till dig att inkludera massor av bilder i dina inlägg, kommer här ett tips för att göra det på rätt sätt.

8 Centrera bilder

Bilder i WordPress kan ha någon av följande justeringar:

  • Höger
  • Vänster
  • Centrum

När du lägger till bilder i dina inlägg bör du alltid använda mittjustering.

Tekniskt sett har bilden "ingen" som sin justering innan du centrerar den och det är också bra.

Se dessutom till att bilden är lika bred som inläggets innehåll.

Det är så jag visar alla mina bilder i mina inlägg och de flesta utgivare gör det också.

Om du väljer en vänster- eller högerjustering "flyter" bilden åt sidan så att texten lindas runt den, så här:

9 enkla designregler för att göra din webbplats vackrare

"Float" är namnet på CSS-egenskapen som används för att göra text omslutande bilder som denna.

Den sista textraden som är nästan helt under bilden ser alltid besvärlig ut, men det finns en annan anledning till att detta inte är en populär stil längre.

Det kan se hemskt ut på mobilen:

9 enkla designregler för att göra din webbplats vackrare

Bloggare brukade flyta bilder i sina inlägg så här, men det var tillbaka när webbplatser hade en fördefinierad bredd och bara visades på datorer.

Nu måste ditt innehåll anpassas till skärmstorlekar från 400px till 2 560px brett.

Du har förmodligen redan valt ett responsivt tema, men ditt tema kommer inte att hindra dig från att flyta bilder eftersom det är ditt val att göra.

Jag säger, centrera alla dina bilder så blir de snygga på alla enheter. Enkelt är det.

Om du vill ha lite mer variation kan du använda den nya breda bildstilen som lagts till i Gutenberg (kräver temastöd):

9 enkla designregler för att göra din webbplats vackrare

Jag har ett sista tips för att få dina bilder och andra media att se bra ut.

9 Lägg dina media i kolumner

Detta är något jag ser på många av mina temaanvändares webbplatser.

När du lägger till flera medieobjekt (bilder, ljud, videor), staplas de efter varandra.

Det fungerar bra, men det är inte den bästa användningen av utrymmet. Användare måste bläddra riktigt långt för att komma förbi bilderna, de kan bara se en bild åt gången och de vet inte hur många fler bilder som finns kvar när de rullar.

Om du infogar tre eller fler bilder i rad, använd ett galleri.

När du istället använder ett galleri kan du se alla bilder på en gång utan att rulla.

9 enkla designregler för att göra din webbplats vackrare

Och jag vet vad du tänker nu…

"Det är trevligt, men jag vill att bilderna ska visas större än så."

Det är vad en lightbox är till för. Du kan installera en lightbox-plugin och sedan kan besökare klicka på en bild i galleriet för att se en större helskärmsversion.

Nu istället för att behöva bläddra igenom alla bilder kan besökarna se dem alla på en gång i en attraktiv gallerilayout. Dessutom, när de klickar på en bild visar ljuslådan bilden större än om den precis infogats i inlägget.

Med andra ord, att använda ett galleri ger dig det bästa av två världar.

Galleriblocket gör det enkelt att inkludera bildgallerier, och du kan använda kolumnblocket för att lista kolumner med ljud- och videoinbäddningar (och alla andra typer av innehåll).

Kolumnblocket har precis blivit ännu enklare att använda i WP 5.3, och du kan följa den här guiden för att lägga till kolumner i inlägg för steg-för-steg-instruktioner.

När du hittar en lång lista med media inbäddade i ditt inlägg vet du att det är den perfekta tiden att använda kolumner.

Gör en vackrare hemsida

Med dessa 9 designregler är du redo att skapa en vackrare webbplats.

Det bästa är att det inte tar lång tid att implementera någon av dessa principer. Att bara veta vad man ska göra är halva striden.

Om du vill börja på rätt fot, se till att välja ett tema som får ditt innehåll att se bra ut, och du kommer att vara på god väg mot bättre estetik.

Inspelningskälla: www.competethemes.com

Denna webbplats använder cookies för att förbättra din upplevelse. Vi antar att du är ok med detta, men du kan välja bort det om du vill. Jag accepterar Fler detaljer