Allt om visuell design

Färglära förklarar hur nyanser förhåller sig till varandra, kombineras och påverkar hur vi uppfattar dem på skärm och i tryck. Kapitlet handlar om…

Färgpsykologi studerar hur färger påverkar humör, minne och handlingar. Kapitlet handlar om färgpsykologi och hur du tillämpar det på din webbplats…

Färgpsykologi i marknadsföring kopplar valet av palett till kampanjmål och varumärkets personlighet. Kapitlet handlar om färgpsykologi i…

Att använda färgpsykologi i varumärkesbyggande betyder att välja nyanser som passar den personlighet du lovar kunderna. Kapitlet handlar om…

Blått förknippas ofta med förtroende, lugn och professionalism. Kapitlet handlar om färgpsykologi kring blått och hur du tillämpar det på din…

Grönt kopplas vanligen till tillväxt, hälsa och natur. Kapitlet handlar om färgpsykologi kring grönt och hur du tillämpar det på din webbplats och i…

Rött kan signalera brådska, passion eller aptit, beroende på nyans. Kapitlet handlar om färgpsykologi kring rött och hur du tillämpar det på din…

Starka färgkombinationer använder en dominerande nyans, neutrala färger och en accentfärg för handlingar. Kapitlet handlar om färgkombinationer och…

En färgcirkel ordnar nyanserna så att du ser sambanden mellan primärfärger, sekundärfärger och tertiärfärger. Kapitlet handlar om färgcirkel och hur…

En färgpalett för varumärket listar godkända färger för logotyper, webb, tryck och grafik i sociala medier. Kapitlet handlar om varumärkets färgpalett…

Färgkontrast mäter skillnaden i ljushet mellan text och bakgrund. Kapitlet handlar om färgkontrast och hur du tillämpar det på din webbplats och i…

Färgscheman är planerade uppsättningar nyanser som används genom hela en design för att skapa harmoni. Kapitlet handlar om färgscheman och hur du…

Vanliga färgmisstag på webbplatsen är låg kontrast, för många nyanser och knappar som ser olika ut. Det här kapitlet handlar om färgmisstag på…

Design för sociala medier anpassar varumärkets bilder snabbt till kvadratiska, stående och liggande format. Det här kapitlet handlar om design för…

Marknadsföringsdesign skapar bilder och material till kampanjer i annonser, e-post, på webben och i tryck. Det här kapitlet handlar om…

Bra e-postdesign innebär layout i en kolumn, stora klickytor och alt-text på bilder. Det här kapitlet handlar om e-postdesign och hur du tillämpar…

Nyhetsbrevsdesign kombinerar starka ämnesrader med avsnitt som går att skumma och en tydlig huvudlänk. Det här kapitlet handlar om nyhetsbrevsdesign…

Bannerdesign väger ihop varumärke, tydligt erbjudande och filstorlek för annonsnätverk och kampanjer på webbplatsen. Det här kapitlet handlar om…

Broschyrdesign ordnar tjänster, bevis och kontaktvägar för tryck eller nedladdning som PDF. Det här kapitlet handlar om broschyrdesign och hur du…

Tillgänglig webbdesign gör att personer med funktionsnedsättning kan uppfatta, navigera i och använda din webbplats. Det här kapitlet handlar om…

Att göra en webbplats ADA-anpassad handlar om kontrast, alt-text, tangentbordsstyrning och tydlig struktur. Det här kapitlet handlar om ADA-anpassning…

ADA-anpassad webbdesign följer erkända standarder för gränssnitt som går att uppfatta och använda. Det här kapitlet handlar om ADA-anpassad webbdesign…

Inkluderande design innebär att göra produkter som så många som möjligt kan använda, utan separata versioner. Det här kapitlet handlar om inkluderande…

En tillgänglighetsredogörelse dokumenterar vilka standarder du följer, kända brister och hur man ger feedback. Det här kapitlet handlar om…

Webbdesigntrenderna 2025 gynnar prestanda, kraftig typografi, diskret rörelse och tillgängliga färger. Det här kapitlet handlar om webbdesigntrender…

Grafiska designtrender för företag är bland annat autentiska foton, flexibla varumärkessystem och enkel geometri. Det här kapitlet handlar om grafiska…

En hero-bild är den stora bilden högst upp på en sida som stöder huvudbudskapet. Det här kapitlet handlar om hero-bild och hur du tillämpar kunskapen…

