Website design terms explained
As promised, here’s part two of my design terms blog post. It turned into a bit of a beast, so I decided to split this post into two. My last post was focussed around branding and graphic design terms (if you missed it, you can read it here), whereas this weeks post is all about website design terms.
My main goal for this post is to explain design terms in a human, simplified, no fluff kinda way to help you to understand all the jargon you might have read on designers websites, or heard designers say when you’ve worked with one in the past.
If you’re thinking about working with a web designer this year, or are planning on creating your own website, but are finding the whole thing pretty darn daunting (and feel like design speak is a whole other language which you are far from fluent in) - then this post is for you!
So, without further ado, here are some of the most common website design terms explained in good old’ human English!
Hero Image:
The main, big image that spans the top of a website page. It’s usually the first thing you’ll see when you land on a website homepage.
Hero images are a great opportunity to communicate your brand image, key services, products or offerings. They can create real impact and show off what your business is all about.
Copy:
All of the text included on a website, yes all of it! Everything from:
Headlines
Menu items
Button text (or call to actions - explained below!)
Image captions
Body copy (read on to the next point to learn what this one means!)
Body Copy:
All of the text used across a website in standard paragraphs - basically all the text apart from headings, captions, testimonials, button text, contact details, menu items, headlines etc. (Like the text you’re reading right now!)
Site Map:
An outline of all of the pages on a website.
Site Styles:
All of the fonts, colours, button styles, margins and visual elements that make up a website. Site styles are a great way to customise the look and feel of your website to match your branding.
Website Strategy:
I like to see website strategy as having a plan and intention behind the pretty design. It’s the process of laying the groundwork in order to create a strong, effective website that will support your business needs and help you to grow in the future!
When I work on a website project, I will always start with strategy. My process is quite straightforward. I conduct research and have a few calls with the client to establish their main business and website goals, which are then used to create goals for each page on their website. These page goals will then encourage site visitors to keep clicking through until they’ve reached the defined endpoint (aka - the main site goal).
Some key elements to consider when planning an effective website strategy include:
Business goals (eg: Increase 1:1 service sales by 40% in the next year)
Site goals (eg: book more consult calls)
Site pages (eg: homepage, about, services, contact)
Menus - also known as navigation (explained below!)
Calls to action (eg: ‘book a free consult call’ button on services page)
Developer:
I like to think of a developer as being the glue that holds everything together - like a website’s backbone. A developer builds a website using code and is more focused on the functionality of a site and making sure it’s technically sound.
Designer:
Designers create the visuals for a website and are focussed around how your site will look - everything from images and background graphics to button and opt-in form styles.
Often designers will create a mockup to show you what your site will look like. The design is then typically handed over to a developer to add the code and functionality to turn it into a fully functioning website.
With the amazing advancements in website building platforms such as Squarespace, Wordpress and Shopify, it’s becoming more and more common for developers and designers to blend into one person! When design meets developer, you can reach a sweet spot of beautiful, functional design (pssst I’ll let you in on a secret - I’m one of these blends!)
Domain:
The unique name, location and URL of a website (eg: www.kurlycreative.com). Domain names are purchased through a domain provider (eg: GoDaddy.com) and are then connected to your website host. You can purchase domain names directly through certain website platforms including Squarespace and Shopify. I personally prefer to purchase my domain this way as I find it makes it easier to have everything based in one place, rather than having to switch around to different accounts.
Hosting:
The digital home that stores all of the files of a website. Like I mentioned in domains (above), certain website platforms offer hosting including Squarespace and Shopify.
SEO:
SEO stands for search engine optimization. It’s the process of maximizing a website’s visibility in search engine results. The main search engines include Google, Bing and Yahoo. There are many ways you can boost your SEO - but that’s a post for another day!
Mobile responsive design:
Mobile responsive design basically refers to a website that looks good across all devices and browsers and adapts to the size of the screen it’s being viewed on. With more and more people using their smartphones to browse the web, it’s so important your site looks good in mobile view.
Mission Statement / Brand Bio:
A clear, concise sentence that states what a company does and who they serve.
A good mission statement will instantly communicate who you are, what you do and who you do it for.
I always recommend your brand bio is included front and centre of your website homepage so the visitor instantly knows what your business is all about.
Here’s an example of my brand bio:
USP:
This is your unique selling point - the things that make you unique and stand out from your competitors. What’s your unique selling point? Perhaps you’re a skincare brand that only uses vegan, organic ingredients. Or maybe you’re a business coach who only serves people in the wellness industry. It’s identifying and communicating your USP that will really help you to stand out from the crowd, focus your messaging, and give people a reason to buy from you.
Lead Magnet:
A freebie that you offer to your website visitors via an online form in exchange for their email addresses. A lead magnet is a tool you can use to grow your email list so you can serve your audience, establish authority, build trust and eventually sell to a warm, engaged audience!
Here’s one of my lead magnets:
FREEBIE ALERT!
Fancy a taster of my project prep work?
Sign up to my email waitlist and be the first to know when my project calendar opens up. You’ll get your hands on my Brand Discovery Workbook too, which combines parts of the process I’ll go through with my clients to create beautiful, standout branding and websites.
Call To Action (CTA):
Usually displayed on websites as a button, CTA’s are designed to clearly direct a website visitor to take a certain action. Some examples of CTA’s include:
Book in for a free consult call
Get in touch - fill out an enquiry form
Alt Tags:
This is descriptive text attached to an image file—it may display while an image is loading, and it helps with SEO (aka search engine optimisation - this one’s explained below), as it helps search engines understand keywords that describe the image. Attaching alt tags to website images can have a very positive impact on websites search engine rankings.
MetaData:
Metadata is basically, description of a page’s contents, as well as keywords linked to the content. For example, blog post metadata includes the post title, date, author, categories and tags.
Primary Navigation:
The main menu at the top of a website page that includes links to the main pages on a website.
Secondary Navigation:
Another menu on a website, that’s usually located underneath the primary navigation that contains links to other pages that don’t hold as much importance as the main pages on the website.
Above The Fold:
All the content of a website page that you can see on a screen before scrolling down.
Parallax Scrolling:
A website effect where some background images appear to move at a slower speed than the content in the foreground as a visitor scrolls up or down on the page. This creates a sense of depth, layering and movement which can make for a more unique experience for the visitor. You can check it out on my website here!
And there you have it! I hope this blog post was helpful for you - and if you’re looking for a website designer who talks to you like a normal non-techy human - I’m your gal!
If you missed it, feel free to check out part one of this post explaining all brand and design terms right here.
Are you struggling to what to put where on your website? Then my anatomy of a dream client converting homepage is made for you! Grab yours now!
Grab THE FREE GUIDE below
Did you like this post? Then pin it to Pinterest! 👇
