Laatste trends in de wereld van webdesign: maak kennis met Card Design! Kaarttrucs: kaarten gebruiken in webdesign. Profiteer van animatie en beweging

De feestdagen zijn voorbij, wat betekent dat het tijd is om op te vrolijken en na te denken over plannen voor de toekomst, aankomende projecten en vooruitzichten. Bij Wix kijken we, zolang we ons kunnen herinneren, met spanning en nieuwsgierigheid uit naar het nieuwe jaar. 2015 staat voor de deur en zal zeker veel interessante dingen brengen op het gebied van webdesign.

Natuurlijk kunnen we niet alles voorspellen wat er zal gebeuren, maar we hebben wel enkele vermoedens. Je herinnert je dat het platform niet alleen handig is, maar ook modern, dus we houden alles wat er gebeurt nauwlettend in de gaten en weten waar de wind van verandering waait.

Gordels vastmaken, Lieve vrienden, de reis naar de toekomst begint! Dit jaar zullen we een aantal zeer interessante trends zien:

Materiaal ontwerp

Er is een soort “plat” ontwerp uitgevonden door Google. Het idee is gebaseerd op traditionele ontwerptechnieken en echt fysieke verschijnselen, aangepast voor internet. Het resultaat zijn meerlaagse interfaces die de eigenschappen van materialen en verlichting kunnen overbrengen en bewegingen kunnen simuleren echte wereld. Een voorbeeld van hoe dit eruit ziet, vindt u via deze link.

Animatie

Spookknoppen

Vergeet flitsende call-to-action-knoppen. Tegenwoordig zijn eenvoudige en transparante elementen gescheiden van de achtergrond in de mode. dun kader. Ze zijn meestal groter dan standaard knoppen en bevinden zich op de meest prominente plaats op de pagina. Bescheiden verschijning Dit betekent niet dat niemand dergelijke knoppen opmerkt of indrukt; integendeel, mensen houden echt van hun elegante eenvoud en relevantie. We hebben trouwens precies zulke elementen (en op de Urban Cup-website wordt deze trend al ten volle benut).

Verhaal vertellen

Storytelling in webdesign betekent dat de site bezoekers een verhaal moet vertellen - niet letterlijk natuurlijk, maar door de sensaties die bij een persoon opkomen op het moment van kijken. Hiervoor kunt u afbeeldingen en teksten gebruiken die qua betekenis verwant zijn, of interactief scrollen, zodat de lezer niet alleen toeschouwer is, maar ook deelnemer. Er zijn zoveel manieren om een verhaal te vertellen door middel van design, en we hopen dat deze trend in 2015 nog populairder wordt. Een goed voorbeeld van storytelling is te zien op deze Wix-site.

Kaart ontwerp

Een flexibelere en democratische versie van het zogenaamde ‘tegelontwerp’, waar de wereld in 2010 voor het eerst kennis mee maakte dankzij de dienst Pinterest. Kaarten worden nu gebruikt als startpunt voor beweging op de site: dit is een aankondiging van het materiaal dat wordt geopend als erop wordt geklikt. Het komende jaar zal het kaartontwerp zich verder ontwikkelen, waarbij nieuwe stijlen en interactieve opties zullen verschijnen. Als u zo’n website wilt maken, raden wij u aan om .

Video als achtergrond

Mooie video's, niet beperkt door het frame van de videospeler, zien er cool uit en vervangen traditioneel achtergrondafbeeldingen. En dat is niet verrassend: het is fris, mooi, je kunt met video iets nieuws bedenken, en het past goed bij het hierboven genoemde idee van storytelling. Deze achtergrond definieert het concept van de hele site, verlevendigt deze en creëert dynamiek. Kijk eens op de website van Zenit en zie hoe mooi het is.

Scrollen in plaats van klikken

Goed voorbeeld als mobiele interfaces beïnvloed webdesign. De opkomst van aanraakapparaten heeft de manier veranderd waarop we met pagina's omgaan: nu is de actie bekend en is 'klikken' een minder intuïtieve en natuurlijke manier van navigeren. Het is nu gebruikelijk om inhoud op een aparte pagina te plaatsen verticale pagina en verdeel het niet in secties, maar in "schermen". De Madsschou-website, gemaakt op Wix, illustreert dit idee perfect.

Micro-interacties

