Details in webdesign

Ik hou ervan om extra aandacht te besteden aan details. Details maken het product en hebben een positief effect op de algehele beleving van een website of een app: het maakt het product af en verbetert de usability. Ik vind het ontzettend leuk om hiermee bezig te zijn, zowel in de ontwerpfase als tijdens de ontwikkeling. In dit blog geef ik een aantal voorbeelden van wat je kan verwachten van een website gemaakt door ons.

Favicons

Een favicon is het icoon van de website, die je vaak in de browser ziet naast het webadres of het tabje. Hier kun je een website aan herkennen. Iedere internetbrowser geeft deze op een andere manier weer en iedere (vaak mobiel) apparaat heeft een eigen icoon nodig als een website op het homescherm moet worden opgeslagen. Vooral dit laatste wordt bij veel websites vergeten.

Transitions

Een knop is van zichzelf niet zo interessant. De interactie is saai, terwijl de engagement en user experience van een website beter wordt als je de interactie leuker maakt. Op de meeste websites verandert een knop nog wel van kleur als je er met de muis overheen gaat. Op deze manier weet een gebruiker dat hij of zij er op kan klikken. Er wordt bij dit soort statustransities helaas vaak geen animatie toegevoegd. De kleur verspringt zonder mooie transitie. Op onze websites voorzien we alle interactieve elementen van nette en plezierige animaties.

Backend

WordPress is een prachtig Content Management Systeem (CMS), maar het moet wel op de juiste manier worden ingericht. WordPress bevat veel functionaliteit die lang niet op alle websites gebruikt worden, omdat ze niet relevant zijn. Deze functies zouden dan ook niet zichtbaar moeten zijn. Daarnaast kent WordPress gebruikersrollen. Hiermee is het mogelijk om verschillende niveaus van toegang tot de backend aan te maken. Als je als gebruiker bijvoorbeeld alleen teksten en foto’s wilt toevoegen aan je website. zijn de overige opties niet zichtbaar. Dit is belangrijk, want er zijn veel opties waarmee je een website om zeep kunt helpen. We steken veel tijd in het maken van een zo gebruiksvriendelijke mogelijk admin-paneel. Zo is het eenvoudiger om je website aan te passen. Zie hieronder de standaard interface van WordPress voor onze eigen website en daaronder de aangepaste versie voor een eindgebruiker.

User interfaces op grote mobiele apparaten

De schermen van telefoons worden steeds groter, denk aan de Plus iPhones en de recentere iPhone X, de Google Pixel of de Samsung Galaxy en Notes. Deze grote schermen en krachtigere hardware zorgen ervoor dat we als webdesigners mooiere ervaringen kunnen leveren op mobiele apparaten. Echter wordt een telefoon vaak met één hand bediend. Dan is het vervelend als je je hand moet uitrekken om met je duim net bovenin op de menuknop te drukken. Wij zoeken liever naar manieren om de navigatie op grotere schermen toegankelijk te houden. Zie hieronder twee voorbeelden waarbij de navigatie door ons aan de onderkant van het scherm is geplaatst.

iPhone X 'notch'

De veelbesproken ‘notch’ van de iPhone X bevat alle sensoren en camera’s die nodig zijn voor FaceID (het unlocken van je telefoon met behulp van je gezicht). Deze notch zorgt er standaard voor dat er witte balken ontstaan aan de linker- en rechterkant van je website als deze in op een gekantelde iPhone X worden bekeken. Dit ziet er niet mooi uit. Gelukkig is met wat extra code een website te optimaliseren voor deze populaire telefoon. Hieronder zie je hoe wij dit voor onze eigen website hebben opgelost. Het ontwerp van de website loopt door tot de randen van het scherm, maar de inhoud van de website wordt niet afgedekt door de notch en de weergave blijft symmetrisch.

Natuurlijk zijn er nog veel meer mooie details die we graag implementeren! Wil je hierover in gesprek? Neem dan contact met ons op of laat een reactie achter. Welke details vind jij belangrijk?