Design voor je moeder - Wat zeg je allemaal lieverd?

Wat zeg je allemaal lieverd?

Stel je voor: Je probeert je moeder uit te leggen wat je doet als designer (of developer), en na de derde zin zie je haar ogen al glazig worden. Dat is het moment dat je weet: ze snapt er helemaal niets van. 

Welkom bij "Design voor je moeder," waar we de mysterieuze taal van designer en developers vertalen naar koffiepraat. 

Hier geen 'gebruikersinterface-optimalisatie' of 'responsive design', maar gewoon, hoe je het aan je moeder zou uitleggen. 

Dus pak een kopje koffie (of iets sterkers, afhankelijk van je laatste design-review), en duik met ons in de wereld van design en code, uitgelegd op een manier die zelfs je moeder zou boeien - en dat zegt wat!

design-voor-je-moeder-gids-design-termen-concept7.jpg

#

80/20 Regel

80% van de uitkomsten kan verklaard worden door 20% van de oorzaken. Toepasbaar op vanalles (website functies, productiviteit, je garderobe)

A

A/B test

Onderzoekstechniek waarbij je meerdere varianten test met gebruikers. Bijvoorbeeld testen of variant A of Variant B beter werkt voor gebruikers.

Accessibility

Zie ‘Toegankelijkheid

Acceptatieomgeving

Dit is net een generale repetitie, maar dan voor software. Hier test je de software in een omgeving die heel erg lijkt op de echte wereld, om te zien of alles goed werkt voordat het echt gebruikt gaat worden. Zie ook ‘Staging’ en ‘Testomgeving’.

AI

Kunstmatig intelligentie, maar niet zo intelligent als je hoopt. Zie ook 'ChatGPT'

Agile

Project klein houden.

Analytics

Statistieken van gebruikersgedrag op je website of App. Zie ook 'Google Analytics 4'.

Affordance

Werkt het zoals het er uit ziet dat het werkt?

After Action Report

Zie 'Retrospective'.

Archetype

Herkenbaar karakter-type voor je merk gebaseerd op karaktereigenschappen om mensen aan te spreken.

acceptatieomgeving-design-voor-je-moeder-concept7.jpg

B

Backlog

Een technisch woord voor takenlijst voor je website.

Backend

De code en functionaliteiten achter een digitaal product

Branding

Zie 'Merkidentiteit'.

Briefing

Wat jij denkt wat je nodig hebt om een project goed aan te pakken. Zie ook 'Debrief'.

Breadcrumb

Ook broodkruimels genoemd, is een vorm van navigatie op je website die aangeeft waar je bent en hoe je er bent gekomen. Belangrijk voor SEO en gebruiksvriendelijkheid

Bug

Een bug is een fout op je website of app. Door een bug werkt je website niet zoals het moet. Er gaat iets mis.

C

Call To Action (CTA)

Een link of knop met overtuigende tekst zodat jij er op gaat klikken. 

Case

Voorbeeld van eerder werk en samenwerkingen.

Checkout

Online kassa.

Cialdini

De goeroe op gebied van beïnvloedingsprincipes en hoe je mensen kan overtuigen. Hij heeft 7 principes: Sociale Bewijskracht, Autoriteit, Schaarste, Commitment & consistentie, Sympathie, Wederkerigheid en Eenheid.

CI/CD (Continuous Integration/Continuous Delivery)

Dit is een beetje zoals een lopende band in een fabriek, maar dan voor software. Elke keer als iemand iets aan de software verandert, controleert het systeem automatisch of alles nog werkt en brengt het de nieuwste versie uit.

ChatGPT

De digitale sidekick die je nooit wist dat je nodig had, maar nu niet meer zonder kunt - denk aan een kruising tussen Sjoerd (lees: een menselijke bibliotheek) en die ene vriend (Tom de tester) die altijd te veel weet bij trivia-avonden. (Geschreven door ChatGPT zelf 😉)

CMS

Content management system. Het systeem waar de inhoud van je website staat en waarin je tekst en plaatjes kunt aanpassen. Bijvoorbeeld Wordpress of Statamic

