Being that a lot of my work is on the web, I get a lot of questions about design terms. Back in the day, I didn't know what any of them meant, and I tried to finagle my way around the answer without sounding confusing. Most of the time it didn't work.
With that in mind, I've created a list just for you with 20 of the most essential web design terms that you'll need to know if you're not a designer. That way, you'll be able to point this list to your friends that might need to know, and you won't have to answer their questions. See? I'm doing a good thing here. You should thank me.
CMS (Content Management System)
There are some websites that run purely on the code that a developer writes. But if you're not a developer, getting your content onto the web might seem tough. That's why you need a Content Management System, or CMS for short. Think WordPress, Drupal, Joomla, and similar platforms that enable you to update content easily. They're easier to update and manage.
This has to do with your files and how they're managed. Every website you visit has a size, and the bigger the size, the slower it is to load. Typically a lot of images can slow down your load times, so compression smushes those files down to a reasonable size to speed things up. Lossy compression loses detail in the image as the file size goes down, and lossless compression does not.
CSS (Cascading Style Sheets)
If your website is built on HTML, then the look and feel of it is achieved with CSS. Before CSS, if you had multiple blocks of text on a page and wanted the change them all to the same color, then you would have to change the code on each individual block. CSS allows you to change it in just one place, then it affects everything. And that right there is efficiency in action.
CTA (Call to Action)
Speaking of action, this one is more of a marketing term, but it's one that a lot of web designers talk about anyway. Any button that is asking you to do something is a CTA. For example, on any of our product pages you'll see a big button that says, "Finish Purchase" with a price. That's a direct call to action (CTA).
There are three parts to get to a website. First, the domain, which is the address users will type when they try to access your website; creativemarket.com, for example, is a domain. The second is your host, which is the company that delivers your website whenever someone types in that domain name. And the third is the website itself, which is stored on the host. You need all three to have a properly functioning website.
These are two similar terms, and both of them have to do with how your designs are rendered. In the print world, DPI is Dots per Inch, and it's the resolution of your printed image. PPI is Pixels per Inch, which deals with the resolution as well, just on the screen. So why is DPI included in an article about web terms? Because a lot of times people confuse DPI with PPI to either boast the resolution of their monitors, or just because they don't know what they're talking about. But now you know better, and that's the important part.
Ever go to a website and see a little image just to the left of the address in your browser? That's a Favicon. They're either 16X16 or 32X32, and have to fit a variety of criteria to make the site identifiable.
Should we talk about this again? Sure, why not. Although we could go into the whole font vs. typeface debate, today a font designates a style of text that you use in your design. Helvetica is a font, for example. It wasn't always that way, but today, that's the practical application.
Every color displayed on a monitor that's rendered through HTML and CSS has a hex code. It's a six-digit code that starts with a #, then ranges from black — #000000 — to white — #ffffff. Every color and number in between designates what color you'll get.
HTML stands for HyperText Markup Language, and it's the language that runs the web. HTML is what web browsers read to render a webpage, from the simple to the complex. And while websites can incorporate other technologies and languages, HTML is the base of it all.
Infinite and Parallax scrolling
Similar concepts, different applications. Infinite scrolling web pages show lots of content, but the page doesn't actually move. So you scroll up and down through the page, and instead of another page loading up, the content just comes to you. You know how your Facebook feed works? That.
Parallax scrolling is similar, but it deals with objects scrolling at different rates. For example, if you scroll down a site and there's an image that stays in the background, yet still scrolls with the content but slower, you've got Parallax scrolling. This effect creates depth on a flat surface.
JPEGS are what makes the web go 'round, and so you've probably seen them a million times before. Thing is, they're a lossy form of compression, so the more you shrink the file size, the more detail is lost. Plus, have you ever seen a picture on the web that looks horrible because of splotches and pixelation? That can happen when people save a JPEG, and then re-save it with additional compression to drop the file size. Do that again and again a few times, and you get a crappy result.
This refers to the menu that allows you to navigate through a website. There are three navigation bars on this page. At the top there's one that starts with "Promote" and that's the first one. The bar that starts with "Photos" is the second, then the last is just to the right of the word, "Blog".
Every image on your screen is rendered in pixels. It's the smallest element of an image that can be individually processed in a video display system (via Dictionary.com). It's also used as a unit of measurement in many design programs and the web itself.
PNGs are a lossless form of compression, and that means that the detail in the image stays no matter how small you shrink the file. Handy, right?
What kind of device are you reading this on? Is it your tablet? Desktop computer? Phone? A website with a responsive design will render the same content in different ways so that it will fit on each of the screens properly. To test if a website has a responsive design or not, just go to your desktop computer and pull up a website. Drag the corner of the browser window up to make it smaller, and see if the content adjusts. If it does, then you're dealing with a website that has a responsive design.
Red, Green, Blue. Why these three colors? Because they're the three that every computer monitor uses to render color. If you're designing for the web, make sure your settings are tuned to RGB, otherwise the colors won't look the same when you go live.
SEO (Search Engine Optimization)
The bane of my existence. No seriously, SEO is how websites are optimized to be correctly discovered on search engines. The SEO rabbit hole is pretty deep, but you can split it up into two basic categories: content and metadata. The way you phrase things and the keywords you use can help with the content portion of your SEO, while doing some things with the metadata on the backend can do so on the other.
Putting content on a webpage means figuring out what's important, and to do that designers come up with a visual hierarchy. Important components are represented by being larger, brighter, more colorful, or just have more emphasis than the rest. It's important because, if you're the one laying out the page, you want to be sure the message gets across the right way.
When web designers are putting together a webpage, sometimes they start with a wireframe. This is a rough way to visualize how the page is structured, without incorporating high fidelity graphics or images to distract from the page. It's a good way to get ideas out onto the screen, and a standard workflow practice for many companies.
Products Seen In This Post: