Blog Design Terminology You Need to Know

When it comes to design for your blog, I am huge Do-It-Yourself advocate. If you have never designed anything before or are just starting out, some aspects of design might seem daunting and a little intimidating. Let me tell you. You. Can. Do. It.

I'm going to help get you started on this grand D-I-Y quest, by equipping you with some basic design terminology to help you navigate all the awesome (and often free!) design resources that you can find online.


Blog Design Terminology You Need To Know / Pinned Pixel


Gain confidence and control of the brand of your blog with this conveniently gathered knowledge!

Let's get started with some of the basic terminology that you'll run into when working with design products, applications and software.


Pixel Size (px)

When talking about the size of an image, you'll run into what's called pixel width (W) and height (H.) Width describes the horizontal length of the image, while height describes how tall the image is (the vertical length.) This is often abbreviated and shown like this:


It's important to note, that when the pixel size is abbreviated like this, the first number is always related to the width, and the second is always related to the height.



What are they and what's the difference? PNG and JPEG (or jpg) refer to the file type, or format of an image. These are the two main formats that you'll see images online displayed as. You can find the file type at the end of the file name as either:

.png or .jpg

The PNG format is best used when saving images or designs intended for web use. PNG images are crisper, and cleaner because the compression of this format doesn't lose any any data when the image is saved.

JPEG is best used for saving photographs because compression for this format does lose some data when the image is saved.



Transparency of an image is the amount of translucently that an image has. It is often used in the creation of watermarks, as it makes rogue theft and editing of an image more difficult.

You'll also hear the term transparency in regard to image backgrounds; If an image has a transparent background, whatever colors that are displayed in the space behind the image (in either a web space, browser or desktop) will be what is displayed behind the image.


Hex Code

A Hex code refers to a specific set of 6 digits that represent a color. Hex codes are important because they allow you to use the exact same color consistently without mistake or variation.

Many design applications and software do not show Hex codes, and display RGB colors instead. RGB (red, green, blue) is another color coding system.

The good news news is, you can easily convert a RGB code to HEX with free online converting websites.


These codes both represent the color white in different color coding systems.

Hex: #FFFFFF       RGB: 255, 255,255


To keep your blog brand strong, make sure you write down the Hex codes for your brands specific colors. This way you can use your colors consistently without having to convert the color code every time you need to input your colors.



This is a term you might hear in several different variations: Right alignment, left alignment, top alignment, bottom alignment or center alignment.

Alignment refers to the arrangement of your design elements and how they "line up."

It's important to pay attention to alignment to achieve clean, straight lines and visually appealing design flow.

How you align your elements can vary from project to project, but to help your readers eyes flow from one element to the next, alignment should be considered.



A grid is a set of guidelines or rulers to help keep your design in alignment. Grids help create even and equal spacing within your design elements.


You CAN get the blog that you dream of and you CAN do it for free. In the process, you will gain an immense amount of pride in all the work that you create! I believe in YOU.

Remember, the best person to execute the ideas and visions that you imagine for your blog, is you!


Drop me a message in the comments below to tell me about your next project!

Resources, TipsEmily Goodyear