How to speak web designer

Styleguide: a document that outlines how to apply your branding correctly. Usually provided by your graphic designer with your logo and should be given to your web designer.

Design system: online style guides can be referred to as a 'design system' when they are large enough to spread across multiple websites/apps.

Wireframe: a basic, usually greyscale, layout of a website/app that doesn't have any design but shows all the important elements that need to be on each screen.

Comps: short for compositions. When all the UX, styles, layout and branding is applied. Sometimes referred to as mockups, designs or the UI.

Prototype: a basic working website/app, or a small part of it, just so you get the idea. These vary in look, from basic wireframe to fully designed but not yet correctly coded.

UX: acronym for User Experience. How easy and pleasing a website/app is to use.

UI: acronym for User Interface. The layout and design of a website/app to use.

Grid/layout: used to align objects which changes depending on the size of the screen

Responsive: a website/app that adjusts its layout to suit different screen sizes

DPI: the number of 'dots per inch' of an image. Usually, you will want a minimum of 72dpi for screens. The more dpi, the crisper the image but it caps out for screens. Always provide your web designer with as big an image as possible, they will be able to reduce large dpi images for you but they cannot increase it.

whitespace: the blank area around objects to help draw the user's attention

Padding: space between an object and its border

Margin: space between objects

call to action: cta for short is a button or banner that prompts a user to engage, usually to link somewhere or buy.

RGB: acronym for Red, Green, Blue. Shown as a series of numbers to make up specific colours. You would provide your web designer with all your branding colours in RGB (or as a HEX).

HEX: sometimes referred to as 'web colours', is a series of characters to make up specific colours. Used in both design software and coding, your web designer can easily change RGB to HEX or vice-versa.

CMYK: acronym for Cyan, Magenta, Yellow and Black (key). This also makes up specific colours but for print only and therefore are useless to your web designer. Ask your graphic designer to convert CMYK colours to RGB.

PSD: Photoshop file. Some designers use Photoshop to design a website/app

SKETCH: Sketch file. Some designers use Sketch to design a website/app

EPS: a graphics file favoured by web designers for logos and illustrated components as they can be manipulated and scaled without losing quality.

PDF: acronym for Portable Document Format is able to be opened by many software programs. Preferred by web designers when an EPS of logos are not available.

PNG: acronym for Portable Network Graphics, is an image format favoured by web designers as it supports transparency and usually has the best quality/file size ratio.

JPEG: acronym for Joint Photographic Experts Group, is an image format, photos usually.

GIF: acronym for Graphics Interchange Format, is an image format that can be static or moving, illustrations usually.

SVG: acronym for Scalable Vector Graphic, is an image format web designers create to retain quality across multiple screen resolutions.

CSS: acronym for Cascading Style Sheet. Used by web designers and developers to apply the layout, style, colours, etc to a website/app

HTML: acronym for Hypertext Markup Language (that's a mouthful!). Used by web designers and developers to do all their coding!