Hemligheterna till effektiv kortbaserad design
Så du vill bli trendig med ett kortstort gränssnitt? Det är nog en bra idé; kort är ett populärt och användarvänligt alternativ för alla typer av digital design på olika storlekar.
Nyckeln till en kortdesign skapar något som användarna vill klicka på. (Det är nyckeln till ett bra kort.) Ett kort ska fungera som en behållare för en viss del innehåll - innehållslänk, registrering, videospelare och så vidare - som användare vill interagera med.
Så här designar du det ...
Börja med en svartvit bild
Det låter ganska enkelt: Börja med en svart och vit trådram för designen. Tänk på kortets avsikt och vilka delar av det kommer att klicka, eller tappa. (Hela kortet kan fungera som en länk.)
Planera för element som mellanrum, bilder och typografi så att du kan se kortet utan färg eller utsmyckning. Tänk på det som "spelkort" -fasen i designen. Alla kortets element finns där. Verkar det som ett ramverk som är lätt att förstå?
Tänk på hur du skulle använda det från det här steget. Var skulle du klicka för en åtgärd? Är mönstret och resultatet klart? Hur går du tillbaka eller förskott? Svaren på dessa frågor borde vara relevanta utan signaler som en röd "klicka här" -knapp som blinkar på skärmen.
Liksom med något annat projekt, om konturen inte fungerar i svartvitt, kommer den slutliga konstruktionen förmodligen inte heller.
Använd överdriven avstånd
Den största utmaningen när det gäller kort skapar en kompakt design som inte känner sig rörig. Det är där whitespace kommer in. Och du vill använda mer av det än att känna dig bekväm först.
Tillägget av blankutrymme ger mer utrymme att andas, vilket gör att det övergripande kortet verkar rymligare och ökad läsbarhet.
I allmänhet kanske du vill börja med dubbelt så stor avstånd som du normalt anser mellan element. Gutters bör vara extra bred och linjeavstånd kan också använda extrarummet. Det extra utrymmet hjälper dig att skapa en öppen design och organisera innehållet tydligare. Kortet har en ganska begränsad duk och bör passa på en enda skärm på en telefon och en lika stor del av skärmen på större enheter som tabletter eller stationära datorer. Kort kan också tävla mot andra kort för uppmärksamhet på större skärmar. Tillagd blankutrymme hjälper hela designen att känna sig öppenare och lättare att dyka in i.
Lägg till naturlig färg och skuggning
Nu är du redo att tänka på färg och skuggning för designen. Håll det naturligt att se och efterlikna verkligheten i skuggorna och utformningarna av designen.
Nej, vi pratar inte skeuomorphism här, vi pratar om att skapa färg med naturliga konturer och skuggor. Tänk på hur ett kort ska ses. Användaren ska få samma känsla som om han eller hon faktiskt höll det.
Använd några av de grundläggande reglerna för fysik att föreställa (och designa) varje kort som det skulle hållas:
- Belysning bör kasta några skuggor på bak och botten.
- Den mörkaste delen av konstruktionen är sannolikt längst ner tack vare ljusförhållandena, som normalt kommer från ovan.
- Undvik innehåll i områden som krävs för att hålla kortet.
- Touchpoints (och tillhörande samtal till handling) ska vara kontaktpunkter och lätt att interagera med. (Precis som ansiktet på ett spelkort är i mitten av designen.)
- Ett kort motsvarar en bit information.
Skapa enkla lager
Nu när du funderar på fysik, ta den till nästa nivå med enkel layering för att skapa en enhetlig kortstil för hela gränssnittet. Inte säker på var du ska börja? Googles Material Design riktlinjer är en bra utgångspunkt.
"I materialdesign översätts pappersens fysikaliska egenskaper till skärmen. Bakgrunden till en applikation liknar den plana, ogenomskinliga konsistensen av ett pappersark.
En applikations beteende efterliknar pappersets förmåga att omformas, blandas och binds samman i flera ark. Element som lever utanför program, t.ex. status eller systemfält, får en annan behandling. De skiljer sig från appens innehåll under dem och bär inte pappersets fysikaliska egenskaper.
Bryt ner det och det går tillbaka till att ett digitalt objekt ser ut och känns fysiskt. Och om användarna vill röra den, vill de klicka på den. Konceptet är så enkelt.
Håll dig till enkla teckensnitt
När det gäller typografi är enkla sans serifs ofta svaret. Undvik supertunna eller kondenserade alternativ eftersom de kan vara lite hårdare på ögonen.
De flesta kort fungerar bäst med två typsnitt alternativ (även om de är från samma familj) - något för huvuddelen och en annan för rubriken eller call-to-action. Den viktigaste faktorn när det gäller typografi är att komma ihåg att inkludera mycket kontrast så att textelementen är lätta att läsa. Kom ihåg att inkludera kontrast mellan teckensnitt och kontrast mellan bakgrunds- och textelementen för varje kort.
Begränsa UI-element
Upprepa efter mig: ett kort motsvarar en åtgärd.
Så det innebär förmodligen att du inte behöver inkludera en massa användargränssnitt, såsom knappar i hela designen.
Du kanske inte ens behöver en knapp alls i en kortdesign.
Men om du tror att användarna behöver en visuell signal, är en knapp tillräcklig. Håll formen och designen enkel - igen är Material Design-tillvägagångssättet ett bra alternativ - och håll dig till en knapp.
En knapp är förmodligen det enda UI-elementet du behöver. Detta är ditt designmål.
Slutsats
Det finns inte en magisk formel för det perfekta kortet, men det finns några designalternativ du kan göra som uppmuntrar varje användare att klicka (eller knacka). Håll din design centrerad i verkligheten, följ en minimalistisk inställning med gott om utrymme och kontrast, lägg tonvikten på enkel typografi och skapa en enskild åtgärd för varje kort.
Genom att följa denna översikt kan du bäst föreställa dig och konceptualisera kortprojekt som användare vill interagera med. Kombinera dessa idéer med designteori och dina galna färdigheter för ett bra projekt som kommer att vara roligt för användarna och estetiskt på trend.