Het geheim van effectief kaartgebaseerd ontwerp
Dus u wilt trendy worden met een interface in kaartstijl? Dat is waarschijnlijk een geweldig idee; kaarten zijn een populaire en gebruiksvriendelijke optie voor alle typen digitaal ontwerp op verschillende apparaatgroottes.
De sleutel tot een kaartontwerp is iets maken waar gebruikers op willen klikken. (Dat is de sleutel tot een geweldige kaart.) Een kaart moet dienen als een container voor een specifiek stukje inhoud - inhoudlink, aanmelding, videospeler, enzovoort, waarmee gebruikers willen communiceren.
Zo ontwerp je het ...
Begin met een zwart-wit kader
Het klinkt vrij eenvoudig: begin met een zwart-wit draadframe voor het ontwerp. Denk na over de intentie van de kaart en welke delen ervan klik of tappable zullen zijn. (De volledige kaart kan als een link dienen)
Plan voor elementen zoals spatiëring, afbeeldingen en typografie zodat u de kaart zonder kleur of verfraaiing kunt zien. Zie het als de "speelkaart" -fase van het ontwerp. Alle elementen van de kaart zijn er. Lijkt het een kader dat gemakkelijk te begrijpen is?
Bedenk hoe u het vanaf deze fase zou gebruiken. Waar zou je klikken voor een actie? Zijn het patroon en resultaat duidelijk? Hoe ga je terug of vooruit? De antwoorden op deze vragen moeten relevant zijn zonder signalen zoals een rode "klik hier" -knop die op het scherm knippert.
Zoals bij elk ander project, zal het uiteindelijke ontwerp waarschijnlijk ook niet werken als de omtrek niet in zwart-wit werkt.
Gebruik overdreven ruimte
De grootste uitdaging op het gebied van kaarten is het creëren van een compact ontwerp dat niet rommelig aanvoelt. Dat is waar witruimte binnenkomt. En je zult er meer van willen gebruiken dan eerst comfortabel voelt.
De toevoeging van witruimte geeft elementen meer ruimte om te ademen, waardoor de algehele kaart ruimer lijkt en de leesbaarheid verbetert.
Over het algemeen wilt u wellicht beginnen met tweemaal de afstand die u normaal tussen elementen in overweging zou nemen. Dakgoten moeten extra breed zijn en de regelafstand kan ook de extra kamer gebruiken. De extra ruimte zal u helpen een open ontwerp te creëren en de inhoud duidelijker te organiseren. De kaart heeft een vrij beperkt canvas en moet passen op een enkel scherm op een telefoon en een gedeelte van het scherm van vergelijkbare grootte op grotere apparaten zoals tablets of desktops. Kaarten kunnen ook concurreren met andere kaarten voor aandacht op grotere schermen. Toegevoegde witruimte helpt het hele ontwerp opener te voelen en gemakkelijk in te duiken.
Voeg natuurlijke kleur en schaduw toe
Nu bent u klaar om na te denken over kleur en schaduw voor het ontwerp. Houd het natuurlijk en imiteer de realiteit in de schaduw en stijlen van het ontwerp.
Nee, we hebben het hier niet over skeuomorfisme, we hebben het over het creëren van kleur met natuurlijke contouren en schaduwen. Bedenk hoe een kaart wordt bekeken. De gebruiker zou hetzelfde gevoel moeten krijgen alsof hij het werkelijk vasthoudt.
Gebruik enkele basisregels van de natuurkunde om elke kaart te bedenken (en te ontwerpen) zoals deze zou worden gehouden:
- Verlichting moet enkele schaduwen op de achterkant en onderkant werpen.
- Het donkerste deel van het ontwerp is waarschijnlijk aan de onderkant dankzij de lichtomstandigheden, die normaal van boven komen.
- Vermijd inhoud in gebieden die vereist zijn voor het houden van de kaart.
- Touchpoints (en de bijbehorende call-to-action) moeten focal points zijn en gemakkelijk te gebruiken. (Net zoals het gezicht van een speelkaart in het midden van het ontwerp staat.)
- Eén kaart is gelijk aan één bit informatie.
Maak eenvoudige lagen
Nu u aan de natuurkunde denkt, kunt u het naar een hoger niveau tillen met eenvoudige layering om een uniforme kaartstijl voor de hele interface te creëren. Weet je niet waar te beginnen? Google's Material Design-richtlijnen zijn een geweldig startpunt.
"In het ontwerp van het materiaal worden de fysieke eigenschappen van papier vertaald naar het scherm. De achtergrond van een toepassing lijkt op de platte, ondoorzichtige textuur van een vel papier.
Het gedrag van een toepassing bootst het vermogen van het papier na om opnieuw gesorteerd, in willekeurige volgorde geschud en samengebonden te worden in meerdere vellen. Elementen die buiten toepassingen leven, zoals status- of systeembalken, krijgen een andere behandeling. Ze staan los van de app-inhoud eronder en dragen niet de fysieke eigenschappen van papier.
Breek dit op en het gaat terug naar het uiterlijk en fysiek aanvoelen van een digitaal object. En als gebruikers het willen aanraken, willen ze erop klikken. Het concept is zo simpel.
Blijf bij eenvoudige lettertypen
Als het op typografie aankomt, zijn eenvoudige schreefloze lettertypen vaak het antwoord. Vermijd superdunne of verkorte opties, omdat deze wat taaier kunnen zijn voor de ogen.
De meeste kaarten werken het beste met twee lettertype-opties (zelfs als ze van dezelfde familie zijn) - iets voor het hoofdgedeelte en een ander voor de kop of call-to-action. De belangrijkste factor als het gaat om typografie is om te onthouden dat er voldoende contrast is, zodat tekstelementen gemakkelijk te lezen zijn. Vergeet niet om het contrast tussen de lettertypen en het contrast tussen de achtergrond en tekstelementen voor elke kaart op te nemen.
Beperk UI-elementen
Herhaal na mij: één kaart staat voor één actie.
Dat betekent dus waarschijnlijk dat u niet een aantal elementen van de gebruikersinterface zoals knoppen in het hele ontwerp hoeft op te nemen.
U hebt misschien zelfs helemaal geen knop nodig in een kaartstijlontwerp.
Maar als u denkt dat gebruikers een visuele keu nodig hebben, is één knop voldoende. Houd de vorm en het ontwerp eenvoudig - nogmaals, de Material Design-aanpak is een goede optie - en blijf bij slechts één knop.
Een knop is waarschijnlijk het enige UI-element dat u nodig hebt. Dit is je ontwerpdoel.
Conclusie
Er is geen magische formule voor de perfecte kaart, maar er zijn enkele ontwerpkeuzes die u kunt maken die elke gebruiker aanmoedigen om te klikken (of tikken). Houd je ontwerp gecentreerd in de realiteit, volg een minimalistische benadering met veel ruimte en contrast, leg de nadruk op eenvoudige typografie en maak een enkele actie voor elke kaart.
Het volgen van deze outline helpt je om projecten in kaartstijl die gebruikers willen gebruiken, het beste in te beelden en te conceptualiseren. Combineer deze ideeën met ontwerptheorie en je gekke vaardigheden voor een geweldig project dat leuk zal zijn voor gebruikers en esthetisch on-trend.