Til forsiden

Guide 03 · Desktop

Lav desktop-skitser

Her vises, hvordan du laver skitser til Desktop i draw.io med et typisk wireframe-format på 1024 × 768 px. De anbefalede pixels til tablet og mobil vises i bunden af siden.

01

Tilføj skitsefigurer

Åbn figurbiblioteket, så draw.io viser de ekstra biblioteker, du kan bruge til wireframes.

  1. Klik på Flere figurer nederst i figurpanelet.
  2. Find kategorien med skitsefigurer, og sæt flueben ved Skitser.
  3. Klik Anvend. Kategorien vises nu i venstre side.
Knappen Flere Figurer i draw.io
Åbn dialogen Flere figurer fra figurpanelet.
Kategorien Skitser markeret i dialogen Flere figurer
Markér Skitser, og anvend valget.
02

Sæt siden til desktop-format

Åbn Fil > Sideopsætning.... Vælg Brugerdefineret, skriv 1024 i bredde og 768 i højde, og behold enheden Punkter. Klik derefter Anvend.

Her bruger vi de samme numeriske mål som wireframe-målet i pixels. Det giver et ark, der er nemt at sammenholde med et desktop-layout på 1024 × 768.

Fil-menuen med Sideopsætning markeret
Åbn Sideopsætning fra Fil-menuen.
Sideopsætning med brugerdefineret størrelse 1024 gange 768 punkter
Indstil brugerdefineret bredde 1024 og højde 768.
03

Indsæt et vindue fra Mockup

Find kategorien Mockup Containers i figurpanelet. Træk figuren Window ind på siden, og tilpas størrelsen, så den passer til din desktop-skitse.

Mockup Containers med et Window-vindue på tegnearket
Træk et Window fra Mockup Containers ind på siden.
04

Vis panelet Lag

Åbn Visning > Lag. Lag-panelet gør det muligt at adskille baggrund, almindeligt indhold og elementer, der skal ligge øverst.

Visning-menuen med Lag markeret
Vælg Lag i Visning-menuen.
05

Opret og beskyt lagene

  1. Omdøb det nederste standardlag til Baggrund.
  2. Tilføj to lag, og kald dem Midt og Front.
  3. Læg vinduet eller andre faste grundelementer på Baggrund.
  4. Klik på hængelåsen ud for Baggrund, så laget ikke kan flyttes ved et uheld.
  5. Vælg Midt, når du tegner det almindelige indhold. Brug Front til elementer, der skal ligge øverst.

På den måde kan du tegne ovenpå mockuppet uden at risikere at flytte selve baggrunden. Lås kun Baggrund; Midt skal være det aktive arbejdslag.

Lag-panelet med Front, Midt og låst Baggrund
Lagene Front og Midt er tilføjet, og Baggrund er låst.

Resultat: Du har nu en desktop-wireframe-side på 1024 × 768 med et fast baggrundsmockup og separate arbejds- og forgrundslag.

Vigtigt om lag: Når du indsætter nyt på siden, bliver det placeret i det aktuelle lag. Venstreklik på det ønskede lag i Lag-panelet for at gøre laget aktuelt, før du indsætter eller tegner noget nyt.

Anbefalede wireframe-mål: Hvis du designer til mobil eller tablet, skal sidens størrelse passe til den enhed, du vil skitsere.