The world of design can be a confusing and difficult place to navigate. Don't worry if you feel a little overwhelmed at the outset of a project by all the details, specifications and terminology that get thrown around in consultation with professional designers - we sometimes forget that not everyone has a design degree.

With that said, we do think it's a good idea to brush up on some basic design terms and practices to help you through the design process, and to ensure that you end up with the desired result for your project, without having to take a night school course.

Below is a glossary of some common design terms, practices, and standards. We hope you find it helpful :)


What is Responsive Web Design?
Responsive Web Design (RWD) is a web design approach aimed at crafting sites that provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors).

A site designed with RWD adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images, and CSS3 media queries, an extension of the @media rule.

  • The fluid grid concept calls for page element sizing to be in relative units like percentages, rather than absolute units like pixels or points.
  • Flexible images are also sized in relative units, so as to prevent them from displaying outside their containing element.
  • Media queries allow the page to use different CSS style rules based on characteristics of the device the site is being displayed on, most commonly the width of the browser.
  • Server-side components (RESS) in conjunction with client-side ones such as media queries can produce faster-loading sites for access over cellular networks and also deliver richer functionality/usability avoiding some of the pitfalls of device-side-only solutions.

To see the functionality of RWD in action, just browse through the Design Cabin site and alter the size of your browser window to see how the site shuffles content and scales to display optimally at any size, right down to the mobile display view.

ResponsiveWebDesign.jpg

What is Adaptive Web Design?
Adaptive web design is basically the same as responsive design and shares many of the same ideals and goals. The main difference however is that the changes are made on the server side rather than the client side.

Adaptive websites are designed to respond and adapt to different screen sizes using responsive techniques, and to adapt to different User requirements based on different device capabilities.

The responsive design aspect of adaptive design involves the implementation of various design factors such as flexible layouts, CSS file alternatives and flexible images, which are activated using media queries.

With adaptive delivery, the most significant difference is that the server hosting the website detects the devices making requests to it, and uses this information to deliver different batches of HTML and CSS code based on the characteristics of the device that have been detected.

Adaptive web design also encompasses a range of other strategies which, when combined with responsive design techniques, enables you to deliver the best possible User Experience to the widest possible audience. This means that numerous functionalities and environmental factors can be catered for in the most User friendly way, depending on the particular device being used to access your website.

What are some common ways of creating a website?
There are many, and more every day. You can have a custom website built from scratch using a combination of HTML, CSS and JavaScript, or you can utilize a platform that streamlines the development process for you by providing pre-built frameworks, templates and themes, but sometimes restricts certain functionalities and design options.

WordPress, SquareSpace, Virb, and Shopify are just a few of the more popular website building platforms out there. We can work with you to find the best solution for your business.

What's the difference between a logo and a brand?
A logo is the icon of your business, or its 'face'. A logo is tangible and objective; you can see it for exactly what it is, and the goal is to encourage recognition of your brand through the use of your logo. It's the first point of contact between your business and the market space and public at large, which is why it's so important that you get it right.

A brand is the overall 'identity' of your business as a unique entity, which includes the logo among many other aspects including colour palette, typography, imagery used, and overall communication strategy and messaging. A brand is perceptual. It's more of a 'tone of voice', and it relies more on the customer (or potential customer) to assign meaning and value. A brand says “This is what I am. This is what I represent. This is what I stand for. If you like me; buy me, support me, be loyal to me, and recommend me to your friends.”

Why is strong branding important?
A strong brand identity is as vital to the success of a business as having a desirable product, having a strategic plan for the future, or having talented employees. It is the metaphorical foundation for building a successful business.

So yes, it costs money and is usually a considerable expense for a business to construct their brand, but like the expense of hiring talented employees or developing a quality product or service, it's much more costly not to do it, or to do it poorly.

CMYK.jpg

What is CMYK?
C = Cyan
M = Magenta
Y = Yellow
K = Black

Also known as 4 colour process, CMYK is the common colour model for designs that are intended for print. Have you ever seen a design on the web that looks neon when you know it's not supposed to be? That's someone using a CMYK file in an RGB setting.

RGB.jpg

What is RGB?
R = Red
G = Green
B = Blue


The RGB colour model is an additive colour model in which redgreen, and blue light are added together in various ways to reproduce a broad array of colours. The name of the model comes from the initials of the three additive primary colours, red, green, and blue.

The main purpose of the RGB color model is for the sensing, representation, and display of images in electronic systems, such as televisions and computers, though it has also been used in conventional photography. Before the electronic age, the RGB color model already had a solid theory behind it, based in human perception of colours.

What are the standard sizes for print jobs?
Business Cards - 2”x3.5” 
Letterhead - 8.5”x11”
Business Envelopes - 4.125”x9.5”
Flyers - 8.5”x11”
Tri-fold Brochures – 8.5”x11”
Post-Cards – 4”x6” or 5”x7”

What is DPI / PPI and why is it important?
DPI or Dots Per Inch is a measure of spatial printing dot density, in particular the number of individual dots that can be placed in a line within the span of 1 inch (2.54 cm). Monitors do not have dots, but do have pixels; the closely related concept for monitors and images is PPI or Pixels Per Inch.

The distinction is important because different files require different resolutions to display or print optimally.

For print, files should always be no less than 300 dpi for optimal printing.

For web, 72 ppi is the standard resolution.

What's wrong with printing images off the Internet?

Images on the Internet are usually 72 ppi. Anything less then 300 dpi usually looks distorted, fuzzy and pixelated when printed.

What is "bleed", "slug", "margin" and "crop"?
Bleed:
the space outside of a documents 'live area' that gets cropped after printing. This allows full colour and design elements to extend to the very edge of the page without any white border visible.

Slug: the area outside the page and bleed that contains printer instructions or job sign-off information.

Margin: the top, bottom, and either side of the page— that is usually empty space between the trim (where the page is cut) and the live printing area (primary text and graphics) of the page. Sometimes headers or footers may be placed within the margins.

Crop: crop marks are crossed lines placed at the corners of an image or a page to indicate where to trim itCrop Marks may be drawn on manually or automatically applied with some desktop publishing software programs. Crop marks are typically used when printing to a larger sheet of paper than the final trim size of the document, especially when doing bleeds. They indicate where to cut the paper. Similar to crop marks, center marks indicate the center of a spread and usually mean that is where the page is to be folded.

MarginCropBleedSlug.jpg

What do the numeric terms used in printing mean?
• 4/4 means colour on both sides
• 4/2 means two spot colours over four colour process or four spot colours.
• 4/1 means one colour one side and four colour the other (full or 4 spot colours)
• 1/1 means black and white both sides
• 4/0 means four colour one side and nothing on the reverse

What is "Leading", "Kerning" and "Tracking"?
Leading
determines the amount of space between the baselines of successive lines of text in a paragraph.

Tracking is the spacing between characters in a line of text.

Kerning increases or decreases the spacing between certain pairs of letters, like AV, which look better if their boxes overlap slightly.

LeadingKerningTracking.jpg

What is a saddle stitch?
A saddle stitch is when staples are placed exactly on the binding (crease) of a booklet.

What is perfect Binding?
Perfect binding is a method of bookbinding where a flexible adhesive attaches a paper cover to the spine of the assembled signatures is called perfect binding . Paperback novels are one example of perfect binding. Variations of perfect binding are where the cover is glued only to the side of the spine and allow the book to lay-flat.