Webdesign, webontwikkeling, UI en UX: wat is het verschil ?

Webdesign, webontwikkeling, UI en UX

Wat is het verschil tussen webdesign en webontwikkeling? En hoe zit het met UI versus UX? Wat betekenen deze delingen? Waarom zijn er zoveel acroniemen? Niet tech mensen willen dat alles gebruiksvriendelijk is!

Als u nog niet eerder een website hebt ontworpen, kan het lijken of het luisteren naar een vreemde taal lijkt op de terminologie van de technische industrie, behalve dat de meeste vreemde talen rijmen en redeneren. Maar werken met een webdesigner is iets wat elk bedrijf op een gegeven moment zou moeten doen; als u een succesvolle website wilt, heeft u misschien een vertaler nodig.

Als u uw eerste website laat ontwerpen of als u de branche beter wilt begrijpen, leggen we u uit wat vier van de meest gebruikte en lastigste termen in de hedendaagse technologie zijn: UI, UX, webdesign en webontwikkeling.

Wireframe van nieuw websiteontwerp, via Pexels

Laten we beginnen met enkele basisdefinities om je aanvankelijke verwarring te verlichten en om je context te geven voordat we dieper duiken:

Webdesign – Een brede overkoepelende categorie voor alles wat te maken heeft met het ontwerpen van de beelden en de bruikbaarheid van een website. Zowel UI en UX ontwerp, samen met vele andere velden, zijn opgenomen in webdesign.

Webontwikkeling – Het technische gedeelte van het maken van een website, met de nadruk op code. Webontwikkeling is verder onderverdeeld in ‘front-end’ en ‘back-end’, hieronder uitgelegd.

Gebruikersinterface (UI) – Een specialisatie van webdesign die zich bezighoudt met de besturingselementen die mensen gebruiken om te communiceren met een website of app, waaronder knoppenweergaven en bewegingsbedieningen.

User Experience (UX) – Een andere specialisatie van webdesign, deze heeft betrekking op gebruikersgedrag en -gevoel bij gebruik van de site of app. UX-ontwerp omvat vele andere gebieden, maar bekijkt ze vanuit het perspectief van de gebruiker.

Zoals je al kunt zien, is geen van deze gebieden exclusief en zijn er heel veel overlappingen. Webdesign en ontwikkeling zijn slechts twee kanten van dezelfde medaille, UI-ontwerp beïnvloedt UX-ontwerp, webontwikkeling ondersteunt ze allemaal … het gaat minder om welke velden welke taken behandelen, en meer over hoe elk veld dezelfde taak op een ander punt beschouwt -uitzicht.
Laten we bijvoorbeeld kijken naar laadtijden, een veelvoorkomend probleem voor elke website.

Webdesign: als het laden van een pagina te lang duurt, is er te veel inhoud of inhoud die te ingewikkeld is. De beeldbestanden kunnen worden gecomprimeerd, items kunnen worden aangepast en opnieuw worden geëxporteerd en pagina’s kunnen worden bijgesneden van overtollige inhoud.

Webontwikkeling: om de inhoud sneller te laten laden, kunnen we betere bestandscompressie proberen om de bestandsgroottes van de inhoud, CSS-sprites om bandbreedte te besparen of een netwerk voor het leveren van inhoud te verminderen om de laadtijden in specifieke geografische regio’s te verbeteren.
Gebruikersinterface: Besturingselementen moeten zo responsief mogelijk zijn, dus de interface moet eenvoudig genoeg zijn om interactiviteit onmiddellijk mogelijk te maken.

UX: de kans dat een gebruiker “terugkaatst” (uw site na enkele ogenblikken verlaat) neemt toe met elke seconde laadtijd, dus we moeten eerst prioriteit geven aan het reduceren van de laadtijd op de startpagina en de bestemmingspagina voordat het probleem in de hele site wordt aangepakt .
In een perfecte wereld zou u voor elk van deze velden een specialist of een team van specialisten inhuren, zodat u een expert vanuit alle hoeken naar uw website kunt laten kijken. Budgettaire beperkingen houden echter vaak in dat u het ene veld boven het andere kiest, of dat u freelancers op projectbasis inhuurt.
Af en toe vind je iemand die beweert alles te doen:

