De kunst om betere websites te bouwen

Het maken van websites is tegenwoordig bijna een gewone vaardigheid geworden, en er is zoveel overvloed aan sites die concurreren met de uwe dat alles wat u kunt doen om u te onderscheiden van de rest, een enorme hulp zal zijn.

Wat kunnen we doen om onze sites opgemerkt, bewonderd en aandacht te geven? Het vereist een zekere aanpassing van de manier waarop we denken over het ontwerp van de site. In dit korte artikel zullen we enkele van de belangrijkste dingen bekijken die nodig zijn om betere websites te maken.

Inhoud moet voorrang krijgen

Als ontwerpers willen we altijd graag geweldige ontwerpen maken. Natuurlijk is dit niet van toepassing op degenen die zich alleen maar ontwerpers noemen, omdat ze hun ziel niet toestaan ​​om op de pagina te huilen, terwijl ze eeuwig inspiratie in eeuwige glorie vereeuwigen in elektronische glorie.

Wat site-eigenaren willen, is natuurlijk dat mensen hun inhoud lezen, er iets mee doen en misschien zelfs iets kopen. Mooie foto's zijn geweldig om te hebben, maar niet als ze ervoor zorgen dat de gebruiker de inhoud kan ervaren.

Als dit het geval is, moet wat we zouden kunnen beschouwen als "stilistische verbeteringen" zeker een achterwaartse plaats innemen in de hoofdpresentatie. Als je iets moet laten vallen, moet dit altijd het stilistische element zijn.

afbeelding met dank aan

Responsief ontwerp is essentieel (behalve wanneer dat niet het geval is)

Responsive design is tegenwoordig zo belangrijk vanwege het enorme aantal mensen dat hun telefoons gebruikt voor surfen op het web en het feit dat de meeste telefoonbrowsers nog steeds een slechte taak hebben om webpagina's weer te geven.

Er zijn een paar opvallende uitzonderingen, maar deze zijn zeer zeldzaam. Dergelijke uitzonderingen zouden iets zijn als iets behoeften om op de pagina te worden weergegeven om de inhoud zinvol te maken, en waar deze van een ingestelde grootte moet zijn. Sommige dingen zouden gewoon niet werken als ze te veel worden verkleind.

Zaken zoals deze moeten zorgvuldig worden behandeld. Hoe u het zou doen, is een speciale responsieve kolom gebruiken die alleen wordt weergegeven wanneer een schermgrootte wordt gedetecteerd die te klein is om de inhoud weer te geven, met een bericht waarin de gebruiker wordt gevraagd de inhoud op een groter scherm te bekijken.

Dit zal over het algemeen iets zijn dat je moet vermijden, maar in uitzonderlijke omstandigheden is het acceptabel zolang het met tact wordt afgehandeld.

illustratie met dank aan

Belangrijke inhoud moet voor de hand liggen

Hoewel het duidelijk moet zijn, lijkt het er vaak niet op. Ontwerp moet geen belangrijke dingen subtiel maken. Het moet maken wat belangrijk is opvalt en gezien wordt door de toeschouwer eersten toch proberen zoveel ontwerpers 'creatief' te zijn en die belangrijke items te onderwerpen.

Maak deze fout niet. Gebruikers mogen niet lang op de site blijven, dus het is cruciaal om het merk voor hun ogen te krijgen. Zelfs als ze snel vertrekken, heb je op zijn minst een indruk gemaakt. Later wanneer ze het merk tegenkomen, zullen ze het herkennen als vertrouwd en zullen ze waarschijnlijk eerder een merk kopen van een vertrouwd merk.

Wat er gebeurt, is een soort van cognitieve zelfbedrog, waarbij de bewuste geest zegt: "Als ik hiervan heb gehoord, moet het goed zijn." Daarom zijn bedrijven bereid om miljoenen dollars uit te geven om hun logo op een bord te krijgen. een sportevenement.

Wat is echter nog belangrijker? Welnu, het antwoord op die vraag hangt af van het soort site dat je aan het bouwen bent. Wat u moet doen is nadenken over wat u zou zoeken als u deze site zou bezoeken. Het is meestal heel anders dan wat een corporate honcho zal zeggen dat ze willen laten zien. De dingen waar mensen naar op zoek zijn, zijn de belangrijke dingen om prominent op te nemen en aan te merken.

