Hjemmeskjermdesign med Sketch – Trinn-for-trinn veiledning

I denne tekstveiledningen vil du trinn for trinn lære hvordan du kan designe en hjem skjerm for en app i Sketch. Her fokuserer vi på det grunnleggende og noen velprøvde designprinsipper for å lage et tiltalende brukergrensesnitt. Du vil se at prosessen er enkel og forståelig, og snart kan du lage dine egne design.

Viktige funn

• Bruk av Sketch til å lage hjemskjermoppsett
• Viktige designprinsipper for tiltalende brukergrensesnitt
• Bruk av fargekoder og symboler for å forenkle designprosessen

Trinn-for-trinn-veiledning

For å begynne med designet ditt, åpne Sketch og opprett et nytt dokument for hjemskjermen din.

Først velger du iPhone 8 som designrammen din. Det gir mening å starte med den mindre skjermen, da denne metoden gjør det lettere å tilpasse seg større skjermer.

Nå åpner du den originale appen eller designet du ønsker å bruke som mal. Vi skal legge til en navigasjon som støtter strukturen for appen din. Begynn med å velge navigasjonselementene.

Klikk på tegneområdet og gi tavlen navnet «Hjem Bakgrunnsfarge». For å sikre at bakgrunnen din ikke er gjennomsiktig senere, settes en enkel bakgrunnsfarge, først hvit.

I neste trinn fokuserer du på å lage kurs-elementet. Klikk på området og begynn å designe et kurskort. Du vil lage kortet i et klart, enkelt design som følger flat design-prinsipper.

For designet av kortet er en bakgrunnsfarge viktig. Du kan bruke en enkel blå farge for å oppnå en umiddelbar visuell separasjon. Alternativt kan du eksperimentere med fargeoverganger for å legge til dybde og dimensjon.

Nå setter du inn teksten for kurset. Du kan justere tekstfeltet for å sikre at teksten er sentrert og lett å lese. Avstanden rundt teksten er avgjørende. Pass på at du holder omtrent 16 piksler plass til sidene for å oppnå et harmonisk design.

Når du har ordnet avstandene og tekstfeltet, lager du en beskrivelse for kurset. Også for beskrivelsesetiketten er det viktig å passe på størrelsen. En størrelse på omtrent 14 punkters skrifttype gir god lesbarhet.

Etter at du har implementert de grunnleggende elementene, kan du lage ekstra symboler. De vil være nyttige hvis du ønsker å bruke lignende elementer flere ganger i designet ditt. Lag et symbol for kurskortet slik at du kan gjenbruke det i andre deler av appen din.

Når du har opprettet symbolet, vil det automatisk justere endringene i alle instanser. Nå kan du tilpasse tittelen og beskrivelsen av kurset ditt uten å måtte endre alt manuelt. Bruk enkle tekstetiketter for å sikre en klar struktur.

For å gjøre kortene dine visuelt tiltalende, legg til en skygge. Pass på at denne er subtil, slik at designet ikke overbelastes. En lett skygge gjør at elementene skiller seg ut og passer bedre inn i helhetsbildet.

Bruk runde hjørner for kortene dine for å øke den visuelle attraktiviteten. En hjørneradius på 8 gir et moderne, rent utseende som følger Apples designretningslinjer.

Opprett nå en klar tittel over kurskortet for å optimalisere brukerfokuset og bedre strukturere innholdet. Sørg for at høyden og avstanden til det forrige elementet forblir konsistent.

Til slutt er det viktig å tenke på enhetlig design. Hold avstandene mellom alle elementer og kantene enhetlige for å skape et harmonisk helhetsbilde.

Sammendrag - Design en tiltalende hjemskjerm med Sketch

Dagens trinn har vist deg hvordan du kan designe en funksjonell og tiltalende hjemskjerm med Sketch. Ved å bruke enkle design- og brukerfokusprinsipper kan du lage en app som er både visuelt tiltalende og fungerer godt.