Your Glossary to Understanding Web Designers Better
Research shows that 70 to 80% of consumers research a business online before making a purchase or visiting a store. If you are the owner of a small business, there is a good chance that you might become involved in a web design project. When this happens, the jargon and terminology that web designers use can make you feel unprepared and ill-equipped for the task at hand.
The language that web designers use can sound like a completely foreign language. For example, while most of us simply think of blue, green, and yellow as colours, website designers will regard these colours as hues instead.
To help you understand “designer-speak” better, here is a glossary of web site design terminology that you will probably encounter at some stage. This is in no way a comprehensive list of all the terms related to website design, but will help you to become more familiar with the field.
General web design terms
To get you warmed up, let us start with a couple of easy general terms first. The following terms you have most likely heard before or might even have used it yourself.
Compression refers to the process of making a file size smaller by getting rid of excess data. This can come in especially handy when you need to save a big file or attach image files to an email.
Contrast refers to emphasising the differences between certain elements of your web design, such as colours, spacing, or shapes.
Most of us have cropped photos at some stage or another in an attempt to get rid of something (or perhaps someone) unsightly in the background. When you are designing websites, you might have to remove the parts of an image that are toward the border so that the actual element that should be the subject of the image is positioned better. Or, it could simply be that you have to resize the aspect ratio of a photo in which case you will also use cropping.
If you need to work out how sharp an image is or how much detail it has, you will be working with the resolution. Typically if a resolution is higher, the size of the file will be bigger. If you want to measure the resolution, you will have to look at how many pixels (the smallest part of a digital image) there are to be found within a specific section of that image.
If you perhaps have to print one of your digital images such as your business logo design, you will have to pay attention to the dots per inch (DPI) instead which refers to the resolution of a digital image that has been printed. If it boasts a high resolution (in other words the printed image is very sharp with lots of detail visible), the number of dots per inch will be higher.
If you want to prevent users from stealing your visual content, your website designer can place markers (called a watermark) over the top of your images that you include on your website. These visible markers will help to identify who are the rightful owners of the image.
Terminology relating to colour
If you have ever worked with a website designer before, you would know that colour is not such a simple element as it would appear to other non-designers. When you decide on which colours you should use for your web design (in other words the colour scheme or also known as the colour harmony), the website designer will most likely make use of a colour wheel. A colour wheel is a very handy tool and refers to a circle consisting of 12 colours that indicates the way in which primary, secondary, and tertiary colours work together.
For example, blue-purple, purple, and purple-red are analogous colours as they appear next to one another on the colour wheel. Or, if your web designer suggests using complementary colours, it refers to colours, such as red and green, that are directly opposite of one another on this wheel. If you use two pairs of complementary colours (in other words four different colours in total), it is referred to as tetradic (or rectangular) colours. Though, the colour harmony that is many times viewed as the most effective is triadic colours. In this colour scheme, three colours that are located 120 degrees from one another on the colour wheel are used together in a design.
Terminology relating to layout
Two terms that you will probably hear a lot when you discuss web page design are alignment and grid. Alignment refers to how the different elements in your web design, such as images, text, and so forth, are positioned. A paragraph can, for instance, be aligned to the right margin. To help website designers align the copy and graphics, they use a grid that is an imagined map consisting of horizontal and vertical lines.
When discussing layout, web designers will most likely also advise you to get rid of orphans and widows. Needless to say, if you are not familiar with this terminology, such an alarming statement can leave you completely confused.
In the field of website design, an orphan refers to the first line of a new paragraph that appears on its own at the bottom of a column or a very short line or word that appears on its own at the end of a paragraph. If you are using columns of text, a widow is any part of text found at the end of a paragraph that continues in the next column. Ideally, you should try to find a way to incorporate such a line, word, or section of text into the previous line or column.
Terminology relating to text
When it comes to the text, things can get quite technical.
All letters, numbers or punctuation of a particular typeface are made up by lines which are called strokes. For example, a typeface like Times New Roman uses curved strokes, while Arial is known for slanting the ends of its strokes. And, if you opt for, let us say, Times New Roman Bold, it simply means that the width of the strokes (or in web designer terms the weight) is thicker, while the weight of Arial Light will not be as thick.
Every letter of your font rests on a level line that is not visible to the eye. In website development, the invisible line is referred to as the baseline. Now the distance between this invisible line (your baseline) and the top of a capital letter is known as the cap-height in designer-speak. Some letters also have descenders. For instance, in the lower case version of the letter “p”, there is a part of the “p” that extends below this invisible line (the baseline). This part that extends is called a descender.
Not only does the space above and below the letters receive attention, but also the space between the individual letters. Kerning refers to the process of adjusting the spacing between the individual letters in a piece of text. This might sound like an unnecessary step, but it can help your web design to look more polished and is particularly important when working with big texts such as headings and hero images with text.
Your web designer will most likely make use of an open type font that has both the printer and screen version in one file. It is currently the standard in typeface formats and works with both Mac as well as Windows. If you see the extension of a file is .otf, then you know that open type fonts have been used.
If you want to create a modern look, web designers typically recommend that you use sans serif fonts that do not have a small line attached to the end of a stroke while serif fonts (fonts where this small line is present) are more suitable for businesses that want to create a classic look.
Design techniques and principles
The following are some of the techniques and principles that your website designers might refer to:
When it looks like there is a shadow behind a graphic, your web designer has used a drop shadow. This visual effect creates the impression that the graphic is raised above the other objects that appear behind it.
This web design technique is used when you want to smooth out a feature’s edges.
When it looks as if one colour or part of an image gradually disappears into another colour or part, a gradient has been applied.
The use of negative space is one of the most popular web design trends. It refers to the empty space that encloses a web design element, such as an image.
Visual hierarchy refers to a principle that web designers use to order and highlight different sections of the content with the help of sizing, layouts, and colours. Visual hierarchy plays an important role in creating the best website designs.
Terminology relating to coding
Although coding falls more under the scope of web developers, it does not hurt to know a couple of the most common terms. For example, CSS (short for cascading style sheets) is a piece of code that helps to name a website’s feel and look. It is separate from the web pages’ actual content. HTML (short for hypertext markup language) is the computer language that is used to show content such as images and text on the web.
CSS and HTML can, for instance, use HEX colour codes to tag which specific colours will be used in the design of websites.
A couple of common file formats
EPS is a file format that is used for vector images. It has both graphics as well as text.
If you have a small image file that only uses a couple of colours, GIF will be the most suitable image file format for the job.
A JPEG is a type of image file that makes use of lossy compression, a type of data compression that erases detail when reducing the size of the file. This means that a loss of quality will not be very easy to spot. If you are working with a realistic painting or photo where the colours change smoothly, this file format is ideal.
If you need to represent a presentation or document, this file format is the most suitable.
If the image has a big area that uses identical or similar colours, or a transparent background, this image file format will be the most suitable option.
A vector image uses shapes and lines to represent images as opposed to pixels. The benefit of this is that when a vector image gets blown up, the quality and clarity of the image do not get affected negatively.
This type of file is extremely handy, and most people have either had to create a ZIP file or open one at some stage. What a ZIP file does is to compress many files and then combines these into a folder. The big advantage of using ZIP files is that no data is lost when the file size is being reduced.
Looking for a web designer to help with your design project? Get in touch with our website design Sydney team.