Hjemmeskærm design med Sketch – trin-for-trin vejledning

I denne tekstvejledning vil du trinvist lære, hvordan du kan designe en Home skærm til en app i Sketch. Vi vil fokusere på de grundlæggende elementer og nogle anerkendte designprincipper for at skabe en tiltalende brugergrænseflade. Du vil se, at processen er enkel og forståelig, og du kan snart begynde at lave dine egne designs.

Vigtigste indsigter

• Brug af Sketch til at skabe home screen-layouts
• Vigtige designprincipper for tiltalende brugergrænseflader
• Brug af farvekoder og symboler til at forenkle designprocessen

Trin-for-trin vejledning

For at komme i gang med dit design, skal du åbne Sketch og oprette et nyt dokument til din home screen.

Først vælger du iPhone 8 som din designramme. Det giver mening at starte med den mindre skærm, da denne metode gør tilpasning til større skærme lettere.

Åbn nu den originale app eller det design, som du ønsker at bruge som skabelon. Vi vil tilføje en navigation, der understøtter strukturen af din app. Begynd med at vælge navigationselementerne.

Klik på tegneområdet og navngiv boardet "Home Background Color". For at sikre, at din baggrund ikke bliver gennemsigtig senere, skal du sætte en simpel baggrundsfarve, først hvid.

I det næste skridt fokuserer du på at oprette kursuselementet. Klik på området og begynd at designe et kursuskort. Du vil skabe kortet i et klart, enkelt design, der følger principperne for fladt design.

For designet af kortet er en baggrundsfarve vigtig. Du kan bruge en simpel blå farve for at opnå en øjeblikkelig visuel adskillelse. Alternativt kan du eksperimentere med farveovergange for at tilføje dybde og dimension.

Nu indsætter du teksten for kurset. Du kan justere tekstfeltet for at sikre, at teksten centreres og er let at læse. Afstanden omkring teksten er afgørende. Sørg for at holde en afstand på omkring 16 pixel til siderne for at opnå et harmonisk design.

Når du har arrangeret afstanden og tekstfeltet, skal du oprette en beskrivelse for kurset. Det er også vigtigt at være opmærksom på størrelsen på beskrivelseslabelen. En størrelse på cirka 14 punkt font gør teksten let at læse.

Når du har implementeret de grundlæggende elementer, kan du oprette yderligere symboler. De vil være nyttige, hvis du ønsker at bruge lignende elementer flere gange i dit design. Opret et symbol for kursuskortet, så du kan genbruge det i andre dele af din app.

Når du har oprettet dit symbol, opdateres ændringerne automatisk i alle instanser. Nu kan du justere titlen og beskrivelsen af dit kursus uden at skulle ændre alt manuelt. Brug enkle tekstbetegnelser for at sikre en klar struktur.

For at gøre dine kort visuelt tiltalende, tilføj en skygge. Sørg for, at den er subtil, så designet ikke overbelastes. En let skygge får elementerne til at træde frem og passer bedre ind i det samlede billede.

Brug runde hjørner til dine kort for at øge den visuelle appel. En hjørneradius på 8 giver et moderne, rent udseende, der er i overensstemmelse med Apple designretningslinjer.

Opret nu en klar titel over kursuskortet for at optimere brugerledelsen og for bedre at strukturere indholdet. Sørg for, at højden og afstanden til det forrige element forbliver konsekvent.

Endelig er det vigtigt at tænke på en ensartet design. Hold afstandene mellem alle elementer og kantlinjerne ensartede for at skabe et harmonisk samlet billede.

Opsummering - Design en tiltalende home screen med Sketch

Dagens trin har vist dig, hvordan du kan designe en funktionel og tiltalende home screen med Sketch. Ved at anvende enkle design- og brugerledelsesprincipper kan du skabe en app, der både er visuelt tiltalende og fungerer godt.