When you decide on building a new website or redesigning your existing website working with a designer should be a great experience. However, you will probably hear terms that you won’t know what they mean.
In this article, we will go over the basic terminology of web design so the next time you hear a word like “above the fold” you will know exactly what your web developer means.
Here is a quick look at the design terms, that you will learn:
- The Basics (Domain, Hosting)
- Design Terms (Grid, White Space, Gradient, Transparent, Padding, Margin, Web Colors)
- The Letters (Typography, Font, Line Height, Word Spacing)
- The Website (Above the Fold, Hero Image, Slider, Responsive, WordPress).
- The Acronyms (UI, UX)
- The Files (JPEG, PNG, GIF, PSD)
Let’s Begin:
The Basics:
The Domain – Exactly like your office and your home has an address, so does every website have a unique address, this unique address is called a domain. the domain is divided into two parts the name and the ending.
For example, my website is called www.digikor.com, the name is digikor and the ending is .com which shows that my site is targeting internationally or the US.
Hosting – When you turn on your computer, you are able to access all of your files and images that are stored on your computer.
When you build a website, you need to allow all of your web visitors to access the files and images that you want them to view.
For that, you need to host your website on a computer (server), that not only you have access to (like your private computer) but that will allow anyone in the world that has your domain name to access it.
There are many types of hosting companies that offer different options, However, we highly recommend that you always host your website with your web agency if they offer hosting services.
Design Terms
Grid – a grid is used to help align the different elements on your website to create a consistent and professional look.
White spaces – The area left empty to bring focus to the text and other important elements on the page.
Gradient – fading from one color to another, or from opaque to transparent.
Transparent – Mostly images or other elements that have no background and allow you to see the elements behind your transparent element or image.
Padding – The space between a border and the object inside it.
Margin – The space between a border and the objects outside of it.
Web Colors – Colors used on the web, represented by a six-digit number. For example – Black will be #000000 and white is #ffffff.
The Website
Above the fold – The most important part of your website refers to the top area of the website that the users can see without scrolling down.
Hero Image – A large image (with some text on it) that is placed above the fold that catches your visitor’s attention and gets them to want to scroll down and get more information.
Slider – Used instead of a hero image, and allows you to show 2-3 images one after each other and have some type of animation too.
Responsive – A website that is mobile-ready and that adjusts the layout and design according to the screen size.
WordPress – An excellent platform used for building websites. This platform is considered to be one of the best platforms because of its amazing flexibility and is of use.
The Letters
Typography – The are of arranging text elements in attractive ways
Font – A unique design of text characters. They are many fonts out there, However, we recommend using the following fonts:
- Open Sans
- Lato
- Quicksand
- Arial
Line height – The space between each row of text
Word space – The space between each text character.
The Acronyms
UI – UI stands for User Interface. These terms will be used whenever you want to discuss how will the site look like for the end-user.
UX – User eXperience – This term is used to describe everything that has to do with the ease of use of your website by the end-user.
The Files
JPEG- The most common image file in the world, Good for most images and for images with gradients.
PNG – Very good for the web and supports also transparent images.
GIF – Can be used for static images, but in most cases, it’s used for animated images on the web
PSD – A Photoshop file that contains graphic designs.