Ontwerpers die kunnen coderen, noemen zichzelf soms als het alles-in-één pakket, maar in werkelijkheid zijn ze beperkter dan twee afzonderlijke specialisten (hoewel dit soms een slimme huur is als je een eenvoudige site hebt).
UI-ontwerpers hebben veel overlappende vaardigheden bij webdesigners, dus sommige mensen zullen deze titels door elkaar gebruiken.
UX en UI worden vaak op één hoop gegooid, aangezien ze beide sub specialisaties zijn.
UX wordt vaak behandeld als een vaardigheid in andere beroepen, zelfs buiten het ontwerp, zoals een productbeheer.

Zulke mensen kunnen handig zijn, maar onthoud dat een alleskunner de baas is over niets – ze kennen misschien de basis van meerdere velden, maar ze zullen waarschijnlijk alleen een expert zijn in een of meerdere velden.

Je wilt ook onderscheid maken tussen websites & apps en desktop & mobiel. Elke medewerker heeft zijn eigen individuele specialiteiten – sommige ontwikkelaars hebben meer ervaring met het bouwen van mobiele sites; sommige ontwerpers houden zich uitsluitend aan apps en doen nooit websites. Nogmaals, er is veel overlap, maar als je voor een specifiek project aan het werven bent, zorg er dan voor dat je kandidaten de details aankunnen.

Dus welke van deze specialisten kan u helpen met uw specifieke zakelijke doelen? En waar moet je op letten bij het inhuren van hen? Laten we elk nu dieper bekijken.

Webdesign

Webdesign “is een beetje een archaïsche term, die teruggaat tot de tijd dat een persoon alle ontwerpaspecten van een website behandelde. Volgens moderne normen kan de term ‘webdesigner’ een beetje vaag zijn; vandaag, dankzij technologie en ons toegenomen begrip van het vaartuig, hebben we een regenboog van onderverdelingen.

De subcategorieën van webdesign omvatten zowel UI als UX, maar ook andere leuke afkortingen zoals IA (informatie-architectuur, omgaan met sitetoewijzing en navigatie) en CRO (conversiepercentage-optimalisatie, afstemming van het ontwerp van de site om de verkoop te vergroten, aanmeldingen of andere specifieke acties). Er zijn tientallen van deze subcategorieën, met nieuwe die elke dag worden gemaakt terwijl ontwerpers proberen betere banen te krijgen in een concurrerende markt.
Over het algemeen heeft webdesign betrekking op de beelden en functionaliteit van een website. Het is een veld dat intrinsiek verbonden is met grafisch ontwerp op elk niveau en dat zich bezighoudt met dezelfde ontwerpprincipes van visuele communicatie.

Maar webdesign is meer dan alleen grafisch ontwerp. Of het nu gaat om het werken met websites of apps, ontwerpers moeten weten welke functionaliteit, technische beperkingen, digitale trends en gebruikersverwachtingen vaak veranderen.
Er is ook een zekere zakelijke knowhow in webdesign: ontwerpers moeten digitale verkooptactieken begrijpen, zoals hoe de knop “call-to-action” (CTA) geplaatst kan worden om verkoop- en e-mailaanmeldingen op te roepen. De layout van de site heeft een grote invloed op het gedrag van gebruikers, maar omdat het zo genuanceerd is, zijn sommige ontwerpers er beter in dan anderen.

De webdesigner verwerkt traditionele grafische ontwerpen, zoals kleur en typografie, samen met digitale aandachtspunten, zoals het kiezen van de beste esthetiek voor verschillende schermformaten. Ze vereisen ook inzicht in bedrijfsconcepten als leiden en sluiten om lay-outs te maken die de call-to-action aantrekkelijker maken. De plichten van een webdesigner bestaan ​​soms zelfs uit het maken van de pictogrammen, grafische afbeeldingen of interfaceknoppen, die is gebaseerd op de expertise van alle drie.

Voor zover het gaat om specifieke taakverantwoordelijkheden, is het ontwerpproces grotendeels aan de ontwerper, zolang ze binnen de bestaande merkrichtlijnen werken. Doorgaans houdt het proces in dat de webdesigner prototypen van het ontwerp maakt en vervolgens die prototypen test met daadwerkelijke gebruikers of belanghebbenden en vervolgens feedback inbouwt in toekomstige ontwerpen.

