Nail Down Web Design Terminology and Speak the Lingo

Chances are, you’ve heard a few strange terms throughout your design career. Terminology is used as a way of speeding up the explanation of complicated concepts, so it’s important to be familiar with the lingo. Here’s a quick glossary to some of the most important web design terminology you need to learn to be successful in web design jobs.

1. CMYK and RGB

At first glance, “CMYK” and “RGB” may seem like complicated terms, but they stand for one of the most basic concepts of art: colors. Cyan, magenta, yellow, and black make up the shades that are used in the printing process, and red, green, and blue are the colors used in web-related displays. Familiarize yourself with these colors to make sure that each of your pieces, whether digital or print, are created with the appropriate hues.

Use it in a sentence: We need to make sure that the exact color is preserved when converting from RGB to CMYK.

2. Typography terminology

Most, if not all, of the pieces you design will include some copy. As a result, it’s important to choose the appropriate font and know key typography terminology, noted on HubSpot. For instance, the “arm” is the horizontal stroke of a letter that doesn’t connect to the rest of the letter at one of its ends. The top part of the letter “T” is the arm. A “spur” is a part of a letter that hangs off of its stem. The slight curve in a lowercase “t” is one example. Additionally, the “leading” is the amount of space between two lines of text, and the “kerning” is the space between each letter or character. Utilizing these details can make all of the difference in the appearance of the text within your design.

Use it in a sentence: The arm of the “T” needs to be adjusted so the title stays on one line.

3. Proof

Anyone who has ever worked on a big project knows that it’s easy for mistakes to pass through standard editing after staring at the same project for days on end. “Proofs” were created to give professionals the chance to have one last look at the finished piece of their project before sending it off. They can either be in print or digital form, and appear the exact same way that a customer will see them. This allows designers and marketers to spot any typos or layout problems that may otherwise have gone unnoticed.

Use it in a sentence: Please review the proof and approve it before the end of the week.

4. Negative space

Also referred to as “white space,” “negative space” is a term used to describe the areas on a page that do not have any copy or artwork. It’s important to include a good mix of artwork and negative space to keep the page balanced and draw the eye to important parts of the design. In some cases, there’s even more negative space than design in an advertisement to act as a bold statement and refocus the viewer.

Use it in a sentence: The client wants to balance out the heavy copy and prominent image with some negative space throughout.

5. Raster and vector images

If an image is a “raster” image, it means it’s made up of a number of pixels, therefore, making it difficult to resize without affecting the quality. On the other hand, “vector” images include elements that can be grouped together and seen as one object. Logos are typically vector and much easier to enlarge without sacrificing their appearance.

Use it in a sentence: We can’t fit the raster image to the screen or else it will appear blurry.

6. Swipe file

Artists do their best work when they’re inspired. When starting a new project and looking for design inspiration, some compile compelling magazine and website layouts into a collection of influential graphics also known as a “swipe file.” You may already keep one of these yourself and just never knew it had a name.

Use it in a sentence: I’ll add that website to my swipe file so I can refer back to it when I start this project.

7. Resolution

Each image you use, print or digital, has a certain “resolution.” Resolution refers to the number of dots per inch, or dpi, in an image. An industry standard when working with resolution is to use 72 dpi for the web and 300 dpi for print, noted Udemy, an online education blog.

Use it in a sentence: We’ll need a high resolution version of the image if we want to print the brochure.

