Artiklen er opdateret den: 12. oktober 2024
Her på siden kan du læse om, hvad jeg som webdesigner bruger af online ydelser, og hvordan jeg tænker design.
Siden vil løbende opdateres, da ny ydelser hele tiden kommer til, og jeg får nye tilgange til det at designe til web.
Når jeg går i gang med en ny designopgave, er noget af det første, jeg gør ofte at besøge Dribbble.
Her har jeg mulighed for at browse imellem tusindvis af fantastiske design inddelt i kategorier som: Web design, Print, Animation, Mobile o.lign. Hver kategori er derefter opdelt i underkategorier.
Et lille fif er dog ikke at lade sig styre for meget af disse kategorier. Du er her for at blive inspireret, ikke for at kopiere et design!
Farverne er næsten det vigtigste for en webdesigner
Der kan ændres meget i et design ved hjælp af farver. Farvevalget er efter min menig det vigtigste og mest radikale valg i designprocessen. Derfor giver det for mig god mening, at bruge tid, eftertanke og en del kopper kaffe, når jeg i den første fase arbejder med farverne på hjemmesiden.
En definerede farve som udgangspunkt for farveprofilen
Det første valg jeg tager, når jeg designer en ny hjemmeside, er hvilken farve der skal være definerede/styrende for hjemmesiden farveprofil.
Typisk regner jeg her ikke hvid og sort med. (Ved godt at hvid og sort ren teknisk IKKE er farver, men jeg tror du forstår mig alligevel!)
Hvid og sort benytter jeg 99% af tiden som baggrundfarve og skriftfarve. Dog ofte ikke i deres ren form som #ffffff og #000000, men som en eller anden varianter af dem.
Farven fra logo?
Nogle gange giver det mening, af finde denne definerede farve i firmaets logo – men oftes ikke!
Et logo er tit designet med et meget tydeligt farvevalget. Når det “blæses op” til store flader på computer skærmen, kan det ofte være ganske grimt og uharmonisk. Det kan være svært at få andre elementer som billeder, film og tekst til at passe ind på / ved en meget “kras” og “råbende” farve.
Da jeg også har mange små firmaer, enkeltmands firmaer som kunder, oplever jeg ofte at deres logo bare ikke er særlig godt! At det slet ikke kan bruges til at lave en farveprofil ud fra.
Når den definerende farve er fundet
Når denne vigtige farve er fundet, har jeg som webdesigner en lang række online redskaber jeg benytter, til at komme videre med at lave den færdige farveprofil.
Typisk kræver det, at der kun skal findes 2 farver mere som “står godt” til den definerede farve samt sort og hvid. Enkelte gange mere en 2 farver (5 farver i alt med “den definerende” samt sort og hvid).
Farveprofil
Til dette arbejde benytter jeg typisk ColorSpace, som efter min mening er nem og hurtig at arbejde med.
En anden “smart” hjemmeside er https://realtimecolors.com, her ser du dine farver “live” på en “rigtig” hjemmeside. Det gør arbejdet med at definere farverne til designet nemmere, og giver samtidig et mere realistisk indtryk af dine valg.
Gradient
Et rigtig godt online redskab hvor jeg som webdesigner kan finde inspiration til gradient farveforløb og nemt kopiere CSS koden bagefter er uiGradients.
Gradient farveforløb benytter jeg oftes til bokse med indhold der gerne må “larme” lidt – “se her er jeg!“
Skrifttyper (font)
Skrifttyper kan virkelig sætte sit præg på et design – være en stor del af udtrykket!
Mange webdesigner finder som noget af det første i designprocessen en eller flere Google Font, som de synes passer til opgaven / designet.
Jeg må indrømme, at jeg helst benytter de gamle “websikre fonte“, da de i forvejen findes på næsten alle computere, og derfor ikke kræver yderligere “http kald” når hjemmesiden loades i browseren. Ja, hjemmesidens hastighed er et MEGET vigtig fokus punkt for mig som webdesigner og koder 🙂
Det er bestemt ikke et “religiøst“, forbehold jeg har til Google Fonts. Der findes så mange flotte skrifttyper på Google Font, som virkelig kan “løfte” designet. Det giver bare mening for mig først at arbejde / afprøve de websikre først.
Hvorfor begynde med at gøre hjemmesiden langsom før alle muligheder er afprøvet!
Websikre fonte
- Arial – font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
- Baskerville – font-family: Baskerville, Baskerville Old Face, Garamond, Times New Roman, serif;
- Bodoni – font-family: Bodoni MT, “Bodoni 72”, Didot, Didot LT STD, Hoefler Text, Garamond, Times New Roman, serif;
- Calibri – font-family: Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;
- Calisto MT – font-family: Calisto MT, Bookman Old Style, Bookman, Goudy Old Style, Garamond, Hoefler Text, Bitstream Charter, Georgia, serif;
- Cambria – font-family: Cambria, Georgia, serif;
- Candara – font-family: Candara, Calibri, Segoe, Segoe UI, Optima, Arial, sans-serif;
- Century Gothic – font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif;
- Consolas – font-family: Consolas, monaco, monospace;
- Copperplate Gothic – font-family: Copperplate, Copperplate Gothic Light, fantasy;
- Courier New – font-family: Courier New, Courier, Lucida Sans Typewriter, Lucida Typewriter, monospace;
- Dejavu Sans – font-family: Dejavu Sans, Arial, Verdana, sans-serif;
- Didot – font-family: Didot, Didot LT STD, Hoefler Text, Garamond, Calisto MT, Times New Roman, serif;
- Franklin Gothic – font-family: Franklin Gothic, Arial Bold;
- Garamond – font-family: Garamond, Baskerville, Baskerville Old Face, Hoefler Text, Times New Roman, serif;
- Georgia – font-family: Georgia, Times, Times New Roman, serif;
- Gill Sans – font-family: Gill Sans, Gill Sans MT, Calibri, sans-serif;
- Goudy Old Style – font-family: Goudy Old Style, Garamond, Big Caslon, Times New Roman, serif;
- Helvetica – font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
- Impact – font-family: Impact, Charcoal, Helvetica Inserat, Bitstream Vera Sans Bold, Arial Black, sans serif;
- Lucida Bright – font-family: Lucida Bright, Georgia, serif;
- Lucida Sans – font-family: Lucida Sans, Helvetica, Arial, sans-serif;
- Microsoft Sans Serif – font-family: MS Sans Serif, sans-serif;
- Optima – font-family: Optima, Segoe, Segoe UI, Candara, Calibri, Arial, sans-serif;
- Palatino – font-family: Palatino, Palatino Linotype, Palatino LT STD, Book Antiqua, Georgia, serif;
- Perpetua – font-family: Perpetua, Baskerville, Big Caslon, Palatino Linotype, Palatino, serif;
- Rockwell – font-family: Rockwell, Courier Bold, Courier, Georgia, Times, Times New Roman, serif;
- Segoe UI – font-family: Segoe UI, Frutiger, Dejavu Sans, Helvetica Neue, Arial, sans-serif;
- Tahoma – font-family: Tahoma, Verdana, Segoe, sans-serif;
- Trebuchet MS – font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, sans-serif;
- Verdana – font-family: Verdana, Geneva, sans-serif;
Min foretrukne font til webdesign:
Helvetica – font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
MEN – den er desværre kun at finde på MAC, så PC folket skal downloade den for at bruge den. Derfor kan jeg desværre ikke benytte den stilfulde skrifttype i mine webdesign – øv bøv …
Derfor er mit mest oplagte valg af skrifttype font-family: system-ui, sans-serif; som er utrolig hurtig for din hjemmeside, da den ikke kræver at blive downloadet da den netop er system-ui. Din pc, mac, androide, ios device etc. default skriftype!
Læs mere på modernfontstacks.com.
Størrelsen
Et rigtig godt redskab er https://utopia.fyi når du vil bestemme størrelsen på din responsive font. Her kan du sikre, at fonte op- og ned-skalere ens for alle dine angivne skriftstørrelser.
Google Fonts
Vil du gerne benytte en af de mange Google Fonts på din hjemmeside, er det vigtigt, at du ikke “lader dig rive med“, af alle de flotte skrifttyper.
Som ved så meget andet her i livet, er det ikke sådan at mere/flere altid er bedre! Faktisk er det vigtigt for designet, at du benytter så få som mulige … og så er der det her med page loade, du ved 😉
En smart måde at afprøve hvilken font der passer til WordPress hjemmesiden, er ved at installere Fonts Plugin | Google Fonts Typography udvidelsen til WordPress. Med det kan du nemt skifte og med det samme se, hvordan de mange skrifttyper ser ud på netop din side.
Vigtigt – Jeg vil dog kun anbefale dig at benytte denne fremgangsmåde til at finde Google fonten. Selve implementeringen skal ske i dit child theme!
Ikoner i svg format
Før vi når til de vigtige billeder, skal vi se på webdesignerens meget brugte ikoner.
Billedet siger mere end 1000 ord. Er der nogen, der har taget den sandhed til sig, ja så er det nutidens webdesigner … mig selv inklusiv.
Her er det dog den forenklede form for billede eller tegning, som illustrativt hurtigt skal “forklare” hjemmesiden besøgende, at her kan du: “skrive en mail, ringe på telefonen, søge på hjemmesiden, putte varen i indkøbskurven o.lign..”
Her er det eksempler på svg ikoner fra Google Font Icons, som du kan downloade eller benytte som andre Google Fonts via en CSS fil:
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
En af de ting der gøre svg ikoner oplaget, når man arbejder med webdesign er, at de kan manipuleres via css. Modsat de almindelige billedeformater som jpg, png o.lign.
Det er nemt at: skifte farve, størrelse, hover state, animation o.lign på svg filen.
En anden meget vigtig grund til at benytte svg formatet til ikoner, er at filen typisk fylder meget mindre end eksempelvis png formatet.
Har du kun dine ikoner i eksempelvis png format, kan du benytte convertio.co til at konvertere dem til svg.
Animation af elementer i designet
Vil du virkelig tiltrække der opmærksomhed, er bevægelse en oplagt metode. Øjet drages uundværligt hen mod noget der bevæger sig …
… det kan dog som dette element ret hurtigt blive irriterende at se på. Derfor er jeg altid meget forsigtig med at bruge animationer. Ved første øjekast kan de virke spændende, men ret hurtigt bliver man lidt træt af dem.
Typisk vil jeg som webdesigner benytte animationer ved hover states, da det virker mere elegant og ikke så larmende!
Som inspiration til elementer i designet der skal bevæge sig, benytter jeg ofte animista.net. Her kan jeg nemt “lege” med css animationer og bagefter kopier koden ind i min template.
Billeder
Der er nok ikke noget som billeder og video, der kan være definerende for designet. Definerende for om vi synes hjemmesiden er flot eller not.
Desværre har mange firma et alt for dårligt billedemateriale, og trods webdesignerens stor anstrengelser med farver, fonte, ikoner og animationer, kan det samlede design hurtigt ødelægges med store dårlige billeder!
Jeg er derfor stor fortaler for at benytte professionelle billeder på hjemmesiden!
Enten billeder som er købt, eller endnu bedre billeder der er tage af en professionel fotograf til lejligheden.
Der findes mange steder på nette, hvor du kan købe billeder. En af de mest brugte er formodentlig iStock. JA – det er dyrt at købe gode billeder! Gode billeder kan koste flere hundrede kr., men det er efter min mening godt give ud, hvis målet er en professionel hjemmeside med et godt webdesign.
Der findes heldigvis også gratis billeder på nettet, som du kan benytte i dine design.
Som webdesigner og selvstændig wordpress programmør benytter jeg ofte Pexels, hvis der ikke er råd til professionelle billeder i det pågældende projekt.
En anden mulighed for at benytte gratis billeder uden copyright op er unsplash.com
Har jeg brug for gennemsigtige ikoner eller billeder til mine design, er pngwing.com ofte det første stede på internette jeg leder.
AI generede billeder er i dag svære at komme ude om. Du ser dem over alt på internette og kan selvfølgelig også benyttes på din kommende hjemmeside.
Microsoft, Google og en del andre har hver deres versioner af “AI billede maskiner” som du kan tilmelde dig og lege med … for det er lidt af en leg. En sjov og til tider tidskrævende leg, hvis resultatet skal være som du ønsker.
Erhvervs webdesign
Erhvervs webdesign er efter min mening en lidt underlige betegnelse, men den er de senere år blevet en “ting” på Googles SERP – noget der efterspørges!
Erhvervs webdesign dækker over webdesign, der åbenlyst er målrette erhvervslivet. Typisk tænker de forskellige webbureauerne her på mindre og mellemstore virksomheder.
Design udtrykket er forskelligt fra erhvervs webdesign til den private blog / hjemmesides design. Designet er her mere stramt og skal udtrykke stabilitet, troværdig og ofte også “pumpe” virksomheden lidt op. Gøre den større end den er, da mange har den opfattelse af, at større virksomheder er bedre end små enkeltmandsvirksomheder. Du har helt sikkert oplevet sætningen : “Vi tilbyder”, “Vi kan hjælp med …” o.lign. På trods af at firmaet er en enkeltmandsvirksomhed.
Et godt erhvervs webdesign skal skabe tryghed og en visuel forståelse af, at firmaet bag er stort nok til at løfte den opgave, vi som forbruger / kunde efterspørger.
Symboler i HTML og CSS
En dejlig nem og effektiv metode til at implementerer symboler i designet er via HTML Currency Symbols, Currency Entities and ASCII Currency Character.
Denne metode er samtidig den der påvirker din PageSpeed mindst mulig, da der ikke skal bruges et http kald på at hente en billedfil.
Her kan du se og kopiere symboler til dit webdesign: www.toptal.com/designers/htmlarrows/symbols
Når der skal rettes i CSS
Ofte skal jeg rette små fejl i en CSS fil.
Det kan være folk på facebook der spørger om hjælp, eller kunder der skriver direkte til min mail. “Hvorfor ser XX nu sådan ud?”
Her er nedenstående lille css kode helt uundværlig, for at se hvilke elementer der skaber problemer.
* {
outline: 1px solid red;
}