Webdesigners kunnen ook wireframes, kale lay-outs van een ontwerp maken om zich voor te bereiden op een prototype of een mockup, een pixel-perfecte afbeelding van hoe het scherm eruit zal zien, behalve zonder interactiviteit.
Nadat het prototype is goedgekeurd, wordt het naar de ontwikkelaar gestuurd voor codering.

Waar u op moet letten bij het inhuren van een webdesigner

Meer dan wat dan ook, u moet weten wat u zoekt voordat u de beste webdesigner voor u kunt vinden. Vanwege zoveel specialisaties gaat het er niet om of een ontwerper goed of slecht is, maar of ze geschikt zijn voor jou.

Besteed aandacht aan hun portfolio. Met de nadruk op grafisch ontwerp, hebben webdesigners elk hun eigen unieke artistieke stijlen.
Zoek naar een beheersing van de aspecten die u waardeert. Als u een tekst zware site heeft, kunt u zien hoe ze omgaan met typografie, leesbaarheid en pagina-indeling. Als u een e-commerce winkel bouwt, kijk dan of ze weten wat een goede productpagina is.
Is hun voorkeurssoftware compatibel met wat de rest van je team gebruikt? Er zijn veel verschillende ontwerpsoftware: Adobe Photoshop, Illustrator, InDesign en Sketch, evenals prototypesoftware zoals UXPin of Balsamiq. Neem contact op met uw andere medewerkers om te zien wat uw opties zijn.

Vraag uw webdesigner naar hun ontwerpproces en zijn tijdschema. Ontwerpers hebben allemaal hun eigen methoden en ontwerpcycli, dus controleer of u iemand inhuurt die past bij uw bedrijfscultuur en het schema.

Webontwikkeling

Webdesign en -ontwikkeling onderscheiden zich door het gebruik van code. Ontwikkeling is waar dingen technisch worden, maar het goede nieuws is dat je niet hoeft te weten waar je ontwikkelaars het over hebben zolang ze dit doen (hoewel het zeker nuttig is om de basis te leren).

Webontwikkeling is onderverdeeld in twee hoofdcategorieën:

Front-end (client-side): de code voor hoe de website (of app) op het scherm wordt weergegeven. De front-end ontwikkelaar is verantwoordelijk voor het tot leven brengen van de visie van de webontwerper, meestal met behulp van computertalen zoals HTML, CSS en JavaScript. Natuurlijk is niet alles wat de ontwerper gepland heeft realistisch haalbaar, dus de front-end ontwikkelaar werkt vaak heen en weer met de ontwerper.

Back-end ( serverzijde): de “front-end” haalt uit een digitaal systeem van bronnen die op een server worden gehost. De back-end-ontwikkelaar beheert die bronnen achter de schermen, codeert de gegevens in de database en optimaliseert de manier waarop die gegevens worden geleverd. Ze gebruiken talen zoals PHP, Ruby, Python, Java of .Net.
Op dezelfde manier is een ontwikkelaar met volledige stack iemand die zowel front-end als back-end ontwikkeling aankan. Soms zijn ze een slimme optie voor startups die zich niet meer dan één investering kunnen veroorloven, maar idealiter zou je een heel team van ontwikkelaars met verschillende specialisaties hebben.

Waar u op moet letten bij het inhuren van een webontwikkelaar 

Zorg ervoor dat u weet of ze vloeiend zijn in de talen die u nodig hebt. Als u het verschil niet kunt zien, vertel hen dan wat u met uw site zou willen doen en luister naar hun aanbeveling.Hoewel dit niet verplicht is, is het nuttig voor een ontwikkelaar om betrokken te zijn bij het ontwerpproces. Een ontwikkelaar kan bijvoorbeeld een ontwerper preventief vertellen of zijn keuzes mogelijk zijn, waardoor hij op de lange termijn tijd bespaart bij revisies. Misschien wilt u eens kijken hoe goed uw ontwikkelaar met een team samenwerkt, omdat sommigen er de voorkeur aan geven om autonoom te werken.Herzie hun vorige websites door een lens van functionaliteit.

Werkt alles zoals het hoort? Verschijnt er een vlag? Je weet misschien niet genoeg over ontwikkeling om te begrijpen hoe het werkt, maar je weet zeker hoe het is om een ​​normaal persoon te zijn die een site gebruikt.Gebruikersinterface (UI)-Nu we webontwerp en -ontwikkeling hebben uitgelegd, kunnen we de meer gespecialiseerde velden bespreken, te beginnen met het ontwerp van de gebruikersinterface.