[gravityform id="8" title="false" description="false" ajax="true" tabindex="49"]
<div class='gf_browser_unknown gform_wrapper gform_legacy_markup_wrapper' id='gform_wrapper_8' ><div id='gf_8' class='gform_anchor' tabindex='-1'></div><form method='post' enctype='multipart/form-data' target='gform_ajax_frame_8' id='gform_8' action='/blog/7-terms-every-web-designer-should-know/#gf_8' > <div class='gform_body gform-body'><ul id='gform_fields_8' class='gform_fields top_label form_sublabel_below description_below'><li id="field_8_2" class="gfield gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible" ><label class='gfield_label' for='input_8_2' >First Name<span class="gfield_required"><span class="gfield_required gfield_required_asterisk">*</span></span></label><div class='ginput_container ginput_container_text'><input name='input_2' id='input_8_2' type='text' value='' class='medium' tabindex='49' aria-required="true" aria-invalid="false" /> </div></li><li id="field_8_3" class="gfield field_sublabel_below field_description_below gfield_visibility_visible" ><label class='gfield_label' for='input_8_3' >Last Name</label><div class='ginput_container ginput_container_text'><input name='input_3' id='input_8_3' type='text' value='' class='medium' tabindex='50' aria-invalid="false" /> </div></li><li id="field_8_4" class="gfield gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible" ><label class='gfield_label' for='input_8_4' >Work Email<span class="gfield_required"><span class="gfield_required gfield_required_asterisk">*</span></span></label><div class='ginput_container ginput_container_email'> <input name='input_4' id='input_8_4' type='text' value='' class='medium' tabindex='51' aria-required="true" aria-invalid="false" /> </div></li></ul></div> <div class='gform_footer top_label'> <input type='submit' id='gform_submit_button_8' class='gform_button button' value='Download Our Case Study' tabindex='52' onclick='if(window["gf_submitting_8"]){return false;} window["gf_submitting_8"]=true; ' onkeypress='if( event.keyCode == 13 ){ if(window["gf_submitting_8"]){return false;} window["gf_submitting_8"]=true; jQuery("#gform_8").trigger("submit",[true]); }' /> <input type='hidden' name='gform_ajax' value='form_id=8&amp;title=&amp;description=&amp;tabindex=49' /> <input type='hidden' class='gform_hidden' name='is_submit_8' value='1' /> <input type='hidden' class='gform_hidden' name='gform_submit' value='8' /> <input type='hidden' class='gform_hidden' name='gform_unique_id' value='' /> <input type='hidden' class='gform_hidden' name='state_8' value='WyJbXSIsIjQzNDg5YTIzZTExNmYyOTdlMDY5YzA5YzFmNTRhNTc0Il0=' /> <input type='hidden' class='gform_hidden' name='gform_target_page_number_8' id='gform_target_page_number_8' value='0' /> <input type='hidden' class='gform_hidden' name='gform_source_page_number_8' id='gform_source_page_number_8' value='1' /> <input type='hidden' name='gform_field_values' value='' /> </div> </form> </div> <iframe style='display:none;width:0px;height:0px;' src='about:blank' name='gform_ajax_frame_8' id='gform_ajax_frame_8' title='This iframe contains the logic required to handle Ajax powered Gravity Forms.'></iframe> <script type='text/javascript'>document.addEventListener( 'DOMContentLoaded', function($){gformInitSpinner( 8, '' );jQuery('#gform_ajax_frame_8').on('load',function(){var contents = jQuery(this).contents().find('*').html();var is_postback = contents.indexOf('GF_AJAX_POSTBACK') >= 0;if(!is_postback){return;}var form_content = jQuery(this).contents().find('#gform_wrapper_8');var is_confirmation = jQuery(this).contents().find('#gform_confirmation_wrapper_8').length > 0;var is_redirect = contents.indexOf('gformRedirect(){') >= 0;var is_form = form_content.length > 0 && ! is_redirect && ! is_confirmation;var mt = parseInt(jQuery('html').css('margin-top'), 10) + parseInt(jQuery('body').css('margin-top'), 10) + 100;if(is_form){jQuery('#gform_wrapper_8').html(form_content.html());if(form_content.hasClass('gform_validation_error')){jQuery('#gform_wrapper_8').addClass('gform_validation_error');} else {jQuery('#gform_wrapper_8').removeClass('gform_validation_error');}setTimeout( function() { /* delay the scroll by 50 milliseconds to fix a bug in chrome */ jQuery(document).scrollTop(jQuery('#gform_wrapper_8').offset().top - mt); }, 50 );if(window['gformInitDatepicker']) {gformInitDatepicker();}if(window['gformInitPriceFields']) {gformInitPriceFields();}var current_page = jQuery('#gform_source_page_number_8').val();gformInitSpinner( 8, '' );jQuery(document).trigger('gform_page_loaded', [8, current_page]);window['gf_submitting_8'] = false;}else if(!is_redirect){var confirmation_content = jQuery(this).contents().find('.GF_AJAX_POSTBACK').html();if(!confirmation_content){confirmation_content = contents;}setTimeout(function(){jQuery('#gform_wrapper_8').replaceWith(confirmation_content);jQuery(document).scrollTop(jQuery('#gf_8').offset().top - mt);jQuery(document).trigger('gform_confirmation_loaded', [8]);window['gf_submitting_8'] = false;wp.a11y.speak(jQuery('#gform_confirmation_message_8').text());}, 50);}else{jQuery('#gform_8').append(contents);if(window['gformRedirect']) {gformRedirect();}}jQuery(document).trigger('gform_post_render', [8, current_page]);} );} );</script>