Web Design Terms That Business Owners Should Know

Often enough, business owners don't understand the terms used when it comes to web design. There are many terms used throughout any design process, be it for a website or any kind of advertisement. It can quickly become overwhelming as there are many terms new marketers will not understand. To an untrained eye, it can quickly start feeling like a foreign language.  Listed in alphabetical order; below you will find a list of 20 key terms used in web design. There are many other terms that are used; some more complex and some even simpler.

Alignment

This involves a variety of elements held within the website design. From the text to the images, everything has some kind of alignment when placed within the design. Most commonly used with text, you can align content to a certain side of the page or centralise it. The use of alignment is always dependent on the design and should be consistent throughout the site.

Images require to be aligned correctly so that they are in the right place with the correlating text. If a piece of text referenced responsive website design and there was a picture to go alongside it, the alignment needs to be set correctly. This can be to either side of the text, but will make these two elements sit together so it can be easily understood. This is a very handy tool when looking into web design.

When aligning images with text, the term used is 'float'. An example of this would be to align text to the left and set an image to float right. This creates a design feature where the text wraps around the image, while the image always hugs the right hand side.

Analogous Colours

When a website is being designed, there is always a colour wheel (please find more information on this below). Analogous colours are colours that appear adjacent to each other within the colour wheel which are often the different gradients of each colour. One of these will be the dominant colour which tends to often be a primary or secondary colour, followed by a tertiary. An example of this would be if red was chosen as the dominant colour and the orange and red-orange were adjacent.

CMYK Colour Model

CMYK stands for Cyan, Magenta, Yellow and Black. This is not a major part to take into account when designing a website, but is a key part when trying to design marketing material. When designing posters, brochures or any other marketing materials, the CMYK colour model needs to be taken into account. This is because the colours specified in this model all respond well when printed onto paper due to the way paper absorbs light.

Utilising these colours when designing marketing materials is a key part, but you do also need to have the marketing materials match your website (if you have one). This is to make sure that your brand is noticeable from a quick glance. The company's logo is a major part of getting easily noticed as it is what is most recognisable, but whatever colours are used for the logo will need to be used throughout the website and any other marketing materials. Doing so will offer a major boost to brand recognition and is sure to aid in getting your brand noticed.

Colour Wheel

The colour wheel is used to see all of the colours in relationship to each other including the primary, secondary and tertiary colours. The use of the colour wheel is important when looking at what colours look like when placed next to each other. This is an easy way to look through what colours work well together and can help when choosing the right colours for your business. From a simple logo to a complete new website, choosing the right colours is always the first step to building up a good design.

Colour Schemes/ Harmonies

A colour scheme, also known as a colour harmony, is a combination of two or more colours from the colour wheel. Often enough, website designers will choose a selection of colours in combination with the businesses logo (if one is already available) and ensure that the colours work well together. If the logo also needs to designed, this will be done first with the chosen selection of colours which will then transfer onto the website design.

Complementary Colours

Again, referencing the colour wheel, complementary colours are colours that are directly opposite each other. These colours when combined will cancel each other out, turning them into a grey-scale colour such as white or black. In web design, these colours don't work too well together and are avoided where possible.

CSS

CSS stands for Cascading Style Sheets and this is a code format in which a piece of code is used to designate the look and feel of a website. This is used within HTML (HyperText Markup Language) and XHTML (Extensible Hypertext Markup Language) to set up the visual style of a web page and ensure the user interface is shown correctly. This is also used in a variety of other ways such as for any XML (Extensive Markup Language) document. It creates an engaging website and can create user interfaces for web applications and even mobile applications as well. Some businesses choose to have a completely separate version of the website specifically made for mobile viewers. This is where the CSS code comes in as it will ensure that any user is able to use and navigate around the site easily.

CSS controls the positioning, layout and appearance of the majority of the content on the website. It is especially important in responsive web design as it allows elements of the site to be moved, resized and turned on or off depending on the screen size of the device the site is being viewed on. CSS allows for quick changes to the style of the entire website without having to edit each page individually.

Font

This is one of the most basic terms in web design as it represents the text style and size. When writing on a Word document or when designing a website, you get a choice of what style of text you would like to use. There are many different styles already available (more can even be downloaded online) and the webpages are given a different look depending on which style is used. Some examples of the styles (also known as Typefaces) you can get would be Times New Roman or Arial. Furthermore, these can then have different variations of each style such as Regular, Semi Bold or Bold.

The size of the text is also taken into account when it comes to choosing the right font for your website design. The size of the text needs to be right so that the viewer is able to easily read the content. It cannot be too small otherwise it becomes harder to read and it cannot be too large otherwise you are not able to fit as much content on the page. There is a large variety of sizes that can be used to determine the look of your website.

GIF

A GIF (Graphics Interchange Format) is an image file format that is normally used for small image files with very few colours. These are also known as animated images which will have a constant moving image. It can be something as simple as a rotating planet to something a lot more complex such as a demonstration of a water treatment process. There are a many uses for GIFs, but overtime they have become less common. This work like images when placed on a website, but videos are becoming more common. This is due to the fact that a video is able to retain a higher quality compared to a GIF and can be controlled by the viewer. GIFs, like PNG images can have transparencies, making them useful for icons or buttons. They are also the smallest file size, so are good for making pages load faster.

HEX Code