UI’s zijn iets dat iedereen gebruikt zonder erover na te denken – u hoeft de geschiedenis van het hamburgersymbool niet te kennen om te weten dat de knop met drie lijnen uw menu is  Dit komt het meest voor in UI-ontwerp: met een echt intuïtieve interface hoeft de gebruiker er niet over na te denken om het te gebruiken.Als u actief moet nadenken over het gebruik van de bedieningselementen, wordt dit als een slechte UI-ontwerp beschouwd.

Zoeken naar de knop die je nodig hebt of een paar seconden besteden aan het uitzoeken wat een knop doet, leidt je af van de algehele ervaring van het gebruik van de site. Het doel van UI-ontwerp is niet alleen om alle bedieningselementen te bieden die een gebruiker nodig heeft, maar ook om zelf verklarende besturingselementen te maken die gebruikers in één oogopslag begrijpen.Een andere zorg is ruimtebeheer.

UI-ontwerpers moeten het ideale medium vinden om gebruikers veel opties te bieden en schermruimte te besparen. Dat is de manier waarop technieken zoals zweefbesturing en uitschuifmenu’s tot stand kwamen. Het is de taak van de ontwerper van de gebruikersinterface om te bepalen welke besturingselementen te allen tijde aanwezig moeten zijn en die verwaarloosbaar genoeg zijn om volledig te verbergen of te negeren.

UI-ontwerp valt vaak samen met een ander veld met de naam interactieontwerp met de afkorting “IxD”. Interaction design is gespecialiseerd in alle manieren waarop een gebruiker met het systeem communiceert, inclusief de interface, maar ook in gebieden zoals pop-up, chat en foutvensters. Omdat interactieontwerp zo veel de nadruk legt op gebruikersgedrag, is het ongeveer halverwege tussen UI en UX-ontwerp.
Waar u op moet letten bij het inhuren van een UI-ontwerper …

De portfolio van een UI-ontwerper moet u alles vertellen wat u moet weten. Test de vorige sites van uw kandidaat en kijk hoe eenvoudig het is. Kun je alles vinden wat je nodig hebt? Was het gebruik van de site / app frustrerend of eenvoudig?
Meer dan andere categorieën, zoek naar werk in het verleden in het specifieke type project waarvoor je zoekt. ‘S Werelds beste website UI-ontwerper is misschien slecht in het maken van een interface voor een gaming-app. Huur iemand in die de juiste ervaring heeft.

Gebruikerservaring (UX)

In veel opzichten lijkt UX op het gebied van webontwerp vanuit het perspectief van de gebruiker. Hoe beïnvloedt de lay-out van de webpagina de gebruiker? Hoe beïnvloedt de gebruikersinterface de gebruiker? Wanneer je doorgaat naar de gevorderde stadia, wordt UX veel strategischer, zoals in “hoe ontwerpen we een pagina zodat de gebruiker zich wil aanmelden?”

Zoals je je wel kunt voorstellen, bevat UX design ook veel andere velden in webdesign. Veel mensen praten over ‘UI versus UX’, maar de waarheid is dat de twee samenwerken in plaats van concurreren. In feite is er zoveel overlapping dat allerlei webdesigners baat kunnen hebben bij een beetje kennis over UX. Dat is precies hoe UX een aparte discipline werd – het inhuren van een individuele UX-specialist ontheft een heleboel andere verantwoordelijkheden van de rest van het team.
Hoewel het in eerste instantie overbodig lijkt, is er feitelijk een directe correlatie tussen UX-ontwerp en bedrijfsdoelen zoals verkoop of conversies. Gezien het feit dat een groot deel van de menselijke besluitvorming voortkomt uit emoties en intuïtie, is het logisch dat het optimaliseren van het ontwerp van een website bepaalde gedragingen kan stimuleren en een sfeer kan creëren die bevorderlijk is voor dat gedrag.