Webdesign zal dit jaar worden beïnvloed door nieuwe manieren om websitebezoekers te betrekken. De logica is deze: elke keer dat je iemand vraagt een actie uit te voeren, ontstaat er een interactie. De overgang naar micro-interacties is een poging om voor sommigen zoveel mogelijk redenen te creëren kleine acties. Klassieke voorbeelden zijn een venster voor e-mailabonnement of een functie waarmee u beoordelingen kunt geven. Komt er iets nieuws in 2015? Wij durven te wedden van wel.

Daarom zal ik je in dit artikel uitleggen wat ‘kaartontwerp’ is en hoe dit het webontwerp in het algemeen beïnvloedt.

Hoogte mobiele technologieën leidde geleidelijk tot een verandering in de website-architectuur in de richting van reactievermogen en aanpassingsvermogen. Deze twee parameters zijn verplicht geworden. Deze evenementen hebben bijgedragen aan het grote succes van ‘kaarten’ – een van de belangrijkste trends in webdesign in 2015.

We kunnen echter vol vertrouwen zeggen dat kaarten niet slechts een designrage zijn, maar dat ze de toekomst van webontwikkeling vormen, omdat ze de beste manier zijn om inhoud op een consistente manier te organiseren en weer te geven. Daarom zal ik je in dit artikel uitleggen wat ‘kaartontwerp’ is en hoe dit het webontwerp in het algemeen beïnvloedt. Gaan!

Kaartontwerp door de eeuwen heen

Hoewel kaarten pas onlangs extreem populair zijn geworden in webdesign, zijn ze dat al geweest Effectieve middelen visuele communicatie, aldus ten minste, duizend jaar. Kaarten werden voor het eerst geïntroduceerd als spel in het keizerlijke China in de 9e eeuw, maar werden later nuttig in de zakenwereld.

In de 17e eeuw verschenen er voor het eerst ‘handelskaarten’ in Londen, met hun hulp vonden mensen werk: dit was het eerste voorbeeld van moderne ‘visitekaartjes’.

Tegenwoordig is de kaart meestal een vorm van kortingsbon van een winkel of supermarkt, die mensen verzamelen om te krijgen speciale kortingen.

De meesten van ons hoeven alleen maar in onze portemonnee te kijken om het te zien kredietkaarten, klantenkaarten, klantenkaarten en zelfs een gewoon rijbewijs. Al deze kaarten hebben hun eigen normen.

Er bestaat in ieder geval een sterk verband tussen het traditionele gebruik van kaarten en het gebruik ervan in webdesign: reguliere kaarten bevatten informatie aan beide kanten, en webkaarten leiden gebruikers door om verdere inhoud te bekijken.

Wat zijn kaarten op internet?

Vanuit internetperspectief kunnen we een ‘kaart’ definiëren als een kleine rechthoek die geassocieerd is met een specifieke gedachte. Kaarten staan vol met interactieve elementen zoals tekst, links of afbeeldingen. Maar ze dienen allemaal hetzelfde doel: u doorverwijzen naar verdere inhoud wanneer erop wordt geklikt.

Het voornaamste doel van de kaarten is om te voorzien Korte beoordeling een bepaald onderwerp in een beperkte ruimte. En als de lezer geïnteresseerd is in het nieuws, kan hij terecht nieuwe pagina met volledige tekst. Facebook- of Twitter-websites profiteren van deze voordelen en hebben een kaartsjabloon in hun ontwerp opgenomen, waardoor grote hoeveelheden inhoud worden weergegeven en tegelijkertijd kostbare ruimte wordt bespaard.

Dus het meest belangrijk kenmerk kaarten is het idee van interactieve interactie. Tijdens de ontwikkeling moeten ontwerpers er rekening mee houden dat kaarten niet alleen dienen als een manier om nieuws weer te geven, maar ook de aandacht van de lezer moeten trekken. Daarom worden op de kaarten 'like', 'repost' of links naar weergegeven hele tekst Lidwoord.

Naast hun bruikbaarheid zijn kaarten een veel voorkomende ontwerpkeuze vanwege hun compatibiliteit met responsieve raamwerken. De Chunked-structuur kan worden gebruikt om aantrekkelijke interfaces te creëren en is ideaal voor taalontwikkeling. mobiele platforms. De vorm van de kaart lijkt sterk op die van moderne smartphone.
We hebben het vaak over ‘vloeiende’ lay-outs. Kaarten voorzien ons van kleine stukjes inhoud waarmee we de onderstaande pagina kunnen “vullen”. verschillende maten en schermvormen.

