Krishna Solanki Designs

design terms

A Guide for Non-Designers on Terms Used in the Design Industry : PART 2

Krishna SolankiComment

The purpose of these articles is to help non-designers, clients, founders, entrepreneurs, or small business owners understand some of design jargon that gets thrown around in conversation.

In case you missed it, part 1 can be found here:
A Guide for Non-Designers on Terms Used in the Design Industry.

A Guide for Non-Designers on Terms Used in the Design Industry : Part 2


This is a printing term that refers to the artwork/print work going beyond the edge of the paper. 


A brand identity is a logo, fonts, colour palette, icons, and any visual element, that communicates your startups/small businesses mission and vision. It can also encompass your business’s characteristics in terms of the tone of voice. Branding is putting your brand identity to use. 

Brand board:

A brand board is a mini styleguide.  It is a simple overview of your brand elements and includes your primary logo, logo variations, submark, patterns, fonts and colours.  A brand board is often used as a quick reference guide to ensure consistency.

Crop marks:

Printed lines on the edge of a paper that indicates where the paper should be cut to produce the correct page size.


When you remove the outer-parts of an image, to resize the image.

Design mockup:

This is a representation of what the design will look like. So, for example, a website design mockup will typically be a JPG of the design created.

Flat design:

This is a style of design which is minimalistic and emphasises usability.  Due to the lack of depth in terms of drop shadows and gradients the crisp edges and simple lines make this style clean and two-dimensional.


A gradient is a gradual change of one colour to another colour.

HEX code:

A hex code is a colour reference which is specifically used in HTML, CSS, and some design software - most commonly in Adobe Photoshop.  It usually appears after the "#" symbol and is 6 characters long.


A typography term which references the adjustment of space between two characters.


Although spelt "leading", it is pronounced as "ledding" and references the space between lines of type.  It is a typography term and is often used in web design as well as graphic design.

Lorem ipsum:

This is a form of placeholder text which is commonly used in design to demonstrate how much or little text will be placed in a specific area.  It's also known as "dummy copy" or "dummy text”. 


A web design term used in CSS.  Margins are the spaces outside the border, between the border and the other elements next to this object.


A moodboard summarises your brand aesthetics.  It includes various images which depict the future style of your brand.  


This is the level of transparency an element has. 100% transparent means the element it 100% "see-through”.


A web design term used in CSS.  It is the space inside the border, between the border and the actual image.  Not to be confused with margins.


This is related to the amount of detail an image has.  As images are created with pixels (we covered what pixels are last week, so check that out here if you missed it), generally speaking, the more pixels the crisper the image, and also the higher the resolution.


A typography term which relates to adjusting  the space between every letter in a word in order to change the appearance.  This is not to be confused with kerning! 


This is another vector file format used for Adobe Illustrator.  This file type is ideal for logos.


Stands for Encapsulated PostScript.  This is a vector file format and so the quality of the file allows remains intact when resizing the file.


GIF stands for Graphics Interchange Format. These are usually simple graphics.  They can contain some level of animation, which could be used on web banners or email design.


JPG stands for Join Photographic Experts Group.  A JPG is a common image format, mostly used for images.


A file format best used to represent documents and presentations.


PNG stands for Portable Network Graphic.  It is another common image format and allows for transparency.


An Adobe PhotoShop file format.  Often used for website designs and other digital graphics, such as social media images.  Usually, the files are left layered for editable reasons.


SWF stands for  Small Web Format.  It is most commonly used for displaying animation and is created in Adobe Flash.  The .swf file is an uneditable execution of a .fla file.

What did you think of this list? Are there any terms I have missed? Let me know... 

A Guide for Non-Designers on Terms Used in the Design Industry

DesignKrishna SolankiComment

So, you are making some changes to your business and have decided you want to up your design game. Maybe you want to revamp your brand or get your first website for your startup or small business off the ground.
You have found the right designer, and they are a perfect fit. The only problem is they are so good at their job that they sometimes forget you are not as "techy" as them. 
Are they using design terms that your don't understand or techy jargon that confuses you?....

Fear not!  This week I wanted to share part 1 of a 2 part series on explaining some of the most common design and development terms that get thrown around the design industry a lot.

a guide for non-designers on terms used in the design industry - part 1.jpg


Just like in Microsoft Word, where you can align a block of text, you can position elements in your design in the same manner. These elements can be positioned to each other or to the page. 


A bitmap graphic is the opposite of a vector graphic.  They are made up of pixels, and they are resolution dependent. So for example, if you zoom in on a photo, you will see the pixel dots that make that photo.  That's because photos are bitmap images.


This is similar to a styleguide, however, it is for quick reference only and summarises the brand.  It includes the primary logo, logo variations, colours, fonts and patterns for the brand as well.


A browser or internet browser is an app that is used to view websites. Popular examples of browsers include Internet Explorer, Google Chrome, Safari, Firefox.


A colour palette refers to a range of colours that are defined for a particular purpose or brand.


CMYK stands for "Cyan, Magenta, Yello and Key Black".  It is a common colour scheme, and setting that is related with graphic design.


Client homework is a set of questions provided by the designer to the client which need to be completed in order for the designer to understand the clients requirements. Examples of such questions could be:  Who are your competitors? How long have you been in business?


CMS stands for Content Management System.  A CMS lets users edit, delete, and manage the content on their website. Examples of popular CMS include Squarespace (what this website is built on) or Wordpress. 


CSS stands for Cascading Stylesheets.  CSS can be inline on an HTML page, within an HTML tag, or it can be on its own document and linked to from the HTML page.  CSS controls the style and layout of the website so that the design aspect is separate to the actual content.


Essentially a design brief or design questionnaire are the same thing.  It is usually a document which is provided by the client to the designer detailing what the project entails.  As the name suggests, it briefs the designer on the task that needs to be worked on.


A domain name is essentially the name of the website or URL, so for example. is the domain name. 


A favicon is a tiny customizable icon that is displayed in the web address bar in most browsers.  They are usually 16x16 pixels, however, some are 32x32 pixels.


Hosting is required for every website and it is where the files are placed on the internet for your website to be visible.


HTML stands for Hypertext Markup Language.  It is the coding language that consists of a number of different tags that construct the content of a web page.


A hyperlink is a link from one page to another.  It can be on the same site or another website, and it can take the form of text or images.  Generally speaking, a hyperlink is often styled differently so to make it obvious it is a clickable element.  This is more often the case when it is a text link.


A pixel is the smallest element of a digital image.


Responsive web design is the term given to the concept of designing and developing a website so that the layout changes depending on the device/viewport on which the website is being viewed.  By device, I mean, mobile phone, tablet, desktop computer, or even smart TV.


RGB stands for "Red, Green, and Blue".  It is the colour mode for digital graphics.  Computer screens translate red, green and blue to create a digital palette.  So RGB is the mode to use for web design.

San serif typeface

This is a typeface, a font, that doesn't have any decorative elements or lines attached to the end of  a stroke.  San serif fonts tend to look clean and modern in their style.

Serif typeface

This is a typeface that do have decorative elements. The decorative strokes are found at the end of a stroke.  Serif fonts often look more traditional in their style.


Some websites are divided into lots of pages, others are more suited to being a single page.  A single page website is exactly what it says it is. It literally is one page that details everything the website owner wants to portray.  These have become more common in recent years.
An example of a single page website that I have designed and developed:


A styleguide is also known as a brand guideline. It is a record, which can be in the form of a PDF, web page, or a website that includes and details any rules and regulations  for a brand. It should detail all the colours, fonts, logo variations and spacing requirements for the brand.


A vector graphic is comprised of shapes rather than pixel dots.  This makes them scale better and are most commonly used for creating logos, icons and other design.


This term can be confused for space that is actually white. That is not the case, hence it is also referred to as "negative space".  It refers to the empty space around an object in design (the object could be a title, image, etc).


A wireframe is a simple outline of a web page.  It contains no design elements, so no colour or fonts and will show all elements that need to be included in the design.  Usually this is useful for mid to large websites, however, to give the client some indication of layout it can be useful for smaller projects as well.

What did you think of this list? Keep an eye out for Part 2 as there are a 25 more to get your head around!