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 may become involved in a web design project. When this happens, the jargon and terminology that web designers use can make you feel unprepared for the task at hand.
The language that web designers in Houston use can sound like a completely foreign language. For example, while most of us simply think of blue, green, and yellow as colors, website designers will refer to these colors as hues instead.
To help you understand “designer-talk” better, here is a glossary of web design terminology that you will probably encounter at some point. This is in no way a comprehensive list of all the terms related to website design, but it will help you to become more familiar with the field.
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 handy when you need to save a big file or attach image files to an email.
Contrast refers to emphasizing the differences between certain elements of your web design, such as colors, spacing, or shapes.
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 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.
If you have ever worked with a website designer before, you would know that color is not a simple element as it would appear to other non-designers. When you decide on which colors you should use for your web design, the website designer will most likely make use of a color wheel. A color wheel is a very handy tool and refers to a circle consisting of 12 colors that indicates the way in which primary, secondary, and tertiary colors work together.
For example, blue-purple, purple, and purple-red are analogous colors as they appear next to one another on the color wheel. Or, if your web designer suggests using complementary colors, it refers to colors, such as red and green, that are directly opposite of one another on this wheel. If you use two pairs of complementary colors (in other words four different colors in total), it is referred to as rectangular colors. Though, the color harmony that is many times viewed as the most effective is triadic colors. In this color scheme, three colors that are located 120 degrees from one another on the color wheel are used together in a design.
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.
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.
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.
The following are some of the techniques and principles that your Web Design Houston 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 color or part of an image gradually disappears into another color 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 colors. Visual hierarchy plays an important role in creating the best website designs.
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 color codes to tag which specific colors will be used in the design of websites.
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 colors, 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 colors 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 colors, 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.
