Een UI Design, of anders gezegd, User Interface Design is een ontwerp van een website, webshop, app of andere digitale omgeving. Het wordt ook wel de gebruikersomgeving genoemd. Het is de visuele schil waar de gebruiker interactie mee heeft en vormt de verbinding tussen de (eind)gebruiker en het systeem.

Om een User Interface Design succesvol te maken is het belangrijk om deze zo gebruiksvriendelijk mogelijk te laten functioneren.

Als ontwerper binnen Eye Entertainment mogen we natuurlijk graag ontwerpen. Voordat we echter een spreekwoordelijke ‘schep in de grond’ zetten, zullen we eerst wat voorwerk doen alvorens we met het ontwerpen beginnen.

Wanneer we uitgaan van een website, webshop of app-ontwerp, zullen we in eerste instantie een debriefing maken om zodoende alle wensen en behoeften in kaart te brengen. We willen bijv. graag weten wat de beoogde doelgroep gaat worden en welke stijlen in de smaak vallen.

Vervolgens gaan we aan de slag met het conceptontwerp van een hoofdpagina. In de meeste gevallen betekend dit dat we een conceptontwerp zullen opleveren van de homepage van een website of webshop. Vaak zitten de meeste stijlelementen in dit soort pagina’s en kunnen we op basis daarvan de rest van de pagina’s aanvliegen. Pas zodra wij én de klant tevreden zijn over het resultaat, zullen we een verdere vertaling maken naar de overige pagina’s zoals contentpagina’s, productoverzichtspagina’s, productdetailpagina’s etc.

Zijn we met z’n allen tevreden over het gehele ontwerp, dan starten we de ontwikkelfase.

Welke type contentbeheersysteem (CMS) je moet gebruiken hangt vaak af van het type website die je wilt ontwikkelen. Onderstaand de veel voorkomende opties:

WordPress
In de basis ontwikkelen we bedrijfs- of diensten websites welke geen te verkopen producten bevatten binnen WordPress. Hierbij kiezen we niet voor het installeren en aanpassen van aangekochte thema’s, maar ontwikkelen we deze zelf om zo de beste en snelste klantervaring te kunnen bieden.

WordPress WooCommerce
Wil je graag een webshop die minder dan 500 producten bevat? Dan kun je prima gaan voor een WordPress Woocommerce webshop. De budgettaire instapdrempel ligt in dit geval lager dan bijv. een Magento.

Magento (2)
Wil je een shop met meer dan 500 producten? Kijk dan eens naar de opties voor Magento 2. Magento is een krachtig CMS voor grote webshops welke specifiek bedoeld is voor grote aantallen. Hierbij zijn vooral productbeheer in grote aantallen een stuk toegankelijker dan bijv. bij WooCommerce.

Cache is een tijdelijk geheugen in de browser of server die het mogelijk maakt dat websites sneller geladen worden wanneer deze vaker worden bezocht door dezelfde persoon.

Op het moment dat er veranderingen aan een website of webshop worden gemaakt, wil een cache nog wel eens hardnekkig de kop op steken waardoor veranderingen niet direct zichtbaar zijn. Om de veranderingen wel te kunnen zien, moet je de cache verwijderen. Dit kan op onderstaande manieren:

Firefox

1. Kies in Mozilla Firefox Tools (Extra) uit het menu.
2. Selecteer Clear Recent History (of via de snelkoppeling CTRL+SHFT+DEL).
3. Kies de tijdsperiode die u wil verwijderen.
4. Kies onder de kop Details de optie Cache.
5. Klik op de knop Clear Now (Nu wissen)

Chrome
1. Open Chrome op uw computer.
2. Klik rechtsboven op Meer.
3. Klik op Meer hulpprogramma’s. Browsegegevens wissen.
4. Kies bovenaan een periode.
5. Klik op de selectievakjes naast ‘Cookies en andere sitegegevens’ en ‘Gecachte afbeeldingen en bestanden’.
6. Klik op Gegevens wissen.

Safari
Wanneer het ontwikkel-menu is geactiveerd kun je hierop klikken en vervolgens op de optie ‘Leeg caches’ te klikken om de cache te legen. Om dit proces nog sneller uit te voeren volstaat het om de toetscombinatie option⌥ + cmd⌘ + E uit te voeren, de cache wordt dan onmiddellijk gewist.

