10 Web Design-geboden voor elk project

Heeft u een rulebook als het gaat om het ontwerpen van websites? Er zijn enkele regels die op vrijwel elk webontwerpproject van toepassing zijn - laten we ze de 'webdesign-geboden' noemen.

Hoe groot of klein de website ook is, deze regels vormen de basis voor een goed ontwerp. Als je deze basisrichtlijnen volgt en ze voor elk project dat je start meeneemt in je denken, vermijd je veel van de valkuilen waar ontwerpers op kunnen stuiten!

1. U zult consequent zijn

Maak het ontwerp zo gemakkelijk mogelijk voor gebruikers om mee te communiceren

Consistent ontwerp is eenvoudig te gebruiken en te begrijpen. Gebruikersbetrokkenheid en acties, evenals visuals, moeten qua uiterlijk en gebruik in één ontwerp hetzelfde zijn.

Dit betekent dat knoppen dezelfde kleur hebben en dezelfde zweeftoestanden gebruiken om gebruikers te laten weten hoe ze met elkaar moeten omgaan, koppen dezelfde grootte hebben en hetzelfde lettertype gebruiken in het hele ontwerp, en elementen zoals kleuren volgen een palet dat identificeerbaar is en geassocieerd met het merk.

Andere visuele elementen moeten ook een consistente stijl volgen, met een stijl- en gebruiksplan voor elementen zoals pictogrammen of fotografie, video of illustraties. Het ontwerp moet een stem hebben die wordt gebruikt voor kopieerblokken die passen bij de algehele esthetiek.

Al deze elementen van consistentie dragen bij aan de algehele bruikbaarheid, waardoor het ontwerp voor gebruikers zo gemakkelijk mogelijk wordt gemaakt.

2. U zult witruimte gebruiken

Extra ruimte rond elementen kan helpen om scheiding te creëren en ze gemakkelijker leesbaar te maken.

Het is niet nodig om elk afzonderlijk element in de ruimte boven de scroll te proppen. Gebruik witruimte om ritme en flow vast te stellen, visuele hiërarchie te creëren en gebruikers te helpen bij het navigeren door het ontwerp.

Als de inhoud goed is, scrollen ze.

En witruimte kan die gebruikersactie juist aanmoedigen door het oog van het scherm af te trekken.

Witruimte is nog belangrijker omdat de schermafmetingen kleiner worden. Extra ruimte rond elementen kan helpen om scheiding te creëren en ze gemakkelijker leesbaar te maken. (Bedenk hoe voordelig een beetje extra ruimte kan zijn als het gaat om gemakkelijk tikken op knoppen.)

Weet u niet zeker waar u witruimte in het ontwerp moet opnemen? Begin hier:

• Rond knoppen of andere interactieve elementen
• Als regelafstand tussen regels van het type om het lezen gemakkelijker te maken
• Tussen elementen zijn de tings oostelijk om van elkaar te onderscheiden, zoals het omwikkelen van foto's die zijn ingesloten in tekstblokken
• In formuliervelden zodat ze gemakkelijk te tikken zijn op mobiele schermen
• Rond elk element waarop u gebruikers wilt laten focussen

3. U zult een raster gebruiken

Een raster is de basis van gebruikerservaring. Wanneer u ontwerpt met een raster, is de uiteindelijke website nauwkeuriger, consistenter en worden de elementen in een volgorde geplaatst die visueel zinvol is.

Rasters zijn zowel horizontaal als verticaal, hoewel het meest bekende raster voor webdesign wellicht het verticale raster met 12 kolommen is voor het uitlijnen van elementen.

Het raster zie je alleen in het ontwerpproces en als je problemen hebt met het vinden van plaatsingen voor elementen of het maken van een georganiseerde omtrek, kan een raster een totale redder in nood zijn.

4. U zult gebruikerspatronen niet vergeten

Gebruikers doen dingen op een bepaalde manier en verwachten specifieke dingen van je ontwerp. Om zoveel mogelijk succes te hebben, moet het ontwerp algemeen aanvaarde gebruikerspatronen gebruiken (terugkerende oplossingen voor ontwerpproblemen), zodat mensen precies weten hoe het ontwerp functioneert.

Veelvoorkomende gebruikerspatronen zijn:

• Volgorde van informatie in formulieren, beginnend met een naam of e-mailadres en eindigend met "indienen"
• Plaatsing van navigatiemenu's
• Locatie en klikbare karakter van het winkelwagenpictogram voor e-commerce
• Hoe meldingen werken
• Pictogrammen voor onder meer zoeken en chatten

UI Design Patterns heeft een lange lijst met gebruikerspatronen voor alle soorten ontwerpsituaties.

5. U zult overeenkomsten gebruiken in UI-acties

Elk element in een websiteontwerp zou moeten werken zoals elk ander element van hetzelfde type. Deze elementen moeten ook een visuele identiteit hebben, zodat gebruikers in één oogopslag weten wat ze zijn en wat ze doen.

