Siste trender i verden av webdesign: møt Card Design! Høyoppløselig skjerm. Legg til naturlige farger og nyanser

Vil du utvikle et trendy grensesnitt i kortstil? Dette er nok ikke en dårlig idé. Kort er populære og brukervennlige, passer for alle typer digital design og for skjermer i alle størrelser. Nøkkelen til et vellykket design i kortstil er å lage noe som brukerne vil klikke på. Kortet skal fungere som en beholder for det spesifikke innholdet – lenke, påloggingsskjema, videospiller osv. – som brukeren vil ha interaksjon med. Slik lager du dette designet.

Start med svarte og hvite konturer

Høres veldig enkelt ut: start med en svart-hvitt mockup av designet ditt. Tenk på formålet med kortene og hvilke deler av dem som vil være klikkbare. (Hele kortet kan fungere som en lenke.)

Planlegg elementene: hvitt mellomrom, bilder og typografi slik at du kan se kortet uten farge eller design. Tenk på det som spillkortdesignstadiet. Alle kartelementer er på plass. Er oppsettet lett å forstå?

Tenk på hvordan du vil bruke kortene på dette stadiet. Hvor klikker du for å utføre denne eller den handlingen? Er strukturen og resultatet klart? Hvordan vil du gå tilbake, eller omvendt, ta et skritt fremover? Svarene på disse spørsmålene bør være klare uten spørsmål som røde "Klikk her"-skilt.

Som med andre prosjekter, hvis et design ikke fungerer i svart-hvitt, vil heller ikke den endelige, fulldesignede versjonen fungere.

Bruk mye ledig plass

Det vanskeligste med kortstildesign er å ikke få det til å se rotete og overfylt ut. Det er her plass spiller en stor rolle. Og du vil få mest mulig ut av ledig plass. større volum enn det virker behagelig.

Overfloden av "luft" vil gi plass til designelementene, gjøre alle kort visuelt mer romslige og øke lesbarheten.

Du vil sannsynligvis starte med dobbelt så mye plass mellom elementene. Avstandene mellom kortene skal være store, og du kan også øke ledig plass med linjeavstand. En veldig stor mengde luft vil hjelpe deg med å skape et åpent design og organisere innholdet ditt på den mest åpenbare måten. Kortet er begrenset i størrelse og må passe på en smarttelefonskjerm, samt logisk og proporsjonalt endre størrelsen for nettbrett og monitorskjermer. På store skjermer kort kan også distrahere brukerens oppmerksomhet fra hverandre. Ved å legge til "luft" vil det generelle designet føles mer åpent og enkelt å fordype seg i.

Legg til naturlige farger og nyanser

Nå er du klar til å tenke på farger og nyanser for designet ditt. Prøv å gi det et naturlig utseende og få et realistisk utseende til kortene ved å bruke skygger og stiler.

Dette handler ikke om skeomorfisme, men om å skape farger med naturlige konturer og skygger. Tenk på hvordan et ekte kort vil se ut. Brukeren skal føle det som om de holder kortet i hånden.

Bruk flere fysiske regler, som er gyldige når du holder kortet i hendene:

Belysningen vil kaste skygger under og nederst på kortet.
Den mørkeste delen av designet er nederst på designet fordi normalt når du holder kortet i hendene, kommer lyset fra toppen.
Unngå å legge ut innhold på steder der du holder kortet i hendene.
Berøringspunkter (oppfordringer til handling osv.) skal være i fokus og interaksjoner skal være enkle og tydelige. (Samme som i spille kort, hovedelementet er i midten av designet).
Ett kort - en informasjonsenhet.

Hold det enkelt

Nå, med de fysiske egenskapene i tankene, gå videre til neste trinn - å lage en felles kortstil for hele grensesnittet. Vet du ikke hvor du skal begynne? Et flott utgangspunkt ville være Materialdesignveiledning fra Google.

"I Materialdesign fysiske egenskaper papirer overføres til skjermen. Bakgrunnen for applikasjonen er en flat, jevn tekstur av et papirark.

Elementer i applikasjonen oppfører seg som papir - de endrer seg også i størrelse, rulles gjennom og samles i en stabel. Elementer utenfor programmet, for eksempel statuslinjen, oppfører seg annerledes. De er atskilt fra innholdet i applikasjonen, og arver ikke de fysiske egenskapene til papiret."

