7 regels voor het maken van een eenvoudig ontwerp
Houd het simpel, dom. Dit concept dateert uit 1960 toen de Amerikaanse marine het KISS-principe implementeerde, dat stelt dat de meeste systemen het beste werken als ze eenvoudig en niet ingewikkeld zijn. Hetzelfde geldt ook voor vrijwel elk ontwerpproject.
De meeste grafisch ontwerpers leren al vroeg in hun carrière over KISS. Dus hoe kun je het doen? Een eenvoudig ontwerp maken is iets gecompliceerder dan u misschien denkt. Hier zijn zeven regels om te ontwerpen, die u helpen alle rommel weg te snijden en een prachtig eenvoudig account te maken.
Ontdek ontwerpbronnen
1. Stel één doel per pagina in
Het begin van een eenvoudig ontwerp begint met een doel voor het project en specifieke doelen voor elke pagina van de website. Elke pagina moet gebruikers naar één actie leiden, behalve de navigatie en voettekst.
Dit kan van alles zijn: klikken op een link, informatie invoeren in een formulier, een video bekijken of een game spelen. Maar elke pagina moet gericht zijn op een enkele gebruikersactie of conversie.
Te veel dingen om te doen kunnen gebruikers overweldigen. Ze kunnen uit het oog verliezen welke acties moeten worden uitgevoerd en kunnen de minder wenselijke keuze maken. Plan het ontwerp zo dat elke pagina gebruikers naar één doel leidt. Elke bruikbare knop boven de scroll en onder de scroll op dezelfde pagina zou hetzelfde moeten doen. Deze consistentie helpt gebruikers te begrijpen waarom ze op uw site zijn en wat ze moeten doen; de eenvoud van die keuzes maken het ontwerp gemakkelijk en aantrekkelijk.
2. Blijf bij twee typefamilies
Er zijn zoveel ontwerprichtlijnen die drie lettertypen voor een project aanbevelen. Dat kunt u nog meer stroomlijnen met twee robuuste typefamilies.
Zoek naar een typefamilie die meerdere gewichten bevat met veel contrast tussen de normale en vetgedrukte of zwarte opties. Kies voor nog meer flair voor een schermkeuze met een paar alternatieve tekens die u in oversized koppen kunt gebruiken.
Het enige dat u hoeft te doen, is mixen en matchen van een body-lettertype en display-lettertype om geweldige combinaties van letters voor het hele ontwerp te krijgen. Gebruik twee typen families, net zoals u zou doen als u meer opties met specifiek gebruik voor bepaalde gewichten of stijlen zou selecteren.
U zult merken dat dit u kan helpen bij het creëren van een zeer leesbaar en gebruiksvriendelijk typografisch palet dat gemakkelijk te beheren is en visuele consistentie heeft.
3. Gebruik consistente uitlijning
Links, midden of zelfs naar rechts - welke uitlijning je ook leuk vindt, blijf er in het hele ontwerp bij. Dit omvat het uitlijnen van soortgelijke items, zoals tekstvakken en elementen die niet hetzelfde zijn, maar in groepen passen.
Aanpasbaar doet dit geweldig met de tekst op de startpagina-schuifregelaar. Ondanks tekst met een verschillend aantal regels op de afbeelding, komt elke kop overeen met de call-to-action-knop. De afstand tussen elementen is ook consistent.
Wat meer is, is dat deze consistente uitlijning doorwerkt op de scroll met andere kop- en CTA-paren.
De uitlijning komt overeen met de stroom van de schuifregelaar, die ook in een complementaire richting beweegt. Links- en middenuitlijningen zijn de meest gebruikelijke opties als het gaat om tekstelementen omdat ze het meest leesbaar zijn. Bij langere tekst heeft links uitlijnen de voorkeur.
4. Breng hiërarchie tot stand
Gebruikers hoeven niet na te denken over waar ze naar moeten kijken of hoe ze over een ontwerp kunnen bewegen. Zelfs de eenvoudigste visuele composities moeten een duidelijke hiërarchie hebben.
Het begint met een dominant beeld. Het kan een afbeelding of video- of tekstweergave zijn of iets anders dat een eerste indruk zal maken.
Dan moet er een soort tekst zijn die de gebruiker vertelt wat het ontwerp en de website proberen te communiceren. Dit heeft meestal de vorm van een eenvoudige kop die werkt met de dominante visual.
Ten derde is een secundair stukje tekst of actie dat gebruikers moeten voltooien. Het laatste visuele element is een navigatiemenu. Gebruikers verwachten al deze elementen te vinden en het oog is getraind om in principe in deze volgorde door de elementen te bewegen. Maak het hen gemakkelijk door op die manier te ontwerpen.
5. Geef elementen voldoende ruimte
Als je het nu nog niet weet, leg dit dan vast in het geheugen: Witte ruimte is je vriend.
Geef elk element in het ontwerp voldoende ruimte. Ruimte zal helpen de aandacht te vestigen op individuele elementen, "ruimte" in beslag te nemen, zodat u niet in de verleiding komt het canvas te vervuilen en een algemeen ontwerp met focus te helpen creëren.
De truc om de ruimte goed te gebruiken, is consistentie. Stel regels in voor de hoeveelheid ruimte die individuele elementen omgeeft of tussen regels tekst past. Als het ontwerp er te kaal uitziet, moet je misschien wat afstand nemen. U zult weten dat de spatiëring juist is wanneer u het ontwerp fris opent en rechtstreeks naar de plaatsen gaat die u als eerste wilt zien. (Weet je niet zeker wat ze zijn? Ga terug naar nr. 4 - Hiërarchie vaststellen.)
6. Versterk contrast
Ontwerpelementen met hoog contrast - van kleurkeuzes tot de grootte van elementen - kunnen een project precies de juiste hoeveelheid visuele finesse geven die het nodig heeft, zelfs in de meest minimale kaders.
Probeer voor een trendy optie een helder, contrastrijk kleurenpalet om de aandacht van de gebruiker te trekken. Gewaagde kleuren zorgen ervoor dat een eenvoudig ontwerp complexer en interessanter aanvoelt dan een zwart-witoptie. Om optimaal gebruik te maken van contrasterende kleuren, kiest u voor tinten van tegenovergestelde posities op het kleurenwiel met vergelijkbare verzadigingen. Als die optie u te veel is, probeer dan andere kleurenwielparen. (Misschien vindt u zelfs een onverwachte nieuwe favoriet, zoals de combinatie van paars en groenblauw hierboven.)
7. Gebruik consistente pictogrammen en elementen
Consistentie in ontwerp is een van de best (en slechtst) bewaarde geheimen van moordend ontwerp. Het is een van die dingen die veel te vaak wordt vergeten, omdat ontwerpprojecten bezaaid zijn met meerdere knopstijlen of pictogrammen voor sociale media die gewoon niet overeenkomen met de rest van de iconografie van de website.
Gebruikersinterface-elementen mogen geen bijzaak zijn.
Het is belangrijk om een pictogram en een gebruikersinterface-elementenset en -regels te maken en deze op dezelfde manier door het hele project te gebruiken. (U kunt zelfs een pictogramlettertype of een kit met gebruikersinterface-elementen kopen of downloaden als u deze niet helemaal zelf wilt maken.)
Kies een kleur voor elementen, gebruik dezelfde zweefactie of effect voor elk (een voor elementen die kunnen worden aangeklikt en een andere voor elementen die dat niet zijn) en grootte-elementen op basis van gebruik. (Het is acceptabel om zowel een pictogramformaat als een extra grote optie te hebben voor elementen die iets grafischer zijn.)
Praticca Vending Machines gebruikt bijvoorbeeld extra grote pictogrammen om gebruikers te laten weten dat er meer informatie is. A + bevindt zich in een gekleurd pictogram. Behalve de kleur zijn alle drie de pictogrammen identiek. Ze doen allemaal hetzelfde bij zweven en werken allemaal op dezelfde manier als een gebruiker klikt. Hetzelfde pictogram wordt overal op de site kleiner gebruikt om nieuwe stukjes inhoud te starten en gebruikers te helpen de kopie te scannen.
Gevolgtrekking
Een eenvoudig ontwerp hoeft niet helemaal minimaal te zijn of leuke elementen of goodies voor de gebruikersinterface te missen. Een eenvoudig ontwerp is zeer bruikbaar en intuïtief, waardoor gebruikers zonder vragen of ingewikkelde instructies kunnen deelnemen.
Hoewel er plaats is voor complexere websites of gebruikersinteracties, kunnen de meeste website-ontwerpen profiteren van de KISS-aanpak. Denk er niet over na, en gebruikers hoeven dat ook niet te doen.