Er zijn zoveel acties in de gebruikersinterface die in een ontwerp kunnen worden ingebouwd dat het naleven van het Gestalt-principe van gelijkenis een must is. Het groeperen van visuele elementen en acties zodat ze visueel identificeerbaar zijn, zal bijdragen tot een betere algehele ervaring voor gebruikers.

6. U zult typografie goed gebruiken

Ga een stap terug van het ontwerp en kijk of de letters op afstand gemakkelijk te lezen zijn.

Je hoeft geen meester-typograaf te zijn, maar het helpt zeker.

Veel van wat een goed ontwerp is, is geworteld in leesbaarheid en leesbaarheid. En die concepten zijn afhankelijk van hoe u lettertypen kiest en gebruikt.

Kies bij twijfel voor eenvoudige letterparen zoals een serif en sans serif. Ga een stap terug van het ontwerp en kijk of de letters op afstand gemakkelijk te lezen zijn. Kijk dan naar de belettering op een klein canvas, zoals een telefoonscherm, om ervoor te zorgen dat het ook daar in één oogopslag gemakkelijk te lezen is.

Probeer het type te gebruiken in een omgeving met een hoog contrast, zoals een licht type op een donkere achtergrond of een donker type op een lichte achtergrond, zodat elk woord gemakkelijk te lezen is.

7. U zult retina-schermen niet vergeten

Zelfs de kleinste schermen kunnen elementen en afbeeldingen weergeven met bijna pixelperfectie.

U moet overwegen hoe u met afbeeldingen, pictogrammen en andere elementen omgaat, zodat alles prachtig wordt weergegeven, ongeacht de schermgrootte. Waar mogelijk kan het gebruik van een vectorformaat de ideale oplossing zijn, wat een van de redenen is waarom SVG steeds populairder wordt.

Als u geen afbeelding heeft die de resolutie heeft die bij de gebruikelijke schermformaten past, gebruik deze dan niet. Geen enkel beeld is beter dan een slecht of korrelig beeld.

8. Gij zult eerlijk zijn

Uw ontwerp moet trouw zijn aan uw kleine bedrijf, informatie of merk en transparant zijn in wat u doet. Steel geen ontwerp of afbeelding, stop niet met valse zoekwoorden om verkeer te genereren en wees trouw aan wie en waar uw inhoud over gaat.

Met zoveel webruis willen gebruikers interactie hebben met ontwerpen die authentiek zijn. Gebruikers ertoe verleiden iets te doen of zich aan te melden voor een product of dienst of hen gewoon te misleiden over een onderwerp of informatie, moet in strijd zijn met uw persoonlijke ethische code. Neem geen projecten aan die dit van het ontwerp verwachten.

9. Gij zult de toegankelijkheid niet negeren

Het web moet door zoveel mogelijk mensen kunnen worden gebruikt. En hoewel het misschien moeilijk klinkt om ervoor te zorgen dat het ontwerp toegankelijk is, is het niet zo ingewikkeld als je zou denken.

Google heeft een geweldige gids voor toegankelijkheid van websites, die het als volgt definieert:

In het algemeen bedoelen we dat wanneer we zeggen dat een site toegankelijk is, de inhoud van de site beschikbaar is en dat de functionaliteit ervan door letterlijk iedereen kan worden bediend. Als ontwikkelaars is het gemakkelijk om aan te nemen dat alle gebruikers een toetsenbord, muis of touchscreen kunnen zien en gebruiken en op dezelfde manier met uw pagina-inhoud kunnen communiceren. Dit kan leiden tot een ervaring die voor sommige mensen goed werkt, maar problemen veroorzaakt die variëren van eenvoudige ergernissen tot show-stoppers voor anderen.

Toegankelijkheid verwijst dus naar de ervaring van gebruikers die zich mogelijk buiten het beperkte bereik van de 'typische' gebruiker bevinden, die anders toegang tot of interactie met dingen hebben dan u verwacht. Het gaat in het bijzonder om gebruikers die een bepaalde beperking of handicap ervaren - en houd er rekening mee dat die ervaring mogelijk niet-fysiek of tijdelijk is.

Veel van de principes van goed ontwerp, zoals grootte, contrast en ruimte, dragen bij aan de algehele toegankelijkheid.

WebAIM heeft een checklist en andere tools om u te helpen bepalen of uw ontwerp toegankelijk is. De checklist omvat vier gebieden die betrekking hebben op toegankelijkheid: is het ontwerp waarneembaar, bedienbaar, begrijpelijk en robuust?

10. U zult ontvankelijk zijn

In 2018 zou het vrijwel vanzelf moeten gaan, maar je website moet responsive zijn. Dat omvat elk element, van tekst tot afbeeldingen tot knoppen tot het algemene kader.

Elk ontwerp moet op elk apparaat werken. Periode.

Gevolgtrekking

Een solide set regels kan u helpen sneller in een ontwerpproject te komen en consistenter te werken. Merk op dat geen van deze geboden u vertelt hoe een project eruit zou moeten zien; ze zijn geworteld in de theorie van hoe u elke website schetst en maakt.

Heeft u aanvullende regels voor webdesign om aan deze geboden toe te voegen? Laat ons weten wat ze zijn op social media. Zorg ervoor dat u Design Shack tagt!