A HEX code is used to determine colours of a website. Each code as shown in the image below represents a different colour or shade of colour. They consist of six digits and are used in a variety of other coding formats such as HTML, CSS and SVG (Scalable Vector Graphics). These can be seen in the source code of any website and are used widely to choose the right colours when displaying the website. These are also able to be displayed in a RGB triplet or in a hexadecimal format (known as a hex triplet). Furthermore, the colours can be referenced as their normal English names as well so they are not always referenced in code. Web designers will often use a colour tool or some kind of graphics software to generate these values so that the right colour is used on the website.

HTML

HTML is a computer language used when displaying content on a website. This includes the text, images and links. HTML offers web designers an easier and more efficient way of designing websites as it is in some ways easier to use and understand compared to some other coding languages. This computer language is what will construct the website and display everything in the correct format. For a website to open, the web browser that is being used will receive the HTML document from a web server or from local storage. It will then render these into multimedia web pages. The use of HTML allows web designers to open up their creativity and add a variety of features into a website such as interactive forms and images.

HTML works together with CSS (please find more on this above) to display the site correctly. This is because HTML works as the structure of the site while the CSS focuses on the style of the site. Altogether, this creates the website that you are able to see, no matter the device or browser.

JPEG

This is another image file type that uses lossy or lossless compression in order to generate a high quality image. Through the compression stages, the file size is somewhat smaller but does not lose its quality. JPEGs are often used for photography or for a variety of other purposes where there are smooth transitions between colours. When it comes to website design, the smaller the size of an image, the better. This is due to the lower loading times when a website is loaded on to a potential customer's computer for the first time. It also ensures that the image is of a higher quality and still shows what is necessary.

Negative Space

The empty space surrounding a design is called negative space, be it around a webpage or a single image. This is the part that is left empty as the design doesn't incorporate the whole page. This however is becoming less often on sites as they are using a faded image in the background or some kind of texture. There is still negative space on quite a lot of sites, but more often than not, sites are using background watermarks and textures to fill up this empty space. It however, does not hold any text or other content.

Click here to see a great example of the kind of logos that are created using negative space. Negative space is used in logos to create clever designs that have subtle hidden elements.

PDF

When accessing some websites, you will find links to PDF documents. This is another file format that is used to represent documents or presentations without the use of Word or PowerPoint. The PDF is able to be attached to a piece of text on the website like a normal link. This then is used almost like another page to the site to display a document or presentation. An example of this could be a downloadable menu for a restaurant or a certificate for an industrial company. PDFs are rather large files depending on how big the document is so they need to be used carefully. This is to make sure that the webpage has a good load time.

PNG

This is another image file format that is often larger in file size than JPEG images. However, this does allow large areas of uniform colours or a transparent background. A transparent background allows anything that is placed behind the image to come through. This stops there from being a large white or coloured box from surrounding the image. This file format supports lossless data compression and still supports a wide variety of colours while still holding its quality.

Resolution

This is not a file format, but still does relate to the use of images. The resolution is a way of measuring the sharpness, quality and level of detail that an image has. A low resolution image would have a lower level of detail and quality. However, the file size will be smaller due to the smaller amount of pixels within the image. A higher resolution image would be the opposite of this. It would contain more pixels, giving it a larger file size, but will retain its quality and level of detail. The amount of pixels in an image would be shown in a format like this: 1080x920. This shows it is 1080 pixels wide and 920 pixels high and this is nowhere near the largest size possible.

RGB Colour Model

Different from the CMYK colour model, RGB stands for the colours Red, Green and Blue. These colours are best used for web design as monitors transmit light in these colours. These colours determine how the site will be seen on the computer. The choice of colours is always an important decision during the design process, especially if a logo is being designed.

Typeface

The typeface is a collection of characters, including letters, numbers and punctuation, that is put in a specific style. The style will change how these characters are portrayed as they will be in a style tailored to someone's requirements. Something like Times New Roman and Open Sans (the typeface used on this website) are examples of the more basic fonts. Edwardian Script ITC is another Typeface which turns the text into a more of a script format. The typeface that is used will determine the style of the website due to the nature of the text. If a script like style is used, it will make the website look more formal. This is the complete opposite for more standard forms of typefaces as it makes the content seem more casual.

Formal style fonts are called 'serif' fonts due to the extra decoration they place on some letters. Casual fonts are 'sans-serif' and are designed for clarity and ease of reading over decoration. Most websites now-a-days use text in a sans-serif font.

Watermark

A watermark is like an ownership mark where a mark is placed over the top of businesses media. The mark is customised by the original owner of the image so that it cannot be stolen. This can be something from a small logo or insignia; usually placed at the bottom of the image. Larger scale watermarks are also used that covers the whole image. Visual content theft is something to be wary of. Images that are placed on someone's site can be found from general searches (such as in Google or Bing). These can then be saved or copied from this without any issues; essentially stealing that image.

There are free stock image websites available that contain many free images that can be used. Including a watermark on images or videos is a great way to stop anyone from stealing your media.

White Space

This is very similar to Negative Space which is mentioned earlier within this article. White space is the blank area surrounding an object within the design. Some websites now-a-days use a background watermark or have a texture which takes up the empty space. However, this is still void of any other content and is left blank. White space is still used to this day and is still found on most sites.

Hopefully this article has given you an insight into the terminology used by web designers and what they mean. These terms will at least help you if you were to take up a web design package in the future. There will be many other terms used, more to come with further technological developments, but at least you will have a clear understanding of some of the more basic terms used now-a-days.