Impress your web designer by learning what all those acronym's mean, what exactly wireframes are and providing the right colour references. Not only will you become their favourite client, but you will be able to communicate more effectively

Process

styleguide icon

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 icon

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 icon

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.

comp icon

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

prototype icon

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.

Design

user clicking through site

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

screen design

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

layout

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

screen and mobile

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

showing dpi

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

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

padding

Padding: space between an object and its border

margin

Margin: space between objects

hand icon clicking button

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

Colour Types

RGB colours

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).

#F8F8F8

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 colours

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.

File types

psd

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

sketch

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

eps

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

pdf

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

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

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

gif

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

svg

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

css

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

html

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

Have we missed one? Let us know!


Other musings:


Sign up to our newslettter

Keep up with news and our latest blog posts