What are you all saying dear?
Picture this: You try to explain to your mother what you do as a designer (or developer), and after the third sentence you see her eyes glaze over. That's the moment you know: she doesn't understand a thing.
Welcome to "Design for your mother," where we translate the arcane language of designer and developers into coffee talk.
No 'user interface optimisation' or 'responsive design' here, just, how you would explain it to your mother.
So grab a cup of coffee (or something stronger, depending on your latest design review), and dive with us into the world of design and code, explained in a way that would fascinate even your mother - and that's saying something!
#
80/20 rule
80% of outcomes can be explained by 20% of causes. Applicable to anything (website features, productivity, your wardrobe)
A
A/B test
Research technique where you test multiple variants with users. For example, testing whether Variant A or Variant B works better for users.
Accessibility
See 'Accessibility'
Acceptance environment
This is like a dress rehearsal, but for software. Here you test the software in an environment very similar to the real world, to see if everything works well before it is actually used. See also 'Staging' and 'Test environment'.
AI
Artificial intelligence, but not as intelligent as you hope. See also 'ChatGPT'
Agile
Keeping project small.
Analytics
Statistics of user behaviour on your website or app. See also 'Google Analytics 4'.
Affordance
Does it work as it looks like it will?
After Action Report
Zie 'Retrospective'.
Archetype
Recognisable character type for your brand based on character traits to appeal to people.
B
Backlog
A technical word for task list for your website.
Backend
The code and functionalities behind a digital product
Branding
See 'Brand identity'.
Briefing
What you think you need to get a project right. See also 'Debrief'.
Breadcrumb
Also called breadcrumbs, is a form of navigation on your website that indicates where you are and how you got there. Important for SEO and usability.
Bug
A bug is an error on your website or app. A bug makes your website not work as it should. Something goes wrong.
C
Call To Action (CTA)
A link or button with compelling text so that you will click on it.
Case
Sample previous work and collaborations.
Checkout
Online cashier.
Cialdini
The guru on influencing principles and how to persuade people. He has 7 principles: Social Proof, Authority, Scarcity, Commitment & consistency, Sympathy, Reciprocity and Unity.
CI/CD (Continuous Integration/Continuous Delivery)
This is a bit like an assembly line in a factory, but for software. Every time someone changes something about the software, the system automatically checks that everything still works and releases the latest version.
ChatGPT
The digital sidekick you never knew you needed, but now can't live without - think a cross between Shoerd (read: a human library) and that one friend (Tom the tester) who always knows too much at trivia nights. (Written by ChatGPT itself 😉)
CMS
Content management system. The system where the content of your website resides and where you can edit text and images. For example, Wordpress or Statamic.
CMYK
The print colour code, not to be confused with RBG, and stands for the colours Cyan (blue), Magenta (a mix of red and blue), Yellow (yellow) and Key.
Concept
A good idea.
Concept7
The best idea
Content
Content, such as text, images or video.
Conversion
An action that leads to the website visitor buying something or leaving their details (or whatever purpose you have defined).
Conversieratio
The number of people who performed an action on your website, divided by the number of total visitors. Ideally, you want this percentage to be high, and there is always room for improvement.
Conversion optimisation
Conversion optimisation is really just digital persuasion: how do you make sure visitors to your website don't get lost, drop out or perform mysterious disappearing tricks just before they click 'Buy Now'? It's psychology, UX and a bit of magic - but without the smoke machines.
Copy
Copy is like the peanut butter on your communication sandwich: it spreads everything out nicely and makes the message stick.
Copy
CRO
Conversion Rate Optimisation. Turning all the knobs on your website until your conversion rate is highest and your visitors feel more engaged.
Crawling
The process of search engines where small 'bots' or digital spiders scan your website to determine how relevant your website content is.
CSS
A document of code that defines what your website looks like.
CTR
Click Through Rate, how many people click on something divided by the number of people who saw it.
Customer Experience (CE)
Your customer's full experience of your product or service
Customer Journey
What your customers all do in relation to your product and service rather than what you want them to do. Also called Customer Journey.
Customer Journey Mapping
Customer journey mapping is creating a route for your customers so that they can take the highway to satisfaction without getting lost in the maze of confusion.
D
Debuggen
The developers go to work like detectives: finding and fixing what went wrong in the software or on a website.
Deliverable
What we deliver during projects
Design challenge
See 'designchallenge'.
Design Review
Get and give feedback on the design to check if it is well designed or correct according to the requirements.
Design sprint
In a week, come up with an idea, develop it and test it.
Design thinking
Deepen, Talk and Test with your target audience before creating anything.
Debrief
What we think you need.
DPI
Dots Per Inch, a unit of resolution regarding images, see also 'PPI'.
E
E-commerce
Online shopping and web shops.
Eye track
A research method for looking at what others look at on a website.
Expert review
Have your product reviewed and analysed by someone who understands it.
F
Feature Creep
The longer a product or website exists, the more features creep in
Figma
The programme we use to create (visual) designs of your website and app
Feedback
Comments and feedback. Sometimes substantiated, sometimes not.
Fold
The 'fold': the first visible piece of your website or app. Can be different for each user and is therefore a somewhat outdated metaphor from the newspaper world.
Frontend
Elaboration of the visual design in code.
Font
A specific style of a lettertype. Fine to use interchangeably too, we really don't get angry.
Footer
The bottom of your website with text and links to different pages.
Functionality
A functionality says something about how you can use a website or digital product. For example, a specific task or action such as: Look up contact information.
Funnel
English for 'funnel'. That thing you sometimes use in the kitchen for water, for example. You have those for websites too, only you throw visitors in there so they will convert (see 'Conversion').
G
Graphic design
See 'Visual Design'. Not to be confused with Graphic Design or DTP (printing).
user
Person who always behaves just a little differently than you think (:
User research
Ask your customers if they understand what you have come up with and what they need.
Usability
How easily a digital product can be used by the likely user(s).
Shape
Psychological principles about how you experience things.
Golden circle
Why your business exists (An exercise by Simon Sinek).
Google Analytics 4 (GA4)
The newer version of Google Analytics with an overview of statistics about your website, e.g. how many users viewed which pages.
Google Tag Manager (GTM)
A way to keep various tracking codes (see 'Tracking (2)') in one place and set goals for your website tracked through Google Analytics.
Google Search Console
An overview of how your website is found in Google.
Gradient
A gradient between 2 or more colours
Grid
A grid that helps to properly place elements in a layout
H
Heatmap
A map that represents click actions or movements on a page by colours, red for hot (many clicks, a lot of movement) and blue for cold (few clicks or little movement).
Heuristics
The golden rules from Sjoerd Walinga for how to properly design a website.
Hobson + 1
One choice is not a choice. You are adding an extra option in addition to the choice/action that is already there. The extra choice is often less important or interesting, so the visitor chooses the first option.
Holacracy
Way of running your business where self-management is central. Sometimes lovingly interpreted as "Figure it out for yourself"
Hotjar
A programme to run user survey through your website
HTML
Abbreviation of HyperText Markup Language. Technical story. The standard markup language (or code) of the web. The language that tells e.g. what a title and a paragraph is of a web page.
Human Centered Design (HCD)
Design by first looking at the needs of the people who are going to use your product.
Corporate identity
Your brand's visual guidelines.
Holacracy
Information architecture
Layout, labelling and unlocking of content and pages on your website.
Innovatie
Inventing, making and testing new things.
Interaction design
A technical outline that shows how something should work.
Iteratie
One more time but better.
IXD
See 'Interaction-design'
K
Klant
Buyer of our products or services. Do we work with and listen to well. But not as well as to your users.
Channels
Twitter / Linkedin / note at the Albert Heijn.
Kick-off
Joint start of a project. We do this internally with the team and then with the customer.
Kerning
The r u i m t e between individual letters in a word.
KPI
Key Performance Indicator. A measurable point that is important for your business.
L
Label
The questions in a form you want someone to answer.
Layout
Design and set-up of a page
Leading
Extra space between text lines
Lean
Make it small.
font
A 'family' of fonts. Arial is a font, Arial bold in 12 points is afont.
Look & Feel
The design in colour and shape
M
MBTI
Myers-Briggs Type Indicator. A method of looking at how people make decisions. Is quite interesting, read our articles on MBTI once!
Merkidentity
What you portray as a brand, in colour, fonts and story.
Metric
Something that can be measured and tracked.
Merge Request
A merge request is when you want to add your piece of a group project to the whole project, but with code.
Microcopy
A short but compelling text, often combined with a CTA button.
Mockup
Looks just like real, isn't it. For example, an image from your website.
Mobile first
The website design is created for mobile screens first, and only then for desktop.
MVP
Minimum version of your product that you can go live with.
N
NFC
The technology of e.g. contactless debit cards
NPS
Heavily overrated metric. Can be forgotten immediately.
O
Onboarding
Make it easy the first time for your new customers in their encounter with your product.
Online strategie
Helps you make choices about what to online to do to engage and keep people involved.
Designchallenge
Formulation of the core problem you need to solve for your users
Design principles
Principles for good and consistent design.
P
Pipeline
A technical route by which pieces of code are merged and transported from the laptop to your screen
PPI
Pixels per Inch, a form for resolution. More = sharper image.
Prototype
Quickly set up testable model of your idea. For example, a clickable version of your website set up in Figma without code.
Person
Fictional example character from your target audience.
Product owner
Decision-maker in the project.
Propositie
What you want to communicate to your visitors and why they should be with you. Written from your visitors' needs.
Photoshop
Design programme for designers who work a lot with images.
Q
Quality assurance (QA)
Ensuring that the design is made as designed.
R
Resolutie
How many pixels are displayed on a screen.
Respondent
Someone who participates (often for a small fee) in user survey.
Responsive
Your website scales well to all screen sizes, desktop, mobile and tablet.
Retrospective
Looking back on the project or sprint, what went well, what didn't go well and how can we do better.
RGB
(Red, Green & Blue) Digital colour code.
Roadmap
An overview of the project for the next 12 months, in line with your online strategy
ROI
Return on investment: but does it deliver?
S
Sans-serif
Font without serifs. Often more modern.
SCRUM
Divide work into small cubes
Scope
What the size or scope of the project is. What is within the agreements and what is not (out of scope).
SEO
SEO is like playing hide-and-seek with Google, constantly shouting "Here I am!" to make sure you are found first. Stands for Search Engine Optimisation, or Search Engine Optimisation.
Serif
Font with serifs. Often classic.
Sketch
Design programme that nobody uses anymore after Figma was introduced.
Slack
Chatting about work and communication channel with your customers.
Social Proof
Social proof, one of the 7 Cialdini principles. People trust people, and therefore like to see experiences from real people.
Sprint
Hard work in a short time.
Staging
This is the final check before it goes live. In the staging environment, the near-final version of the code is tested to make sure everything works perfectly before it goes to the real users.
Statamic
The CMS we use with most clients.
Students.net
An internet venture from the early 2000s that John still talks about often.
SEO
T
Template
A template, e.g. a generic design for a page
Tester
A special type who works at Concept7 and deals with testing (read: demolishing) client websites. They are never satisfied, and find everything bad, but in doing so ensure top quality digital product
Test environment
Think of the test environment as a training ground. It is a safe place where developers can try out and test new things before they are actually put into use.
Accessibility
The extent to which all visitors to your website, regardless of visual, hearing, motor or cognitive impairments, can use your website.
Tooltip
A small hint that appears when someone clicks on an 'i', which contains additional information.
Toptaak
The most common reason for people to visit your website.
Top tasks survey
Method for user research via a tool such as Hotjar. Who come to your website and why.
Tracking (1)
Making all space between letters larger or smaller
Tracking visitors on your website with, for example, Google Tag Manager.
Typographies
Applying fonts in your design
U
Usability
UI/User Interface
Graphical representation through which users and devices interact. Sometimes pronounced 'Goewie' (GUI).
User journey
Zie 'Customer journey'.
User research
Don't think of it yourself, ask your users.
User story
Narrative of what someone should be able to do on your website. A functionality highlighted from the user's perspective.
UX
User Experience (UX) - The feeling you get during and after using a product. Be it the smooth flow of a well-designed website, or the sheer frustration of an online form. Often used as a fancy word for 'making sure people don't run screaming away from your website'.
V
Valideren
Testing whether something is right or working
Visual Design
The visual side of design: typography, use of colour, images, etcetera.
Vector
Digital information about a point in a design. Designing in vector makes it scalable until sine die
Viewport
The visible piece of a web page.
W
Waterfall
Working from A to Z in 1 x. Opposition of Agile working
WCAG
Wireframe
Construction drawing in black, white and grey of a digital product.
White space
Deliberately add extra space in your layout, for example between text and images.
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 🙂