How to Speak Like a Web Designer

As the Web matures, so do all the component involved with creating and designing a website.  With that maturity comes a new set of ideas and functions, in addition to terms to learn and understand.  Below, you will find just a few of the most common terms used by web designers.  Whether a web designer or surfer, knowing these terms will help you better understand what is involved in making a great looking, as well as successful website.

Padding

The space between specific content and the border surrounding it.  Top, bottom, left, and right padding can all be set independently of one another

Margin

The space around a given element, outside of its border.  Top, bottom, left, and right margins can all be set independently of one another

Cell Padding

The space, measured in pixels, between the content and the cell wall that surrounds it.

Cell Spacing

The space, in pixels, between cells in a table.

Header

Defines the header of a document.  The header should contain initial content and links for navigating the website.

Footer

Defines the footer of a document.  Traditionally, the footer includes, but is not limited to, the author, copyright information, contact information, or any legal disclosure.

Fat Footer

The space between the main content and footer of a website.  Fat footers can contain additional information relevant to the page, including links to blogs, news feeds, links to sites with similar content, testimonials, and social media feeds.

Breadcrumbs

Taking its name from the Hansel and Gretel Fairy tail, breadcrumbs help users navigate a website by leaving a trail.  Essentially, breadcrumbs are a visual marker found toward the top of the page, usually depicted as text links with “>” between them, showing the user where they currently are on a site and the path they took to get there

Navigation Bar

The navigation bar, or nav bar, is a set of buttons or images that are linked to specific sections of a website.  They are found at the top of the website and are used for quickly navigating to a specific page.

Right Rail

The right rail, if applicable, is the column on the right side of a webpage’s main content.  This space can be reserved for numerous widgets.  On a search engine results page (SERP), such as Google, this space is where sponsored links traditionally appear.

Left Rail

Depending on a site’s design, the left rail is the column to the left of the page’s main content.  Similar to the right rail, this space can be reserved for anything the creator intends to share, including feeds, blogs, navigation, or links.

Above the Fold

The portion of a webpage that is visible in the browser window when the page first loads.

Below the Fold

The portion of a webpage that is not visible in the browser window when the page first loads.  The user must scroll down in order to view that which is “below the fold.”

Style Sheet

a set of rules, used by web designers, that define how elements on a website should appear.  Instead of having to specify repeatedly the same rules, style sheets only have to be created once and can be used across pages.  Style sheets can be used to define fonts, colors, layout, and graphics.

JavaScript

JavaScript is a scripting language used to create dynamic and interactive web pages which would otherwise be static.  JavaScript is supported in all web browsers, as well as other web tools.

iFrame

Inline frame, or iFrame, is an html document that has been embedded into another html document.  Traditionally, the iFrame contains content and information from another source, and can be changed without affecting the surrounding page.

Lightbox Effect

A lightbox is a modal window that appears due to a given action while on a webpage.  The lightbox appears in the foreground of the browser window, dimming the webpage behind it, and requires that the user interact with it in some way in order to proceed
viewing the page they were on.

Responsive Web Design

A new approach to design whereby the user’s behavior and medium, including platform, orientation, and screen size, determine how the site should appear.  As devices and screen sizes are constantly changing, responsive web design can eliminate the need to create a completely new design for each medium.

Wireframe

A wireframe is essentially a visual representation, or blueprint, of a website’s design.  Elements found in a wireframe include basic functions, image elements, page layout, and content.

Mock-up

A working sample of a webpage or website.  A mock-up allows the web designer to review the format, content, and layout of a given page or site.

Style guide

The style guide, which was adapted from print, is a document that describes how the page or site should be presented.  The style guide contains rules, treatment, elements, and interactive decisions that explain the site’s design system and thinking.