Welcome to My Blog

When I first got into digital marketing as a career change a few years back (I had previously worked as a financial advisor and had a brief stint starting a study-abroad program for a Chinese government contracted company) I thought the term ‘growth driven design’ was a bit haughty.

It reminded me of an interview I once read with a favorite musician of mine, who was labeled in the music press as an IDM artist, the acronym standing for ‘intelligent dance music’.

The artist’s response, and of course I need to paraphrase here, was: “Intelligent dance music? It makes it sound like other types of dance music aren’t as intelligent as this kind. A bit nasty, innit?” (He was English, and “innit” was the only part I didn’t need to paraphrase, as it’s humorous to read it online when one is a guy born and raised in the US.)

I agreed with his perspective, and felt the same way when ‘growth driven design’ and ‘GDD’ first began exploding on marketing blogs left and right, bandied about like free candy. Does the term imply that other web design methodologies were somehow not aimed at growing the organization? That these companies NOT using GDD were suckers, and we select few were privy to a pot of marketing gold? Should I feel guilty for knowing how to do this?

Well, yes. I should feel guilty, but only if I refuse to share this knowledge with others. Hence – here we are now.

Before we get into how GDD impacts your sales process, we should clear the air beforehand, and this is not something that every marketing professional will let you know from the get-go…but I will because I’m still a rebel at heart.

Growth driven design is not practical for every organization.

If you are Nike or Coca-Cola, you probably don’t need to be a GDD devotee to the degree that the rest of us do. Until my company attains the market salience and multi-billion revenue of a Bloomberg or Macy’s, I am a convert one hundred percent to the value of GDD.

Also, if you run an organization in certain industries (i.e. legal services, construction work) where your online presence needs to be as consistent and predictable as your personal communications, delivery of services, what-have-you, then GDD might not the best way to approach your web design efforts.

Yet, emphasis on might…

However, if you run a dynamic company, breaking ground with your products or services, trying to edge out the competition as one of the new guys, or any other situation where online customer conversions via your website are vital for your sustainability – welcome, friends. Time to dive in.

So, why doesn’t Mercedes-Benz need GDD?

Once your company has been globally recognized as an industry leader for about 100 years, well, you gained market salience during the entire time that many of your customers were birthed and passed on, all before the internet existed.

Yes, admittedly this is a bit grim, but it’s a fact. Rolex doesn’t need GDD for their web presence. Not to say it can’t be a bit of fun to try it out for those guys, but it could very well plainly be a waste of time and (ahem, negligible degree) of resources. 

So, why does your company need GDD?

Because traditional web design approaches are robbing you of potential customers for a crazy number of reasons. I don’t use the word ‘crazy’ as an adjective often, so here’s why it’s warranted:

• You started to grow your company after the dawn of the internet which, for practical purposes, demands that your web presence is your primary line of contact with customers or
• You work in an industry for which a web presence is impossibly valuable for your sales
• The traditional approach of design – a complete overhaul of your website every two years – alienates customers who have not yet had the opportunity to develop brand loyalty to your company

Before I get into the stats (they’re going to happen eventually – this is a blog post about marketing after all), here’s another quick story that illustrates the impact of GDD:

When I was 23 I was department manager at a major domestic chain store outside of NYC. I had retail experience for the preceding five years at four other retail outlets. The one I’m talking about now confused the hell out of me – our merchandisers and designers were spending every single day going over fresh plans from corporate to redesign the entire store bit by bit, and here’s the kicker, during retail hours.

I found the idea ludicrous. Who would want to shop at a store that is always a work in progress? But…it worked. The target audience were Millennials and Generation X’rs, and this redesign perpetuity brought us in measurably greater foot traffic (and thus sales) than any other competing stores in each and every American college town we had property in.

Yes, we did the analytics.

What this retailer was doing was the physical equivalent of web GDD. It didn’t make sense to me as a kid, but it makes tremendous marketing sense to me now as an adult – give the customers what they want deep down from your by testing it out on them while they’re already in your store.

