Seneste trends i verden af ​​webdesign: mød Card Design! Hvert kort har sit eget indhold. Hvad er container webdesign

Lige så funktionelle som de er smukke, er kortgrænseflader ikke kun en trend. Siden mobil webtrafik overgik desktoptrafik i 2014, er responsivt design blevet industristandarden, og webdesignere fokuserer deres indsats på små skærme. Som et resultat vinder de hidtil uset popularitet simple stilarter såsom flad, minimalisme og især kort.

Kortmønsteret er praktisk, ikke kun fordi det reducerer sideindlæsningstiden og forenkler skaleringsgrænseflader for forskellige skærme. Små stykker indhold svarer i volumen til webbrugeres opmærksomhed (især dem, der bruger mobile enheder). Inspireret af Pinterest og populariseret af sociale netværk som Facebook Og Twitter, kan kortgrænseflader i dag ses på websteder af ethvert emne. I denne artikel vil vi se på kortets UI-mønster i sin helhed: hvad er godt ved det, hvordan det passer ind i begreberne adaptivt og materialedesign, og hvad man kan forvente af det i fremtiden.

Kilde: Formelt Ja

Hvad er containerbaseret design?

For at forstå mønsteret skal du først forstå ideen med selve kortet.

Kort er i bund og grund små beholdere til stykker information, og hvert kort bærer en selvstændig tanke. Det kan indeholde enhver form for indhold: billede, tekst, links osv. - alle kortene er forenet af et eller andet fælles tema.

Trello-brugere kan oprette hvilke som helst kort, de ønsker. Alle kan oprette kort med opgavelister og sortere dem, som de vil.
Dette eksempel viser, hvor fleksible kort kan være, og viser også deres evne til at organisere information. Trello skylder sin popularitet det faktum, at kort virker enklere for brugerne. almindelige lister opgaver brugt af andre opgaveledere.

Kort i grænseflader på mobile og responsive hjemmesider

Som jeg allerede har skrevet, går kortgrænseflader godt med responsive frameworks, hvorfor Intercoms Des Traynor selv kaldte dem internettets fremtid. Dette UI-mønster oversættes godt til mobile enheder af mange grunde - vi vil tale om dem nu.

Kilde: The Verge

For det første, i skalerbare rammer, kan kortstrukturer genopbygges, så de passer til ethvert breakpoint eller skærmstørrelse. Designere har mulighed for at lege med forholdet mellem kortbredde og højde, og hvordan grupper af kort forholder sig til hinanden. For eksempel kan kort have fast bredde og forskellige højder med et givet interval mellem dem.

Sammenlign desktop (ovenfor) og mobile (nedenfor) viewporte fra The Verge:

Kilde: The Verge (mobilside)

Vær opmærksom på tekster, billeder, gradienter - de er ens i begge versioner. Kort giver dig mulighed for at oprette en enkelt brugererfaring og udsende det på tværs af alle enheder.

Du kan se dette princip i aktion ved at besøge siden Gratis bibliotek for designere på UXPin. Læg mærke til, hvor jævnt layoutet skaleres fra mobil til fuldskærmsvisning.

Mobil visningsport:

Kilde: UXPin

Høj opløsning skærm:

Kilde: UXPin

En anden fordel ved kort er, at de fungerer godt som bevægelseskontrol. På berøringsskærme kort uden nogen ekstra indsats blive til knapper. Ideen er enkel: Tryk på kortet for at begynde at interagere med indholdet.

Kortenes fremtid

Det kortbaserede UI-mønster udvikler sig konstant for at møde nye udfordringer, hvoraf de fleste vil påvirke adaptivt design og applikationsdesign. Som vi diskuterede i Web Design Trends 2015 & 2016, skyldes disse ændringer delvist den indflydelse, Material Design har på Android-apps.

1. Teknologi
Kortene kan snart blive dynamiske. Efterhånden som websteder bliver mere produktive, kan de understøtte mere komplekse medieaktiver. Måske vil vi se elementer med et stort antal detaljer, for eksempel selv-opdatering af indhold, mens interaktion med grænsefladen ikke vil bremse.

