Useful Design and Website Terminology


Designer


Web Developer


Alignment
This can apply to text itself which can be aligned left, right, justified, centred, etc or simply how the content and images sit on the page and in relation to each other.

glossary_font_align

Bleed
If there is an image or colour that prints right up to the edge of your page it is extended (usually around 3mm) beyond the edge which allows for any small errors during trimming of the document and means are no unprinted white areas along the edges of the final document.

page_bleed

Body Copy / Body Text
The main textual content of a document or web page.

Branding
The way a company is portrayed to the public in terms of colour, logo usage and general design and style in order to build a professional and consistent brand look and help make the company quickly and easily recognisable.

Clipping Path
A clipping path is an outline that can be added to any image using software like Photoshop. Areas that you do not want to be seen are masked outside of the path and anything within the path shows up. When the image is placed into a page layout application, such as Indesign, you can turn the clipping path on or off. Turning it on makes everything within the path show up and everything outside the path becomes transparent.

CMYK
Acronym for the colour space Cyan, Magenta, Yellow, and Key (black). This is a subtractive colour model used in colour printing. Often referred to as process colour or four colour.

subtractivecolour

Crop mark
Small marks on the outside corners of press-ready artwork, they tell the printers, after the job is printed, where to trip the job down to in order to create the finished document.

page_crops

Digital File/ Soft Copy
Image or text files that are stored on a computer or disk as opposed to a printed nard copy. Being digital generally means can be easily copied and emailed.

DPI
Acronym for Dots Per Inch, DPI refers to print resolution of an image, or the output device (like a printer). The ideal standard for high quality print is 300dpi. The higher the resolution the sharper the image looks.

Drop Shadow
A visual effect added to an image or text to give the impression that the image is raised off the page and creating a shadow.

Duotone
A method of printing an image using only two colours, generally black and a spot colour but not always.

Export
Exporting is an alternative method to saving a file. Typically, when you export a file, that file type is no longer editable by the program you created the file in.

Gradient
Usually a smooth and gradual transition from one colour to another.

Graphic Design
The art or profession of visual communication that combines images, words, and ideas to convey information or a concept in an eye catching manner.

Grayscale
Images made up of black, white, no colour, and up to 256 shades of grey.

Hard Copy
Files, photos or text documents in the form of a physical object, of any media suitable for direct use by a person usually something on paper.

Heading
Generally larger, dominant bit of text on a page implying what the page is about.

Images
A general term for photos, vector files, logos, etc

JPEG or .jpg
A file type. Short for “Joint Photographic Experts Group,” (the group that created the standards for what are JPEG images) JPEG is the type of file, while .jpg is the file extension). JPEGs use adjustable compression, meaning you can make them smaller (though at the cost of clarity) for uses such as web.

Kerning
In typography, the spacing between individual letters in a word.

Leading
(pronounced “ledding,” not “leeding”) In typography, the vertical spacing between lines of text. The term comes from the strips of lead that were used (for the same purpose) on printing presses.

Logo
The main symbol / icon used by a company. Just a part of the overall branding.

Lorem Ipsum
Lorem Ipsum is filler text used by designers to build a design or layout when the real text is not yet available.

loremipsumeg

Margins
A non printing area of white space around the main content printed area of the page.

page_margins

Negative space
The space around the content on your page, including, but not limited to margins. In other words, it’s ALL the white space. Sometimes negative space helps to reduce the clutter on the page and reinforce your text or images.

Page Size
The size of the final printed item.

page_trimsize

Pagination
Simply the page numbering in a document.

Pantone
A standardised colour matching system for colour printing inks, usually called ‘spot colours’. Colours are identified by a Pantone PMS number which helps with consistency Of colour no matter where you are and who is printing the job.

PDF
A file type with the extension .pdf – short for “Portable Document Format,” and first developed by Adobe. This file format is NOT dependent on other applications for proper viewing. Every PDF file has a complete description of a document embedded in it, including the text, fonts, graphics, and other information needed to display it. The files are not easily editable so are ideal when transferring files (for example between agency and client) to preserve the design and also allows for compression. Having said that PDFs are also used to create digital form which cane filled out on screen and emailed back.