Stilistische elementen moeten gemakkelijk in elkaar overvloeien

Uw ontwerpversieringen moeten de kijker op een goede manier verbazen. Ze moeten eerder genot opwekken dan ergernis. Heel vaak worden ontwerpers meegesleept door dingen toe te voegen aan een pagina om de "wow-factor" te genereren zonder te zorgen dat deze dingen niet het potentieel hebben om irritant te zijn.

Je moet er ook voor zorgen dat dergelijke verfraaiingen gracieus verslechteren. Als ze niet goed kunnen worden weergegeven, zouden ze helemaal niet moeten worden weergegeven en zou het moeten lijken alsof ze er nooit waren geweest.

gif met dank aan

Lagen om te redden

Je kunt deze verfraaiingen toevoegen door het gebruik van lagen. Mensen die responsieve ontwerpen maken lijken te zijn vergeten dat ze een 3D-stack hebben om mee te werken en daardoor missen ze het ware potentieel van responsief ontwerp.

Een voorbeeld van hoe dit werkt ... Stel je voor dat je een site hebt waar je een lay-out hebt met meerdere breekpunten. Bij de conventionele manier van denken zou je alles op één laag plaatsen, wat leidt tot verdringing op kleinere schermen, waardoor je dingen moet laten vallen, of (zoals gewoonlijk) een afschuwelijk ontwerp laten zien.

Die laatste twee woorden zouden nooit samen moeten gaan als je het hebt over iets dat je hebt gemaakt. Het goede ding is dat je de situatie echt kunt vermijden door het gebruik van lagen.

Door stijlelementen op een afzonderlijke laag te stapelen, kunt u ze op uw gemak verbergen of tonen, onafhankelijk van de inhoudlaag, en beide lagen zijn volledig responsief.

Stel dat de gebruiker de site op een monitor bekijkt met een resolutie van 2560 x 1440. Onze onderste inhoudlaag beslaat de volledige breedte van het scherm, maar we kunnen er marges op plaatsen die de inhoud binnen een decoratieve rand plaatsen die elke gewenste grootte kan hebben.

Plaats die decoratieve rand op de bovenste laag zonder marges, we kunnen alleen de breedte instellen om gelijk te zijn aan de grootte van de marges op de onderste laag.

Naarmate de gebruiker door verschillende schermbreukpunten naar beneden gaat, kunnen de twee lagen op deze manier blijven samenwerken, en de bovenste laag kan zelfs totaal verschillende randen voor elk breekpunt weergeven. Totdat we bij het laatste breekpunt de bovenste laag helemaal weggooien, gewoon door deze te verbergen.

Het potentieel is hier duidelijk. Heeft u een groot aantal irritante linkadvertenties in de rechterkolom? U kunt ze verbergen voor gebruikers met kleine schermen, en bovendien kunt u ze op verzoek opnieuw toevoegen met jQuery.

Eindelijk een manier om content van ontwerp te scheiden

Dit is de manier waarop webpagina's zouden moeten werken. Door uw "extra's" op een volledig afzonderlijke laag op te slaan, krijgt u een nog grotere scheiding van inhoud en ontwerp, omdat op die bovenlaag op elk moment kan worden geknoeid zonder de onderste laag te beïnvloeden, en omgekeerd.

Veel plezier met het experimenteren met de vrijheid die dit voor je opent, zodat je kunt spelen met allerlei creatieve ideeën, terwijl de inhoud zelf niet wordt beïnvloed.

Het is precies hetzelfde concept als het gebruik van virtuele machines voor sandboxing. Wat u ook doet, u kunt de pagina-inhoud niet beïnvloeden, omdat deze is geïsoleerd van de decoratieve laag.

header afbeelding met dank aan Matt Carlson

Bogdan Rancea

Bogdan is een van de oprichters van Inspired Mag en heeft in die periode bijna 6 jarenlange ervaring opgebouwd. In zijn vrije tijd studeert hij graag klassieke muziek en onderzoekt hij beeldende kunst. Hij is ook behoorlijk geobsedeerd door fixies. Hij is al eigenaar van 5.