Waarom zou je kaarten gebruiken?

Omdat kaarten universeel zijn geworden, kunnen ze afhankelijk van de situatie op verschillende manieren worden gebruikt noodzakelijke functies. Hieronder staan enkele redenen waarom u kaarten kunt gebruiken:

Dit is een trend: trends zijn tijdelijk van aard, maar door kaarten te gebruiken kunt u uw site effectief beroemd maken.

Kaarten introduceren orde: Kaarten introduceren organisatielagen voor inhoud.

Kaarten zijn daar ideaal voor reagerend ontwerp: ze passen gemakkelijk in websites en mobiele applicaties. Het allerbelangrijkste is dat kaarten op smartphones eenvoudig verticaal kunnen worden gestapeld, waardoor er nieuwe creaties ontstaan nieuwsfeed.

Kaarten moedigen zuinigheid aan: vanwege hun omvang zullen kaarten nooit grote hoeveelheden informatie kunnen opslaan. Op het eerste gezicht lijkt dit misschien een nadeel, maar ik vind het iets geweldigs! Op de kaart moet een korte tekst uit het volledige artikel worden weergegeven, waardoor geïnteresseerde lezers worden aangemoedigd de link te volgen.

Ze zijn sociaal: kaarten zijn perfect voor sociale media, en niet alleen omdat ze erin worden gebruikt in sociale netwerken, en ook omdat kaarten het voor gebruikers gemakkelijker maken om informatie via verschillende kanalen te delen sociale platforms en per post.

Moderne tendensen en benaderingen in webontwikkeling

Leer het algoritme voor snelle groei vanaf het begin bij het bouwen van websites

Het belang van de inhoud wordt gelijkgesteld: kaarten helpen u beslissen welk artikel u het beste bovenaan de pagina kunt plaatsen. Bij het gebruik van kaarten kunnen blokken met inhoud van hetzelfde belang gemakkelijk naast elkaar op dezelfde pagina bestaan zonder dat ze hoeven te worden gerangschikt. De gebruiker bepaalt wat hij belangrijk vindt en wat hij wil lezen.

Wie gebruikt de kaarten?

Dribbel

De lay-out van de site is gebaseerd op kaarten met een afbeelding en enige informatie over elk ontwerp. Wat ik leuk vind aan Dribbble is dat je op een kaart kunt klikken en alle details van het ontwerp kunt zien, en dat je ook gewoon over de kaart kunt bewegen en een korte beschrijving kunt zien.

Pinterest

Als we het over kaartontwerp hebben, kunnen we niet anders dan Pinterest noemen. Veel mensen denken zelfs dat Pinterest een pionier was in het ontwerpen van kaarten. Pinterest laat duidelijk het “belang van alle inhoud” zien; er zijn geen kaarten op de site die op enigerlei wijze visueel opvallen.

Twitter, dat een limiet van 144 tekens per bericht hanteerde, werd geboren met een ‘ingebouwde kaartindeling’. Vorig jaar lanceerde het sociale netwerk zijn eigen product genaamd Twitter Cards, een app die is ontworpen om u te helpen uw inhoud in kaart te brengen terwijl u deze op het systeem plaatst. De ontwikkelaars beschrijven hun applicatie als zijnde in staat om:

“voeg veel foto’s, video’s en andere media-inhoud toe aan uw tweets, waardoor verkeer naar uw website wordt geleid”

Als gevolg, Startpagina Twitter staat nu vol met tweetkaarten. Wanneer u op een van deze klikt, wordt de tweet uitgevouwen en weergegeven extra content of opties.

De Bewaker

De beroemde Britse krant The Guardian paste een kaartontwerp toe op zijn website om ‘anders te denken en de ontdekking en promotie van inhoud te verbeteren’.

Ze waren in staat om een modulair ontwerp te creëren bestaande uit diverse kaarten: Elk is gekoppeld aan een titel en wanneer erop wordt geklikt, wordt u doorgestuurd naar de volledige tekst van het artikel. De site roept een gevoel van elegantie en netheid op.

Conclusie

Kaarten zijn een handige methode om aantrekkelijke websites te maken, en ze zijn ook uiterst flexibel, waardoor u een verscheidenheid aan lay-outs kunt implementeren. Dit alles is om ervoor te zorgen dat de gebruiker tevreden is met de site. Het steeds groter wordende marktaandeel van tablets en smartphones zal het kaartontwerp ook voor lange tijd aan de top van het webdesign verankeren.