Ha disse retningslinjene i bakhodet og prøv å lage digitalt objekt, som vil se ut og føles som en fysisk en. Hvis brukere vil trykke på den, klikker de på den. Konseptet er enkelt.

Velg enkle fonter

Når det kommer til typografi, oftest den beste løsningen vil enkle fonter sans serif. Unngå skrifttyper som er for tynne eller smale, da de kan være harde for øyet.

De fleste kort vil fungere bra med to fonter (selv om de er fra samme familie) - en for generell tekst, og en for overskriften eller handlingsfremmende uttrykk. En annen viktig poeng Noe man må huske på når man jobber med typografi er kontrast, som vil gjøre teksten lettere å lese. Pass på å vurdere kontraster mellom fonter og mellom bakgrunn og tekst for hvert kort.

Begrens UI-elementer

Husk: ett kort tilsvarer én handling.

Dette betyr at du ikke trenger å spre en haug med grensesnittelementer gjennom hele designet, for eksempel knapper. Du trenger dem kanskje ikke i det hele tatt. Men hvis du fortsatt tror at brukeren trenger en visuell pekepinn, er én knapp nok.

Hold formene og designet enkelt – igjen, Material Design er et flott alternativ – og prøv å ikke lage mer enn én knapp.

Knapper er sannsynligvis det eneste UI-elementet du trenger. Strebe for det.

Konklusjon

Det er ingen magisk oppskrift på det perfekte kortdesignet, men det er spesifikke teknikker som vil lokke brukere til å klikke der du vil. Prøv å være nærmere virkeligheten, velg minimalisme med mye luft og kontrast, gi preferanse til enkel typografi, og angi én handling for hvert kort.

Oversettelse – Vaktrom

Så du vil sannsynligvis at ditt trendy kortdesign ikke bare skal se fantastisk ut, men også være så brukervennlig som mulig? La oss finne ut hvordan du oppnår dette ved å bruke eksempler fra kjente verdensmedier.

Ideen om å lage et design basert på kort er bare flott.

for det første, dette er en ganske populær trend innen innholdsdesign, som gjør det mulig å vise en ganske stor mengde innhold og gjøre det vakkert!

for det andre, selvfølgelig, denne designen er også ganske brukervennlig.

Tredje, denne designen ser flott ut på alle typer skjermer i alle mulige oppløsninger.

Det viktigste i ethvert kortbasert design er å lage noe som brukeren ønsker å klikke på – dette er den største og vanskeligste oppgaven for designere. Hvert kort skal tjene ett spesifikt formål - inneholde et bilde med en lenke til hele nyhetene, abonnementsskjemaet, videospilleren eller annet innhold som brukeren vil samhandle med.

Start med en svart og hvit ramme

Det hele virker ganske enkelt: start med en svart og hvit ramme. Tenk på kort og hvilke deler av kortet som vil være klikkbare og hvilke som kun vil inneholde grafisk innhold. Det er ganske vanlig praksis å gjøre hele kortet klikkbart.

Planlegg mellomrom, bilder, typografi og alle de andre små detaljene. "Samle" kortene for til slutt å forstå om designet fungerer, er strukturen klar, er alt praktisk å bruke? Tenk på hvordan du vil bruke dette settet med elementer i generell struktur design.

Prøv å tenke som en sluttbruker:

Hvor vil du klikke for å gå til neste trinn?
Får du det innholdet du forventer når du klikker på et kortelement?
Er det enkelt å navigere mellom skjermer?

Bruk økt polstring

Selvfølgelig bør du ikke bruke blinkende elementer eller røde "Klikk her"-knapper som 90-tallsdesign. Men ikke glem aksentene; du bør ikke gjemme handlingsfremmende oppfordringer bak for mye grå farger. Se hvor godt fargene spilles i følgende design:

Den største utfordringen med å lage kort er å lage et kompakt design uten å føle seg rotete med unødvendige elementer. Det er her det kommer til unnsetning hvitt mellomrom . I noen tilfeller, for eksempel et produktkort, kan det være til stor hjelp for å rette oppmerksomheten mot nødvendige områder. Jo mindre opptatt skjermen er, jo mer oppmerksomhet vil brukeren vie objektet han skal se på:

Nå er tiden inne for å tenke på farger og skyggelegging. Gjør dem naturlige og stiliserte i ett helhetlig konsept. Nei, vi diskuterer absolutt ikke skeuomorfisme her, vi snakker kun om å lage et design med naturlige konturer og skygger. Gi kortene dine det utseendet de ville fått hvis du holdt dem i hendene.

Bruk grunnleggende prinsipper og fysikkens lover for å visualisere og designe hvert kort som om du holdt dem foran deg i hendene dine:

Belysningen skal kaste små skygger på bunnen og sidene av kortet.
Det mørkeste stedet på kortet er basen.
Ikke plasser innholdet for nær kantene.
Klikkbare elementer bør være plassert i de lettest tilgjengelige delene av kortet, uansett oppløsning. De skal være like enkle å klikke med en mus som de er å klikke med en finger på en smarttelefon.
Ett kort - én informasjon.

Lag enkle lag

Nå som du allerede har brydd deg med fysikk, lag et enhetlig kort for alle deler av grensesnittet. Vet du ikke hvor du skal begynne? Google-instruksjoner Av Materialdesign er et flott utgangspunkt.

I Materialdesign blir de fysiske egenskapene til papir oversatt til skjermen. Bakgrunnen til applikasjonen ligner samtidig et flatt, ugjennomsiktig papirark.

"Egenskapene til applikasjonen kopierer papirets evne til å endre størrelser, blande og brette sammen fra flere komponenter. Drifts- og visningselementer behandles vanligvis forskjellig. De skiller seg fra innholdet og respekterer ikke papirets fysiske egenskaper."

Egentlig er oppgaven å lage et digitalt objekt som ser ut som et materiell. Og hvis brukeren vil berøre den, vil han klikke på den. Ja, konseptet er så enkelt.

Hold deg til enkle grensesnitt

Når det kommer til typografi sans serifs- alltid svaret. Unngå å bruke fonter som er for tynne eller vanskelige å lese, da teksten da blir ganske vanskelig å lese.

De fleste kort fungerer bra med et system med to fonter (selv om de er fra samme familie) - en for brødteksten og en for tittelen eller handlingsfremmende uttrykk. Nøkkelen her er å få riktig kontrast slik at tekstelementer var enkle å lese. Sørg for å gi kontrast mellom skriftene, samt kontrast mellom bakgrunnen og tekstelementene for hvert kort.

Reduser antall UI-elementer

Gjenta: ett kort - en handling.

Og det betyr sannsynligvis at du ikke bør inkludere en armfull elementer brukergrensesnitt som knapper og så videre. Faktisk, i kortdesign kan du klare deg helt uten knapper. Men hvis du tror at brukerne trenger et hint, er én knapp nok. Hold deg til det enkle former Og enkel design, Material Design-tilnærmingen er ganske god i dette tilfellet - hold deg til én-knapps-regelen. Og generelt er knappen det eneste elementet du trenger. Dette er designmålet ditt.

Konklusjon

Det er rett og slett ingen magisk formel for det perfekte kortdesignet. Men det finnes tilnærminger som du kan tvinge brukeren til å klikke eller trykke på et element. Følg minimalisme med mye hvit plass og kontrast, legg vekt på enkel typografi og hold deg til prinsippet én handling for ett kort. Etter disse prinsippene er det bedre å presentere og konseptualisere prosjekter med kortdesign. Kombiner disse designteoriene og ferdighetene dine, og du er sikker på å få et fantastisk, brukervennlig og trendy design.

Basert på interaktive kort som inneholder bilder, innhold, hyperkoblinger. Metro-stil ble først brukt av Microsoft i 2010 i grensesnittdesignet til produktene sine. fordeler av denne stilen, ifølge selskapets utviklere, var stilige og moderne utseende samt funksjonalitet. Brukeren ble ikke distrahert av fremmede elementer; all oppmerksomheten hans var fokusert på kartotekkortene som gir ham innholdet han lette etter. Denne designen ble ansett som intuitiv og forenklet brukeropplevelsen.

I dag kan kortdesign finnes på så velkjente ressurser som Twitter, Pinterest, Google og andre.

Kortstil funksjoner

Metro stil i design er veldig populær, den er mye brukt for å forbedre brukervennligheten og lette oppfatningen stor kvantitet innhold. Kortstilen har karakteristiske trekk:

Tilpasningsevne. Designet vises riktig på alle enheter.
Minimalistisk, ingen forstyrrende elementer. All oppmerksomhet rettes mot funksjonelle kort.
Moderne og estetisk utseende, bred palett av farger brukt.
Bruk av lettleste fonter (Segoe), klare tematiske bilder.
Tilgjengelighet, intuitiv forståelse av funksjonalitet for brukeren.
Dynamisme. Bruk av animasjonseffekter.
Tilstedeværelsen av håndtegnede elementer: ikoner, volumetriske knapper, infografikk som letter persepsjon og stimulerer til målrettede handlinger.

For hvilke nettsteder passer Metro-designstilen?

Lakonisk og moderne kortdesign brukes på nettsteder med ulike emner: porteføljer, blogger, bedriftssider, visittkortsider, nettbutikker og til og med landingssider. For eksempel ser Microsofts nettsted fortsatt nøyaktig ut i metrostil (https://www.microsoft.com/uk-ua): på hjemmeside det er store faner med selskapets produkter og lenker til sider med detaljert informasjon om dem. Det er kort mellom dem standard visning Med Kort beskrivelse og hyperkoblinger til innhold. Det er animasjonseffekter - når du holder markøren, blir bilder, knapper uthevet og koblinger fremhevet. Det er ingen fremmedelementer.

I webdesignverdenen dukker det stadig opp nye trender, som senere får fart. Hvem kan glemme parallaksrulling, som dukket opp for flere år siden og fortsatt er populær i dag? Selv om i I det siste, sider fra lang rulle tiltrekke seg mer oppmerksomhet fra besøkende på nettstedet.

En trend som ikke har fått like mye anerkjennelse som andre, og bare har vært litt populær en stund, er kortdesign.

Det mest populære nettstedet som viser denne designtrenden er Pinterest, men det er andre nettsteder som ofte bruker denne designtilnærmingen, og med god grunn. Når besøkende ser på et nettsted som bruker denne designteknikken, vil de umiddelbart legge merke til rekkefølgen og den velorganiserte strukturen bak den enkle, men elegante designtilnærmingen.

Det er mange fordeler med å bruke denne designtilnærmingen på din egen nettside.

Grid tilnærming til informasjonsarkitektur

Når du ser på et hvilket som helst kortdesign, kan du ikke unngå å se et rutenett i kjernen. Dette er fordi hver kant av kortet faktisk består av forskjellige rutenett i et stort, godt organisert system, som fremmer større konsistens og harmoni i måten siden ser ut.

Dette i sin tur hjelper mye på informasjonsarkitekturen til nettstedet. Informasjonsarkitektur er den intelligente rekkefølgen og rekkefølgen der de besøkende oppfatter nettstedinformasjon, ideelt sett i samsvar med formålet med hver side og hele nettstedet.

Tenk på det: kortdesign "leder øynene" til de besøkende langs en logisk vei. Hvert kort er en del av en rad eller kolonne som leder besøkendes synsfelt langs jevne horisontale og vertikale linjer. Denne ordningen hjelper besøkende å forstå hvilken informasjon som er viktigst.

Ta Contrastly, et fotomagasin, for eksempel. Å følge rutenettet/kortoppsettet vil hjelpe deg å forstå hva som er viktigst i informasjonshierarkiet. Siste artikler postet på øverste linje, mens eldre artikler vises på nederste rad. Nyhet har en tendens til å være forbundet med større betydning, så å følge denne synkende rekkefølgen i et kortsystem lar brukere raskt forstå hvilket innhold som er viktigst. På denne måten kan de prioritere hvilken rekkefølge de skal lese denne informasjonen i.

Stor avhengighet av bilder

Vi har hørt det gamle ordtaket om at folk elsker med øynene så mange ganger at det har blitt en klisjé, selv om det i kortdesign får en ny betydning. Kortdesign er nesten utelukkende avhengig av visuelle modaliteter; enhver kopi på samme side er vanligvis sekundær til det visuelle, fra et informasjonsarkitektursynspunkt.

Bruken av bilder er sterke poeng kortdesign fordi forskning bekrefter at bilder driver webdesign. For eksempel øker både høykvalitetsfotografier og bruken av menneskelige ansikter i fotografier konverteringsfrekvensen. Faktisk, bortsett fra alt nevnt ovenfor, er det flere andre måter som hvis du bruker bilder i designet ditt, kan øke konverteringsraten til nettstedet ditt.

Med andre ord, fokus på bruk av bilder gjør kortdesignet mer attraktivt for besøkende. Det er ingen tilfeldighet at Pinterest er den 15. mest populære siden i USA ifølge Alexa.

Når du ser på Pinterest-resultatene etter å ha skrevet inn ordet "mat" i søkemotoren, kan du se at bilder er det første som fanger øyet når du er på nettstedet. Du bryr deg ikke om hva som står under fotografiene, men i det minste, ikke et spørsmål av første betydning. Høy kvalitet, blendende bilder som tiltrekker seg oppmerksomheten din, og først da, etter å ha tatt en avgjørelse, vil du vite mer (men allerede fra presentasjonen av dette bildet), og det er derfor du til slutt leser beskrivelsen.

Forbedret Brukererfaring

Enhver designer kan fortelle deg at brukeropplevelse er det viktigste. Det er disse vi først og fremst bør designe for. En annen grunn er at kortdesign gir så god gjenklang, og vil fortsette å gjøre det i overskuelig fremtid, fordi det hjelper brukeropplevelsen. Og det er dette som får besøkende til å komme tilbake, og som igjen hjelper dem til å bruke mer tid der, noe som til slutt fører til mer overganger!

En flott brukeropplevelse dreier seg om at folk kan finne det de trenger på nettstedet ditt uten noen barrierer; I utgangspunktet må de finne det de vil ha og finne det med en gang og uten hodepine.

Dribbble er et nettsted som forstår dette godt fordi utviklerne har brukt kort for å gjøre brukeropplevelsen enklere og bedre. Dette nettstedet er godt kjent i det kreative nettsamfunnet som en modell for brukergenerert Kunst.

Ideen med nettstedet er at folk skal beundre illustrasjoner, grafer og bilder av alle slag, så kortdesign er virkelig det mest passende måteå implementere en slik idé. Fordi bilder tiltrekker besøkendes øyne effektivt og umiddelbart, forbedres brukeropplevelsen betraktelig når besøkende raskt kan skanne kort i et rutenettoppsett for å se hvilke som interesserer dem. Når de ser noe de er interessert i, kan de umiddelbart klikke på kortet for å se nærmere.

Et nettsted som Dribbble lar besøkende finne Riktig sted på en super praktisk måte. Dette er selve symbolet på god brukeropplevelse!

Ideell for mobildesign

Du har kanskje hørt det mobile enheter har allerede gått forbi stasjonære datamaskiner stor mengde brukere. Bare i 2015 i USA, mobilbruk digitale medier massemedier når 51 % sammenlignet med stasjonære datamaskiner, som har 42 %. Kortbasert design er ideell fordi den tar hensyn til denne trenden samtidig som den er lett kompatibel med responsive rammer. Fordi kort tilbyr innhold i "fordøyelige biter", noe som gjør det enklere å vise på mobile rammer.

Se på kortene fra dette synspunktet: deres form og størrelse er nesten en etterligning av formen og størrelsen til en smarttelefon eller nettbrett. Selvfølgelig ikke helt perfekt likhet pga stort nummer diverse tilgjengelige modeller, men fortsatt en ganske nær likhet sett fra et sideforholdsperspektiv.

Som et resultat av dette vil kort aldri gå ut av bruk så lenge etterspørselen etter mobile enheter og Internett øker, og det er ingen tegn til at kortbruken går langsommere.

Dette er ikke bare en kjepphest

Problemet med noen designtrender er at de blir moter, noe som gjør dem kortvarige og uminnelige. Selv om kortdesign kan være et unntak! På grunn av det store antallet praktisk anvendelse og fordelene den gir, vil den bare bli mer populær over tid. Dette betyr at han vil «overleve».

Det sikrer konsistens i informasjonsarkitekturen til nettsteder og støtter brukernes besettelse av klare bilder, som igjen fungerer som en måte å øke nettstedtrafikken på. Følgelig drar også hele brukeropplevelsen stor nytte av kortdesign rett og slett fordi det faktisk gjør det enklere for brukerne å finne det de trenger på siden. Takket være vekst mobilt internett i de siste par årene, har denne tilnærmingen til design blitt en av de viktigste, og med som flere og flere flere mennesker kollidere og nyte.

Ideen med kort er egentlig et gammelt konsept, men det har fått et nytt forsøk og oppdatert til en ny tilnærming innen webdesign. Dette er bare et eksempel for å vise deg at kreativt tenkende designere kan ta noe gammelt og hverdagslig og gjøre det til noe ekstremt relevant og nyttig i det 21. århundre.