Similar to any industry operating in the technical sphere, web design is full of phrases and words that, although may be initially unknown to you, you ultimately should understand. Whether you wish to create your website or work with a web designer, you need to learn more about web design to be able to follow the process and ensure everything is how you want it to be.
The web design industry is broad and more complicated than ever due to the growing number of tools, frameworks and other functions that we use today. Even designers struggle to keep on top of the different buzzwords and technologies. For this reason, we have rounded up the must-know web design terms that will help you speak the language of web designers, ask better questions, and produce a better final product.
Basic Terms to Get You Started
Back-End
Everything you see on a website is made possible by a front-end developer. This includes the logo, graphics, images and text. For the front-end to exist, this data must be stored somewhere. This is where the back-end developer comes in. The back-end of your website consists of the server, application, and database. The back-end is hidden from your visitors and contains your code and everything else that runs your website.
Content Management System (CMS)
A Content Management System (CMS) is software that helps you create, manage, and modify content on a website without the need for specialised technical knowledge. A content management system allows you to build a website without writing all the code from scratch. This system handles all the essential information like storing your web pages, images, and handling all the basic infrastructure so that you can focus on more forward-facing parts of your website. WordPress is the best example of a popular content management system.
Domain Name
A domain name is the unique name of a business or person on the internet. The name is combined with a generic top-level domain like .com and .org. For instance, you can have your domain name as brainworks.com. You can have several domain names for your website, but only one is the primary domain. However, you must set these domains to point to the primary.
Conversion
This refers to when a user takes specific action related to your marketing and lead generation. Conversion includes:
- Completing a web form.
- Submitting a request for information.
- Subscribing to a newsletter.
- Making an eCommerce purchase.
Web admins use call to action’s to drive conversion.
Call to Action (CTA)
A call to action is a specific text, image, banner or button that uses action-oriented language that urges users to act. CTA’s move visitors from one page to the next and persuade them to take a predetermined action. Your CTA should be clear and appear above the fold.
Search Engine Optimisation (SEO)
Search engine optimisation is the process of improving your website to increase visibility when people search for products or services related to what you offer in search engines. The better visibility you have, the more likely you will attract prospective and existing customers. SEO involves several strategies including, mobile-friendly, fast loading, linking, and many more.
Technical Terms
301 Redirect
This is one of the essential web design terms, since it involves creating a permanent path from an old website to a new one. Think of a 301 redirect as a mail forwarder. When you try to access an old URL, the server will send back the 301 Moved Permanently status code and move you to the new location. However, this process happens quickly, and your visitors will not be aware of it since they will only find themselves on the piece of content they want.
If they look at the URL, they will notice that it is different from the one they had typed in or clicked. A 301 redirect also tells search engines that you have moved a page to a new URL, and they should take all the visibility associated with the page to the new URL.
404 Error Page
If you try to reach a non-existent page, you will get a 404 Error Page. You have probably clicked on a link, but instead of getting the page you want, an error pops up indicating that the requested page is not available. You also see a phrase similar to “404 Not Found”. This is the standardised HTTP status code. The trigger for this error is when the website content has been removed or moved to another URL.
Alt Tags
An alt tag is also known as an alt attribute or alt description and refers to an HTML attribute applied to image tags. This provides a text alternative for search engines. Adding alt tags to images can positively impact an eCommerce website’s ranking.
While images play a crucial role in how people interact with your website, search engines like Google cannot interpret images. Alt tags bridge this gap by providing text which search engines can understand. When Google crawls a page, images with properly formatted alt text impact how Google indexes and ranks it.
HTML
HyperText Markup Language (HTML) is the language of the web, which tells your web browser how to treat a certain piece of content. HTML contains different tags that allow web designers to mark up their content with semantic meaning so that paragraphs are identified as text copy and images as images. In other words, HTML defines the meaning and structure of the web content.
CSS
Cascading Style Sheets (CSS) is the markup language responsible for the visual elements of a website. While HTML determines the structure and content, CSS allows web designers to style the content. In other words, CSS determines how web browsers will display your content. Web designers use CSS to apply colours, determine fonts, text size, and alignment.
JavaScript
JavaScript is a text-based programming language used on both the client and server sides. This language allows you to make web pages interactive. In the past few years, JavaScript was used for form validation and provided alert boxes that popped up when you forgot to enter your phone number in the phone field. Currently, this language has more viable uses, including special visual effects and allows you to load new content without reloading the entire page. Some of the JavaScript that you could be using every day include the search box on Amazon and refreshing your Twitter feed. JavaScript improves the user experience of the web page by converting it from a static page into an interactive one.
Design-Related Terms
A/B Testing
Also known as split testing or bucket testing, A/B testing compares two web page versions or apps against each other to determine which one performs better. A/B testing eliminates the guesswork out of website optimisation and allows web designers to make data-backed decisions. In A/B testing, A refers to control, while B refers to variations. A/B testing is one of the Conversion Rate Optimisation process components, which allows you to gather both qualitative and quantitative user insights. You can then use this data to understand user behaviour, engagement rate, pain points, and satisfaction with web features.
Breadcrumb Navigation
This is a secondary navigation aid that helps users understand the relation between their location on a page and higher-level pages. If you reach a page you do not want to be on, breadcrumb navigation will allow you to quickly find your way back or go back a step to start over. Breadcrumb navigation is an excellent web design feature for reducing bounce rates.
Infinite Scrolling
Infinite scrolling is a technique that loads content continuously as the user scrolls down a page. This technique eliminates the need for pagination. However, this is not ideal for websites with goal-oriented finding tasks. Infinite scrolling is successful in social media websites like Facebook and Twitter since they have content that streams constantly and a relatively flat structure.
Responsive Design
This design allows websites to adapt to whatever device users use to access your website. Responsive design uses elements like hamburger menus and thumb-friendly buttons to create a positive mobile experience. This practice includes a mix of flexible grids and layouts, images, and intelligent use of CSS media queries.
If a user switches from laptop to smartphone, the website should automatically switch to accommodate resolution, image size, and scripting abilities. In other words, responsive designs allow your website to respond to the user’s screen preference.
Whitespace
Whitespace is the area between the elements on a web page. The elements include images, typography, and icons. Whitespace balances the elements on a page by creating a natural flow to navigate through the content. There are two primary distinctions of using whitespace; macro vs micro and active vs passive. Macron represents the area between elements of copy, graphics, and images. Micro is the space between more minor elements like letter-spacing and line-height. Active whitespace allows a website to flow well and guide the user down a page. Passive whitespace occurs naturally in elements like graphics and texts.
Conclusion
There are a variety of essential web design terms that you should recognise and understand the functions of when designing a website. If you feel overwhelmed with trying to understand these terms, do not worry. You can rely on the expertise of a trusted web design agency to take care of your website and teach you along the way.