Webdesign is zeer dynamisch. We zien voortdurend hoe het uiterlijk van websites verandert met de komst van nieuwe technologieën, methoden, trends en stijlen. Tegenwoordig is het leidende concept dus kaartontwerp.

Je ziet het overal: van makelaarswebsites tot nieuwsportals. Internetgiganten als Twitter, Facebook en Google gebruiken zelfs kaartontwerpen.

Kaarten, binnen in dit geval, dit zijn kleine rechthoekjes gevuld met interactieve afbeeldingen en informatie. Ze zijn vooral populair geworden vanwege hun reactievermogen, esthetiek en bruikbaarheid.

Hoewel er veel misvattingen bestaan over wat in aanmerking komt als kaartontwerp, is één ding zeker: kaarten zijn niet alleen maar rechthoeken op websites. Om een bepaald ontwerp als kaartontwerp te kwalificeren, moet het dit hebben functionaliteit en zelfvoorzienend zijn.

Misschien wel de beste metafoor om het kaartontwerp te beschrijven is het volgende gezegde: “De kaart is plat, maar heeft twee kanten.” Dat wil zeggen dat elke kaart niet alleen een bepaalde inhoud moet bevatten, maar de consumenten ook de mogelijkheid moet bieden om er op de een of andere manier mee te communiceren.

Simpel gezegd: kaarten zijn niet alleen Mooi ontwerp, maar gemakkelijk te gebruiken.

Verschillende soorten kaartontwerpen

Het kaartontwerp heeft sinds het begin aanzienlijke veranderingen ondergaan. En nu kan het in de volgende stijlen worden gemaakt.

1. Plat ontwerp

Het platte kaartontwerp werd voor het eerst geïntroduceerd door Microsoft in 2006 en was gebaseerd op de ontwerpstijl GUI Metro, dat er behoorlijk solide en kleurrijk uitziet. Toegegeven, in de moderne versie worden gradiënten, schaduwen en squeomorfisme op grotere schaal gebruikt.

2. Tijdschriftstijl

Een ontwerp in tijdschriftstijl heeft een goede visuele balans nodig. Kaarten bevatten in dit geval een blok met een afbeelding en tekst die als “teaser” fungeren, dat wil zeggen dat ze de bezoeker naar meer lokken gedetailleerde informatie op een andere pagina of site. Zoals de naam al doet vermoeden, wordt dit ontwerp gebruikt op websites van tijdschriften en nieuwsportals, maar is ook geschikt voor andere bronnen waarop gericht is een groot aantal van inhoud zoals blogs of portfolio's, en voor sites die regelmatig worden bijgewerkt.

Deze stijl is belichaamd op de site sociale dienst Pinterest is een populaire thema-ontwerptrend geworden voor het WordPress-platform. Aanvankelijk bevatten de kaarten alleen links en een aantal zeker type inhoud. Ze kunnen nu meer links en inhoudstypen bevatten, waaronder video's, formulieren, afbeeldingen en tools voor sociaal delen. In sommige interfaces bieden kaarten mini-interactie-opties, zoals het in-/uitschakelen van Facebook-meldingen.

Het staat ook bekend als de "metselwerkstijl" en bevat blokken die met elkaar zijn verbonden of verspreid over de lay-out.

Hoe kaartontwerp effectief gebruiken?

Eten hele lijn redenen waarom kaartstijlontwerpen zo populair zijn. Hier zijn er maar een paar:

Een verscheidenheid aan ontwerpstijlen is compatibel met dit formaat, variërend van platte ontwerpen tot meer complexe varianten.
Het werkt goed mee verschillende types inhoud en maakt het ook gemakkelijker om te consumeren.
Het werkt goed met responsieve raamwerken.
Het geeft een georganiseerde en gestructureerde uitstraling aan veel informatie.

Voor van dit type ontwerp zijn er geen vaste regels. Twee elementen die echter bijna altijd aanwezig zijn in effectieve kaartlay-outs zijn eenvoud en een rijke verscheidenheid aan inhoud. Er zijn ook technieken die de esthetiek en functionaliteit van kaartontwerp kunnen verbeteren.

Lege ruimte

Een gemeenschappelijk element bij het ontwerpen van kaarten is witruimte. Dit is nodig zodat alle elementen duidelijk zichtbaar en begrijpelijk zijn. Het enige dat u heeft, is tenslotte een gebied van 600 px, en u moet ervoor zorgen dat uw kop, call-to-action-knop, afbeeldingen en linktekst prominent aanwezig zijn en hun werk effectief doen.

Door de grote hoeveelheid witte ruimte rondom elk element hebben bezoekers van de site de tijd om te verwerken wat ze zien terwijl ze van de ene kaart naar de andere kijken.

Elke kaart heeft zijn eigen inhoud

Duidelijke afbeeldingen

Bij op kaarten gebaseerd ontwerp zijn afbeeldingen van cruciaal belang. Ze moeten onberispelijk zijn, zelfs als ze in beperkte ruimtes worden geplaatst, om de aandacht te trekken. Als er geen afbeeldingen zijn, gebruik dan een artistiek lettertype of een creatieve kop om de aandacht van uw bezoekers te trekken.

Eenvoudige lettertypen

Het lettertype mag de aandacht niet afleiden van de afbeelding. Gebruik hiervoor een eenvoudig lettertype in een gemakkelijk leesbare kleur, d.w.z. zwart en grijs. De meest populaire lettertypen zijn, vanwege hun neutrale ontwerp en gemakkelijke leesbaarheid, schreefloze lettertypen. Daarnaast is het raadzaam om één lettertype in verschillende formaten te gebruiken.

Onverwachte details

Het verrassingselement doet wonderen. Probeer onverwachte details toe te voegen, zoals een 3D-effect of creatieve randverwerking, om uw ontwerp origineler te maken. Andere methoden die effectief zijn gebleken, zijn onder meer hover-effecten en kleuroverlay. Je kunt het effect ook alleen op de meesten toepassen betekenisvolle inhoud om het visuele gewicht van elke kaart in evenwicht te brengen.

Open gaas

Net zo belangrijk zijn de elementen op elke kaart? belangrijk er zit ruimte tussen. Creëer een rasterraamwerk dat enig contrast geeft en ook biedt gelijke afstand tussen kaarten en hun elementen. Dit wordt nog belangrijker als je kijkt naar de plaatsing van breekpunten in een responsieve lay-out.

Bruikbaarheid

Design gaat niet alleen over esthetiek, maar ook over bruikbaarheid. Het ontwerp moet gebruikers aanzetten tot actie: klik op de abonneerknop, lees het hele artikel of koop een product. Het uiteindelijke doel van uw interface is om een eenvoudige ervaring te bieden die gebruikers ertoe aanzet de gewenste actie te ondernemen.

Afgezien hiervan moet u ook controleren hoe elk interface-element werkt, vooral in mobiele versie plaats. Dat wil zeggen, je moet niet alleen nadenken over hoe handig het is om met de muis op elementen te klikken, maar ook over hoe handig het is om ermee te communiceren met behulp van technieken zoals swipen (met je vinger over het scherm glijden) en tikken (korte tik op het scherm). Zorg er ook voor dat de knoppen duidelijk zichtbaar en gemakkelijk te gebruiken zijn. Dit vereist uiteraard dat er voldoende ruimte tussen de elementen is om te voorkomen dat je per ongeluk de verkeerde knop aanraakt of de verkeerde actie initieert.

Kaart sorteren

Zodra het kaartontwerp voltooid is, is de volgende stap het bepalen welke informatie de kaarten zullen bevatten. Moet de inhoud worden gegroepeerd op type of onderwerp? In welke categorie moet deze of gene inhoud worden ingedeeld? De beste manier al deze inhoud op een gebruiksvriendelijke manier organiseren is kaarten sorteren.

U kunt dit doen met pen en papier, of u kunt sites als ConceptCodify of Optimal Workshop gebruiken. Elke methode heeft zijn voor- en nadelen, al vergt de offline methode een meer individuele aanpak.

Kaartontwerp is een van de meest flexibele formaten website-indeling, waarmee u uitstekend kunt creëren gebruikerservaring. De kaarten zijn ook esthetisch een lust voor het oog. Gebruikers zijn voortdurend op zoek naar manieren om snel grote hoeveelheden informatie te consumeren, en dankzij het kaartontwerp kunnen ze dit gemakkelijk en snel doen.