Så i denne artikel vil jeg forklare dig, hvad "kortdesign" er, og hvordan det påvirker webdesign generelt.

Højde mobile teknologier gradvist førte til en ændring i hjemmesidens arkitektur hen imod lydhørhed og tilpasningsevne. Disse to parametre er blevet obligatoriske. Disse begivenheder bidrog til den store succes med "kort" - en af ​​de vigtigste tendenser inden for webdesign i 2015.

Vi kan dog med sikkerhed sige, at kort ikke bare er en designmode, de er fremtiden for webudvikling, da de er den bedste måde at organisere og vise indhold på en ensartet måde. Så i denne artikel vil jeg forklare dig, hvad "kortdesign" er, og hvordan det påvirker webdesign generelt. Gå!

Kortdesign gennem tiderne

Mens kort først for nylig er blevet ekstremt populære inden for webdesign, har de allerede været det effektive midler visuel kommunikation, Ved i det mindste, tusind år. Først introduceret som et spil i det kejserlige Kina i det 9. århundrede, blev kort senere nyttige i forretningsverdenen.

Faktisk i det 17. århundrede dukkede "handelskort" først op i London, med deres hjælp fandt folk arbejde: dette var det første eksempel på moderne "visitkort".

I dag er kortet normalt en form for kupon fra en butik eller et supermarked, folk samler dem for at få særlige rabatter.

De fleste af os behøver kun at kigge i vores tegnebog for at se kreditkort, loyalitetskort, butikskort og endda et almindeligt kørekort. Alle disse kort har deres egne standarder.

Under alle omstændigheder er der en stærk sammenhæng mellem den traditionelle brug af kort og deres brug i webdesign: almindelige kort indeholder information på begge sider, mens webkort omdirigerer brugerne til at se yderligere indhold.

Hvad er kort på internettet?

Fra et internetperspektiv kan vi definere et "kort" som et lille rektangel, der er forbundet med en bestemt tanke. Kortene er fulde interaktive elementer, såsom tekst, links eller billeder. Men de tjener alle det samme formål - at lede dig til yderligere indhold, når du klikker på dem.

Hovedformålet med kortene er at give kort anmeldelse et bestemt emne i et begrænset rum. Og hvis læseren er interesseret i nyhederne, kan han gå til ny side med fuld tekst. Facebook- eller Twitter-websteder drager fordel af disse fordele og har indarbejdet en kortskabelon i deres design, der viser store mængder indhold, mens de sparer værdifuld plads.

Således det meste vigtig egenskab kort er ideen om interaktiv interaktion. Under udviklingen skal designere overveje, at kort ikke kun tjener som en måde at vise nyheder på, men også skal tiltrække læserens opmærksomhed. Det er derfor, kortene viser like, repost eller links til fuld tekst artikler.

Ud over deres anvendelighed er kort et almindeligt designvalg på grund af deres kompatibilitet med responsive rammer. Chunked-strukturen kan bruges til at skabe attraktive grænseflader og er ideel til sprogudvikling. mobile platforme. Kortets form er meget lig den moderne smartphone.
Vi taler ofte om "flydende" layouts. Kort giver os små stykker indhold, som vi kan "fylde" siden under forskellige størrelser og skærmformer.

Hvorfor skal du bruge kort?

Da kort er blevet universelle, kan de bruges på forskellige måder alt efter nødvendige funktioner. Nedenfor er et par grunde til at bruge kort:

Dette er en trend: Trends er af midlertidig karakter, men ved at bruge kort kan du effektivt gøre dit websted berømt.

Kort introducerer rækkefølge: Kort introducerer lag af organisering af indhold.

Kort er ideelle til responsivt design: de passer nemt ind på websteder og mobile applikationer. Vigtigst af alt, på smartphones, kan kort nemt stables lodret, hvilket skaber nyhedsstrøm.