På en webbplats betyder hero-bild framför allt den huvudsakliga bannerbilden på viktiga sidor. Det här kapitlet handlar om hero-bilder och hur du…

Bild-SEO handlar om att optimera filnamn, alt-text, storlek och format så att bilderna stöder synligheten i sökmotorer. Det här kapitlet handlar om…

Alt-text beskriver bildens innehåll och funktion kort och med enkla ord. Det här kapitlet handlar om exempel på alt-text och hur du tillämpar…

Vanliga bildfilformat är JPEG, PNG, WebP, SVG och GIF, för olika användningsområden. Det här kapitlet handlar om bildfilformat och hur du tillämpar…

Bildoptimering för webben minskar filstorleken samtidigt som bildkvaliteten förblir acceptabel. Det här kapitlet handlar om bildoptimering för webben…

Bilder på webbplatsen ska stödja ditt budskap, passa varumärkets ton och verka äkta. Det här kapitlet handlar om bilder på webbplatsen och hur du…

Fotografering med negativt utrymme lämnar tomma ytor som framhäver motivet. Det här kapitlet handlar om fotografering med negativt utrymme och hur du…

Bakgrundsbilder på webbplatser ska ha låg kontrast bakom text eller täckas av ett kraftigt lager. Det här kapitlet visar hur bakgrundsbilder på…

Bildbanksfoton för webbplatser fungerar när de passar din färgpalett, beskärs på ett eget sätt och blandas med riktiga bilder. Det här kapitlet visar…

Bildstorlekar för sociala medier skiljer sig mellan nätverk och placeringar, så exportförval sparar tid. Det här kapitlet visar hur bildstorlekar för…

Alt-text för bilder beskriver innehåll och syfte på cirka hundratjugofem tecken när det går. Det här kapitlet visar hur alt-text för bilder fungerar…

Bildkvalitet för varumärket signalerar professionalism innan besökarna hunnit läsa texten. Det här kapitlet visar hur bildkvalitet för varumärket…

Visuell hierarki ordnar elementen så att tittaren ser den viktigaste informationen först. Det här kapitlet visar hur visuell hierarki fungerar på din…

Negativt utrymme är den tomma ytan runt och mellan designelement. Det här kapitlet visar hur negativt utrymme fungerar på din webbplats och i ditt…

Vitt utrymme är avsiktligt tomt utrymme som används för tydlighet och fokus, inte bortslösat utrymme. Det här kapitlet visar hur vitt utrymme fungerar…

Vitt utrymme i design skiljer sektioner åt, lyfter fram knappar och förbättrar förståelsen. Det här kapitlet visar hur vitt utrymme i design fungerar…

Gestaltprinciper beskriver hur människor uppfattar grupper, mönster och hela layouter. Det här kapitlet visar hur gestaltprinciper fungerar på din…

Layoutdesign placerar innehållsblock, navigation och media på en sida eller skärm. Det här kapitlet visar hur layoutdesign fungerar på din webbplats…

Typer av webbplatslayout är bland annat enkolumn, delad vy, rutnät och tidningsliknande mönster. Det här kapitlet visar hur webbplatslayout fungerar…

Visuell balans i design fördelar den visuella tyngden så att sidan känns stabil. Det här kapitlet visar hur visuell balans i design fungerar på din…

Linjering i design linjerar kanter och baslinjer så att layouter känns genomtänkta. Det här kapitlet visar hur linjering i design fungerar på din…

Kontrast i design använder skillnader i storlek, färg och tjocklek för att lyfta fram viktiga element. Det här kapitlet visar hur kontrast i design…

Positivt och negativt utrymme definierar tillsammans former och styr fokus i kompositioner. Det här kapitlet visar hur positivt och negativt utrymme…

Repetition i design upprepar färger, former och avstånd för att göra sidor enhetliga. Det här kapitlet visar hur repetition i design fungerar på din…

Design av varumärkesidentitet är det visuella och verbala system som gör ett varumärke igenkännbart. Det här kapitlet visar hur design av…

Varumärkesdesign är det strategiska och visuella arbetet med att forma hur ett företag uppfattas. Det här kapitlet visar hur varumärkesdesign fungerar…

Typer av logotyper omfattar ordmärken, bokstavsmärken, bildmärken, abstrakta märken, maskotar och kombinationer. Det här kapitlet visar hur typer av…

En bra logotyp är enkel, minnesvärd, mångsidig och passar din målgrupp. Det här kapitlet visar hur en bra logotyp fungerar på din webbplats och i ditt…