Pixel
The smallest element of an image. Photos can be made of thousands and thousands of individual pixels forming what the eye sees as one smooth image.

PNG or .png
A file type with the extension .png – short for “Portable Network Graphics,” (but you can just say “ping”). PNG is an image format used for lossless compression and displaying images on the web. PNGs allow for millions of colours, as well as transparent backgrounds, but that can sometimes result in larger file sizes as compared to a .jpg.

Print Area
The area on the page designated for the content to be printed. Dependent on the design or job the margins can be ignored and the images or colour can ‘bleed’ right off the edges. Generally though you would want to keep your text within the margins for the sake of having a tidy layout and to make sure nothing important gets lost during trimming.

page_printarea

Proof
An untrimmed and unfinished printed version of the document from the signed off artwork for checking by the client.

Press Ready
Signed off artwork that has been made ready for the printing. This usually means a high resolution PDF file with all images at 300dpi and in the CMYK colour space, plus embedded fonts, crop, registration and bleed marks.

Radio Button
Also called an option button, radio buttons allow users to choose only one of a number of presented options. Common radio buttons could be yes/no questions, or colours (Red, Green, Blue, etc.) A radio button is different from a check box which allows multiple checked items.

Raster
An image made up of individual pixels. These are the most common form of images, in particular colour images or photographs. When you enlarge a raster image too much it can look pixelated (bitmapped); because you are taking each block of information (pixel) and just making it bigger. Raster images are often created in programs like Photoshop and have the extension .jpg or .gif or .tif.

Resolution
Usually measured in DPI (dots per inch) for print. The more pixels in an image, the larger the file size and better it will look. High resolution images are 300dpi. Screen resolution is 72dpi.

RGB
Acronym for the colour space Red, Green, Blue. RGB images are used for on-screen use, like websites. By combining these three colours, a large percentage of the visible colour spectrum can be represented.

Sans Serif Typeface
The typefaces without the ‘twiddly bits’ on the ends. Helvetica is probably the most well know Serif font.

serif-san-serif_fonts

Serif Typeface
The typefaces with the ‘twiddly bits’ on the ends. Times is probably the most well know Serif font.

Social Media
Online applications that allow people to create, share or exchange information, ideas, and pictures/videos in virtual communities and networks. Examples are: Facebook, Instagram, Linked In, Skype, You Tube, Twitter, Vimeo, Flickr, Tumblr, Pinterest, etc

Sub Heading
Text usually smaller than the heading and bigger than the main copy and giving a bit more of a lead in to the page text.

Thumbnail
A smaller version of a graphic image. Usually serve as a ‘preview image’ in an image gallery on the web.

TIFF or .tif
TIFF (Tagged Image File Format) files, saved as .tif files, are one of several graphic file formats used for saving images. TIFF is commonly used file format for saving high-quality, colour, raster images. The files extension is .tif

Trim Size
The size of the final printed item after the printer has trimmed it down.

>page_trimsize

Vector
Made up of points connected along a curve (or vector). Basically, the visual information is contained in the relationship between the points, not the points themselves, so the image can be expanded to an infinite size without losing any quality. Vector images are created in programs like Illustrator and have the file extension .eps – we always supply our logos as .eps images for the best quality at any size.


Popular Tools of the Trade

Acrobat
Software product developed by Adobe systems to create PDF (Portable Document Format) files. PDF files give most people the ability to open view, and print pdf documents without having to purchase expensive fonts and other sotware.

Adobe Creative Suite (CS)
A suite of graphic design, video editing, and web development applications developed by Adobe Systems. Including several Adobe applications such as Photoshop, Acrobat, InDesign, Premiere Pro or After Effects.

InDesign
Currently the leading desktop publishing software and part of Adobe Systems Creative Suite. It can be used to create works such as posters, flyers, brochures, magazines, newspapers, and books.

Photoshop
A powerful raster graphics software application and part of Adobe Systems Creative Suite. Created in 1988 and now the industry standard for manipulating and creating raster images.

QuarkXpress
QuarkXPress is used by individual designers and large publishing houses to produce a variety of layouts, from single-page flyers to the multi-media projects required for magazines, newspapers, catalogs, and the like. QuarkXPress once dominated the market for page layout software, with over 95% market share among professional users. As of 2010, one publisher estimated that US market share has fallen to below 25% and Adobe InDesign has become the market leader.

Affiliate Advertising
Advertising banners placed on other people’s websites (“affiliates”) to help a company to sell their own products or services. The website hosting the banner adverts usually receive a commission per click when the viewers click the link.

Bandwidth
The amount of information your broadband connection can carry, usually measured in the millions of bits per second (megabits per second, or Mbps) or billions of bits per second (gigabits per second, or Gbps).

Banner
A banner is a graphic that is placed around a website’s main content to advertise other companies product or services. Graphics can use static images and text, or even be animated. Banners are a good way to draw attention to special information or offers, whether it’s on your site or an external site.

Browser
A browser is the software you use to view web pages – in fact you’re using one right now! Google Chrome, Mozilla Firefox, and Internet Explorer are some of the more common browsers, but there are others like Safari and Opera. Since each one is different, pages can vary in appearance depending on what browser is used. This has to be taken into account when designing and testing websites.

CMS
A Content Management System allows website administrators to publish, edit and modifying content, organising, deleting as well as maintenance from a central interface.

CSS
Cascading Style Sheets or CSS used by developers to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.

Compression
Compression makes files smaller for faster upload/download times, and less disk space usage. JPEGs use compression, making them ideal for web, but can lead to loss of image quality if re-saved multiple times.

Cookie
A cookie is a message given to a web browser (the application you use to get online) by a web server. Cookies help identify website users who have visited previously, or those that are there for the first time, and can prepare customised content for them depending on those criteria.

DNS
Short for “Domain Name System”. The DNS translates URL text addresses that we use (like www.kcgraphics.co.uk) into a numeric Internet address.

DPI
“Dots Per Inch.” DPI refers to print resolution of an image, or of the output device (like a printer). The resolution for web is 72 dpi, while the standard for print is 300 dpi, which allows for much greater clarity.

Domain Name
A domain name is a name that identifies a computer or computers on the Internet. These names appear as a part of a Website’s URL. For example, in www.kcgraphics.co.uk – kcgraphics.co.uk is the domain name.

E-Commerce
‘Electronic commerce’ is the buying and selling of goods and services, and the transfer of funds, through digital communications. More and more businesses are selling merchandise on their websites using intricate programs that allow customers to put items in a ‘shopping cart’ and check out, and even account for shipping and tax costs.

Error 404
A 404 error message means the page you’re trying to reach cannot be found. This can happen if you link to a page that doesn’t exist, or if a page is taken down and the link remains up.

Favicon
A Favicon is the little image that appears in the browser window next to your URL, or in your history menu.

Find-ability
Find-ability is an internet marketing term that refers to how easily information on a website can be found, either from search engines and other online directories and resources, or from within the site itself.

Fold
In web design terms, “fold” is the line past which someone has to scroll to see more content. Everything that shows up when a page first loads is “above the fold” and “below-” or “after the fold” refers to the content further down the page. The term comes originally from newspapers, as the top half of the front page was “above the fold,” and is where the major stories and images were placed for maximum effect.

Forms
Forms use HTML tags that define and label text-entry boxes, check boxes, radio buttons, and/or drop-down menus to create simple ways for someone to collect information from users directly on the site.

Freeware
Any software that is distributed for free on the web. Some well known examples would be Adobe Reader (for viewing of PDFs) and Skype (video chatting).

FTP
Short for “File Transfer Protocol.” FTP allows you to copy or send files (HTML documents, graphic images, spreadsheets, etc.) from one computer to another via the Internet. A user ID and password are needed to use FTP, unless Anonymous FTP is allowed.

Hexadecimal (Web colours)
Colours on websites are generally shown as RGB and can be represented by sRGB or hexadecimal numbers – these codes contains symbol “#” and 6 letters or numbers. e.g.A colour is specified according to the intensity of its red, green and blue components, each represented by eight bits The first two symbols in HTML colour code represents the intensity of red colour. 00 is the least and FF is the most intense. The third and fourth represents intensity of green and fifth and sixth represents the intensity of blue. Over 16 million colours can be created with this system.

HTML
Short for “HyperText Markup Language,” HTML a cross-platform language for creating and formatting web pages. Elements and tags are used to affect copy, images, sounds, frames, animation and more.

Hyperlink
A hyperlink, more commonly called a link, is an electronic connection between one web page to either other web pages on the same website (internal linking), or web pages located on another website (external linking).

Image Map
An image map is a list of coordinates related to a image, such that clicking certain areas of the image links to different pages. With a normal image link, the entire image would link to one single page.

ISP
Short for “Internet Service Provider,” it’s the company that provides you with access to the Internet.

JavaScript
JavaScript is a scripting language developed by Netscape that interacts with HTML, allowing for interactive websites. JavaScript can make web pages more animated and dynamic in terms of graphics and navigation. Some of the most common graphic JavaScript effects are mouseovers, rotating sliders, and Javascript navigation, commonly created using drop-down menus.

JPEG or .jpg
Short for “Joint Photographic Experts Group,” (the group that created the standards for what are JPEG images) JPEG is the type of file, while .jpg is the file extension). JPEGs use adjustable compression, meaning you can make them smaller (though at the cost of clarity) for uses such as web.

Kerning
In typography, the spacing between individual letters in a word.

Leading
(pronounced “ledding,” not “leeding”) In typography, the vertical spacing between lines of text. The term comes from the strips of lead that were used to separate lines of moveable individual letters used to to create the printing plates to be used on the lithographic presses.

Masthead
A graphic image placed on top of a web page helps to easily identify the current page to the user. Masthead images can contain photos, text, shapes, and/or image maps.

Metadata
Metadata describes other data by providing information about a certain item’s content. For example, an image may include metadata that describes how large the picture is, the colour depth, the image resolution, when the image was created, and other data. A text document’s metadata may contain information about how long the document is, who the author is, when the document was written, and a short summary of the document.
Web pages often include metadata in the form of meta tags. Description and keywords meta tags are commonly used to describe the Web page’s content. Most search engines use this data when adding pages to their search index..

Mouseover
Mouseover refers to any kind of action that occurs when a users places their cursor (that arrow you move around your screen) over a button, but before anything is clicked. The actions can be anything from a simple change in colour to an intricate animation.

Navigation
Navigation refers to the process by which users accesses information on the internet. Usually when we use the term, we’re talking about the menus, links, icons and buttons on your site, along with where they are and where they take a use.

Open Source
Freely distributable and modifiable software to which the source code is available to the public. Open Source Software often comes with the benefit of a widely supported network of web developers and web designers that contribute to the application, make updates, and troubleshoot application glitches that would otherwise take much longer in a proprietary situation. Mozilla Firefox and WordPress are two examples of open source software, which is why you see so many different themes and extensions for each, most created by the public.

Opt-In
In email marketing, you need to make sure your recipients want to get your messages, or you could get marked as spam. Opting-in means that someone has specifically requested to receive emails about a particular topic or from a particular entity.

Outbound link
Outbound links refer to links from your site to an external (somebody else’s) site.

PDF
A file type with the extension .pdf – short for “Portable Document Format,” and first developed by Adobe. This file format is NOT dependent on other applications for proper viewing. Every PDF file has a complete description of a document embedded in it, including the text, fonts, graphics, and other information needed to display it. They are also used to create digital forms.

PNG or .png
A file type with the extension .png – short for “Portable Network Graphics,” (but you can just say “ping”). PNG is an image format used for lossless compression and displaying images on the web. PNGs allow for millions of colours, as well as transparent backgrounds, through that can sometimes result in larger file sizes.

Radio Button
Also called an option button, radio buttons allow users to choose one of a number of predetermined options. Common radio buttons could be yes/no questions, or sizes (small, medium, large, etc.) A radio button is different from a check box which can accept multiple checked items.

