Have you ever received an email or gotten off a call with your website designer and thought to yourself “What the heck were they talking about?!”
I feel you! When Matt and I first started working on websites, I was clueless about website jargon. It sounded like jibberish to me and I had no clue what he was talking about. I’m a writer, not a developer!
This made it extremely difficult to communicate about the websites we were working on, so I made it my goal to learn the lingo as soon as possible.
I knew before I learned all the design and technical terms, I needed to have a solid grasp on the basics. I was constantly confusing a few of the terms until someone used the metaphor of a house and it finally clicked for me.
So without further ado, the basics…
The Basics (Hosting, Domain, Content, Sitemap, Page Layout)
The best explanation I’ve heard for the basics is to imagine your website as a home. The land your house sits on is equivalent to your hosting. Your domain is your address which shows people where to find you. Your sitemap is your house’s blueprint which shows which rooms are where and how they are connected. Your content is the home’s furnishings and the page layout is how the furnishings are arranged for the overall look of the home.
Make sense? Ok, now onto the heavy lifting.
Design & Development Terms
A wireframe is a simplistic drawing of the layout of a webpage. Many designers create a wireframe before a mockup to avoid missing any critical elements or pieces of information. They allow designers to focus on the UI and layout without the distracting elements of design.
A mockup is a graphic representation of a website a designer builds to help the client see what the design will look like (a lot of people have difficulty imagining the site from only the wireframe). Mockups are built in a design program which makes it easier (read: cheaper) to make changes at this stage compared to after the web project is completed.
This is latin placeholder or dummy text that most designers use to see how a design would look filled with text if the copy isn’t ready.
These are often images used in the design or early development stages. It is used to fill the space of an image on a mock-up or early stage of design until the final image is ready.
Navigation is the system that allows visitors to move around a website. Navigation can include menus, links within pages, breadcrumbs, or anything else that allows a visitor to move from one page to another.
The layout is the arrangement of the elements on a page. The layout is used to guide the user through the page. Text, images, and navigation links are all important pieces of the layout.
A hyperlink is a link from one web page to another. Hyperlinks can link to pages on the same site (internal links) or other sites (external links). Hyperlinks can be text or images and are often highlighted in some way (underlined, put in a different colour, etc)
A landing page is the page where a user first enters a website. It may or may not be the home page. Often, a special landing page is created to elicit a specific action from the new visitor.
The header is at the top of your website. It usually houses your logo, navigation menu and sometimes a search bar or social media links.
THE FOLD (ABOVE THE FOLD/BELOW THE FOLD)
The “fold” is a carry-over from newspaper publishing days. In web design terms, anything above the fold refers to content you see when you first
Hero image is a term used to describe the main image on a homepage or landing page. It may be a large static image, a rotating image slider, or even a video clip.
Your branding is not just your logo. It encompasses all messages, promotions, actions, and offerings of your business. It describes what your business is and what it stands for.
A selection of colours that will be used in your website design. Generally, 2-4 colours that are appealing together can create a cohesive design. The colour scheme of your website should match the colour scheme of your branding.
sometimes referred to as “negative space” is the space around your design elements. White space provides a clean, professional look and can bring emphasis to certain elements of your design like images, text or call-to-actions (CTAs)
SEO – SEARCH ENGINE OPTIMIZATION
Copy that is search engine optimized has been written in a way to improve the likelihood of it showing up in search results for relevant keywords. Images, layout, formatting and links can all help SEO.
refers to websites that use fluid-width layouts that can adjust to different sized screens and display properly on any device. This means your website will look great whether a user is on a computer, tablet or mobile device
UI – USER INTERFACE
User interface refers to the usability of the website and the ease in which a user can find what they are looking for.
UX – USER EXPERIENCE
User Experience includes UI as well as all of the emotions and feelings a user has when interacting with a website.
A part of the website hidden from view of regular website visitors. It is used by developers and authorized users and is where the code, content and files are managed for a website.
The part of the website that is visible to users and refers to the look of the website (pages, images, content, etc).
CMS – CONTENT MANAGEMENT SYSTEM
A content management system is a software program used to create and link your website content together. It allows users to edit, delete and manage the content of a website from a visual interface. Most CMSs don’t require knowledge of programming languages, CSS or HTML to update a website. Examples: WordPress, Squarespace, Joomla, and Drupal.
CSS – CASCADING STYLE SHEET
A group of files that contain the colours, fonts, layout and overall appearance of your website. Unlike HTML, a style sheet may only need to be altered once to have an affect on multiple pages of a website, hence “cascading”.
A control panel that acts as the administrative backend of a web host.
The software a website visitor is using to access the internet and view the website. Examples include Safari, Google Chrome, Firefox, Opera and Internet Explorer.
Refers to the files that are saved or copied by a web browser so that the next time that user visits the site, the page loads faster.
A tiny customizable icon which is usually adapted from your logo; it appears on browser tabs and bookmarks (see ours in your browser tab above)
HTML – HYPERTEXT MARKUP LANGUAGE
It is the primary language used to write web pages.
Hello, we're Candice & Matt. We provide tips, tools and resources to help entrepreneurs build their dream businesses. Read More
The small business community is filled with many talented writers. Each Saturday, we feature articles that we found interesting and think that will be of […]
Web Design Branding & Marketing Entrepreneur Productivity Weekly Roundup Behind the Scenes Many people are unfamiliar with one of the tools Dropbox has published to […]
Web Design Branding & Marketing Entrepreneur Productivity Weekly Roundup Behind the Scenes Does it reflect the products and services you offer? Make sure your business name […]