Typer av grafisk design för företag omfattar varumärkesbyggande, marknadsföring, webb, förpackningar och rörlig bild. Det här kapitlet visar hur typer…

Tips för logotypdesign för företagare handlar om en tydlig brief, en titt på konkurrenterna och leverans av vektorfiler. I det här kapitlet går vi…

Visuell identitet är hela utseendet hos ett varumärke i logotyp, färg, typografi, bilder och layout. I det här kapitlet går vi igenom visuell…

En infografik visar data eller steg visuellt, så att komplex information går att överblicka snabbt. I det här kapitlet går vi igenom infografikens…

Att göra en infografik börjar med en disposition, kontroll av data, visuell hierarki och export för webben. I det här kapitlet går vi igenom…

Ett designsystem samlar komponenter, tokens och regler för att bygga enhetliga gränssnitt. I det här kapitlet går vi igenom designsystem och hur du…

En grafisk profil dokumenterar hur logotypen används samt färger, typsnitt, bilder och tonalitet. I det här kapitlet går vi igenom grafisk profil och…

En designbrief förklarar mål, målgrupp, leveranser, tidsplan och exempel du gillar eller ogillar. I det här kapitlet går vi igenom briefning av…

Typografi är konsten och tekniken att ordna text så att språket blir läsbart och visuellt tilltalande. I det här kapitlet går vi igenom grunderna i…

Serif-typsnitt har små streck i bokstävernas ändar, sans serif-typsnitt har inte det. I det här kapitlet går vi igenom serif kontra sans serif och hur…

Att kombinera typsnitt innebär att välja två eller fler som kontrasterar men ändå hänger ihop. I det här kapitlet går vi igenom typsnittskombinationer…

Webbsäkra typsnitt är typsnitt som med stor sannolikhet visas likadant i olika webbläsare och på olika enheter. I det här kapitlet går vi igenom…

De bästa typsnitten för webbplatsens brödtext prioriterar läsbarhet i små storlekar på skärmar. I det här kapitlet går vi igenom de bästa typsnitten…

Läsbarhet hos typsnitt beror på storlek, radlängd, radavstånd och kontrast mot bakgrunden. I det här kapitlet går vi igenom läsbarhet hos typsnitt och…

Typsnittshierarki använder storlek, vikt och avstånd för att visa vilken text som är viktigast. I det här kapitlet går vi igenom typsnittshierarki och…

Typografi i webbdesign påverkar förtroende, förståelse och tid på sidan. I det här kapitlet går vi igenom typografi i webbdesign och hur du använder…

Typsnittstyper omfattar kategorierna serif, sans serif, slab, script och display. I det här kapitlet går vi igenom typsnittstyper och hur du använder…

Typografiregler handlar om en gräns för antalet typsnitt, en konsekvent hierarki och tillräckligt med avstånd. I det här kapitlet går vi igenom…

Google Fonts för webbplatser erbjuder gratis, webboptimerade typsnittsfamiljer som du kan bädda in på din webbplats. I det här kapitlet går vi igenom…

Typografifel är bland annat för många typsnitt, låg kontrast och centrerade långa stycken. I det här kapitlet går vi igenom typografifel och hur du…

Ditt varumärkestypsnitt signalerar personlighet innan besökarna har läst en hel mening. I det här kapitlet går vi igenom varumärkestypsnitt och hur du…

UX-design handlar om hur människor upplever och klarar av att använda en produkt eller webbplats. I det här kapitlet går vi igenom grunderna i…

UI-design handlar om de visuella och interaktiva ytor som användare trycker och klickar på. I det här kapitlet går vi igenom grunderna i UI-design och…

UI vs UX jämför hur ett gränssnitt ser ut med den samlade upplevelsen och hur väl uppgifterna lyckas. Det här kapitlet handlar om skillnaden mellan UI…

Vid användbarhetstest observerar du hur riktiga människor försöker lösa uppgifter på din webbplats eller prototyp. Det här kapitlet handlar om…

UI-designprinciper handlar bland annat om enhetlighet, återkoppling, synlighet och att förebygga fel. Det här kapitlet handlar om UI-designprinciper…

Användarcentrerad design utgår från research, återkoppling och upprepade tester med riktiga användare. Det här kapitlet handlar om användarcentrerad…

UX-design för företag kopplar smidigare kundresor till högre konvertering och bättre kundlojalitet. Det här kapitlet handlar om UX-design för företag…

Design av mobilappar lägger vikt vid tumzoner, enkel navigering och offlineläge. Det här kapitlet handlar om design av mobilappar och hur du använder…

