Komplett guide til en effektiv grensesnittdesign i kortstil
Arkitektur i kortstil er noe av det største innen webdesign, og mobildesign spesielt. Fra apper til responsive nettsteder dukker kortformat opp overalt.
Og med god grunn. Mobilkortdesign ser fin ut, fungerer bra på en rekke enheter og skaper distinkt organisering og en metode for levering av innhold. Derfor bruker mange store, kjente merkevarer kortformatet, og mange mindre design- og utviklingsgrupper følger etter.
Utforsk Envato Elements
Hva er kortdesign?
Kortdesignstiler for mobile nettsteder og stasjonære nettsteder er definert av et eske med innhold som ser ut som om det er vist på et slags kort. Bokser i kortstil inneholder vanligvis en unik bit av innhold eller informasjon og er ofte vertikalt orientert.
Men som med alle designteknikker, er det mange måter å bryte reglene. Det grunnleggende prinsippet bak ideen er å gi et utbrudd av informasjon på en måte som er lett å se og fordøye på en gang. Populære nettsteder for deling av sosiale medier som Twitter og Pinterest bruker dette formatet til å gruppere bilder og innlegg.
Det som er fint med et digitalt "kort" er at det kan manipuleres på en rekke måter. De kan vises stablet hver for seg (som ofte er tilfelle for mobildesign) eller falle i et rutenett for større skjermer. Kortene kan være korte eller høye og designet for å justere i henhold til innholdet du holder inne.
Kortstildesign er også populært for responsive rammer fordi designere kan legge til og kollaps kolonner med kort for å passe til form og størrelse på skjermen. Mens de fleste designere designer kort med fast bredde og lar korthøyden forbli variabel.
Hvordan kort kan fungere for ditt prosjekt
Kort er et trendy alternativ på grunn av deres fleksibilitet og brede bruksområde. (Det hjelper også at noen av de mest populære nettstedene i verden har brukt en form for kort i nyere design iterasjoner - Google, Microsoft, Facebook, Twitter, Pinterest og Buzzfeed, for å nevne noen.)
Men vil du bruke et konsept i kortstil? Denne designteknikken har ganske mange fordeler:
- Det gjør innhold lett å fordøye.
- Det er mange designstiler som fungerer i dette formatet, fra flatt til pyntet.
- Kort fungerer godt i responsive rammer.
- Formatet har et utseende som er organisert og gir struktur for mye informasjon.
- Det fungerer bra for mange forskjellige typer innhold.
- Kortstil-design er praktisk talt laget for deling på sosiale medier.
Design et flott kort
Det beste kortdesignet er enkelt. Den har også en innholdsrik opplevelse. For et vellykket prosjekt i kortstil, må begge disse elementene være til stede. Men det er nok av andre designteknikker som kan legge til funksjonalitet og estetikk også.
Det fine med kort er at det egentlig ikke er et rent sett med designregler du må følge. Grunnleggende prinsipper for god design er alt du trenger å forstå for å begynne å lage et kort-stil prosjekt.
Bruk god plass
Plass er en vanlig faktor i designprosjekter i kortstil. Spesielt rikelig med hvit plass. Det er viktig å gi hvert enkelt element rom for å bli sett, lest og forstått. Dette gjelder spesielt i en blokk som ofte vil inneholde en "mini-design" i seg selv. Tenk på det på denne måten: Hvis hvert kort i prosjektet ditt inneholder et bilde, overskrift, hovedteksttekst, en oppfordringsknapp og delingsknapp eller lenke, er det minimum fem elementer å jobbe med i et område på omtrent 600 piksler bredt .
Å ha god plass rundt hvert element gir brukerne tid til å tilbakestille visuelt når de ser fra det ene elementet til det neste eller fra kort til kort. Å inkludere mye polstring mellom elementene vil også bidra til å bringe fokus og oppmerksomhet gjennom kortet på en måte som fungerer med innholdshierarkiet.
Ett stykke informasjon per kort
Vi har allerede bestemt at kortet vil inneholde flere elementer i en design, men hver bør fokusere på bare en bit informasjon eller innhold. Følg konseptet med én idé per blokk for at bildet og all støttende tekst er samlet.
Denne ideen kan lage innhold som kan være dramatisk variert arbeid i samme rom, tilsynelatende forsettlig og organisert. Det gir brukerne muligheten til å velge og velge de delene av innholdsporteføljen de ønsker å konsumere og dele.
Velg et klart, skarpt bilde
Bildet er konge for kortdesignområdet. Du trenger et flott bilde - og det må være flott selv om det er lite - for å trekke brukere til hvert enkelt kort. (Husk at dette er et overfylt internettområde.)
Hvis du ikke har et bilde, kan du gå for en artystype eller lage tekst som ikke kan la være å trekke brukere inn? (Husk lama "flukt" i slutten av februar som gikk viralt takket være gode overskriftsforfattere.)
Bruk enkel typografi
Velg enkle skrifttyper i enkle og lettleste farger - svarte og grå er populære - som holder seg utenfor veien for designen. Medium til runde sans serifs er populære for lesbarhet og en nøytral designfølelse.
Begrens antall skrifter også. For de fleste kortprosjekter er et enkelt skrifttype nok. Vurder å bruke en dristig variant, men i de fleste tilfeller er størrelsesforskjeller alt du trenger for å få mest mulig ut av tekst. (Mens du er inne på det, sørg for å begrense antall ord også. En tanke per kort.)
Inkluder en uventet detalj
Mens kortstilgrensesnitt ofte er enkle, kan du legge til en uventet detalj gi den akkurat den rette mengden teft. Tenk på en beskåret eller hjørneutklipp, vinklet kant eller 3D-effekt for å legge vekt på kort.
Andre teknikker som fargeoverlegg eller sveveeffekter kan være like behagelige. Du bør også vurdere å legge til en effekt på bare de mest betydningsfulle innholdsbitene, slik at hvert kort ikke er like likt når det gjelder visuell vekt.
Lag et åpent rutenett
Dette er kanskje det tøffeste konseptet for å få hodet rundt, avhengig av hvordan designprosjektet ditt kommer sammen. Like viktig som utformingen av hvert kort er det "utenfor" rommet mellom hvert element.
Lag et rutenettverk som inkluderer en slags kontrast med hvert kort. Design rammeverket slik at avstanden er konsistent fra kort til kort og slik at det er god plass mellom hvert element. Dette kommer kanskje enda mer inn når man tenker på hvor brytepunkter kan falle i et responsivt rammeverk med spesielt bredde-kort.
Vurdere brukervennlighet
Et kort skal være mer enn bare et designelement; det skal hjelpe en bruker å utføre en slags handling. Fra å lese en historie eller artikkel til å registrere deg på et e-nyhetsbrev eller gjøre et kjøp, bør kortgrensesnittet gi en enkel interaksjon.
Vurder hvordan disse interaksjonene fungerer også. Gå utover klikket. Mange designprosjekter med kort vil bli brukt på mobile enheter. Vurder interaksjoner som bruker kraner og sveiper snarere enn tradisjonelle klikk. Forsikre deg om at knapper eller handlinger er enkle å se og utføre, inkludert å ha nok plass mellom objekter til å berøre dem enkelt og uten å aktivere feil element.
Konklusjon
Prosjekter i kortstil er morsomme, trendy og funksjonelle. Ved å bruke noen av de grunnleggende elementene i design vil du hjelpe deg med å lage et kortdekke som er estetisk tiltalende og funksjonelt.
Idé nr. 1 å huske på er enkelhet. Alt om en kortdesign skal være lett å lese og forstå. Lykke til med prosjektet ditt!