Kort fremmer tankeøkonomi: på grund af deres størrelse vil kort aldrig være i stand til at gemme store mængder information. Ved første øjekast kan dette virke som en ulempe, men jeg synes, det er en fantastisk ting! Kortet skal vise en kort tekst fra hele artiklen, der tilskynder interesserede læsere til at følge linket.

De er sociale: kort er ideelle til sociale medier, og ikke kun fordi de bruges i i sociale netværk, og også fordi kort gør det nemmere for brugerne at dele information gennem div sociale platforme og via mail.

Moderne tendenser og tilgange inden for webudvikling

Lær algoritmen til hurtig vækst fra bunden i webstedsopbygning

Betydningen af ​​indholdet udjævnes: kort hjælper dig med at beslutte, hvilken artikel der er bedst at placere øverst på siden. Når du bruger kort, kan blokke med indhold af lige stor betydning nemt eksistere side om side på samme side uden at skulle rangere dem. Brugeren bestemmer, hvad der er vigtigt for ham, og hvad han vil læse.

Hvem bruger kortene?

Drible

Sidens layout er baseret på kort, der indeholder et billede og nogle oplysninger om hvert design. Det jeg godt kan lide ved Dribbble er, at du kan klikke på et kort og se alle detaljer vedrørende designet, og du kan også bare holde musemarkøren over kortet og se lille beskrivelse.

Pinterest

Når vi taler om kortdesign, kan vi ikke lade være med at nævne Pinterest. Faktisk tror mange mennesker, at Pinterest var banebrydende for kortdesign. Pinterest demonstrerer klart "betydningen af ​​alt indhold"; der er ingen kort på webstedet, der på nogen måde skiller sig ud visuelt.

Twitter, der bruger en grænse på 144 tegn pr. indlæg, blev født med et "indbygget kortlayout." Sidste år lancerede det sociale netværk sit eget produkt kaldet Twitter Cards, en app designet til at hjælpe dig med at kortlægge dit indhold, mens du sender det til systemet. Udviklerne beskriver deres applikation som værende i stand til:

"vedhæft masser af fotos, videoer og andet medieindhold til dine tweets, hvilket vil drive trafik til dit websted"

Som resultat, Hjemmeside Twitter er nu fuld af tweet-kort. Når du klikker på en af ​​dem, udvides tweetet for at vise yderligere indhold eller muligheder.

The Guardian

Den berømte britiske avis The Guardian anvendte et kortdesign på sin hjemmeside for at "tænke anderledes og forbedre opdagelse og promovering af indhold."

De var i stand til at skabe et modulopbygget layout bestående af forskellige kort: hver linket til en titel og, når der blev klikket, omdirigeret til artiklens fulde tekst. Siden fremkalder en følelse af elegance og renlighed.

Konklusion

Kort er en nyttig metode til at skabe attraktive hjemmesider, og de er også ekstremt fleksible, så du kan implementere en række forskellige layouts. Alt dette er for at sikre, at brugeren er tilfreds med siden. Den stadigt stigende markedsandel for tablets og smartphones vil også cementere kortdesignet i toppen af ​​webdesign i lang tid.

Webdesign er meget dynamisk. Vi ser hele tiden hvordan udseende hjemmesider ændrer sig med fremkomsten af ​​nye teknologier, metoder, trends og stilarter. Så i dag er det førende koncept kortdesign.

Du kan se det overalt: fra ejendomsmæglerwebsteder til nyhedsportaler. Faktisk bruger internetgiganter som Twitter, Facebook og Google også kortdesign.

Kort, i I dette tilfælde, disse er små rektangler fyldt med interaktive billeder og information. De er blevet populære primært på grund af deres lydhørhed, æstetik og praktiske.

Selvom der er mange misforståelser om, hvad der kvalificerer sig som et kortdesign, er én ting sikker: kort er ikke bare rektangler på hjemmesider. For at kvalificere et bestemt design som et kortdesign, skal det have funktionalitet og være selvforsynende.

Måske den bedste metafor til at beskrive kortdesign er følgende ordsprog: "Kortet er fladt, men det har to sider." Det vil sige, at hvert kort ikke kun skal indeholde en eller anden form for indhold, men også give dets forbrugere mulighed for at interagere med det på en eller anden måde.

Kort sagt, kort er ikke kun Smukt design, men nem at bruge.

Forskellige typer kortdesign

Kortdesign har gennemgået betydelige ændringer siden starten. Og nu kan det laves i følgende stilarter.

1. Fladt design

Første gang kort fladt design blev præsenteret af Microsoft i 2006 og var baseret på designstilen GUI Metro, som ser ret solid og farverig ud. Sandt nok i hans moderne version Gradienter, skygger og skuemorfi er mere udbredt.

2. Magasinstil

Et magasinstildesign kræver god visuel balance. Kort i dette tilfælde indeholder en blok med et billede og tekst, der fungerer som en "teaser", det vil sige, de lokker den besøgende til mere detaljeret information på en anden side eller et andet websted. Som navnet antyder, bruges dette design på magasinhjemmesider og nyhedsportaler, men er også velegnet til andre ressourcer med fokus på en stor mængde indhold, såsom blogs eller porteføljer, samt til sider, der opdateres regelmæssigt.

Denne stil er inkorporeret på webstedet social service Pinterest er blevet en populær temadesigntrend for WordPress-platformen. I starten indeholdt kort kun links og en vis mængde af en bestemt type indhold. De kan nu indeholde flere links og indholdstyper, herunder videoer, formularer, billeder og sociale delingsværktøjer. I nogle grænseflader giver kort mini-interaktionsmuligheder, såsom at slå Facebook-meddelelser til/fra.

Også kendt som "murværk"-stilen, den indeholder blokke, der er forbundet eller fordelt i hele layoutet.

Hvordan bruger man kortdesign effektivt?

Spise hele linjen grunde til, at kortstildesign er så populært. Her er blot nogle få af dem:

• En række forskellige designstile er kompatible med dette format, lige fra flade designs til mere komplekse varianter.
• Det fungerer godt med forskellige typer indhold og gør det også nemmere at forbruge.
• Det fungerer godt med responsive rammer.
• Det giver et organiseret og struktureret udseende til en masse information.

Til af denne type design er der ingen faste regler. To elementer, der næsten altid er til stede i effektive kortlayouts, er enkelhed og en rig variation af indhold. Der er også teknikker, der kan forbedre æstetikken og funktionaliteten af ​​kortdesign.

Tomt rum

Et almindeligt element i kortdesign er hvidt rum. Dette er nødvendigt, så alle elementer er klart synlige og forståelige. Når alt kommer til alt, er alt, hvad du har, et 600px-område, og du skal sørge for, at din overskrift, opfordring til handling-knap, billeder og linktekst er fremtrædende og gør deres arbejde effektivt.

Masser af hvidt mellemrum omkring hvert element giver de besøgende tid til at behandle det, de ser, mens de ser fra et kort til et andet.

Hvert kort har sit eget indhold

Klare billeder

I kortbaseret design er billeder afgørende. De skal være upåklagelige, selv når de placeres i begrænsede rum, for at tiltrække opmærksomhed. Hvis der ikke er nogen billeder, så brug en kunstnerisk skrifttype eller en kreativ overskrift til at fange dine besøgendes opmærksomhed.

Simple skrifttyper

Skrifttypen bør ikke distrahere opmærksomheden fra billedet. For at gøre dette skal du bruge en simpel skrifttype i en letlæselig farve, altså sort og grå. De mest populære skrifttyper, på grund af deres neutrale design og lette læsbarhed, er sans serif-skrifttyper. Derudover er det tilrådeligt at bruge én type skrifttype i forskellige størrelser.

Uventede detaljer

Overraskelseselementet gør underværker. Prøv at tilføje uventede detaljer som en 3D-effekt eller kreativ kantbehandling for at gøre dit design mere originalt. Andre metoder, der har vist sig effektive, omfatter svæveeffekter og farveoverlejring. Du kan også kun anvende effekten på de fleste meningsfuldt indhold for at afbalancere den visuelle vægt af hvert kort.

Åbn mesh

Lige så vigtige er elementerne inde i hvert kort? vigtig har mellemrum mellem dem. Skab en gitterramme, der vil tilføje en vis kontrast og også sikre lige stor afstand mellem kortene og deres elementer. Dette bliver endnu vigtigere, når du overvejer placeringen af ​​brudpunkter i et responsivt layout.

Anvendelighed

Design handler ikke kun om æstetik, men også om brugervenlighed. Designet skal tilskynde brugerne til at handle: Klik på abonner-knappen, læs hele artiklen eller køb et produkt. Det ultimative mål med din grænseflade er at give en nem oplevelse, der får brugerne til at foretage den handling, du ønsker.

Udover dette bør du også kontrollere, hvordan hvert interface-element fungerer, især i mobil version websted. Det vil sige, at du ikke kun skal tænke på, hvor praktisk det er at klikke på elementer med musen, men også på, hvor praktisk det er at interagere med dem ved hjælp af teknikker som at swipe (glide fingeren hen over skærmen) og trykke (kort tryk på skærmen). Sørg også for, at knapperne er tydeligt synlige og nemme at bruge. Dette kræver selvfølgelig, at der er nok plads mellem elementerne til at forhindre utilsigtet berøring af den forkerte knap eller igangsættelse af den forkerte handling.

Kort sortering

Når kortdesignet er færdigt, er næste trin at bestemme, hvilken information kortene skal indeholde. Skal indhold grupperes efter type eller emne? Hvilken kategori skal dette eller hint indhold klassificeres i? Den bedste måde at organisere alt dette indhold på en brugervenlig måde er kortsortering.

Du kan gøre dette ved at bruge pen og papir, eller du kan bruge sider som ConceptCodify eller Optimal Workshop. Hver metode har sine fordele og ulemper, selvom offline-metoden kræver en mere individuel tilgang.

Kortdesign er en af ​​de mest fleksible formater hjemmesidelayout, som giver dig mulighed for at skabe en fremragende brugeroplevelse. Kortene er også æstetisk behagelige for øjet. Brugere leder konstant efter måder at hurtigt forbruge stor mængde information, men kortdesignet giver dig mulighed for at gøre dette nemt og hurtigt.

Firmablog med kortgrænseflade. Indhold er ekstremt vigtigt, når man kører en marketingkampagne, hvorfor virksomhedsbloggen ofte er henvist til nøglerolle. En veldesignet virksomhedsblog vil under alle omstændigheder fungere som et fundament, og det handler ikke kun om dynamisk indhold eller et sæt SEO-karakteristika. hovedkomponenten af ​​succes på internettet. Moderne brugerforventninger kræver brug af sammenhængende grupperede materialer, der kortfattet præsenterer sagens essens.

En velvalgt blogdesignstil vil efterlade det rigtige indtryk på hele webressourcen og virksomheden selv. I dag er det vigtigt at lave et besøgsorienteret websted eller blogdesign, når fokus er på brugergrænseflade. Kortdesign er med succes brugt i multi-tema portaler og business niche - næsten flad Metro stil, blokke og fliser organiserer information godt. Det er blevet bemærket, at designet med kort øger visningsdybden af ​​premium-indhold på virksomhedens hjemmeside.

Et design med kort kan dog enten være effektivt eller mislykket. Dernæst 10 eksempler godt design virksomhedsblogs, der beskriver den vindende essens af kortstilen.

1. Hjælp spejder

Et eksempel på en 3-spaltet virksomhedsblog med en fængende .

5. Buffer App

I virksomhedens blog Et amerikansk firma, der har udviklet en opslagstjeneste på sociale netværk, er der mere end 900 artikler om forskellige emner.

Variation i brugen af ​​designelementer hjælper med at skræddersy indhold til opgaverne. Der er to typer layouts til blogindlæg: et med fokus på rådgivningsartikler og et, der bruger et layout i butikstil med en fotobaggrund i fuld skærm (til TOP-indlæg).