Hemskärmsdesign med Sketch - Steg-för-steg guide

I den här textguiden kommer du att lära dig steg för steg hur du kan designa en hem skärm för en app i Sketch. Vi kommer att fokusera på grunderna och några beprövade designprinciper för att skapa en tilltalande användargränssnitt. Du kommer att se att processen är enkel och begriplig, och snart kan du skapa dina egna designer.

Viktigaste insikter

• Användning av Sketch för att skapa hem-skärmlayouter
• Viktiga designprinciper för tilltalande användargränssnitt
• Användning av färgkoder och symboler för att förenkla designprocessen

Steg-för-steg-guide

För att börja med din design, öppna Sketch och skapa ett nytt dokument för din hem-skärm.

Först väljer du iPhone 8 som din designram. Det är förnuftigt att börja med den mindre skärmen, eftersom denna metod underlättar anpassningen till större skärmar.

Öppna nu appen eller designet som du vill använda som mall. Vi kommer att lägga till en navigering som stöder strukturen för din app. Börja med att välja navigeringselementen.

Klicka på ritområdet och namnge tavlan som "Hem Bakgrundsfärg". För att säkerställa att din bakgrund senare inte är transparent, sätt en enkel bakgrundsfärg, först vitt.

I nästa steg fokuserar du på att skapa kurs-elementet. Klicka på ytan och börja designa ett kurskort. Du kommer att skapa kortet i en tydlig, enkel design som följer principerna för platt design.

För designen av kortet är en bakgrundsfärg viktig. Du kan använda en enkel blå färg för att uppnå en omedelbar visuell separation. Alternativt kan du experimentera med färgövergångar för att lägga till djup och dimension.

Nu lägger du in texten för kursen. Justera textfältet så att texten ligger centrerad och är lättläst. Avstånden runt texten är avgörande. Se till att du håller cirka 16 pixlar utrymme på sidorna för att uppnå en harmonisk design.

När du har organiserat avstånden och textfältet, skapa en beskrivning för kursen. Även för beskrivningsetiketten är det viktigt att uppmärksamma storleken. En storlek på cirka 14 punkters teckensnitt säkerställer god läsbarhet.

Efter att du har implementerat de grundläggande elementen kan du skapa ytterligare symboler. Dessa kommer att vara användbara när du vill använda liknande element flera gånger i din design. Skapa en symbol för kurskortet så att du kan återanvända det på andra delar av din app.

När du har skapat din symbol kommer den automatiskt att justera ändringarna i alla instanser. Nu kan du justera titeln och beskrivningen av din kurs utan att behöva ändra allt manuellt. Använd enkla textetiketter för att säkerställa en tydlig struktur.

För att göra dina kort visuellt tilltalande, lägg till en skugga. Se till att den är subtil så att den inte överbelastar designen. En lätt skugga gör att elementen sticker ut och passar bättre in i helhetsbilden.

Använd rundade hörn för dina kort för att öka den visuella attraktionen. En hörnradie på 8 ger ett modernt, rent utseende som överensstämmer med Apples designriktlinjer.

Skapa nu en tydlig titel ovanför kurskortet för att optimera användarflödet och bättre strukturera innehållet. Se till att höjden och avståndet till det föregående elementet förblir konsekvent.

Slutligen är det viktigt att tänka på en enhetlig design. Håll avstånden mellan alla element och kantlinjer konsekventa för att skapa en harmonisk helhetsbild.

Sammanfattning - Designa en tilltalande hem-skärm med Sketch

Dagens steg har visat dig hur du kan designa en funktionell och tilltalande hem-skärm med Sketch. Genom att tillämpa enkla design- och användningsprinciper kan du skapa en app som både är visuellt tilltalande och fungerar bra.