Om die reden trekken UX-ontwerpers ook veel op grafische ontwerpprincipes: aandacht trekken met de juiste afmetingen, de juiste emoties oproepen met kleuren, een voorspelbare visuele stroom over het scherm creëren en CTA’s op de juiste plekken plaatsen. In tegenstelling tot traditioneel grafisch ontwerp, moeten UX-specialisten echter ook rekening houden met andere zorgen zoals interactiviteit en timing, waardoor het een discipline is die volledig gescheiden is van alle andere, terwijl ze tegelijkertijd met alles zijn verbonden.

Waar u op moet letten bij het inhuren van een UX-ontwerper …

Net als bij UI-ontwerpen, wilt u eerdere sites of apps van uw kandidaat ‘testen’. Zijn ze gemakkelijk te gebruiken? Geniet u van de ervaring van het gebruik van hun site?

Als u niet over het budget beschikt om een ​​afzonderlijke UX-ontwerper in te huren, vraag dan kandidaten op andere gebieden over hun UX-expertise. Deze taken kunnen soms worden behandeld als een crossover-inspanning van verschillende teams; een productmanager of marketeer kan uitleggen wat ze willen dat de UX is, en vervolgens behandelt het ontwerpteam het visuele ontwerp en de implementatie.

Hoe zit het met sjabloonsites?

Hoe zit het als u een sjablonensite zoals WordPress, Squarespace of Wix gebruikt? Heeft u nog steeds een compleet team nodig? Heb je iemand extra nodig?

Template-sites volgen de meeste van dezelfde regels, met een belangrijke uitzondering:
Als u een sjabloonsite gebruikt, hoeft u zich minder zorgen te maken over de ontwikkeling van de backend.
Sjabloon sites hebben meestal beperkte en vaste opties voor UI.
Zorg ervoor dat kandidaten ervaring hebben op welke site u ook host. Goed zijn in WordPress vertaalt zich niet noodzakelijkerwijs in goed zijn in Squarespace.
Afgezien van deze uitzonderingen is het gebruik van een sjabloonsite vergelijkbaar met een andere site. Kies uw ontwerpers op basis van wat u het meest nodig hebt.

Welke heb je het meest nodig?

Inmiddels zou je webdesign en -ontwikkeling apart moeten kunnen onderscheiden en weet je dat “UI versus UX” niet zo nauwkeurig is als “UI + UX”. De vraag is, welke moet je het meest prioriteren als je niet kunt huren specialisten voor allemaal?

Er is geen universeel antwoord voor die. Omdat deze velden elk verschillende gebieden behandelen, hangt het allemaal af van de unieke behoeften van uw bedrijf. Als u uw eigen doelen en tekortkomingen overweegt, hebt u mogelijk één specialist meer nodig dan de anderen.
Om u te helpen begrijpen welke u het meest nodig heeft, vindt u hier een korte lijst met de problemen die elk veld heeft om zich te specialiseren. Vind hieronder je grootste obstakels en kijk in het overeenkomstige veld voor de oplossing. Als u al een bestaande site heeft, voer dan vooraf wat gebruikerstests uit om te zien welke klachten gebruikers daadwerkelijk hebben.

Webdesign

site reageert niet (wat betekent dat de site er niet goed uitziet op mobiele apparaten)
site ziet er verouderd uit
afbeeldingen van lage kwaliteit
klanten gaan niet naar de pagina’s die u wilt
de tijd op de pagina is te kort

Webontwikkeling

bugs (sitefuncties werken niet zoals ze zouden moeten)

webbeveiliging & hack-preventie
te veel 404-fouten
te veel mislukte DNS-zoekacties
site offline gaat
bepaalde inhoud kan niet worden geladen

UI

slechte navigatie
gebrek aan maatwerkopties
gebrek aan opties voor sociaal delen
klachten over “hoe doe ik dit” of “waar kan ik dat vinden”

UX

slechte conversiepercentages (veel verkeer maar weinig conversies)
hoog weigeringspercentage (bezoekers die na een paar seconden weggaan)
gebruikers zijn geen content aan het afronden (video’s of blogs)
gefragmenteerde bezoeken, d.w.z. dat de gebruiker na één pagina vertrekt en in plaats van blijft en onderzoekt
Natuurlijk kunnen sommige problemen op verschillende manieren worden opgelost, zoals we hebben uitgelegd met het voorbeeld van trage laadtijden hierboven. Daarom is het belangrijk om te weten welke aspecten u prioriteit wilt geven, zodat de oplossing die u kiest het beste aansluit bij uw prioriteiten.

Geef een reactie