U wilt dus waarschijnlijk dat uw trendy kaartontwerp er niet alleen geweldig uitziet, maar ook zo gebruiksvriendelijk mogelijk is? Laten we eens kijken hoe we dit kunnen bereiken met behulp van voorbeelden uit beroemde wereldmedia.

Het idee om een ontwerp te maken op basis van kaarten is gewoon geweldig.

Ten eerste, dit is een redelijk populaire trend in contentontwerp, die het mogelijk maakt om een vrij grote hoeveelheid content weer te geven en dit prachtig te doen!

ten tweede Natuurlijk is dit ontwerp ook behoorlijk gebruiksvriendelijk.

Derde ziet dit ontwerp er geweldig uit op alle soorten schermen in alle mogelijke resoluties.

Het allerbelangrijkste bij elk op kaarten gebaseerd ontwerp is om iets te creëren waar de gebruiker op wil klikken. Dit is het moeilijkste en moeilijkste. grote taak voor ontwerpers. Elke kaart moet een specifiek doel dienen: een afbeelding bevatten met een link ernaartoe volledig nieuws, abonnementsformulier, videospeler of enig ander stuk inhoud waarmee de gebruiker zal communiceren.

Begin met een zwart-wit kader

Het lijkt allemaal vrij eenvoudig: begin met een zwart-wit kader. Denk na over kaarten en welke delen van de kaart klikbaar zijn en welke alleen grafische inhoud bevatten. Het is heel normaal om de hele kaart klikbaar te maken.

Plan de afstand, afbeeldingen, typografie en alle andere kleine details. “Verzamel” de kaarten om uiteindelijk te begrijpen of het ontwerp werkt, is de structuur duidelijk, is het allemaal handig in gebruik? Bedenk hoe u deze reeks elementen gaat gebruiken algemene structuur ontwerp.

Probeer te denken als een eindgebruiker:

Waar zou u klikken om naar de volgende stap te gaan?
Krijgt u de inhoud die u verwacht als u op een kaartelement klikt?
Is het gemakkelijk om tussen schermen te navigeren?

Gebruik verhoogde vulling

Natuurlijk mag je geen knipperende elementen of rode "Klik hier"-knoppen gebruiken, zoals het ontwerp uit de jaren 90. Maar vergeet de accenten niet; je moet call-to-actions niet te veel verbergen grijze kleuren. Kijk hoe goed de kleuren worden gespeeld in het volgende ontwerp:

De grootste uitdaging bij het maken van kaarten is het creëren van een compact ontwerp zonder dat het rommelig aanvoelt. onnodige elementen. Dit is waar het te hulp komt witte ruimte. In sommige gevallen, zoals een productkaart, kan het een grote hulp zijn om de aandacht op de juiste gebieden te vestigen. Hoe minder druk het scherm is, hoe meer aandacht de gebruiker zal besteden aan het object waar hij naar moet kijken:

Dit is het moment om na te denken over kleuren en schaduwen. Maak ze natuurlijk en gestileerd in één totaalconcept. Nee, we hebben het hier zeker niet over skeuomorfisme, we hebben het alleen over het creëren van een ontwerp met natuurlijke contouren en schaduwen. Geef uw kaarten het uiterlijk dat ze zouden hebben als u ze in uw handen zou houden.

Gebruik Basisprincipes en de wetten van de natuurkunde om elke kaart te visualiseren en te ontwerpen alsof je ze voor je in je handen houdt:

De verlichting moet lichte schaduwen op de onderkant en zijkanten van de kaart werpen.
De donkerste plaats op de kaart is de basis.
Plaats inhoud niet te dicht bij de randen.
Klikbare elementen moeten in elke resolutie op de gemakkelijkst toegankelijke delen van de kaart worden geplaatst. Ze moeten net zo gemakkelijk te klikken zijn met een muis als met een vinger op een smartphone.
Eén kaart - één stukje informatie.

Maak eenvoudige lagen

Nu je je al met natuurkunde bezig hebt gehouden, maak je een uniforme kaart voor alle delen van de interface. Weet je niet waar je moet beginnen? Google-instructies Door Materiaal ontwerp is een prima startpunt.

Bij Material Design worden de fysieke eigenschappen van papier naar het scherm vertaald. Tegelijkertijd lijkt de achtergrond van de applicatie op een plat, ondoorzichtig vel papier.

