If you are confused by all of the technical jargon and confusing terms that are used in developing your website, you are in the right place. Hence, get yourself ready now and learn some basic web design lingo so you can communicate properly with your design and development team.
#1 : Design Brief
It is a document with multiple questions about your business. For instance:
1. Who makes up your target market?
2. List your main competitors
3. What are your goals for this project?
#2 : The Basics
Hosting, Domain, Content, Sitemap, Page Layout
Now try 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.
#3 : Design & Development
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.
Placeholder Images / Text
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. The placeholder text is used to specifies a short hint that describes the expected value of an input field
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 meta tag is an HTML tag that contains specific information about a web page. Meta tags typically contain an abbreviated description of the page's subject matter and other information. Meta tags are used by search engines to index web pages and filter online content, and do not appear in the user's browser display.
Spam / Spamming
Spam typically refers to unsolicited junk mail and blog comments. Spam can consist of legitimate advertisements for products and services, or may be part of an online scamming operation. Spamming refers to the bulk dissemination of spam posts, or the repetitive posting of spam on public forums.
Blog / Knowledgebase
A blog is a website consisting of articles, or "posts," typically associated with a single person or organization. It is an online journal where people can share opinions and discuss various topics. Blog can also address a wide range of topics from politics to food culture to the arts. They can be the work of a single author or a group of contributors.
Archiving internet data refers to the collection of information, including files, visit numbers or website "hits," and media files. Individual websites and computers often have archives collected over the life of the site or the device. Larger organizations, such as the Internet Archive, collect data from across the internet to create an all encompassing database of internet activity and information.
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.
Above 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.
ALT Text / Tag
The ALT text or ALT tag is a bit of HTML code that is added to an image. This is the text that appears when you hold your mouse over an image on a website. Google, in their article about images, has a heading 'Create great alt text'. This is not a coincidence, Google places a relatively high value on alt texts to determine what is on the image but also to determine the topic of surrounding text. Applying images to alt text/tags such as product photos can positively impact an ecommerce store's SEO.
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 Optimiztion Engine)
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./span>
It 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.
User interface refers to the usability of the website and the ease in which a user can find what they are looking for.
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”.
CPanel / Plesk
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.
Cache / Caching
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)
#4 : Most Common File Types
( .psd )
Adobe Photoshop file format – Often used for photography editing, website designs and various other graphics
( .eps )
A common vector file format allowing a graphic to be resized without altering the quality or resolution. Designers often request this type of file when needing a business’ logo if used on multiple mediums or large formats.
Portable Network Graphics
( .png )
This file type uses lossless compression and is similar to a GIF. The difference is a PNG allows for transparency and can’t be used in a CMYK (print) color space. It’s meant for use on the web. PNG does not support animation.
( .ai )
A vector file format used for Adobe Illustrator. A vector file can be resized to an infinite size without any data loss. This is ideal for large graphics and certain types of printing such as screen printing.
Joint Photographic Experts Group
( .jpg / .jpeg )
This file extension is used for JPEG files. A JPEG is created with lossy compression. Lossy compression removes portions of the data of a particular file allowing it to be easily viewable on the web in a smaller file size. Photographs are generally good candidates for this type of compression.
Graphics Interchange Format
( .gif )
A simple graphic, typically not a photograph is a good candidate for this type of compressed file. A GIF is created using lossless compression, which reduces the size of the file without removing any of the original data. GIF also supports animation. You might hear the term animated GIF occasionally. Some designers may use an animated GIF in email design or in simple web banner ads.
Small Web Format
( .swf )
It is a file format for displaying animations on the web. A SWF is created by the program Adobe Flash and can’t be edited. To edit a flash file, you need the original .fla extension file.