20 Web Design Terms Every Website Maker Should Know

Photo of author
Written By Cooper Bancroft

I'm Cooper Bancroft, a Melbourne-based web designer with 9+ years of experience. I believe in the transformative power of a well-designed website for businesses, bloggers, and online stores.

Novice web creators can feel intimidated when entering the world of web development. The abundance of building tools, pricing plans, and hosting options can be confusing, and it can be challenging to make the right choice for your site. To make matters worse, many web building blogs contain technical jargon that can be difficult to understand.

The specific language of web design can discourage many aspiring designers. Therefore, we have created this glossary of 20 common web design terms that every website maker should know, all presented in plain English.

20 Web Design Terms Every Website Maker Should Know

Alignment

Alignment refers to the placement of the elements on your website as they appear on the screen. For instance, when writing a text document, paragraphs are typically aligned to the left margin while headings are usually centered. Images also have alignment and can be lined up with text, margins, or paragraphs.

HTML

HTML stands for “hypertext markup language” and is the foundational language of the World Wide Web. HTML informs web browsers on how to handle a specific piece of content and how to design a particular page. For example, if you are using Google Chrome as your browser, you can press F12 to see the HTML script of the page you are currently viewing.

CSS

CSS stands for Cascading Style Sheets and is a method that designers use to create rules on how to display elements of their website. CSS allows you to customize things such as the color of text, the background, the size of images, and the position of different elements on your pages.

If you are not familiar with coding, you may want to check out our post on the top website builder platforms in Australia that do not require coding!

Javascript

Javascript is a scripting language that allows web designers to create interactive elements on their pages. Javascript is used for everything from interactive widgets to special visual effects. Quick note: despite its name, Javascript has no relation to the Java programming language.

Responsive Design

Responsive design refers to website design that adapts to the user’s device. The most significant example of responsive design is mobile layouts, such as those used on a smartphone. Responsively designed sites change the orientation and proportion of the elements to fit any display as required.

Compression

Compression is the process of reducing the size of a file by removing unnecessary data. Compression is used to send large files over email or to save large image files.

Dots per Inch (DPI)

DPI refers to the smallest unit of measurement when printing digital images. Like pixels, the higher the DPI, the better the resolution. DPI is also sometimes used to measure the sensitivity of a mouse on a given site.

Font

Font refers to the style of typeface used on a webpage. For example, this article was written in 11pt Arial text.

GIF

GIF stands for “graphics interchange format”. Essentially, a GIF is a simple looping video created using small images with few colour designs. GIFs can be easily displayed on web pages with little resource usage.

Grid

A hypothetical map of vertical and horizontal lines used to align images, text and other content. Many sites are built on a grid layout that specifies the relation of each element to each other concerning their position on the grid. One popular method of using grids is with eCommerce website builders that are all drag and drop.

JPEG

JPEG is an image file type characterised by lossless compression. JPEGs are typically high-quality images and are best used for photos, paintings and other images where a smooth colour transition is needed.

Negative Space

Negative space refers to the “empty” space that surrounds the elements of your web page. Sometimes called “white space”, negative space is essential for drawing attention to important parts of your site.

Pixel

The smallest unit of resolution on a computer screen. Pixels are tiny coloured dots used to construct images on a computer display. In general, the higher the pixel count, the sharper and better resolution the on-screen image is.

Serifs

Serifs are the small lines attached to the tops and bottoms of typed characters that give them a handwritten appearance. For example, this text is written in a font with serifs. Recently, serif fonts are making a comeback in web design.

Vector Image

Vector images are images made using lines and shapes rather than pixels. Vector images are useful because, since they do not rely on pixels to be represented, you can stretch and shrink the image and still maintain quality and clarity.

Infinite Scrolling

Infinite scrolling is a popular web design technique in which, instead of loading your website onto separate pages users must click through, all info is loaded on a single page that can be scrolled through. As users scroll down, fresh content is loaded and appears at the bottom of the page. This gives the illusion of an “infinite” scrolling space.

A/B Testing

A/B testing refers to a methodology of figuring out which alternate methods best achieve a certain goal. For example, say you are trying to figure out how a certain layout will affect site traffic. You can run an A/B analysis to determine how different site layouts affect traffic and which ones are the most effective.

Visual Hierarchy

Visual hierarchy is a design philosophy that holds the most important elements should be arranged on a page so they are most easily visible. Visual hierarchy is obtained by using colour, shading, font and image placement to draw users’ eyes to specific sections of your page.

Gradient

Gradient refers to a technique in which one colour gradually fades into another so that there is no sharp line dividing the two. Gradations of colour give colour transitions a more natural appearance and are not as jarring as sharp colour differentiation.

ZIP file

ZIP files are a file format in which files are compressed and stored in a single folder. Compressed files do not lose any data and can be restored by being unzipped. ZIP files are useful for sending a large number of files via the internet and for storing web page data in a transferable format.

Leave a comment