Edge
1. Druk op de toetsen [Ctrl], [Shift] en [Del].
2. Een nieuw venster opent. Selecteer de optie “tijdelijke services en bestanden”.
3. Bevestig uw selectie door op de knop “Verwijderen” te klikken

Wanneer we een functioneel ontwerp maken van een te ontwikkelen website, webshop of app, zullen we concreet gezegd alle functies op papier zetten. Over het algemeen gaan we over tot het maken van een functioneel ontwerp zodra de complexiteit van een website, webshop of app dermate hoog is, dat dit daadwerkelijk wat toevoegt. Zodoende krijgen we een overzicht van alle functies die ontwikkeld moeten worden en welke een relatie met elkaar hebben.

Een UX Design, of anders gezegd, User Experience Design en in het Nederlands vertaald, ontwerpen van de gebruikerservaring. De gebruiker is in dit geval degene die gebruik maakt van de website, webshop, app, dienst of service. Tijdens het gebruik ontstaat bij de gebruiker een positieve, negatieve of neutrale ervaring.

Anders dan bij een UI Design, speelt bij een UX Design onderzoek een grotere rol. Een goede UX Designer kruipt in de huid van een eindgebruiker en probeert een zo logische en gemakkelijke flow te maken van hetgeen wat de gebruiker moet gebruiken. Een UX Design is trouwens niet uitsluitend bedoeld voor online diensten. Een UX Design kan ook offline worden gebruikt voor het optimaliseren van werkprocessen of diensten.

Wireframes zijn de bouwtekeningen van een website, webshop of app. We tekenen de beschreven functionaliteiten uit zodat je precies weet welke functies je waar op de website kunt verwachten. Door tijd in te ramen voor het maken van een wireframe, kun je op langer termijn tijd besparen omdat je dan al vroeg in het proces wijzigingen kan doorvoeren. Dit zal over het algemeen in het ontwerp of ontwikkeltraject kostbaarder zijn.

Een CMS is een content management systeem. Oftewel; content beheersysteem. Met een CMS kun je content toevoegen aan een website of webshop. Handig, want hiervoor heb je geen kennis nodig van ingewikkelde codetaal. Enkele bekende CMSen zijn WordPress, Magento en Drupal.

Magento is een beheersysteem bedoeld voor de (vaak) wat grotere webshops. Magento heeft een grote ontwikkel community die allerlei plugins ontwikkelen.

Een maga-menu is een oplossing om in een menu veel (sub)categorieën met haar onderliggende menu-items weer te geven. Over het algemeen wordt een mega-menu over de gehele paginabreedte weergegeven, waarbij een ‘normaal’ menu vaak de breedte heeft van een enkele rij.

De footer is de terugkerende onderkant van de website die de website visueel afsluit. Vaak worden hier de belangrijkste pagina’s, contactgegevens, algemene voorwaarden en copyright in vermeld.

Met de header van een website wordt over het algemeen de bovenkant van de website bedoeld die loopt vanaf het bovenste stukje tot onder een grote foto. Binnen de header vallen vaak het logo, menu, zoekbalk, banner.

Een maatwerk WordPress website heeft vele voordelen, maar natuurlijk ook enkele nadelen ten opzichte van een voor opgezet thema. Onderstaand een opsomming waar je in ieder geval rekening mee kan houden:

Voordelen
1. Je kan een website precies zo ontwerpen als hoe jij dit wil. Dit draagt sterk bij aan het uniek maken van je website of webshop of het bieden van de best mogelijke gebruikerservaring voor de bezoeker.
2. Over het algemeen een snellere website. Bij voor aangekochte thema’s wordt vaak gebruik gemaakt van ontzettend veel overhead aan plugin’s en functionaliteiten.
3. Betere vindbaarheid in Google door snellere website. Google baseert haar indexatie namelijk mede door de snelheid van de website.

Nadelen
1. Hogere investering. Maatwerk vereist meer handwerk wat resulteert in meer ontwikkeltijd en dus een hogere investering.

Het gebruiken van een reeds ontwikkeld WordPress thema kan voordelen hebben, maar heeft ook zeker enkele nadelen. Onderstaand een opsomming waar je in ieder geval rekening mee kan houden:

Voordelen
1. Relatief snel opgezet doordat het ontwerp reeds bekend is. Hierdoor hoef je feitelijk alleen content toe te voegen.
2. Goedkoper. Via een website als Themeforest is een thema voor een relatief laag bedrag aangeschaft.

Nadelen
1. Je bent gebonden aan het ontwerp van het thema. Aanpassingen hieraan kunnen soms veel tijd vergen.
2. Over het algemeen bevatten voor aangekochte thema’s een overhead aan functionaliteiten. Hierdoor kunnen ze trager werken.
3. Doordat ze trager werken, scoort de website minder goed in Google.

Ons ontwikkeltraject starten we over het algemeen na afronding van de ontwerpfase. Na de ontwerpfase weten we precies wat er ontwikkeld moet worden en hoe dit er uit moet komen te zien.

We zullen de te ontwikkelen zaken opdelen in kleine tussenopdrachten / ‘sprints’ om het overzicht te bewaren. Tijdens de ontwikkeling werken we op onze eigen afgeschermde ontwikkelserver. Zodra we voldoende sprints hebben afgerond en het project technisch in een toonbare staat verkeerd, zul je toegang krijgen tot onze ontwikkelomgeving. Zodoende kunnen tussentijdse sprints uitvoerig worden getest en kan content eventueel al worden toegevoegd.

Zodra we helemaal tevreden zijn over de technische werking van het eindproduct, kan deze naar de live-omgeving gemigreerd worden.

Compressie is essentieel om elementen van je website of webshop zo snel mogelijk in te kunnen laden en wordt vaak over het hoofd gezien. Vooral bij webshops kan dit veel uitmaken omdat hier vaak veel productfoto’s worden getoond. Een verschil van 50kb kan bij honderden afbeeldingen ervoor zorgen dat een pagina enkele seconden sneller ingeladen worden.

Ook Google hecht veel waarde aan compressie. Hoe sneller je website is, des te beter deze wordt geïndexeerd.

Een van de aspecten waar Google op tijd tijdens haar indexatie is de lengte van teksten. Hoewel inhoud altijd belangrijker is, is het aan te raden om minimale tekstlengtes aan te houden van 150 woorden per pagina. Aan te raden is 300 woorden of meer.

SVG’s zijn afbeeldingen in het zogenaamde vector formaat. Vector-afbeeldingen kunnen oneindig schalen, wat voor het web scherpe iconen en illustraties oplevert. Daarnaast zijn SVG-afbeeldingen een stuk kleiner in bestandsgrootte. Ze worden dus sneller ingeladen wat de algemene paginasnelheid bevorderd.

Het schrijven van blogs en nieuwsartikelen kan soms een tijdrovend klusje zijn. Vooral als het niet in je systeem zit. Voegt het schrijven van dit soort artikelen dan áltijd iets toe aan je website of webshop? Nou, niet altijd. Belangrijk is om relevantie in acht te nemen. Sluiten je geschreven blogs en artikelen niet voldoende aan bij je website, dan zullen deze niet perse gaan helpen bij de indexatie van je website.

Dit ligt geheel aan welke doelgroep je wilt bedienen. Sommige doelgroepen vereisen nu eenmaal andere media-uitingen dan anderen. Zit je doelgroep veelal op bijvoorbeeld TikTok? Dan kun je als contentmaker maar beter zorgen dat je ook op dit platform te vinden bent.

Een tekstschrijver kan een grote toevoeging zijn om je geschreven content kwalitatief een boost te geven. Niet alleen komt het gebruik van de juiste grammatica professioneler over. Ook het kopgebruik, alinea’s, tone-of-voice draagt bij aan de uniekheid van je geschreven content.

Met tone-of-voice wordt bedoeld hoe je je doelgroep aanspreekt. Houd je het formeel of ga je toch liever voor de informele aanpak. Met een juiste tone-of-voice kun je teksten boeiender maken om te lezen voor je doelgroep.

Een contentkalender kan gebruikt worden om houvast te geven aan het schrijven van content. Zo kun je er voor kiezen om elke 2e dinsdag van de maand een nieuwsbrief te publiceren of structureel elke donderdag een diepte-artikel te publiceren. Het geeft een handvat om consistent om te gaan met je publicaties.