Web Designer Lingo: A Guide For Your Clients
Every trade has its own lingo. As a web designer, you’re fluent in the alphabet soup of website terms like UX, CSS, and HTML. But your clients? It might as well be Greek to them.
There are huge benefits to educating your clients on the most common web design terms before you even dive into the design process. Regardless of their level of knowledge, when you skip covering the basics, you end up spending more time on phone calls translating terminology, instead of discussing your work and design ideas.
To help get your clients up to speed, we’ve compiled the most common web design terms and translated them into client-friendly lingo.
Here are 7 essential website design terms:
Hero image
When designing a website, you’ll often hear the term “hero image” in reference to the website’s home page. Although the term may conjure up images of Batman and Superman, it doesn’t mean your designer is putting an image of superheroes on your website.
The hero image is the large feature image or video background in the top section of a website’s homepage. People started to refer to this area as a hero image because it’s such an important part of the site. It’s the first thing that any visitor sees when landing on your website and therefore, the design needs to be captivating and meaningful.
Although the term “hero image” has the word image in it, this section of the website doesn’t necessarily need to be a static picture. Today, hero videos are very common, usually playing in the background behind some text. Depending on the goals for the site and the design style, you may even see animation used in this area of the site.
UX or User Experience
UX is shorthand for user experience. Some web designers specialize in UX design—the process of enhancing a website visitor’s total experience of your website. UX design is considered a specialization because the designer doesn’t just create the look of the site, but considers how a visitor experiences their first (and subsequent!) visits to the site.
A simple analogy for user experience is to compare it to the experience you might have in a new restaurant. The food may be great, but if the restaurant takes forever to seat you and the bathrooms are gross and parking is a nightmare, then you’ll probably pass on going there again. There are many more factors than the food that can impact your experience at a restaurant.
The same can be said about websites, and that’s what user experience is all about. Engaging and keeping a visitor on your website isn’t just about having a nice design. A web designer that understands UX design considers how everything on the site affects the user’s overall experience.
Wireframe
During most website projects, your web team will first create a wireframe of a web page before creating a design mockup.
A wireframe is basically a blueprint and it shows where certain elements and text will be placed on the page.
Building a website is similar to the process of building a house.You start with an architect and create a blueprint before you have the interior designer start their work, otherwise you may end up with a bathroom in the kitchen. A wireframe is an extremely useful tool because it allows you to collaborate with the web strategist or designer and move things around more easily than a design mockup.
If you’ve ever seen an example of a wireframe, you’ll notice that it has similarities to a building blueprint; the wireframe is typically black and white with basic boxes and outlines to show where elements will be placed.
Information Architecture (IA)
In addition to a wireframe, you’ll typically work on the Information Architecture for your website early on in the process. Information Architecture, often called IA, refers to the process of organizing, prioritizing, and labeling the content on the website.
At this stage, you’ll be deciding which website pages will be included in the top navigation of the website and how the content will be structured. The top navigation is the series of links at the top of the page. This top navigation is on every page of the website and helps to guide web visitors to the most important content.
Similar to the wireframe, the final Information Architecture is an organization representation of your website. It often looks like a diagram and is a critical tool to guide the web team in order to make sure the final website is logical and intuitive to navigate.
Mobile-Responsive
Today, every website needs to work for a variety of devices, such as phones, tablets, and desktop computers. It is in this context that you’ll often hear a web designer use the term “mobile-responsive.”
The majority of website platforms like WordPress are mobile-responsive, which means that there is already technology built into the platform itself so that content automatically adjusts to the user’s device size.
Think of how your mobile phone works. If you turn your phone horizontally, then the content of the phone automatically adjusts.
This is very similar to what happens on the website. Because of mobile-responsive technology, web designers and developers no longer need to create a 2nd version of your website for smaller devices. The same content and design will show appropriately on different device sizes.
A skilled web designer takes this into consideration while designing the site and can guide you to write content that works on both mobile devices and larger screens.
HTML, CSS, & JavaScript
Don’t let these technical terms intimidate you. Each one relates to how your design goes from a static image to becoming a live, interactive web page. Typically, you’ll begin creating your website with a web designer who specializes in how the site will look and be organized. Then you’ll move on to working with a web developer or development team who will code the site.
You’re more likely to hear these terms during the development stage of building your site, but they may pop up in design discussions, too.
HTML stands for HyperText Markup Language and it allows a web team to tell a web browser how to display a piece of text. HTML uses different tags to denote whether text is a heading, subheading or paragraph. You may see a designer label a heading in your design as H1. This is referring to the HTML tag that will be used to tell the browser that all text with this label should be in the same font size.
Cascading Style Sheets (CSS) help a web designer & developer define the look and feel of the website. HTML by itself is not attractive or enticing. CSS makes all the difference in creating a beautiful web page design.
JavaScript is a scripting language that developers use to create the interactions on the website. With just HTML and CSS, you have a nice looking web page, but nothing can happen with just those two. When looking for a web developer or development team, look for someone who knows a lot more than just JavaScript and make sure your team is experienced in the platform that you are building the site on.
CMS
We’ll wrap up with a pretty easy term: content management system, otherwise known as a CMS. You’ll often hear this term in relation to WordPress (another content management system).
In fact, WordPress is the most popular content management system in the world. A CMS is a back-end tool on the website and it allows you to easily edit or add content to the site.
The huge benefit of building your site on a CMS like WordPress is that you don’t have to be a web designer or web developer to change the text, add images, or add pages after the website launches. You won’t have to call your web developer every time you need to add a comma to a page.
Because WordPress is extremely flexible and customizable, you get the best of both worlds with a beautiful website that is still easy for your business to manage.
Check Out More WordPress Content!
WordPress is the most popular content management system in the world and is being used by more and more creatives every day.
Learn more about WordPress here. It doesn’t matter if you’re a beginner or know WordPress like the back of your hand, we have resources and articles for everyone!
Keep reading here.