RGB
Acronym for the ‘Red, Green, Blue’ colour space. RGB images are used for things viewed on screens, like websites. By combining these three colours, a large percentage of the visible colour spectrum can be represented.

Resolution
The number of pixels in an image, given in a W x H format. Usually, the more pixels in an image, the longer it will take to load but the better it will look.

Responsive Website Design
Web sites that have been specially designed and coded to ensure the best viewing and user experience on all devices (desktops, tablets, and phones).

Search Engine
A search engine is a program that searches documents (i.e. web pages, which are HTML documents) for specified keywords and returns the list of documents. A search engine has two parts, a spider and an indexer. The spider is the program that fetches the documents, and the indexer reads the documents and creates an index based on the words or ideas contained in each document. Google is the most widely known search engine.g

SEO
Short for “Search Engine Optimisation.” Refers to the design of a website for better ranking on search engines. This can be affected through techniques like site submission to major search engines, keyword aggregation, site code modification/optimisation, link-building, injection of Google Analytics site-wide, and some content modification to accommodate selected keywords.

Sitemap
A sitemap is a representation of the complete architecture of a website, usually in hierarchical fashion and based on the site’s navigation.

Social Media
Online tools that allow people to create, share or exchange information, ideas, and pictures/videos in virtual communities and networks. Examples are: Facebook, Instagram, Linked In, Skype, You Tube, Twitter, Vimeo, Flickr, Tumblr, Pinterest, etc

SSL
Short for “Secure Sockets Layer.” A protocol designed by Netscape to enable encrypted communications across the Internet. It provides privacy, authentication, and message integrity. SSL is often used in communications between browsers and servers. A URL that begins with “https” is a clue that an SSL connection will be used on the website. During an SSL connection, each side sends a Security Certificate to the other. Both sides then encrypt what they send, ensuring that only the intended recipient can decode it. It’s becoming more and more important to get this even if you’re not selling anything on your site because it adds a layer of security and is also becoming more important for google page rank.

Subdomain
Also called a child domain, a domain that is part of a larger domain name in DNS hierarchy. DNS hierarchy consists of the root-level domain at the top, underneath which are the top-level domains, followed by second-level domains and finally subdomains. For example, in the domain name ‘testsite.kcgraphics.co.uk’, “testsite” is the subdomain with kcgraphics.co.uk being the second level domain.

Text-Entry Box
In an online form, text-entry boxes allow a user to type in them. They can be limited to a number of lines or characters.

Thumbnail
A small version of a graphic image. Usually serve as a ‘preview image’ in an image gallery on the web.

Upload
Uploading is the action of sending data from a local computer (yours) to a server or website. When you have an image on your computer that you want to use on your website, you upload it. When you transfer something from the web to your computer, it’s downloading.

URL
Short for “Uniform Resource Locator.” Commonly referred to as web addresses, URLs are just that – the addresses for any and all documents on the Internet. http://www.kcgraphics.co.uk is the URL this sites home page.

Website Content
Photographs, graphics and text are the main content needed to develop and design an effective website. The first page of a website is known as the home page, and is often an overview of the website content. Each new web page within a website has its own URL and after each web page is created, the content is typically linked together using a navigation menu and hyperlinks.

Widget
A small helpful software program embedded directly into a web page. Weather reports, latest news, clocks and countdown timers are examples of widgets.

WYSIWYG
Short for “What You See Is What You Get,” and pronounced “wizzy-wig.” WYSIWYG usually refers to HTML editors that display text and images as they will appear on your site, with styling, colours, etc. Using WYSIWYG editors removes much of the need for knowing and coding in HTML when making simple changes to content, as they produce the code based on the visual representation you create. While they’ve come a long way, it’s a good idea to work with your developer/designer on what specific content you’ll want to be able to edit.

Wireframe
A blocked in version of the webpage that outlines where key elements will go, but does not show the elements themselves. Used to make sure you’re happy with where the elements have been placed before the coding and design work on the page starts.

WordPress
WordPress is a free and open-source content management system (CMS) based on PHP and MySQL. WordPress was used by more than 23.3% of the top 10 million websites as of January 2015.