Web Design Elements and Definitions

Every industry has its particular jargon. Web design is no different. For professionals new to web designing, or those working with a web designer or web design company, certain terms may be confusing.

Here, we explore some of the more common concepts and elements used in web design, noting what they mean:

  • Breadcrumbs. This word may evoke images of tiny, irregularly-shaped morsels, but it actually refers to a navigation bar that helps website visitors tell where they are in relation to other pages. For instance, a breadcrumb for a clothing ecommerce store might look like this: ABC Company > Women’s Clothing > Accessories > Scarves. The breadcrumb shows the visitor the path they took to get to the Scarves webpage, and it allows them to click on the other pages to quickly backtrack. Because they take up extra room on a page, they generally aren’t used on mobile sites.
  • Buttons. A button is any icon that’s used to quickly move a user from one page to another, ostensibly through a sales funnel. An example of this would be a call-to-action button that says “Buy Now.” When the user clicks the button, they instantly wind up on a page that allows him to start a purchase. Buttons are useful, because they break up the text on a page. In fact, many buttons are intuitive, being merely pictures without any text.
  • Responsive Design. You’ll probably hear a lot about responsive design. A responsive site is one that automatically changes when viewed on any screen sizes. This means the website will look good regardless of the platform. If you want to do a quick responsive website test yourself, look at Laybourne Law Firm’s website on your desktop and then check it out on a mobile unit. The same content is used, but the navigation is responsive to the screen size. One caveat: A responsive website is not the same as a mobile website.
  • Mobile Website. This is a type of website that has been designed specifically for use on mobile platforms, including smart phones and tablets. Mobile websites tend to condense the available information found on traditional websites. They also use more iconography and rely less on long amounts of text. In general, a mobile version of a regular website will start with an “m.” For instance, the fictitious ABCCompany.com would have a mobile website link that reads m.ABCCompany.com.
  • Navigation. The navigation of a website is the way it is architecturally designed to create a natural flow for visitors. Sites with stellar navigation seem instinctual and make traveling around the website almost effortless. Many web designers spend a great deal of time designing navigation roadmaps, and then testing them to see if they work in reality as well as they do in theory. Navigation bars, menus, buttons, and tabs help users understand where they are and find other webpages to visit.
  • Hero Images. Your next web site design may or may not include hero images. These are large images that are placed in the background of a landing page or homepage, and sometimes inside webpages as well. They’re bold, stunning, and add to the overall user experience. However, they should never distract from the basic message. Hero images aren’t applicable for all web design clients and companies.
  • Background Videos. Background videos are large videos that begin as soon as a webpage is visited. They are utilized to describe what to expect on the site or to clarify an aspect of the company’s services, products, mission, etc. Like hero images, they have to be placed carefully. Many users find it annoying to hear sound as soon as they land on a website.
  • Landing Pages. Landing pages are usually linked to advertising campaigns, such as pay-per-click (PPC) varieties. When interested users click on the advertisement, they are sent to the landing page. A landing page should look like the rest of the website in design, but have its own unique characteristics and messaging that dovetails with the advertisement. Landing pages are highly useful and are not usually part of the regular website navigation.
  • Hamburger Menus. These are used on mobile sites and sometimes on traditional websites as well. You’ve probably seen one recently when you used your mobile device. The hamburger menu is typically three horizontal lines sandwiched together — hence, the “hamburger” name. Hamburger menus are efficient because they use imagery rather than text to help mobile users get where they want to go.

Can web design lingo sometimes be a little tough to understand at first? Absolutely. But the more you work with web designers or on web designs, the more comfortable you’ll get with the terminology and elements.

Leave a Reply

Your email address will not be published. Required fields are marked *