Wil je een trendy interface in kaartstijl ontwerpen? Waarschijnlijk geen slecht idee. Kaarten zijn populair en gebruiksvriendelijk, geschikt voor alle soorten digitaal ontwerp en voor schermen van alle formaten. De sleutel tot een succesvol ontwerp in kaartstijl is het creëren van iets waar de gebruiker op wil klikken. De kaart moet dienen als een container voor specifieke inhoud (links, inlogformulieren, videospelers, enzovoort) waarmee de gebruiker wil communiceren. Hier leest u hoe u zo'n ontwerp kunt maken.
Begin met zwart-witte contouren
Klinkt heel simpel: begin met een zwart-wit lay-out van je ontwerp. Denk na over het doel van de kaarten en welk deel ervan klikbaar zal zijn. (De hele kaart kan als link dienen.)
Plan de elementen: witruimte, afbeeldingen en typografie zodat je de kaart zonder kleur of decoratie kunt zien. Zie het als een fase in het ontwerp van gamekaarten. Alle elementen van de kaart zijn aanwezig. Is de lay-out gemakkelijk te begrijpen?
Bedenk hoe je de kaarten in dit stadium gaat gebruiken. Waar klik je om deze of gene actie uit te voeren? Zijn de structuur en het resultaat duidelijk? Hoe ga je terug, of omgekeerd, een stap vooruit? De antwoorden op deze vragen moeten duidelijk zijn zonder prompts zoals rode "Klik hier"-labels.
Net als bij andere projecten, als een ontwerp niet in zwart-wit werkt, zal de uiteindelijke, volledig ontworpen versie ook niet werken.
Veel vrije ruimte gebruiken
Het moeilijkste aan een ontwerp in kaartstijl is om het niet rommelig en druk te maken. Hier speelt vrije ruimte een grote rol. En u zult de vrije ruimte in een veel groter volume willen gebruiken dan het comfortabel lijkt.
De overvloed aan "lucht" geeft de ontwerpelementen ruimte, maakt alle kaarten visueel ruimer en vergroot de leesbaarheid.
U zult waarschijnlijk willen beginnen met tweemaal de gebruikelijke ruimte tussen elementen. De afstand tussen de kaarten moet groot zijn, je kunt ook de vrije ruimte vergroten door de regelafstand. Een zeer grote hoeveelheid lucht zal u helpen een open ontwerp te creëren en inhoud op de meest voor de hand liggende manier te organiseren. De kaart is beperkt in grootte en moet passen op het scherm van een smartphone, maar ook logisch en proportioneel kunnen worden aangepast voor schermen van tablets en monitoren. Op grote schermen kunnen kaarten ook de aandacht van de gebruiker van elkaar afleiden. Door "lucht" toe te voegen, ziet het ontwerp als geheel er opener en gemakkelijker te begrijpen uit.
Natuurlijke kleuren en tinten toevoegen
Nu bent u klaar om na te denken over kleuren en tinten voor uw ontwerp. Probeer het een natuurlijke uitstraling te geven en geef de kaarten een realistische uitstraling met behulp van schaduwen en stijlen.
Dit gaat niet over skeuomorfisme, maar over het creëren van kleuren met natuurlijke contouren en schaduwen. Bedenk hoe een echte kaart eruit zou zien. De gebruiker moet het gevoel hebben dat hij de kaart in zijn hand houdt.
Gebruik een paar fysieke regels die van toepassing zijn wanneer u een kaart in uw handen houdt:
- De verlichting werpt schaduwen onder en aan de onderkant van de kaart.
- Het donkerste deel van het ontwerp zit aan de onderkant van het ontwerp, want meestal komt het licht van bovenaf als je een kaart in je handen houdt.
- Plaats geen inhoud op plaatsen waar u een kaart in uw hand zou houden.
- Touchpoints (calls to action, etc.) moeten centraal staan en interactie moet gemakkelijk en begrijpelijk zijn. (Net als bij speelkaarten bevindt het hoofdelement zich in het midden van het ontwerp).
- Een kaart is een stukje informatie.
Creëer een eenvoudige stijl
Ga nu, met fysieke eigenschappen in gedachten, verder met de volgende stap - het creëren van een gemeenschappelijke kaartstijl voor de hele interface. Weet je niet waar je moet beginnen? Een uitstekend startpunt zou zijn: materiaal ontwerp gids van Google.
“In Material Design worden de fysieke eigenschappen van papier overgebracht op het scherm. De achtergrond van de applicatie is een vlakke, uniforme textuur van een vel papier.
Applicatie-elementen gedragen zich als papier - ze veranderen ook in grootte, scrollen door en stapelen. Elementen buiten de applicatie, zoals de statusbalk, gedragen zich anders. Ze staan los van de inhoud in de applicatie en erven niet de fysieke eigenschappen van het papier."
Houd deze richtlijnen in gedachten en probeer een digitaal object te maken dat eruitziet en aanvoelt als een fysiek object. Als gebruikers het willen aanraken, klikken ze erop. Het concept is eenvoudig.
Kies eenvoudige lettertypen
Als het om typografie gaat, zijn eenvoudige schreefloze lettertypen vaak de beste oplossing. Vermijd lettertypen die te dun of te smal zijn, omdat ze moeilijk kunnen zijn voor het oog.
De meeste kaarten werken goed met twee lettertypen (zelfs als ze uit dezelfde familie komen) - één voor algemene tekst en één voor een kop of oproep tot actie. Een ander belangrijk punt om in gedachten te houden bij het werken met typografie is contrast, waardoor de tekst beter leesbaar wordt. Vergeet niet om voor elke kaart rekening te houden met contrasten tussen lettertypen en tussen achtergrond en tekst.
Beperk UI-elementen
Onthoud: één kaart is gelijk aan één actie.
Dit betekent dat u niet een heleboel interface-elementen rond het ontwerp hoeft te strooien, zoals knoppen. Misschien heb je ze helemaal niet nodig. Maar als u nog steeds denkt dat de gebruiker een visuele cue nodig heeft, is één knop voldoende.
Houd vormen en ontwerp eenvoudig - nogmaals, materiaalontwerp is een geweldige optie en probeer niet meer dan één knop te maken.
Knoppen zijn waarschijnlijk het enige UI-element dat u ooit nodig zult hebben. Streef ernaar.
Conclusie
Er is geen magisch recept voor het perfecte kaartontwerp, maar er zijn specifieke trucs die de gebruiker aanmoedigen om te klikken waar u maar wilt. Streef ernaar realistisch te zijn, kies voor minimalisme met veel lucht en contrast, kies voor eenvoudige typografie en vermeld één actie per kaart.
Vertaling - Bureau
Dus wil je dat je trendy kaartontwerp er niet alleen geweldig uitziet, maar ook zo gebruiksvriendelijk mogelijk is? Laten we uitzoeken hoe we dit kunnen bereiken met behulp van de voorbeelden van bekende wereldmedia.
Op zich is het idee om een ontwerp te maken op basis van kaarten gewoon geweldig.
ten eerste, dit is een vrij populaire trend in content design, die het mogelijk maakt om voldoende content weer te geven en mooi te maken!
ten tweede, zo'n ontwerp is natuurlijk ook best handig voor gebruikers.
Ten derde, dit ontwerp ziet er geweldig uit op alle soorten schermen in alle mogelijke resoluties.
Het belangrijkste bij elk op kaarten gebaseerd ontwerp is om iets te maken waar de gebruiker op wil klikken - dit is de grootste en moeilijkste taak voor ontwerpers. Elke kaart moet een specifiek doel dienen: een afbeelding bevatten met een link naar het volledige verhaal, een abonnementsformulier, een videospeler of elk ander stuk inhoud waarmee de gebruiker interactie zal hebben.
Begin met een zwart-wit draadframe
Alles lijkt vrij eenvoudig: begin met een zwart-wit draadframe. Denk na over de kaarten en welke delen ervan klikbaar zullen zijn en welke alleen grafische inhoud zullen bevatten. Het is heel normaal om de hele kaart klikbaar te maken.
Plan de opvulling, afbeeldingen, typografie en alle andere kleine dingen. "Monteer" de kaarten aan elkaar om uiteindelijk te begrijpen of het ontwerp werkt, is de structuur duidelijk, is het allemaal handig in gebruik? Bedenk hoe u deze set elementen in de algehele ontwerpstructuur gaat gebruiken.
Probeer te denken als een eindgebruiker:
- Waar zou u klikken om naar de volgende stap te gaan?
- Krijgt u de inhoud die u verwacht te krijgen als u op een bepaald kaartelement klikt?
- Is het gemakkelijk om tussen schermen te navigeren?
Gebruik meer opvulling
Natuurlijk moet u geen knipperende elementen of rode "Klik hier"-knoppen gebruiken zoals in het ontwerp uit de jaren 90. Maar vergeet accenten niet, verberg call-to-action niet achter te grijze kleuren. Zie hoe goed de kleuren worden gespeeld in het volgende ontwerp:
De grootste uitdaging bij het maken van kaarten is om een compact ontwerp te creëren zonder het gevoel te krijgen dat je vol zit met onnodige elementen. Hier komt hulp bij kijken. 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 dat bekeken moet worden:
Nu is het tijd om na te denken over kleuren en schaduwen. Houd 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 je kaarten de uitstraling die ze zouden hebben als je ze in je handen zou houden.
Gebruik de basisprincipes en wetten van de fysica om elke kaart te visualiseren en te ontwerpen alsof u hem voor u in uw handen houdt:
- Verlichting moet kleine schaduwen werpen op de onderkant en zijkant van de kaart.
- De donkerste plek op de kaart is de basis.
- Plaats de inhoud niet te dicht bij de randen.
- Klikbare elementen moeten in alle resoluties in de gemakkelijkst bereikbare 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.
Eenvoudige lagen maken
Nu je je hoofd over natuurkunde hebt, kun je een uniforme kaart maken voor alle delen van de interface. Weet je niet waar je moet beginnen? Google-instructies voor materiaal ontwerp- een prima startpunt.
In Matherial design worden de fysieke eigenschappen van het papier vertaald naar het scherm. De achtergrond van de applicatie lijkt tegelijkertijd op een plat, ondoorzichtig vel papier.
"De applicatie-eigenschappen repliceren het vermogen van het papier om het formaat te wijzigen, door elkaar te schudden en in meerdere stukken te vouwen. Bedieningselementen en indicatoren worden meestal anders behandeld. Ze verschillen van de inhoud en respecteren de fysieke eigenschappen van het papier niet."
Eigenlijk is dit de taak, om zo'n digitaal object te creëren dat eruit zou zien als een materieel object. En als de gebruiker het wil aanraken, dan wil hij erop klikken. Ja, zo simpel is het concept.
Blijf bij eenvoudige interfaces
Als het gaat om typografie schreefloos is altijd het antwoord. Vermijd het gebruik van te dunne of moeilijk leesbare lettertypen, omdat de tekst dan vrij moeilijk te lezen is.
De meeste kaarten werken prima met een systeem met twee lettertypen (zelfs als ze uit dezelfde familie komen) - één voor hoofdtekst en één voor kop of call-to-action. Het belangrijkste hier is om het contrast goed te bewerken, zodat de tekstelementen zijn leesbaar. Zorg ervoor dat u de lettertypen en het contrast tussen de achtergrond en de tekstelementen voor elke kaart contrasteert.
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 opnemen. In kaartontwerp kun je zelfs helemaal zonder knoppen. Maar als het u lijkt dat gebruikers een hint nodig hebben, is één knop voldoende. Blijf bij eenvoudige vormen en een eenvoudig ontwerp, de Matherial Design-benadering is in dit geval redelijk goed - houd u aan de regel met één knop. Over het algemeen is de knop het enige element dat u nodig hebt. Dit is uw ontwerpdoel.
Uitgang:
Er is geen magische formule voor het perfecte kaartontwerp. Maar er zijn benaderingen waarmee u de gebruiker zeker kunt laten klikken of tikken op het element. Ga voor minimalisme met veel witruimte en contrast, focus op eenvoudige typografie en houd je aan het principe één actie voor één kaart. Het volgen van deze principes is het beste voor het presenteren en conceptualiseren van kaartontwerpprojecten. Combineer deze ontwerptheorieën en je vaardigheden, en je krijgt gegarandeerd geweldige, gebruiksvriendelijke en trendy ontwerpen.
Door hun visuele aantrekkingskracht zijn kaartinterfaces meer dan alleen een trend.
In 2014 werd internet op mobiele apparaten voor het eerst vaker gebruikt dan op computers. Daarom geeft webdesign tegenwoordig de voorkeur aan kleine schermen en wordt responsief ontwerp een must. Wat kunnen we zeggen over 2018, wanneer volgens de statistieken van het persbureau RNS al 54% van de Russen mobiel internet gebruikt. Als gevolg hiervan zijn eenvoudige interfacestijlen zoals het nieuwe platte ontwerp, minimalisme en vooral kaarten nu populairder dan ooit.
De bruikbaarheid van een kaart-UI-patroon gaat over meer dan snelle laadtijden en aanpassingsvermogen aan verschillende schermformaten. Gebonden inhoud komt overeen met de aandachtsspanne van de meeste internetgebruikers (vooral op mobiele apparaten). Gekoesterd door Pinterest en vervolgens populair gemaakt door sociale netwerken zoals Facebook en Twitter, is de kaartsjabloon tegenwoordig te vinden op websites van alle sectoren.
In dit artikel zullen we de opkomst van het kaart-UI-patroon onderzoeken: wat is de bruikbaarheid, hoe is het compatibel met responsief en materiaalontwerp en wat kunnen we ervan verwachten in de toekomst.
Wat is containerwebdesign?
Om dit patroon te begrijpen, moet men eerst begrijpen wat de kaarten zelf zijn. Kaarten zijn meestal kleine containers met informatie. Elke kaart heeft zijn eigen thema. De kaart kan elke inhoud bevatten - visueel, tekst, links, enz. - maar alle informatie is gewijd aan een enkel onderwerp.
Het scherm vullen met deze onafhankelijke containers met informatie is wat The Guardian het 'containermodel' noemde. Het biedt een schone en duidelijke interface, ideaal voor snel browsen, zodat de gebruiker gemakkelijk kan vinden wat hij zoekt. (Bovendien is deze methode ideaal voor aanraakbediening, waarover we hieronder zullen schrijven).
Praktisch en aantrekkelijk: de voordelen van het kaart-UI-patroon in een notendop.
Met Trello kunnen gebruikers elke gewenste kaart maken. Iedereen kan taakkaarten maken en deze naar behoefte categoriseren. Dit demonstreert niet alleen de flexibiliteit van de kaartsjabloon, maar ook de organisatorische kracht ervan. Trello gedijt omdat het kaartformaat eenvoudiger aanvoelt dan de takenlijst van een traditionele planner.
Ben je geïnteresseerd? Lees het laatste artikel met een selectie van de TOP 18 trends van 2018.
Kaart UI-patroon op mobiel en responsief ontwerp.
Zoals eerder vermeld, zijn kaarten ongelooflijk compatibel met responsief ontwerp, waardoor ze, in de woorden van Des Traynor van Intercom, 'de toekomst van het web' zijn. Het patroon past om een aantal redenen goed op mobiele apparaten, die we hieronder zullen beschrijven.
Ten eerste, in kaders die uitzetten en inkrimpen, kan het kaartraster zichzelf herstructureren om op elke schermpositie of -grootte te passen. Ontwerpers kunnen de grootte van de kaarten veranderen (en ze ook aan elkaar aanpassen) zoals ze willen. U kunt bijvoorbeeld een vaste breedte en variabele hoogte instellen met een constante afstand tussen de kaarten. We gebruiken dit de hele tijd om responsive websites te maken.
Vergelijk de screenshot van de website van The Verge hierboven met de mobiele versie hieronder:
Merk op hoe de tekst, afbeeldingen en het kleurpatroon hetzelfde blijven. Bij het ontwikkelen van een responsief webontwerp kunt u met kaarten een consistent ontwerp krijgen op verschillende apparaten. Dit voordeel is te zien in het UXPin gratis ontwerplab. Merk op hoe de strakke lay-out van de mobiele versie naar de volledige schermweergave stroomt.
Mobiel weergavegebied:
Bekijk gedeelte van de versie op volledig scherm:
Een ander voordeel is dat het op kaarten gebaseerde ontwerp compatibel is met aanraakbedieningen. Op aanraakschermen fungeren kaarten als knoppen. Het idee is simpel: klik op de kaart om toegang te krijgen tot de inhoud. Zoals de toepassing van de wet van Fitts op webdesign laat zien, hoe groter de knop waarop moet worden geklikt, hoe gemakkelijker het is om mee te werken. Hoe vaak hebben we te maken met kleine knoppen op mobiele apparaten?
Kaarten en materiaalontwerp
Perfect voor materiaalontwerp, het is sterk afhankelijk van kaarten en hun gedetailleerde technische analyse neemt veel ruimte in beslag. Dus als je een diepgaande uitleg nodig hebt, is het de moeite waard om de beschrijving van de kaarten in de materiaalontwerpgids te lezen.
Website ontwikkeling. De toekomst van kaartontwerp.
Aangezien het UI-patroon van de kaart voortdurend van vorm verandert om aan nieuwe vereisten te voldoen, heeft dit waarschijnlijk de grootste impact op het responsieve en app-ontwerp. Deze wijziging is deels gebaseerd op de "pagina-voor-pagina"-impact die Material Design heeft op Android-apps.
1. Technologie
Kaarten mogen niet lang statisch blijven. Naarmate de webimplementatie verbetert, zal ook hun vermogen om meer multimedia-inhoud te ondersteunen toenemen. We zullen waarschijnlijk veel gedetailleerdere elementen zien, zoals het automatisch bijwerken van inhoud, die de algehele ervaring niet vertragen.
Steeds vaker zal video afbeeldingen vervangen (een idee waar sommige ontwerpers al jaren mee flirten). Use Your Interface (hierboven) maakt gebruik van geanimeerde GIF's die de startpagina vullen met heel veel informatie.
2. Betrokkenheid verdiepen
In de nabije toekomst kan de creativiteit van het gebruik van kaarten ook toenemen en zullen het niet langer alleen maar links zijn. Zoals we kunnen zien in het materiaalontwerpvoorbeeld, verschillen kaarten in het niveau van interactie tussen zichzelf en de omgeving, zoals automatisch sorteren en realtime updates (bijvoorbeeld de weersvoorspelling).
Windows Phone heeft het automatisch sorteren van kaarten al geïntroduceerd, maar deze aanpak kan mogelijk worden toegepast op gebruikers van andere mobiele apparaten.
Maat 3
Om de trend van stripboekafbeeldingen bij te houden, gebruiken de kaarten ook het "groter is beter"-beleid.
Grotere kaarten zorgen voor meer detail en complexe typografie, wat op zijn beurt meer ruimte betekent voor een verbluffend visueel ontwerp. Afwisselend gebruikt met kleinere kaarten, bieden grote kaarten meer vrijheid in visuele zin.
HOE Arkitekter (hierboven) grote en middelgrote kaarten mixt in de navigatie. Sommige kaarten zijn links en sommige zijn slechts statische informatie. Brede openingen scheiden de kaarten, waardoor het ontwerp luchtig is.
4. Draagbare apparaten
Dankzij Google Glass zijn kaarten tegenwoordig een hoofdbestanddeel van draagbare UI-ontwerpen geworden.
Hoewel critici Google Glass misschien zien als een commerciële mislukking, geloven sommigen dat het een kans heeft op de markt. Wat er ook gebeurt, wearables moeten efficiënt gebruik maken van de ruimte. En in dit geval zijn kaarten de meest praktische keuze.
Ontwikkeling website 2016-2018. Uitgang:
Kaartontwerpen worden de basis van organisatie en functionaliteit op alle media en apparaten. Hun huidige vorm kan veranderen als ze parallel aan de technologie evolueren, maar hun aanwezigheid is gegarandeerd. Gedigitaliseerde vierkanten op schermen zijn immers nauwelijks de primaire vorm van kaarten. Vergeet niet dat tot voor kort een kaart slechts een vel papier was dat een reeks informatie over een bepaald onderwerp bevatte.
Lees een artikel over een ander - duotoon of duplex.
Webdesign is erg dynamisch. We zien voortdurend hoe het uiterlijk van sites verandert met de komst van nieuwe technologieën, methoden, richtingen en stijlen. Het leidende concept van vandaag is dus kaartontwerp.
Je ziet het overal, van websites van makelaars tot nieuwsportalen. Internetreuzen zoals Twitter, Facebook en Google gebruiken zelfs kaartontwerp.
Kaarten zijn in dit geval kleine rechthoeken gevuld met interactieve afbeeldingen en informatie. Ze zijn vooral populair geworden vanwege hun reactievermogen, esthetiek en bruikbaarheid.
Hoewel er veel misvattingen zijn over wat voor soort ontwerp als een kaartontwerp kan worden beschouwd, is één ding zeker: kaarten zijn niet alleen rechthoeken op websites. Om een bepaald ontwerp als kaartontwerp te kwalificeren, moet het functioneel en zelfvoorzienend zijn.
Misschien is de beste metafoor voor kaartontwerp het volgende gezegde: "Een kaart is plat, maar heeft twee kanten." Dat wil zeggen dat elke kaart niet alleen enige inhoud moet bevatten, maar de consumenten ook de mogelijkheid moet bieden om ermee te communiceren.
Simpel gezegd, bij kaarten gaat het niet alleen om mooi design, maar ook om gebruiksgemak.
Verschillende soorten kaartontwerp
Het ontwerp van de kaart heeft aanzienlijke veranderingen ondergaan sinds het begin. En nu kan het in de volgende stijlen worden gedaan.
1. Plat ontwerp
Het platte ontwerp van de kaart werd voor het eerst geïntroduceerd door Microsoft in 2006 en was gebaseerd op de stijl van de Metro GUI, die er behoorlijk solide en kleurrijk uitziet. Toegegeven, in de moderne versie worden gradiënten, schaduwen en squeemorphism op grotere schaal gebruikt.
2. Tijdschriftstijl
Ontwerp in tijdschriftstijl heeft een goede visuele balans nodig. De kaarten bevatten in dit geval een blok met een afbeelding en tekst die fungeren als een "teaser", dat wil zeggen, de bezoeker lokken naar meer gedetailleerde informatie op een andere pagina of site. Zoals de naam al aangeeft, wordt dit ontwerp gebruikt op tijdschriftensites en nieuwsportalen, maar is het ook geschikt voor andere inhoudsgerichte bronnen zoals blogs of portfolio's, evenals voor sites die regelmatig worden bijgewerkt.
Deze stijl is belichaamd op de sociale servicesite Pinterest en is een populaire trend geworden in het ontwerpen van thema's voor het WordPress-platform. Aanvankelijk bevatten de kaarten alleen links en een bepaalde hoeveelheid van een bepaald type inhoud. Ze kunnen nu meer links en inhoudstypen bevatten, waaronder video's, formulieren, afbeeldingen en tools voor het delen van sociale media. In sommige interfaces bieden kaarten een mini-interactie, zoals het in-/uitschakelen van Facebook-meldingen.
Ook bekend als de "metselwerk" -stijl, bevat het blokken die met elkaar zijn verbonden of verspreid over de lay-out.
Hoe kaartontwerp effectief te gebruiken?
Er zijn een aantal redenen waarom ontwerpen in kaartstijl zo populair zijn. Hier zijn er slechts een paar:
- Veel ontwerpstijlen zijn compatibel met dit formaat, van platte tot meer complexe ontwerpen.
- Het werkt goed met verschillende soorten inhoud en maakt het ook gemakkelijker om te consumeren.
- Het werkt goed met responsieve frameworks.
- Het geeft een georganiseerde en gestructureerde uitstraling aan veel informatie.
Er zijn geen vaste regels voor dit type ontwerp. Er zijn echter bijna altijd twee elementen aanwezig in effectieve kaartlay-outs: eenvoud en een rijke verscheidenheid aan inhoud. Er zijn ook technieken die de esthetiek en functionaliteit van kaartontwerp verbeteren.
Lege ruimte
Een gemeenschappelijk element in kaartontwerp is witruimte. Dit is nodig zodat alle elementen duidelijk zichtbaar en begrijpelijk zijn. Je hebt tenslotte alleen een gebied van 600 px en je moet ervoor zorgen dat de titel, call-to-action-knop, afbeeldingen en linktekst prominent aanwezig zijn en hun functie effectief uitoefenen.
De grote hoeveelheid witruimte rond elk element geeft 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 een beperkte ruimte worden geplaatst, om de aandacht te trekken. Als er geen afbeeldingen zijn, gebruik dan een artistiek lettertype of een creatieve titel om de aandacht van uw bezoekers te trekken.
Eenvoudige lettertypen
Het lettertype mag geen afbreuk doen aan de afbeelding. Gebruik hiervoor een eenvoudig lettertype in een goed leesbare kleur, d.w.z. zwart en grijs. De meest populaire, vanwege hun neutrale ontwerp en gemakkelijke leesbaarheid, zijn schreefloze lettertypen. Daarnaast is het aan te raden om één lettertype in verschillende groottes te gebruiken.
Onverwachte details
Het verrassingselement doet wonderen. Probeer onverwachte details toe te voegen, zoals een 3D-effect of aangepaste verwerking van de randen van de afbeelding, om uw ontwerp origineler te maken. Andere methoden die effectief zijn gebleken, zijn hover-effecten en kleuroverlays. U kunt het effect ook alleen toepassen op de meest significante inhoud om het visuele gewicht van elke kaart in evenwicht te brengen.
open raster
Zo belangrijk als de elementen binnen elke kaart zijn, zo belangrijk is de ruimte ertussen. Maak een rasterkader dat zowel wat contrast als gelijke afstand tussen de kaarten en hun elementen geeft. Dit wordt nog belangrijker als je kijkt naar de locatie van breekpunten in een responsieve lay-out.
bruikbaarheid
Design gaat niet alleen over esthetiek, maar ook over bruikbaarheid. Het ontwerp moet gebruikers aanmoedigen om actie te ondernemen: klik op de abonneerknop, lees het volledige artikel of koop het product. Het uiteindelijke doel van uw interface is om een gemakkelijke interactie te bieden die ervoor zorgt dat gebruikers de gewenste actie ondernemen.
Afgezien hiervan moet u ook controleren hoe elk interface-element werkt, vooral in de mobiele versie van de site. Dat wil zeggen, u 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 door middel van technieken zoals vegen (met uw vinger over het scherm schuiven) en tikken (korte aanraken op het scherm). Zorg er ook voor dat de knoppen duidelijk zichtbaar en gebruiksvriendelijk zijn. Dit vereist natuurlijk dat er voldoende ruimte tussen de elementen is om te voorkomen dat u per ongeluk de verkeerde knop aanraakt of de verkeerde actie start.
Kaarten sorteren
Zodra het kaartontwerp is voltooid, is de volgende stap om te bepalen welke informatie de kaarten zullen bevatten. Moet de inhoud worden gegroepeerd op type of onderwerp? Tot welke categorie behoort deze inhoud? De beste manier om al deze inhoud op een gebruiksvriendelijke manier te organiseren, is door kaarten te 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, hoewel de offline methode een meer individuele benadering biedt.
Kaartontwerp is een van de meest flexibele indelingsindelingen voor websites waarmee u een geweldige gebruikerservaring kunt creëren. De kaarten zijn ook esthetisch een lust voor het oog. Gebruikers zijn constant op zoek naar manieren om snel een grote hoeveelheid informatie te consumeren, maar het kaartontwerp maakt het eenvoudig en snel.
De feestdagen zijn voorbij en dat betekent dat het tijd is om op te vrolijken en na te denken over plannen voor de toekomst, aankomende projecten en vooruitzichten. Wij bij Wix wachten al zo lang als we ons kunnen herinneren met spanning en nieuwsgierigheid op het nieuwe jaar. Vooruit ligt 2015 en het zal zeker veel interessante dingen opleveren op het gebied van webdesign.
Natuurlijk kunnen we niet alles voorspellen wat er zal gebeuren, maar we hebben wel een aantal gissingen. Je herinnert je dat het niet alleen handig is, maar ook een modern platform, dus we volgen alles wat er gebeurt op de voet en we weten waar de wind van verandering waait.
Maak je veiligheidsgordels vast, beste vrienden, de reis naar de toekomst begint! Dit jaar wachten we op zeer interessante trends:
materiaal ontwerp
Een variant van het "platte" ontwerp, uitgevonden door Google. Het idee is gebaseerd op traditionele ontwerptechnieken en echte fysieke verschijnselen aangepast voor het web. Het resultaat zijn gelaagde interfaces die materiaal, verlichting en beweging uit de echte wereld kunnen overbrengen. Een voorbeeld van hoe het eruit ziet, is te zien op de link.
Animatie
Ghost-knoppen
Vergeet flitsende call-to-action-knoppen. Nu zijn eenvoudige en transparante elementen, gescheiden van de achtergrond door een dun kader, in de mode. Ze zijn meestal groter dan standaardknoppen en bevinden zich op de meest prominente positie op de pagina. Een bescheiden uiterlijk betekent helemaal niet dat niemand dergelijke knoppen opmerkt en niet indrukt, integendeel, mensen houden echt van hun elegante eenvoud en relevantie. We hebben trouwens net zulke elementen (en op de Urban Cup-website wordt deze trend al volop benut).
Verhaal vertellen
Storytelling in webdesign betekent dat de site een verhaal moet vertellen aan bezoekers - niet letterlijk natuurlijk, maar door de sensaties die een persoon heeft op het moment van bekijken. Om dit te doen, kunt u afbeeldingen en teksten gebruiken die verband houden met betekenis of interactief scrollen, zodat de lezer niet alleen een toeschouwer, maar ook een deelnemer is. Er zijn veel manieren om een verhaal te vertellen door middel van design en we hopen dat deze trend in 2015 nog populairder zal worden. Een goed voorbeeld van storytelling is te zien op deze Wix-site.
kaart ontwerp
Een flexibelere en democratischere versie van het zogenaamde "tegeldesign", waar de wereld in 2010 voor het eerst over hoorde dankzij de Pinterest-service. Kaarten worden nu gebruikt als startpunt om door de site te navigeren: dit is een aankondiging van het materiaal dat wordt geopend wanneer erop wordt geklikt. Het komende jaar zal het kaartdesign zich verder ontwikkelen, nieuwe stijlen en interactieve mogelijkheden verschijnen. Als je zo'n site wilt maken, dan raden we aan om als basis te nemen.
Video als achtergrond
Mooie video's die niet worden beperkt door het frame van de videospeler zien er cool uit en halen de rand van traditionele achtergrondafbeeldingen. En geen wonder - het is fris, mooi, je kunt met de video iets nieuws bedenken en het past goed bij het idee van verhalen vertellen, dat hierboven is genoemd. Zo'n achtergrond definieert het concept van de hele site, verlevendigt het en zorgt voor dynamiek. Kijk op de website van Zenit en zie hoe mooi het is.
Scrollen in plaats van klikken
Een goed voorbeeld van hoe mobiele interfaces webdesign hebben beïnvloed. De prevalentie 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 om te navigeren. Nu is het gebruikelijk om content op een aparte verticale pagina te plaatsen en deze niet in secties, maar in “schermen” op te delen. De Madsschou-site, gemaakt op Wix, illustreert dit idee perfect.
Micro-interacties
Het webdesign zal dit jaar worden beïnvloed door nieuwe manieren om websitebezoekers te betrekken. De logica is deze: elke keer dat je een persoon vraagt om een actie uit te voeren, ontstaat er een interactie. Op weg naar micro-interacties is een poging om zoveel mogelijk redenen te creëren voor sommige kleine acties. Klassieke voorbeelden zijn een e-mailabonnement of een functie waarmee u kunt beoordelen. Komt er nog iets nieuws in 2015? We zijn klaar om te beweren dat ja.
