Advertisements

20 Essential Web Design Terms for Non-Designers

Being that a lot of my work is on the web, I salvage 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 retort 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 maintain to retort their questions. See? I’m doing a pleasurable thing here. You should thank me.

CMS (Content Management System)

There are some websites that hurry 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. mediate WordPress, Drupal, Joomla, and similar platforms that enable you to update content easily. They’re easier to update and manage.

Compression

This has to execute 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 gradual 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 peep 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 maintain to change the code on each individual block. CSS allows you to change it in just one location, then it affects everything. And that honest 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 execute something is a CTA. For example, on any of our product pages you’ll see a immense button that says, “Finish Purchase” with a price. That’s a direct call to action (CTA).

Domain

There are three parts to salvage 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 maintain a properly functioning website.

DPI/PPI

These are two similar terms, and both of them maintain to execute 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 distinguished piece.

Favicon

Ever travel to a website and see a limited image just to the left of the address in your browser? That’s a Favicon. They’re either 16X16 or 32X32, and maintain to fit a variety of criteria to produce the site identifiable.

Font

Should we talk about this again? Sure, why not. Although we could travel into the whole font vs. typeface debate, today a font designates a style of text that you expend in your design. Helvetica is a font, for example. It wasn’t always that way, but today, that’s the practical application.

Hex Code

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 salvage.

HTML

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 reveal lots of content, but the page doesn’t actually dash. 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.

JPEG

JPEGS are what makes the web travel ’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, maintain 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. execute that again and again a few times, and you salvage a crappy result.

Navigation

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 honest of the word, “Blog”.

Pixel

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.

PNG

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, honest?

Responsive Design

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 travel to your desktop computer and pull up a website. Drag the corner of the browser window up to produce it smaller, and see if the content adjusts. If it does, then you’re dealing with a website that has a responsive design.

RGB

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, produce sure your settings are tuned to RGB, otherwise the colors won’t peep the same when you travel 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 expend can abet with the content portion of your SEO, while doing some things with the metadata on the backend can execute so on the other.

Visual Hierarchy

Putting content on a webpage means figuring out what’s distinguished, and to execute that designers approach up with a visual hierarchy. distinguished components are represented by being larger, brighter, more colorful, or just maintain more emphasis than the rest. It’s distinguished because, if you’re the one laying out the page, you want to be sure the message gets across the honest way.

Wireframe

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 pleasurable way to salvage ideas out onto the screen, and a standard workflow practice for many companies.


Products Seen In This Post:

Launch with confidence.


Download your checklist

img

Download your checklist

A handy checklist for your original site

Check off these items before you travel live and produce sure that your visitors salvage the best possible experience.

Download 20 Essential Web Design Terms for Non-Designers

Advertisements

20 Essential Web Design Terms for Non-Designers ratings

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)