Design for your mother - What are you all saying dear?

Linn Helen Gundersen CRO Generalist Concept7
Linn Helen Gundersen
Last updated: 20-03-2024 15 min. read time
Design for your mother - What are you all saying dear?

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!

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

#

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.

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

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

Copy is like the peanut butter on your communication sandwich: it spreads everything out nicely and makes the message stick.

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

Way of running your business where self-management is central. Sometimes lovingly interpreted as "Figure it out for yourself"

I

Ideatie

Coming up with ideas within Design Thinking.

Information architecture

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.

kerning-kakhiek-stijl-concept7.jpg

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.

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

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

SEO is like playing hide-and-seek with Google, constantly shouting "Here I am!" to make sure you are found first.

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

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

Tracking visitors on your website with, for example, Google Tag Manager.

Typographies

Applying fonts in your design

U

Usability

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

Accessibility guidelines.

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.

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

WYSIWYG

What You See Is What You Get: editing content directly at the front end of your website, for example in your CMS.

Z

Z-index

What you used to fix your order of elements. See also 'CSS'.

Online growth begins with knowledge

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 🙂

Preference