Design Terms to know when building your E-Commerce Website

Whether you’re building your eCommerce website yourself or you’ve hired a company like Ventura Web Design & Marketing to do it for you, it’s always a good idea to understand the most commonly used web design terms so that you can be on the right page.

Let’s jump right in!

ALT-TEXT

This is also sometimes referred to as an alt-tag. This is the descriptive text attached to an image file. You may see this text pop up while the photo loads. Alt-text helps with SEO and it also helps the search engines understand the keywords that describe the photo.

ASPECT RATIO

This ratio defines the proportion of an image’s width and height. Square images are 1:1 for example, while widescreen images are 16:9.

CODE

These are commands that tell websites how to appear and function. There are a few different types of code to note:

HTML (Hypertext Markup Language): communicates with the web browser how to display images, text, and other multi-media on a webpage.
CSS (Cascading Style Sheets): describe how HTML elements should be presented.
Javascript: Used to create interactive elements and effects on a webpage. Think about a countdown timer for a product launch, for example.

COLOR CODE

These are alphanumerical codes that specify exact colors. There are a few different formats like:

RGB: This color profile is specifically used for screens, making colors consisting of red, green, and blue.
HEX: This code consists of 6 digits representing the intensity of red, green, and blue.

FAVICON

This is the small icon that shows in your browser that is specific to your website. You’ll also see this appear in your browsing history and other places in the internet.

FILE FORMAT

Here are the best basic file formats for images on your website:

JPG: This is maybe the most common file type. Jpegs have a fairly small file size, which will result in faster loading times, but your image may lose quality.
PNG: Typically, this is a larger file size than a jpeg. It allows a transparent background and does not lose image quality.
GIF: These are those short video animations you see sometimes as “memes”.

FONT

Try not to interchange this term with “typeface”–that’s something different. There are two main types of font families:

Serif: have small ticks or “serifs” on the endpoints of letters. Think of Times New Roman.
Sans Serif: have NO ticks or serifs. Look at the font this post is typed in for reference.

There are TONS of typography terms, but we’re sticking to the basics. There are also a few more font terms to know.

Times New Roman is a font family.
12pt or 12px is a font size.
Italic is a font style.

METADATA

This is the information about your content–post titles, headings, publication dates, authors, categories, and tags.

RESPONSIVE

This term refers to web design that adapts to fit the size of screen it’s being viewed on appropriately.

THUMBNAIL

This is the icon-like image that appears to represent a blog post, for example.

WIREFRAME

This is a mock-up that shows a basic outline and structure of what your website will look like. This is more-so used for WHERE content will go, NOT what the content will look like.