Adobe XD-tutorial - Erfaringsdesign og prototyping

Tegneområder i Adobe XD: Oprettelse og tilpasning

Alle videoer i tutorialen Adobe XD-guide - Oplevelsesdesign og prototyping

Oprettelsen af tegneflader i Adobe XD er det første skridt i udviklingen af dine designs. Uanset om det er responsive websites, apps eller prototyper – en smart placering af tegneflader er afgørende for arbejdsgangen. I denne vejledning lærer du, hvordan du opretter og optimerer tegneflader til forskellige opløsninger og enheder. På den måde holder du altid overblikket over dine projekter.

Vigtigste indsigter

  • Tegn tegneflader til forskellige enheder og opløsninger.
  • Navngiv dine tegneflader og objekter omhyggeligt for at holde overblikket.
  • Tænk på pixeltætheden for Retina-skærme for at maksimere billedkvaliteten.
  • Brug genvejstaster for en hurtigere og mere produktiv arbejdsgang.

Trin-for-trin vejledning

Starten: Opret egen tegneflade

For at komme i gang med arbejdet i Adobe XD skal du oprette din første tegneflade. Du finder panelet til tegneflader, som du kan få adgang til via et lille ikon i bunden. Her kan du administrere alle tegneflader, du har i dit projekt. Brug nu dobbeltklik for at omdøbe din første tegneflade, f.eks. til „Hjem“. Dette hjælper dig med at holde overblikket.

Tegneflader i Adobe XD: Oprettelse og tilpasning

Oprettelse af ny tegneflade

Vil du tilføje en ny tegneflade? Brug genvejstasten „A“ til tegnefladeværktøjet. Når du klikker på det, oprettes en ny tegneflade. Med et nyt klik på tegnefladen kan du også navngive den, f.eks. til „Funktioner“. Sørg for at bruge forskellige størrelser til dine tegneflader for at opnå fleksibilitet i dit design.

Justeringer af tegnefladen

Tegnefladerne tilbyder mange tilpasningsmuligheder. Klik på den relevante tegneflade og skift til indstillingerne i panelet. Du kan nemt ændre orienteringen fra vandret til lodret. Dette giver dig mulighed for hurtigt at simulere, hvordan dit design vil se ud på forskellige enheder som tablets eller smartphones. Især inden for webdesign er det vigtigt at skabe responsive designs.

Tegneflader i Adobe XD: Oprettelse og tilpasning

Forstørrelse og tilpasning af størrelse

Nu kan du ændre størrelsen på din tegneflade. Ved blot at trække nedad med håndtaget ser du straks det nye område, der ændrer sig i overensstemmelse hermed. Gennem den stiplede linje kan du aflæse, hvilke dele af din side der er synlige i det aktuelle viewport. De dele, der går ud over dette, skal rulles.

Farve- og gitterjustering

Gå nu til farveindstillingerne og definer de farver, du har brug for. Du kan indtaste farvekoder eller arbejde med skyderne. Derudover er der mulighed for at aktivere et gitter til dit design, hvilket hjælper dig med at oprette layouter præcist. Disse værktøjer er enormt nyttige til at strukturere dine designs og gøre dem visuelt tiltalende.

Tegneflader i Adobe XD: Oprettelse og tilpasning

Indstilling for forskellige enheder

Opret mindst tre forskellige tegneflader til de almindelige skærmformater: Desktop, Tablet og Smartphone. Du bør sikre dig, at dine designs fungerer godt på alle enheder. Den mest almindelige desktop-opløsning ligger på 1366 pixel, men du kan også bruge 1920 pixel (Full HD). For tablet kan du vælge iPad eller Surface som skabelon og derefter gå videre til smartphone-dimensionerne, som iPhone 10.

Tegneflader i Adobe XD: Oprettelse og tilpasning

Overvejelse af pixeltæthed

Et af de detaljer, der skal tages højde for i designet, er de højopløsningsskærme, der anvendes i mange moderne enheder. Disse skærme har en høj pixeltæthed, hvilket betyder, at billedkvaliteten er meget vigtig. Når du indsætter grafik eller billeder fra Photoshop i dit projekt, skal du være opmærksom på, hvilken opløsning disse billeder har. For Retina-skærme skal du mindst fordoble billedstørrelsen for at opnå en ideel kvalitet.

Tegneflader i Adobe XD: Oprettelse og tilpasning

Arrangement af tegneflader

Med Adobe XD har du mulighed for nemt at omarrangere dine tegneflader. Dette er nyttigt, hvis du ønsker at få et bedre overblik. Gennem tilbageknappen eller sletning kan du fjerne uønskede tegneflader. Alternativt kan du bruge genvejstasten „Command + D“ til at oprette en duplikation af en tegneflade for at udvikle nye designs baseret på den.

Tegneflader i Adobe XD: Oprettelse og tilpasning

Optimering af arbejdsområde

Brug mellemrumstasten til at aktivere håndværktøjet og bevæge dig frit i dit arbejdsområde. Dette er især nyttigt, når du har flere elementer på din tegneflade. Dobbeltklik på objekter for at komme til deres detaljerede visning og redigere dem yderligere. Sørg for, at alle dine objekter er klart navngivet og pænt placeret inden for tegnefladerne for at gøre det lettere at arbejde senere.

Tegneflader i Adobe XD: Oprettelse og tilpasning

Opsummering – Tegneflader i Adobe XD: Trin for trin til effektiv design

I denne vejledning har du lært, hvordan du opretter og tilpasser tegneflader i Adobe XD. Du ved, hvor vigtigt det er at navngive og tilpasse dem korrekt for at bevare overblikket i dit projekt.

Ofte stillede spørgsmål

Hvordan opretter jeg en ny tegneflade i Adobe XD?Brug genvejstasten „A“ til tegnefladeværktøjet og klik på stedet, hvor du ønsker at have tegnefladen.

Kan jeg ændre størrelsen på tegnefladerne?Ja, du kan tilpasse størrelsen ved at bruge håndtagene eller ved at indtaste værdierne i panelet til højre.

Hvorfor er pixeltætheden vigtig?Pixeltætheden er afgørende for at sikre, at billeder og grafik vises skarpt på højopløsningsskærme.

Hvordan kan jeg organisere mine tegneflader bedre?Brug klare betegnelser til hver tegneflade og hold dit arbejdsområde rent for at bevare overblikket.

Kan jeg duplikere tegneflader?Ja, brug genvejstasten „Command + D“ til at duplikere en tegneflade.