I swear I’ll get into the numbers soon, but here’s the thing – the core audience didn’t mind the sawdust or awkward positioning of fixtures while things were shuffled around; the value of the product was already established. However, the customers kind of on the fence, that walk in once or twice to survey what the brand feels like, are much more enticed to walk in again a few days or weeks later just to see how the store had changed.

And this was all analyzed by corporate…

Color choices for seasons were not simply chosen at random – they had be tested over several years. In tandem, trends were analyzed and incorporated into the store’s design along with what had learned to be the company’s target audience preferences.

Ladies and gentlemen – this was growth driven design in actual physical practice.

The numbers you’ve been waiting for…

You are probably making your own assumptions for why when it comes to web design GDD is a godsend for countless organizations, why it works, and how crucial it is to grow sales. To reference my earlier point, ‘growth driven’ isn’t implying that GDD is what simply grows a company’s sales, but instead that it drives sales when sales need to be driven through your website experience.

If you’re like my agency and in charge of turning SMEs and enterprise-level technology companies into industry dominators through digital marketing, or are one yourself, this is why you need to incorporate GDD or suffer miserable profit margins:

• Across the board, human attention spans have shrunk down to 8 seconds. Yes, shorter than a goldfish’s, not a whimsical exaggeration
• Consumers (almost 40%) are exceedingly likely to leave your company’s website if the load time is longer than they are used to, which is now no more than two seconds
• Tablet use for web browsing has increased 30% from 2013-2015
• Smartphone use for web browsing increased 78% during the same period of time
• Mobile devices now account for two out of three minutes that the internet is accessed

What does this mean for your web design? It means that your potential customers are expecting to know how your product or service is going to solve their pain points, but with less text and prettier pictures.

Remember, your core audience will still be loyal to your brand, because the content that worked in the first place is still there. However, the traffic that is walking through your doors is going to need to know why your brand is the right choice for them.

This is where GDD gives you greater opportunity to convert them than traditional web design. The sales and marketing teams work in conjunction with your designers in testing out what works for the customer, instead of what your brand assumes works for the customer.

In this sense, GDD allows you the freedom to optimize your site to cater only to the customer’s expectations and desires. Through continually redesigning your site, while analyzing what changes are providing the greatest ROI, you are building a site design that speaks exactly to both your core customer base and to those unfamiliar with your brand yet. 

How does this impact your sales process?

When continuously optimizing your website for your target audience, your sales risks are substantially mitigated against consumer preferences and trends. This means that not only are you saving money on an extremely costly overhaul of your site, in at least the tens of thousands, but you are delivering a site that is based not on assumptions, but actual customer behavior regarding their preferences and expectations.

This means that your sales team can now communicate with customers that are already prepped to be closed. Sales staff are kept in the loop month after month of what is working to convert visitors to leads. Your team may already know of your product and its value, but know they are also aware of how informed the leads are via your design; the content and visuals that have spoken to the buyer at that moment in time.

For example, buyer preferences change over time, such as what color car is in fashion and which have fallen out. With an informed sales team, one which knows exactly what pain points are relevant to customers at a given moment in time and how preferences have shifted from one month to the next, well, think of the possibilities.

When you’re new to marketing, especially on a small team, you might have to do a lot of things at a moment’s notice. And when it comes to things like blogging and social media, sure, you’ve got this. But soon enough, you’re being pulled onto design projects. One day you’re mocking up an infographic; the next, you’re designing an ebook. You feel woefully unprepared — and that design vocabulary? It can feel like a foreign language.

Sound familiar? 

We’ve been there — and we know we’re not the only marketers who have, at some point, needed to become fluent in this vocabulary. So we decided to share a larger glossary, to help us all step up our game a bit. By no means is this the be-all-end-all of design terminology, so feel free to add your definitions in the comments as well. Here’s what we have, organized alphabetically.

