Når det kommer til at designe et webstedslayout, kan værktøjer være nyttige, og vi lister nogle af vores favoritter her. Men før vi starter, en advarsel: Værktøjer i sig selv kan ikke designe et layout for dig.
Læringsdesign kræver ofte tid til at studere, kopiere og derefter implementere det, du har lært, i dine egne ideer. At gøre er stadig dit mest kraftfulde undervisningsværktøj.
Over tid sætter gentagelser vaner og teknikker ind i dit sind. Følg disse tips og ressourcer for at se, hvad der kan give mest værdi til dine træningssessioner.
For at lære mere om layoutdesignet af websider, tjek vores gratis 73-siders e-bog The Zen of White Space in Web Design: Space, Ratios, Minimalism.
Typografiske designforhold behøver ikke altid at følge et bestemt forhold, men de skal være i overensstemmelse med sidedesign og skrifttypestile.
Billede udlånt af Modularscale
Når det kommer til at praktisere webtypografi, er Modularscale en meget handy webapp. Appen hjælper med at bestemme nøjagtige forhold for skriftstørrelser i enhver type webdesignprojekt.
CSS-skriftstørrelseskode er angivet ved siden af hver tekstblok for nemmere at kopiere/indsætte i et stylesheet.
Daglige designnyheder, anmeldelser, how-tos og mere, som udvalgt af redaktørerne.
Hele applikationen er baseret på skalering af skrifttyper. Hvis du vil lære mere om, hvordan det hele fungerer, så tjek vejledningspanelet i højre side.
Billede udlånt af Type Scale
Vores designteam anbefaler også Type Scale til at lege med typografi. Du kan indstille basispixelværdien (som typisk er 16px i de fleste browsere) til et hvilket som helst forhold, inklusive det gyldne snit eller den brugerdefinerede værdi, der giver mest mening.
Det bedste ved Type Scale er dog, at du dynamisk kan ændre skrifttypefamilien til alt, hvad du ønsker.
Alle skrifttyper på siden er koblet til Google Fonts, så du manuelt kan ændre skrifttypefamilien efter eget ønske. Vi vil varmt anbefale dette websted til alle, der ønsker at lege med eller planlægge skriftstørrelsesforhold.
Billede udlånt af Typetester
For at fokusere mere på afsnitstypografier, tjek Typetester. Dette er en anden gratis webapp, der lader dig indstille værdier for forskellige skrifttypefamilier, størrelser, margener og andre tekstfunktioner. For at gøre sammenligninger nemmere lader Typetester dig spille med typografiske stilarter i flere kolonner.
Hvis du vil teste linjehøjden (det lodrette rum over og under en linje), kan du også bruge Typetester eller den fremragende online web-app CSS Leading.
Begge websteder giver webdesignere mulighed for at visualisere, hvordan deres afsnit vil se ud på et live websted uden hårdkodning af CSS fra bunden. Alle disse værktøjer fungerer som både designlegepladser og læringscentre for designere, der eksperimenterer med negativt rum til typografi.
02. Online netgeneratorer
Gittersystemer er perfekte til designere, der ønsker en forudbygget opsætning til hurtigt at organisere et nyt layout.
Men CSS-netsystemer er ofte separate filer, som bliver til ekstra HTTP-anmodninger. Nogle gange kan det være nemmere bare at bruge online gittergeneratorer til at få søjle- og tagrendestørrelser.
Billede udlånt af Gridpak
Gridpak tilbyder alt, hvad du kan forvente af en netgenerator. Du indtaster værdier for antallet af søjler plus søjle/rendestørrelse. Hvis du indstiller en maksimal bredde, vil de indvendige søjler blive presset ind i beholderen. Responsive designere bør også nyde Gridpack, da det kan generere brudpunkter til CSS-medieforespørgsler.
Når du er færdig med at redigere, kan du downloade gitterets CSS i en .zip-fil. Hele layoutet er struktureret i dynamisk genereret CSS med valgfri SCSS/LESS filer. Gridpak kræver en vis akklimatisering, men det er en fremragende metode til at visualisere dit færdige layout.
Billede udlånt af Responsify
Med hensyn til responsivt design kommer en anden nyttig webapp til at tænke på. Responsify bruger et demolayout på skærmen med kolonneoverlejringer. Mange designere vil finde dette websted lettere at bruge til at visualisere, hvordan et layout skal struktureres.
Responsify er endnu et værktøj til at generere din egen tilpassede responsive HTML/CSS-skabelon. Men du behøver faktisk ikke downloade filerne, hvis du hellere vil oprette dem fra bunden. Responsify kan stadig være nyttigt som et gratis visualiseringsværktøj til at forstå brugen af hvidt mellemrum mellem kolonner og sideindhold.
Hvis du gerne vil se andre netgeneratorer, så tag et kig på disse alternativer:
Billede udlånt af UXPin
På en sidebemærkning er det også værd at nævne, at UXPin kommer forudindlæst med en gittergenerator og muligheden for at skabe flere responsive breakpoints.
Når du wireframe og prototyper, vil du være i stand til at skabe hurtige responsive iterationer og samtidig bevare ensartet justering.
Billede udlånt af UXPin
Det gyldne snit dikterer, at to elementer er i perfekt harmoni, når de måles til forholdet 1:1,618. Mønsteret findes næsten overalt i naturen, og det gælder også for designsammensætning.
Du behøver ikke at finde dette forhold for alle forhold på siden, men du bør bestemt forstå dets værdi som et tidløst designfundamental – det er trods alt næsten 2.400 år gammelt.
Billede udlånt af www.cartoonnetwork.co.uk
Det gyldne snit kan visualiseres som et diagram, hvor indholdsblokke krymper ned i et gentaget mønster. Tegning af en spiral fra den største blok til den mindste skaber et buet mønster oven på firkanterne, som du kan se ovenfor. Du kan følge dette mønster for at designe visse områder af siden som mere detaljerede og indholdsdrevne.
Efterhånden som spiralen svinder ind, fører den ind til mere detaljerede områder på siden. Det gyldne snit kan således være med til at bestemme placeringen af vigtigt indhold i forhold til andre elementer på siden.
For at lære mere om den praktiske anvendelse af det gyldne snit anbefaler vi stærkt nedenstående tutorials:
En lille online webapp skabt af UX Triggers giver dig mulighed for at ændre størrelsen på og skalere rektangler med det gyldne snit oven på ethvert websted. Hvis du har tid til overs, så prøv at lege med nogle forskellige websteder for at se, om forholdet passer til ethvert layout.
Billede udlånt af NYTimes via UX Triggers
Adobe-brugere vil måske alternativt se, hvordan forholdet fungerer i Photoshop. Prøv at downloade denne gratis PSD, der indeholder rektangler, der kan ændres størrelsesforhold. Den tilpassede forholdsform freebie er et andet godt valg, hvis du hellere vil skalere vektorformen direkte i Photoshop.
Denne lommeregner med gyldne snit skabt af Miniwebtool er også bemærkelsesværdig. Det er en online-webapp, der giver designere mulighed for at indstille en pixelværdi for hver del af forholdet, som derefter automatisk genererer den anden værdi.
Billede udlånt af Miniwebtool Calculator
Som du måske kan konkludere fra denne webapp, er formlen lidt vanskelig, men den opdeles sådan her:
A+B sammenlignet med A skaber et forhold. Dette nøjagtigt samme forhold bør vises, når du sammenligner A med B. Hvis dette lyder forvirrende, vil du spare dig selv for en masse sorg ved at bruge en lommeregner.
Billede udlånt af Golden Rectangle Calc
For at se forholdet mere sammensat, tjek denne forholdsberegner. Alle de firkantede blokke repræsenterer hele forholdet i en fuld komposition.
Vandret vil du se rækkerelationer, og du vil se lodret kolonneforhold. Hvis du blot vil se blokkene som simple elementer, kan du nemt ændre træmønsteret til gråt eller klart
Udover kompositionsdesign gælder det gyldne snit også for webtypografi. Overvej forholdet mellem to overskrifter eller afstanden mellem to afsnit. Dette Stack Overflow-svar forklarer, hvordan du kan indstille et gyldne forhold i CSS.
Prøv også at skimme gennem disse andre relaterede links til det gyldne snit:
Husk dog, at det gyldne snit – ligesom alle bedste designmetoder – ikke lever i et vakuum. Som beskrevet i Web UI Design for det menneskelige øje, skal du sørge for, at du også overvejer F & Z-mønsteret til at designe for, hvordan brugere scanner websteder.
Afslutning
Onlineværktøjer og ressourcer er fantastiske, fordi de sparer dig tid og hjælper dig med at se designprocessen tydeligere. Men de bør aldrig blive en krykke, hvor du er afhængig af værktøjer til at skabe UI-design.
Ved konstant at øve dig, vil du forbedre din bevidsthed og dine færdigheder, så du bliver meget mere komfortabel med at designe webgrænseflader ud fra fantasien. For en hurtig reference anbefaler vi, at alle designere tjekker denne guide til visuel komposition. Om ikke andet er det i det mindste værd en hurtig skimning over det negative rumafsnit.
White space som en grundlæggende designteknik kræver en masse øvelse for fuldt ud at forstå. Du skal oprette snesevis af websteder, før du opnår seriøse resultater. Men alle tips, ressourcer og eksempler fra denne bog burde være et positivt bevis på, at enhver kan lære at designe trygt med hvidt rum, hvis der er tid nok.
For at lære mere, tjek den gratis e-bog Zen of White Space in Web Design: Space, Ratios, Minimalism. Bogen indeholder 73 siders råd med 14 analyserede eksempler fra Google, Wanderlust, Sketchapp, Lever og andre.
Ord: Jerry Cao
Jerry Cao er indholdsstrateg hos UXPin – wireframing- og prototyping-appen.
This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.
Strictly Necessary Cookies
Strictly Necessary Cookie should be enabled at all times so that we can save your preferences for cookie settings.
If you disable this cookie, we will not be able to save your preferences. This means that every time you visit this website you will need to enable or disable cookies again.
![6 Bedste tegnesoftware brugt af XP-Pen [Reviewed]](https://typemi.me/wp-content/uploads/2024/05/1714954395_6-Bedste-tegnesoftware-brugt-af-XP-Pen-Reviewed.jpg)