För att förbättra användarupplevelsen på webbplatsen åtgärdar du navigering, hastighet, läsbarhet och krångel i formulär. Det här kapitlet handlar om…

Webbplatsens användbarhet betyder att besökare hittar information och slutför uppgifter utan besvär. Det här kapitlet handlar om webbplatsens…

Enhetlig design innebär att knappar, avstånd och tonläge upprepas på alla sidor. Det här kapitlet handlar om enhetlig design och hur du använder det…

Tester av webbdesign kombinerar statistik, användbarhetssessioner och A/B-jämförelser. Det här kapitlet handlar om tester av webbdesign och hur du…

Webbdesign är att planera och forma hur webbplatser ser ut, läses och beter sig för besökarna. Det här kapitlet handlar om webbdesign och hur du…

En mobilanpassad webbplats går att läsa utan att zooma, trycka på pyttesmå länkar eller scrolla i sidled. Det här kapitlet handlar om mobilanpassning…

Mobile first-design börjar med layouten för mobilen och bygger sedan ut funktionerna för större skärmar. Det här kapitlet handlar om mobile…

En redesign av webbplatsen förnyar struktur, utseende och innehåll, ofta även tekniken bakom sidan. Det här kapitlet handlar om redesign av…

Design av sidhuvud handlar om var logotypen sitter, navigeringen och de viktigaste åtgärderna högst upp. Det här kapitlet handlar om webbplatsens…

En sidfot upprepar kontaktuppgifter, juridiska länkar och sekundär navigering. Det här kapitlet handlar om design av sidfot och hur du använder det på…

Navigeringen på webbplatsen bör använda välbekanta etiketter och visa vilket avsnitt besökaren befinner sig i. Det här kapitlet handlar om…

Startsidan bör inom några sekunder säga vem du hjälper, vad du erbjuder och vad nästa steg är. Det här kapitlet handlar om design av startsidan och…

Above the fold är det innehåll som syns innan man scrollar på en viss skärmstorlek. Det här kapitlet handlar om above the fold och hur du använder det…

Design av landningssidor handlar om ett enda erbjudande med minimalt med navigering som distraherar. Det här kapitlet handlar om design av…

Bästa praxis för landningssidor innebär tydliga rubriker, punktlistor som går snabbt att skanna och förtroendeskapande signaler. Det här kapitlet…

Knappdesign använder storlek, färg, text och placering för att locka till klick. Det här kapitlet handlar om knappdesign och hur du använder det på…

Webbdesign för småföretag bör sätta mobilen, tydliga tjänster och enkel kontakt först. Det här kapitlet handlar om webbdesign för småföretag och hur…

Grafisk design är hantverket att kombinera text, bilder och layout för att förmedla ett budskap visuellt. Det här kapitlet handlar om grafisk design…

Designens element är linje, form, färg, textur, utrymme, volym och valör. Det här kapitlet handlar om designens element och hur du använder kunskapen…

Designens principer styr hur element hänger ihop genom balans, kontrast, betoning, rörelse, mönster, rytm, enhet och variation. Det här kapitlet…

Principer för visuell design är praktiska regler för hur du ordnar text, färg, bilder och utrymme på skärmar och sidor. Det här kapitlet handlar om…

Designens element och principer är två sidor av samma system: delarna och hur delarna samspelar. Det här kapitlet handlar om designens element och…

Designens principer beskriver hur du ordnar visuella element så att resultatet känns genomtänkt. Det här kapitlet handlar om designens principer och…

Visuell design handlar om att ordna visuella element så att informationen blir tydlig, tilltalande och i linje med ett mål. Det här kapitlet handlar…

Designprocessen går från research och mål via skisser och feedback till sista finslipningen. Det här kapitlet handlar om designprocessen och hur du…

En wireframe är en enkel layoutkarta som visar innehållsblock och navigering utan slutlig stil. Det här kapitlet handlar om wireframes och hur du…

Bra webbdesign har tydlig navigering, läsbar text, enhetlig profil och uppenbara nästa steg. Det här kapitlet handlar om bra webbdesign och hur du…

Dålig webbdesign märks på stök, liten text, långsamma sidor och förvirrande menyer. Det här kapitlet handlar om dålig webbdesign och hur du använder…

Kostnaden för webbdesign varierar med antal sidor, specialfunktioner, innehållsbehov och vem som gör jobbet. Det här kapitlet handlar om kostnaden för…