Klare linjer i webdesign handler ikke kun om tynde streger, rette kanter og god afstand mellem elementerne. De opstår, når sidens indhold følger en tydelig logik, som du kan aflæse uden at standse op. En overskrift hører synligt sammen med sit afsnit. En knap ligger dér, hvor handlingen giver mening. Elementer, der ligner hinanden, opfører sig også ens. Det kræver præcision i detaljerne, ikke nødvendigvis færre af dem.
Klare linjer i webdesign kræver et fast udgangspunkt
Et layout virker ofte roligt, fordi flere elementer deler de samme usynlige kanter. Overskriften, brødteksten og billedteksten begynder eksempelvis på samme lodrette linje. Besøgende behøver ikke registrere systemet bevidst. Blikket finder vej, uden at hvert nyt element kræver en ny orientering. Er noget derimod forskudt en smule uden en synlig grund, kan siden få et tilfældigt præg, selv om farver og skrifter er afdæmpede. Også på simsek-design.de
bør fælles kanter og konsekvente afstande understøtte layoutets sammenhæng.
Begynd derfor med sidens grundstruktur. Fastlæg indholdets bredde, forholdet mellem spalterne og de gennemgående afstande. Et afstandssystem kan eksempelvis tage udgangspunkt i 8 pixels og bruge 16, 24 og 32 pixels til forskellige relationer. Tallene er ikke en regel i sig selv. Deres værdi ligger i gentagelsen. En afstand på 24 pixels skal helst markere nogenlunde det samme forhold mellem elementer fra sektion til sektion.
Alle mellemrum skal dog ikke behandles ens. Afstanden mellem en overskrift og dens tekst bør normalt være mindre end afstanden til den foregående sektion. Ellers bliver forbindelsen uklar. Et billede kan tilsvarende kræve lidt ekstra luft, hvis motivet visuelt fylder meget, selv om billedfilens mål svarer til de øvrige billeders.
Her må målinger afvejes mod synsindtryk. Et ikon kan være matematisk centreret og stadig se skævt ud, fordi formen har mere visuel vægt i den ene side. Justér derfor med øjet efter den første opsætning. Faste rammer skaber sammenhæng, mens små optiske korrektioner får dem til at fungere i praksis.
Typografi giver de klare linjer en læseretning
Tekst er sjældent bare indhold, der hældes ind i et færdigt layout. Bogstavernes form, linjernes længde og overskrifternes vægt er en del af selve strukturen. Hvis alle overskrifter er næsten lige store, må læseren bruge ordene alene til at forstå hierarkiet. Bliver forskellene for voldsomme, kan en beskeden mellemoverskrift komme til at dominere mere end sidens hovedbudskab.
Begynd med få, tydelige tekstniveauer. På en almindelig indholdsside er der ofte brug for en sidetitel, mellemoverskrifter, brødtekst og en mindre skriftstørrelse til supplerende oplysninger. Hvert niveau bør have en fast funktion. Stor skrift skal ikke bruges alene for at fylde et tomt område, og lille skrift bør ikke skjule information, som besøgende skal bruge for at træffe et valg.
Linjelængden har også betydning for udtrykket. Som praktisk udgangspunkt kan brødtekst afprøves med omkring 50 til 75 tegn pr. linje, inklusive mellemrum. Den passende bredde afhænger af skrifttype, skriftstørrelse og tekstens karakter. En smal spalte med lange danske sammensætninger kan give ujævne linjeafslutninger. En meget bred spalte kræver til gengæld længere bevægelser med blikket mellem linjerne.
Se desuden på afstanden mellem tekstens linjer. Linjehøjden skal give plads til bogstavernes over- og underlængder, uden at afsnittet falder fra hinanden visuelt. Afprøv overskrifter med både korte og lange formuleringer. En overskrift på to linjer afslører hurtigt, om linjehøjden er for stram. Brug rigtigt indhold under arbejdet, gerne med danske tegn, tal og parenteser. Pladsholdertekst viser sjældent de steder, hvor typografien faktisk kommer på prøve.
Knapper og felter skal vise deres funktion uden støj
Et stramt visuelt udtryk mister sin værdi, hvis besøgende skal gætte på, hvad der kan klikkes på. En knap bør kunne skelnes fra en overskrift, og et indtastningsfelt bør ligne et sted, hvor du kan skrive. Når alle konturer fjernes i jagten på enkelhed, kan resultatet blive mere uklart end et layout med lidt flere synlige markeringer.
Tag en formular til tidsbestilling. Et felt, hvor teksten Navn står over en tynd bundlinje, kan se enkelt ud. Men hvis teksten er feltets eneste forklaring, må den ikke forsvinde, når brugeren begynder at skrive. En fast feltetiket bevarer sammenhængen. Opstår der en fejl, bør beskeden stå tæt på det relevante felt og forklare, hvad der mangler eller skal rettes. En rød kant alene giver ikke tilstrækkelig information.
Handlingsknapper kræver tilsvarende omhu. Hvis en side både har Gem ændringer og Annuller, bør de ikke have samme visuelle vægt. Den primære handling kan markeres med en udfyldt flade, mens den sekundære får et mere afdæmpet udtryk. Forskellen skal være tydelig uden at gøre den sekundære mulighed vanskelig at finde.
Elementernes forskellige tilstande hører også med til designet. Hvordan ser knappen ud, når den har tastaturfokus? Hvad sker der, mens en formular bliver sendt? Og fremgår det, hvorfor en funktion er deaktiveret? Brug ikke kun farve til at vise forskelle. En synlig fokusramme, en præcis tekst og en ændring i formen kan understøtte hinanden. Funktionerne bliver tydelige gennem sammenhæng mellem udseende, ordvalg og adfærd, ikke ved at alle elementer får den samme diskrete udformning.
Mobilvisningen afslører de skjulte kompromiser
Et layout kan virke velordnet på en bred skærm og miste sin retning på mobilen. Problemet skyldes ofte, at designet blot er blevet gjort smallere. To spalter bliver til én, men rækkefølgen er ikke overvejet. Et stort billede skubber en afgørende oplysning langt ned, og en række små genveje bliver til en høj blok før det egentlige indhold.
På små skærme skal prioriteringen derfor prøves igen. Spørg, hvad besøgende skal forstå først, og hvilken handling der naturligt følger efter. På en side om en håndværksydelse kan beskrivelsen af opgaven eksempelvis høre hjemme før et omfattende billedgalleri. Kontaktmuligheden skal være nem at finde, men en fast bjælke må ikke dække tekst eller formularfelter, når skærmtastaturet åbner.
De vandrette afstande fortjener særlig opmærksomhed. Smalle margener kan give mere plads til teksten, men får også indholdet til at stå tæt på skærmens kant. Store margener kan omvendt skabe unødigt korte linjer. Afprøv flere skærmbredder mellem de sædvanlige størrelser. Det er ofte dér, en overskrift får et uheldigt linjeskift, eller to knapper pludselig ikke længere kan stå ved siden af hinanden.
Kontrollér til sidst layoutet med indhold, der afviger fra det forventede. Brug et langt efternavn, en pris med flere cifre og en fejlbesked på tre linjer. Forstør teksten i browseren, og bevæg dig gennem siden med tastaturet. Se efter overlap, afskårne ord og fokusmarkeringer, der bliver skjult. Ret derefter selve komponentens regler frem for kun det enkelte eksempel. En knap, der giver plads til længere tekst, og et felt, der kan rumme en fyldig forklaring, bevarer strukturen, også når indholdet ændrer sig.