CMYK

De code voor printkleuren, niet te verwarren met RBG, en staat voor de kleuren Cyan (blauw), Magenta (een mix van rood en blauw), Yellow (geel) en Key.

Concept

Een goed idee.

Concept7

Het beste idee

Content

Inhoud, zoals tekst, afbeeldingen of video. 

Conversie

Een actie die ertoe leidt dat de website bezoeker iets koopt of hun gegevens achterlaat (of wat voor een doel je ook maar gedefinieerd hebt).

Conversieratio

Het aantal mensen dat een actie heeft uitgevoerd op je website, gedeeld door het aantal totale bezoekers. Het liefst wil je dat dit percentage hoog is, en het kan altijd beter.

Copy

Copy is als de pindakaas op je broodje communicatie: het smeert alles lekker uit en zorgt ervoor dat de boodschap blijft plakken.

Copy

Copy is als de pindakaas op je broodje communicatie: het smeert alles lekker uit en zorgt ervoor dat de boodschap blijft plakken.

CRO

Conversion Rate Optimization. Aan allemaal knoppen draaien op je website totdat je conversie het hoogst is en je bezoekers zich beter aangesproken voelen. 

Crawling

Het proces van zoekmachines waar kleine ‘bots’ of digitale spinnen je website scannen om te bepalen hoe relevant je website inhoud is. 

CSS

Een document met code dat bepaalt hoe je website er uit ziet.

CTR

Click Through Rate, hoeveel mensen ergens op klikken gedeeld door het aantal mensen die het hebben gezien.

Customer Experience (CE)

De volledige ervaring van je klant met je product of dienst

Customer Journey

Wat je klanten allemaal doen in relatie tot je product en dienst in plaats van wat jij wilt dat ze doen. Ook wel Klantreis genoemd.

Customer Journey Mapping

Customer journey mapping is het maken van een route voor je klanten, zodat ze de snelweg naar tevredenheid kunnen nemen zonder verdwaald te raken in het doolhof van verwarring.

D

Debuggen

De developers gaan als detectives aan de slag: zoeken en oplossen van wat er fout is gegaan in de software of op een website.

Deliverable

Wat wij opleveren tijdens projecten

Design challenge

Zie 'ontwerpuitdaging'.

Design Review

Feedback krijgen en geven op het ontwerp om te checken of het goed ontworpen is of klopt volgens de eisen.

Design sprint

In een week een idee bedenken, uitwerken en testen.

Design thinking

Verdiepen, Praten en testen met je doelgroep voordat je iets maakt.

Debrief

Wat wij denken dat je nodig hebt.

DPI

Dots Per Inch, een eenheid van resolutie ivm afbeeldingen, zie ook 'PPI'.

E

E-commerce

Online winkelen en webshops.

Eye track

Een onderzoeksmethode om te kijken naar waar anderen naar kijken op een website.

Expert review

Je product laten beoordelen en analyseren door iemand die er verstand van heeft.

F

Feature Creep

Hoe langer een product of website bestaat, hoe meer functies er in sluipen

Figma

Het programma dat wij gebruiken om (visuele) ontwerpen te maken van je website en app

Feedback

Commentaar en terugkoppeling. Soms onderbouwd, soms niet.

Fold

De ‘vouw’: het eerst zichtbare stuk van je website of app. Kan voor elke gebruiker weer anders zijn en is daarom een beetje verouderde metafoor uit de krantenwereld. 

Frontend

Uitwerking van het visuele ontwerp in code.

Font

Een specifieke stijl van een lettertype. Mag je ook prima door elkaar gebruiken, wij worden echt niet boos. 

Footer

De onderkant van je website met tekst en linkjes naar verschillende pagina’s. 

Functionaliteit

Een functionaliteit zegt iets over hoe je een website of digitaal product kan gebruiken. Bijvoorbeeld een specifiek taak of actie zoals: Contactinformatie opzoeken.

Funnel

