Den kompletta handboken för en effektiv kort-stil-gränssnittsdesign

Kortstilarkitektur är en av de största sakerna i webbdesign, och i synnerhet mobildesign. Från applikationer till lyhörda webbplatser dyker kortformatformat upp överallt.

Och med god anledning. Mobilkortsdesign ser bra ut, fungerar bra på en mängd olika enheter och skapar en distinkt organisation och en metod för innehållsleverans. Därför använder många stora, välkända varumärken kortformatet och många mindre design- och utvecklingsgrupper följer efter.

Vad är kortdesign?

Kortdesign stilar för mobila och stationära webbplatser definieras av en boxad del innehåll som ser ut som om den finns på ett spelkort av olika slag. Korthållare innehåller typiskt en unik bit innehåll eller information och är vanligtvis vertikalt orienterade.

Men som med någon designteknik finns det många sätt att bryta reglerna. Grundprincipen bakom tanken är att ge en informationssprängning på ett sätt som är lätt att se och smälta på samtidigt. Populära webbplatser för social media som Twitter och Pinterest använder det här formatet för att gruppera bilder och inlägg.

Vad är trevligt med ett digitalt? är att det kan manipuleras på olika sätt. De kan visas staplade individuellt (som ofta är fallet för mobil design) eller faller i ett rutnät för större skärmar. Korten kan vara korta eller långa och utformade för att justera enligt innehållet innehas.

Kortdesign är också populär för lyhörda ramar, eftersom designers kan lägga till och kollapsa kortkolumner för att passa formen och storleken på skärmen. Medan de flesta designers utformar kort med en fast bredd och tillåter korthöjd att förbli variabel.

Hur kort kan fungera för ditt projekt

Kort är ett trendigt alternativ på grund av deras flexibilitet och brett användningsområde. (Det hjälper också att några av de mest populära webbplatserna i världen har använt någon form av kort i de senaste designteerationerna - Google, Microsoft, Facebook, Twitter, Pinterest och Buzzfeed, för att nämna några.)

Men vill du använda ett kortstilskoncept? Denna designteknik har ganska många fördelar:

  • Det gör innehållet lätt att smälta.
  • Det finns många design stilar som fungerar i detta format, från platt till utsmyckad.
  • Kort fungerar bra i lyhörda ramar.
  • Formatet har en utseende som är organiserad och ger struktur för mycket information.
  • Det fungerar bra för många olika typer av innehåll.
  • Kortstilar utformas praktiskt taget för delning på sociala medier.

Designa ett stort kort

Den bästa kortdesignen är enkel. Det har också en rik innehållsupplevelse. För ett framgångsrikt kortstilprojekt måste båda dessa element vara närvarande. Men det finns många andra designtekniker som kan lägga till funktionalitet och estetik också.

Det stora med kort är att det inte är en riktig uppsättning designregler du måste följa. Grundläggande principer för bra design är allt du behöver för att förstå för att börja göra ett kortstilprojekt.

Använd gott om utrymme

Utrymmet är en vanlig faktor i kortdesignprojekt. I synnerhet gott om vitt utrymme. Att ge varje enskilt elementrum att se, läsa och förstå är viktigt. Detta gäller särskilt i ett block som ofta innehåller en "mini-design" av sig själv. Tänk på det här sättet: Om varje kort i ditt projekt innehåller en bild, rubrik, huvudkopia text, anrop till handlingsknapp och delning av knapp eller länk, finns det minst fem element att arbeta med i ett utrymme på ca 600 pixlar bred .

Att ha gott om plats runt varje element ger användarna tid att visuellt återställa när de tittar från ett element till nästa eller från kort till kort. Inklusive gott om vaddering mellan element kommer också att bidra till att föra fokus och uppmärksamhet genom kortet på ett sätt som fungerar med innehållshierarkin.

Ett stycke information per kort

Vi har redan bestämt att kortet kommer att innehålla flera element i en design, men varje bör fokusera på endast en bit information eller innehåll. Följ den ena ideen per blockkoncept till att bilden och all stödjande text är förenade.

Denna idé kan göra innehåll som kan vara dramatiskt varierat arbete i samma utrymme, som verkar avsiktligt och organiserat. Det ger användarna möjlighet att välja och välja vilka delar av din innehållsportfölj de vill konsumera och dela.

Välj en Clear, Crisp Image

Bilden är kung i kortdesignutrymmet. Du behöver en bra bild - och det måste vara bra även när det är litet - för att dra användare till varje enskilt kort. (Kom ihåg att detta är ett trångt internetutrymme.)

Om du inte har en bild, gå till artstypstyp eller skapa text som inte kan hjälpa till att dra in användare? (Kom ihåg lama? Fly? I slutet av februari som gick viral tack vare stora rubrikförfattare.)

Använd enkel typografi

Välj enkla teckensnitt i enkla och lättlästa färger - svarta och gråa är populära - som håller sig ur designens sätt. Medium till runda sans serifs är populära för läsbarhet och en neutral design känsla.

Begränsa också antalet teckensnitt. För de flesta kortprojekt är en enda typsnitt tillräcklig. Överväg att använda en djärv variant, men i de flesta fall är storleksskillnader allt du behöver för att få ut det mesta av text. (Medan du är i det, se till att begränsa antalet ord också. En tanke per kort.)

Inkludera ett oväntat detaljer

Medan kortstilar gränssnitt ofta är raka, kan lägga till en oväntad detalj ge den bara rätt mängd känsla. Tänk på en beskuren eller hörnutskärning, vinklad kant eller 3D-effekt för att lägga tonvikt på kort.

Andra tekniker som färgöverlagringar eller svängningseffekter kan vara lika tilltalande. Också överväga att lägga till en effekt på endast de mest betydande bitarna av innehåll så att varje kort inte är helt lika med avseende på synvikt.

Skapa ett öppet rutnät

Den här kan vara det tuffaste konceptet att ta sig runt, beroende på hur ditt designprojekt kommer samman. Precis lika viktigt som utformningen av varje kort är? mellanrum mellan varje element.

Skapa ett rutnätverk som innehåller en viss typ av kontrast med varje kort. Konstruera ramverket så att avståndet är konsekvent från kort till kort och så att det finns gott om utrymme mellan varje element. Detta kan komma ännu mer in i spel när man tänker på var brytpunkter kan falla i ett lyhörd ramverk med kort med fast bredd i synnerhet.

Tänk på användbarhet

Ett kort ska vara mer än bara ett designelement; Det borde hjälpa en användare att åstadkomma någon typ av åtgärd. Från att läsa en historia eller artikel för att anmäla sig till ett e-nyhetsbrev eller göra ett köp, bör kortgränssnittet ge en enkel interaktion.

Tänk på hur dessa interaktioner fungerar också. Gå bortom klicket. Många designprojekt med kort kommer att förbrukas på mobila enheter. Tänk på interaktioner som använder kranar och swipes istället för traditionella klick. Se till att knappar eller handlingar är lätta att se och utföra, inklusive att ha tillräckligt med utrymme mellan objekt att röra med lätthet och utan att aktivera felelementet.

Slutsats

Kortdesignprojekt är roliga, trendiga och funktionella. Att använda några av de grundläggande principerna för design hjälper dig att skapa ett kortdäck som är estetiskt tilltalande och funktionellt.

Den första tanken att tänka på är enkelhet. Allt om en kortdesign bör vara lätt att läsa och förstå. Lycka till med ditt projekt!