The Ultimate Web Design Terms Glossary

A /
B /
C /
D /
E /
F /
G /
H /
J /
K /
L /
M /
N /
O /
P /
R /
S /
T /
V /
W /
X /
Z

A

1) Alignment

The positioning of the elements in your design (e.g. text, images, etc.). These elements can be aligned to both the page and to each other. For example, this paragraph of text is aligned to the left margin, whereas the lines depicted in the image below are aligned to the right.

Source: Pixabay

2) Analogous Colors

Colors that appear adjacent to each other on a color wheel.

Source: nopira

3) Ascender

A linear extension of a letter that appears above the midline — also see baseline, cap height, descender, and extender.

Source: Max Naylor

B

4) Baseline

The even, invisible line on which all letters of a typeface sit — also see ascender, cap height, descender, extender, and midline.

Source: Max Naylor

C

5) Cap Height

The distance between the baseline and the top of uppercase letters — also see ascender, descender, extender, and midline.

Source: Max Naylor

6) CMYK Color Model

Stands for cyan, magenta, yellow, and black. This set of colors is used in print design because of the way paper absorbs light.

Source: Capsoul

7) Color Wheel

A circle of colors that shows relationships between primary, secondary, and tertiary colors.

Source: nopira

8) Color Schemes

The combination of two or more colors from the color wheel — also known as color harmonies.

9) Complementary Colors

Colors that are directly opposite of each other on the color wheel.

Source: nopira

10) Compression

Reducing a file size by eliminating excess data. Particularly helpful when emailing or saving large image files. See more on lossy and lossless compression.

11) Contrast

The accentuation of differences between colors, shapes, spacing, or any other design element.

Source: Pixabay

12) Crop

When outer parts of an image are removed to reframe the subject matter, or to resize the image’s aspect ratio.

13) CSS

A piece of code that is used to designate the look and feel of a website, separate from the actual content of a web page.

D

14) Descender

An extender on a letter, appearing below the baseline — also see ascender, cap height, and midline.

Source: Max Naylor

15) Dots per Inch (DPI)

Similar to the pixel for the web, dots are the smallest unit of measurement when printing digital images. The number of DPIs refer to the resolution of a printed digital object — the higher the DPI, the higher the resolution.

16) Drop Shadow

A visual effect that displays a graphic as if it had a shadow behind it.

Source: Tizio

E

17) EPS

A file format used for vector images that contain both text and graphics.

18) Extender

The part of a letter that extends above the x-height or below the baseline — also see ascender, cap height, descender, and midline.

F

19) Feathering

A design technique used to smooth out edges of a feature.

20) Font

A typeface in one specific style and size. An example would include Times New Roman Semi Bold in size 14.

G

21) GIF

An image file format that’s best used for small image files with few colors and designs, or animated images. Below is an example of an animated GIF image:

Source: Manuel Almagro Rivas

22) Gradient

A design technique in which one color or portion of an image appears to fade into another.

Source: Public Domain Pictures

23) Grid

A purely hypothetical map of vertical and horizontal lines that helps align images and text within a document.

H

24) HEX Code

A code used in HTML and CSS to designate a specific color, often appearing after the pound sign (#). Below is a chart of HEX color codes:

Source: bmdavll

25) HTML

The computer language used to display content like text, images, and links on the web.

26) Hue

What most people think of as “color” — red, orange, yellow, etc.

J

27) JPEG

An image file type that uses lossy or lossless compression, with little perception in a loss of quality. This type of file is best used for photographs and realistic paintings where there are smooth transitions between colors.

K

28) Kerning

The space between individual letters.

Source: Sherbyte

L

29) Leading

The space between lines of type.

30) Lossy

A form of data compression where detail is deleted as the file size is decreased. A usual lossy compression method is JPEG.

31) Lossless

As opposed to lossy compression, this format allows the image’s detail to be restored.

M

32) Midline

