featured21

Key Web Design Terms You Need to Know

‌‌
Are you new to the world of web design and development? If so, there's a mind-boggling amount of terms and abbreviations that you'll be expected to know. To help stop any confusion and give you a quick start into the web world, we've compiled some of the most common web design terms.

User

As the name implies, the term "user" simply refers to anyone who will be using the site you're making. Some other industries might call it a "customer" or "client" but it's a good idea to start being consistent and only using the term "user" when referring to the, well, users on your site.

Usability

If a website is hard to use, people will abandon it. You want your site to retain users, of course, so the term "usability" refers to how easy it is to use and navigate for an average person.

Web design terms interface example

User Interface (UI)

The user interface is simply how a user interacts with the design on a page. For example, the battery indicator on your smart phone is a part of the user interface. Sometimes UI is lumped with UX, which includes how pretty the site is, the site's response time, and site content.

User Experience (UX or UXD)

User Experience, or User Experience Design, as it's sometimes called, focuses on the human interaction with the computer or device. For example, the action that happens if you were to tap the battery indicator on your phone is a part of the user experience. So while the UI is the design of something that your users will interact with, the UX is what will happen when the interaction actually takes place.

Responsive Design

The term responsive design refers to a specific design technique in which your site will shift around by using grids and flexible images. The goal is so it'll rearrange itself depending on the screen size the user is using while still keeping a great user experience across all devices. This is often how a site will look different on your phone than on your computer. responsive

Wireframe

A wireframe is an outline used to plan a site's structure and functionality. It usually starts hand-drawn on paper and then created in grayscale in program like Photoshop or Illustrator without any design elements like color, photos or typography. Places where text content would be is also replaced with Lorem Ipsum (or dummy) text.

Frameworks

A framework provides a foundation that developers can use to build programs and streamline the development process. They help you add extra functionality to your site without having to start from scratch or create a simple feature that could take you hours to write.

Text Editor

Until developers can figure out a way to magically create code, text editors are the program-of-choice for actually writing code, much in the same way you might use Microsoft Word as your go-to for writing documents. There are dozens of options available that all have time-saving features.

HTML

Whether or not you’re new to web design, you've probably heard the term “HTML”. What you may not know is that HTML is an acronym that stands for HyperText Markup Language. HTML is a computer language used by your browser to display your site to the user. Since just about all websites are displayed in a browser, HTML is the backbone of any website. typography

CSS

CSS is another abbreviation which stands for Cascading Style Sheets. CSS works hand-in-hand with HTML to create sites that are more than plain text. If HTML is the backbone, then CSS is the skin, the hair and the style of clothes. You’ll use CSS to tell the browser things like what color your text should be and what fonts to display.

Front-End

The front-end of a website refers to part of the site that your user interacts with directly. Coding languages like HTML and CSS are parts of the site that encompass the front-end because they’re the languages that your user’s browser reads. If you think of your website like a restaurant, the front-end is your server, the menus and the decorations, basically anything you, the customer, can see and interact with.

Back-End

The back-end of a website is everything that the user can't see and interact with. Typically back-end coding languages like PHP or .NET are run on a server. For this reason, the back-end code is also sometimes referred to as server-side code.  So if we're sticking with the restaurant example from above, the back-end is the kitchen and cooks. The kitchen and cooks are out of your view, but they're still there making the food and are obviously important to the functionality of the restaurant. Similarly, a functional website needs a strong back-end to interact with the front-end in order to be successful.     In conclusion So that’s a look at some of the more common web design terms you'll see in the web world. If you want to dive in a little deeper and see how these terms can play together to make a functioning website, check out our "Your First Day with HTML" course and use this as a handy reference guide.