Engels voor 'trechter'. Dat ding wat je ook wel in de keuken gebruikt voor bijvoorbeeld water. Die heb je ook voor website, alleen gooi je daar bezoekers in zodat zij gaan converteren (zie 'Conversie').

G

Grafisch ontwerp

Zie 'Visual Design'. Niet te verwarren met Grafisch design of DTP (drukwerk).

Gebruiker

Persoon die zich altijd net wat anders gedraagt dan je denkt (:

Gebruikersonderzoek

Vragen aan je klanten of ze begrijpen wat je bedacht hebt en wat zij nodig hebben.

Gebruiksvriendelijkheid&

Hoe gemakkelijk een digitaal product gebruikt kan worden door de vermoedelijke gebruiker(s).

Gestalt

Psychologische principes over hoe je dingen ervaart.

Golden circle

Waarom bestaat je bedrijf? (Een oefening van Simon Sinek)

Google Analytics 4 (GA4)

De nieuwere versie van Google Analytics met een overzicht van statistieken over je website, bijvoorbeeld hoeveel gebruikers welke pagina’s hebben bekeken.

Google Tag Manager (GTM)

Een manier om verschillende tracking codes (zie 'Tracking (2)') op een plek te houden en doelen in te stellen voor je website die via Google Analytics worden bijgehouden.

Google Search Console

Een overzicht van hoe je website gevonden wordt in Google.

Gradient

Een kleurverloop tussen 2 of meer kleuren

Grid

Een raster dat helpt om elementen goed neer te zetten in een layout

H

Heatmap

Een kaart dat klikacties of bewegingen op een pagina weergeeft door kleuren, rood voor warm (veel kliks, veel beweging) en blauw voor koud (weinig kliks of weinig beweging).

Heuristieken

De gouden regels van Sjoerd Walinga voor hoe je een website goed kan ontwerpen.

Hobson + 1

Één keuze is geen keuze. Je voegt een extra optie toe naast de keuze / actie die er al is. De extra keuze is vaak minder belangrijk of interessant, zodat de bezoeker voor de eerste optie kiest.

Holacracy

Manier van aansturen van je bedrijf waar zelfsturing centraal staat. Soms liefdevol geïnterpreteerd als "Zoek het zelf maar uit"

Hotjar

Een programma om gebruikersonderzoek via je website uit te voeren

HTML

Afkorting van HyperText Markup Language. Technisch verhaal. De standaard opmaaktaal (of code) van het web. De taal die b.v. zegt wat een titel en een paragraaf is van een webpagina.

Human Centered Design (HCD)

Ontwerpen door eerst te kijken naar de behoeftes van de mensen die je product gaan gebruiken. 

Huisstijl

De visuele richtlijnen van je merk.

Holacracy

Manier van aansturen van je bedrijf waar zelfsturing centraal staat. Soms liefdevol geïnterpreteerd als "Zoek het zelf maar uit"

I

Ideatie

Bedenken van ideeën binnen Design Thinking.

Informatiearchitectuur

Informatiearchitectuur

Indeling, labeling en ontsluiting van content en pagina’s op je website.

Innovatie

Nieuwe dingen bedenken, maken en testen.

Interactie-ontwerp

Een technische schets dat aangeeft hoe iets moet werken.

Iteratie

Nog een keer maar dan beter.

IXD

Zie 'Interactie-ontwerp'

K

Klant

Afnemer van onze producten of diensten. Werken we mee samen en luisteren we goed naar. Maar niet zo goed als naar je gebruikers.

Kanalen

Twitter / Linkedin / briefje bij de Albert Heijn.

Kick-off

Gezamenlijke start van een project. Dit doen we intern met het team en daarna met de klant.

Kerning

De r u i m t e tussen individuele letters in een woord.

KPI

Key Performance Indicator. Een meetbaar punt dat belangrijk is voor je bedrijf.

kerning-kakhiek-stijl-concept7.jpg

L

Label

De vragen in een formulier waarvan je wilt dat iemand die gaat beantwoorden. 

Layout

Ontwerp en opzet van een pagina

Leading

Extra ruimte tussen tekstregels

Lean

Maak het klein. 

Lettertype

Een ‘familie’ van fonts. Arial is een lettertype, Arial bold in 12 punten is een font

Look & Feel

Het ontwerp in kleur en vorm

M

MBTI

Myers-Briggs Type Indicator. Een methode om te kijken naar hoe mensen beslissingen maken. Is best interessant, lees onze artikelen over MBTI eens! 

Merkidentiteit

Wat je uitstraalt als merk, in kleur, lettertypes en verhaal.

Metric

Iets wat gemeten kan worden en bijgehouden.

Merge Request

Een merge request is als je jouw stukje van een groepsproject wilt toevoegen aan het hele project, maar dan met code.

Microcopy

Een korte maar overtuigende tekst, vaak in combinatie met een CTA-button.

Mockup

Lijkt net echt, is het niet. Bijvoorbeeld een afbeelding van je website.

Mobile first

Het website ontwerp wordt gemaakt voor mobiele beeldschermen eerst, en pas daarna voor desktop.

MVP

Minimale versie van je product waarmee je live kunt gaan.

N

NFC

De techniek van b.v. contactloos pinnen

NPS

Zwaar overschatte metric. Kan je direct weer vergeten.   

O

Onboarding

Maak het de eerste keer makkelijk voor je nieuwe klanten in hun ontmoeting met je product.

Online strategie

Helpt je om keuzes te maken wat je online moet doen om mensen te betrekken en betrokken te houden.

Ontwerpuitdaging

Formulering van het kernprobleem dat je voor je gebruikers op moet lossen

Ontwerp-principes

Uitgangspunten voor een goed en consistent ontwerp.

P

Pipeline

Een technische route waarmee stukken code samengevoegd worden en van de laptop naar jouw scherm getransporteerd worden

PPI

Pixels per Inch, een vorm voor resolutie. Meer = scherper beeld. 

Prototype

Snel op te zetten testbaar model van je idee. Bijvoorbeeld een klikbaar versie van je website opgezet in Figma zonder code.

Persona

Fictief voorbeeld-personage uit je doelgroep.

Product owner

Beslisser in het project.

Propositie

Wat je wilt communiceren met je bezoekers en waarom zij bij jou moeten zijn. Geschreven vanuit de behoefte van je bezoekers.

Photoshop

Ontwerpprogramma voor designers die veel met afbeeldingen werken.

uitleg-photoshop-en-sketch-design-voor-je-moeder-c7.png

Q

Quality assurance (QA)

Zorgen dat het ontwerp gemaakt wordt zoals het is ontworpen.

R

Resolutie

Hoeveel pixels er getoond worden op een scherm.

Respondent

Iemand die (vaak tegen kleine vergoeding) meedoet aan gebruikersonderzoek.

Responsive

Je website schaalt goed naar alle schermformaten, desktop, mobiel en tablet.

Retrospective

Terugkijken op het project of de sprint, wat ging goed, wat ging niet goed en hoe kunnen we het beter doen.

RGB

(Red, Green & Blue) Digitale kleurcode.

Roadmap

Een overzicht van het project voor de komende 12 maand, in lijn met je online strategie

ROI

Return On Investment: maar levert het ook wat op?

S

Sans-serif

Lettertype zonder schreef. Vaak moderner. 

SCRUM

Werk opdelen in kleine blokjes

Scope

Wat de omvang of bereik van het project is. Wat valt wel binnen de afspraken en wat niet (buiten scope).

SEO

SEO is als het spelen van verstoppertje met Google, waarbij je constant roept "Hier ben ik!" om ervoor te zorgen dat je als eerste gevonden wordt. Staat voor Search Engine Optimization, of Zoekmachineoptimalisatie.

Serif

Lettertype met schreef. Vaak klassieker. 

Sketch

Ontwerpprogramma dat niemand meer gebruikt nadat Figma geïntroduceerd werd.

Slack

Chatten over werk en communicatiekanaal met je klanten.

Social Proof

Sociale bewijskracht, een van de 7 Cialdini principes. Mensen vertrouwen mensen, en zien daarom graag ervaringen van echte mensen.

Sprint

Keihard werken in korte tijd.

Staging

Dit is de laatste check voordat het live gaat. In de staging-omgeving wordt de bijna-finale versie van de code getest om zeker te weten dat alles perfect werkt voordat het naar de echte gebruikers gaat.

Statamic

Hét CMS dat wij gebruiken bij de meeste klanten.

Studenten.net

Een internetonderneming uit de begin jaren 2000 waar John het nog vaak over heeft.

SEO

SEO is als het spelen van verstoppertje met Google, waarbij je constant roept "Hier ben ik!" om ervoor te zorgen dat je als eerste gevonden wordt.

T

Template

Een sjabloon, bijvoorbeeld een generiek ontwerp voor een pagina

Tester

Een bijzonder type dat bij Concept7 werkt en zich bezighoudt met het testen (lees: slopen) van websites van klanten. Ze zijn nooit tevreden, en vinden alles slecht, maar zorgen daarmee wel voor topkwaliteit van een digitaal product

Testomgeving

Zie de testomgeving als een oefenterrein. Het is een veilige plek waar ontwikkelaars nieuwe dingen kunnen uitproberen en testen voordat ze echt in gebruik worden genomen.

Toegankelijkheid

De mate waarin alle bezoekers op je website, ongeacht visuele, auditieve, motorische of cognitieve beperkingen, je website kunnen gebruiken.

Tooltip

Een kleine hint die verschijnt als iemand klikt op een ‘i’, waarin extra informatie staat.

Toptaak

De meest voorkomende reden voor mensen om je website te bezoeken.

Toptakenenquête

Methode voor gebruikersonderzoek via een tool zoals Hotjar. Wie komen naar je website en waarom. 

Tracking (1)

Het groter of kleiner maken van alle ruimte tussen letters

h3 class="scroll-mt-20" id="tracking2">Tracking (2)

Het volgen van bezoekers op je website met bijvoorbeeld Google Tag Manager.

Typografie

Het toepassen van lettertypes in je ontwerp

U

Usability

Gebruiksvriendelijkheid.

UI/User Interface

Grafische weergave waarmee gebruikers en apparaten met elkaar communiceren. Soms uitgesproken als 'Goewie' (GUI).

User journey

Zie 'Customer journey'.

User research

Bedenk het niet zelf, vraag het eens aan je gebruikers.

User story

Verhaal over wat iemand moet kunnen op je website. Een functionaliteit uitgelicht vanuit het perspectief van de gebruiker.

UX

User Experience - wat je ervaart tijdens en na het gebruiken van een product. Vaak gebruikt men dit als een verzamelwoord voor het uitwerken van wireframes en de informatiearchitectuur van je website. 

V

Valideren

Testen of iets wel klopt of werkt

Visual Design

De visuele kant van het ontwerp: typografie, kleurgebruik, plaatjes etcetera. 

Vector

Digitale informatie over een punt in een ontwerp. Ontwerpen in vector maakt het schaalbaar tot in sint-juttemis

Viewport

Het zichtbare stuk van een webpagina. 

W

Waterval

In 1 x van A naar Z werken. Tegenstelling van Agile werken

WCAG

Richtlijnen voor toegankelijkheid.

Wireframe

Bouwtekening in zwart, wit en grijs van een digitaal product.

Witruimte

Bewust extra ruimte in je layout, bijvoorbeeld tussen tekst en afbeeldingen.

design-voor-je-moeder-what-you-see-is-what-you-get-c7.png

WYSIWYG

What You See Is What You Get: direct aan de voorkant van je website de inhoud bewerken, bijvoorbeeld in je CMS.

Z

Z-index

Wat je vroeger gebruikte om je volgorde van elementen te fixen. Zie ook 'CSS'.

Online groei begint bij kennis

Meld je aan voor onze nieuwsbrief en ontvang maandelijks praktische inzichten, tips en tricks om je op weg te helpen naar online groei!

Vul hieronder jouw e-mail in en ontvang direct een handig weetje 🙂

Voorkeur