The distance from the baseline to the top of most lowercase letters, including “e,” “g,” and the curve of “h.” Also know as the “median,” as depicted below. See ascender, cap height, and descender.

Source: Max Naylor

N

33) Negative Space

The empty space surrounding a design, whether a webpage or single image — also see white space.

Source: Public Domain Pictures

O

34) Open Type Fonts

The current standard in font formats. It contains both the screen and printer versions in a single file, and is compatible for both Windows and Mac. The file extension is .otf.

35) Orphan

An opening line in a paragraph that appears alone at the bottom of a page. An orphan can also be a word or very short line that appears by itself at the end of a paragraph.

Source: Maat

P

36) Pantone

A color-matching system developed by the Pantone company. Largely used in print design, and used to match printed colors to those that appear on the screen during the digital phase of design.

Source: Pixabay

37) PDF

A file format best used to represent documents and presentations.

38) Pixel

The smallest element of an image on a computer.

39) Pixels per Inch (PPI)

Another measure of image resolution, according to how many pixels are present within a given section of the image.

40) PNG

An image file format that’s best used when the image has large areas of uniform color, or a transparent background (unlike JPEG).

R

41) Rectangular (or Tetradic) Colors

Four colors that are two pairs of complementary colors.

Source: nopira

42) Resolution

A way of measuring the sharpness and level of detail in an image. A higher resolution usually indicates a larger file size, representing the amount of data — like pixels or dots — within the image.

43) RGB Color Model

An acronym standing for the colors red, green, and blue. The RGB color model is used for web design, because monitors transmit light in these colors.

Source: Mike Horvath

S

44) Saturation

How bright or intense a color is.

Source: SharkD

45) Serif

A small line attached to the end of a stroke in some fonts. “Sans serif” refers to fonts that don’t have this line.

Source: GJo

46) Shade

How much black is mixed in with the hue.

47) Split-Complementary Colors

Colors that consist of a base color, plus the two colors that lie next to its complementary color.

Source: nopira

48) Square Colors

On the color wheel, four colors are spaced evenly from each other.

Source: nopira

49) Stem

The primary vertical stroke in a letter. It’s used in the letter “B” and the diagonal line of “V.”

50) Strokes

The lines that make up a letter in a typeface.

T

51) Tail

The descending stroke in a letter that’s often decorative — for example, in the letter “Q.”

52) Terminal

The end of a stroke that doesn’t include a serif.

53) Tint

How much white is mixed in with the hue.

54) Triadic Colors

Color scheme in which three colors located at 120 degrees from each other on the color wheel are combined. It’s often considered the best color scheme.

Source: nopira

55) Typeface

A design collection of characters, including letters, numbers, and punctuations. Examples include Times New Roman, Helvetica, and Arial.

V

56) Vector Image

Instead of using pixels to represent images, vectors use lines and shapes. Because they do not rely on pixels, enlarged vector images still maintain image clarity and quality.

57) Visual Hierarchy

A design principle that visually orders and emphasizes different parts of your content’s message by using colors, sizes, and layouts.

W

58) Watermark

An easy-to-see marker placed over the top of photos on the web and in print. It is used to identify the owner of an image and prevent visual content theft.

59) Weight

In typefaces, the thickness of the stroke’s width. Some examples include demibold, light, and bold.

60) White Space

The blank space surrounding an object in design — also see negative space.

Source: Pexels

61) Widow

The section of text at the end of a paragraph that spills over into the following column or page.

Source: Maat

X

62) X-height

In a letter, the distance between the midline and baseline — also see ascender, cap height, descender, and extender.

Source: Max Naylor

Z

63) ZIP file

A file format that compresses several files and combines them into a single folder. Compressed files do not lose any data to become smaller, and are easily restored by unzipping the ZIP file.

What other web design terms would you add to the list? Let us know in the comments. 

Editor’s Note: This post was originally published in July 2013 and has been updated for accuracy and comprehensiveness.