"De eigenschappen van de toepassing repliceren het vermogen van papier om van formaat te veranderen, te mengen en samen te vouwen uit verschillende componenten. Bedienings- en weergave-elementen worden meestal anders verwerkt. Ze wijken af van de inhoud en respecteren de fysieke eigenschappen van het papier niet."

Eigenlijk is het de taak om een digitaal object te creëren dat eruitziet als een materieel object. En als de gebruiker het wil aanraken, dan zal hij erop willen klikken. Ja, zo simpel is het concept.

Houd het bij eenvoudige interfaces

Als het om typografie gaat schreefloos- altijd het antwoord. Vermijd het gebruik van te dunne of moeilijk leesbare lettertypen, omdat de tekst dan behoorlijk moeilijk leesbaar is.

De meeste kaarten werken goed met een systeem van twee lettertypen (zelfs als ze uit dezelfde familie komen) - één voor de hoofdtekst en één voor de titel of call-to-action. De sleutel hier is om het contrast goed te krijgen, zodat The tekstelementen zijn gemakkelijk te lezen. Zorg voor contrast tussen de lettertypen, evenals contrast tussen de achtergrond en de tekstelementen voor elke kaart.

Verminder het aantal UI-elementen

Herhalen: één kaart - één actie.

En dat betekent waarschijnlijk dat je niet een heleboel UI-elementen zoals knoppen en zo moet toevoegen. Bij het ontwerpen van kaarten kun je zelfs helemaal zonder knoppen. Maar als je denkt dat gebruikers een hint nodig hebben, is één knop voldoende. Vasthouden aan het eenvoudige vormen En simpel ontwerp, de Material Design-aanpak is in dit geval redelijk goed: houd je aan de éénknopsregel. En over het algemeen is de knop het enige element dat je nodig hebt. Dit is je ontwerpdoel.

Conclusie

Er bestaat simpelweg geen magische formule voor het perfecte kaartontwerp. Maar er zijn benaderingen waarmee je de gebruiker zeker kunt dwingen op een element te klikken of tikken. Volg het minimalisme met grote hoeveelheid vrije ruimte en contrast, benadruk eenvoudige typografie en blijf bij het principe één actie voor één kaart. Volgens deze principes is het beter om projecten met kaartontwerp te presenteren en te conceptualiseren. Combineer deze ontwerptheorieën en uw vaardigheden en u zult zeker een verbluffend, gebruiksvriendelijk en trendy ontwerp krijgen.

Bedrijfsblog met een kaartinterface. Content is uiterst belangrijk bij het uitvoeren van een marketingcampagne, daarom krijgt een bedrijfsblog vaak een sleutelrol. Een goed ontworpen bedrijfsblog zal in ieder geval als basis dienen, en het gaat niet alleen om dynamische inhoud of een reeks SEO-kenmerken. het belangrijkste onderdeel van succes op internet. Moderne gebruikersverwachtingen vereisen het gebruik van samenhangend gegroepeerde materialen die de essentie van de zaak bondig weergeven.

Een goed gekozen blogontwerpstijl zal de juiste indruk achterlaten op de hele webbron en op het bedrijf zelf. Tegenwoordig is het belangrijk om een bezoekergericht website- of blogontwerp te creëren wanneer de focus op de klant ligt gebruikersomgeving. Kaartontwerp wordt met succes gebruikt in portalen met meerdere thema's en de zakelijke niche - bijna platte Metro-stijl, blokken en tegels organiseren informatie goed. Het is opgevallen dat het ontwerp met kaarten de kijkdiepte van premium-inhoud op de website van het bedrijf vergroot.

Een ontwerp met kaarten kan echter zowel effectief als niet succesvol zijn. Vervolgens 10 voorbeelden goed design bedrijfsblogs die de winnende essentie van de kaartstijl beschrijven.

1. Help scouten

Een voorbeeld van een bedrijfsblog met 3 kolommen en een pakkende .

5. Buffer-app

IN bedrijfsblog Een Amerikaans bedrijf dat een postservice op sociale netwerken heeft ontwikkeld, er zijn meer dan 900 artikelen over verschillende onderwerpen.

Variatie in het gebruik van ontwerpelementen helpt de inhoud af te stemmen op de taken. Er zijn twee soorten lay-outs voor blogposts: één gericht op adviesartikelen en één met een winkelachtige lay-out met een foto-achtergrond op volledig scherm (voor TOP-posts).