Categories / Inspiration
20 Essential Web Design Terms for Non-Designers
Kevin Whipps March 31, 2021 · 8 min read
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.
CompressionThis 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).
DomainThere 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.
DPI/PPIThese 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.
FaviconEver 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.
FontShould 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.
Hex CodeEvery 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.
HTMLHTML 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 scrollingSimilar 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.
JPEGJPEGS 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.
NavigationThis 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”.
PixelEvery 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.
PNGPNGs 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?
Responsive DesignWhat 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.
RGBRed, 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.
Visual HierarchyPutting 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.
WireframeWhen 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: