Ever wonder what words to use when describing your website? Or the website you want to have? Maybe when you are discussing website design elements you become lost in the meaning of some of the words? This post elaborates on commonly used words when explaining website design or design for branding your company in general.

Layout - The overall layout of a website includes elements such as a header, footer, navigation, and content. Depending on the layout of your website users may have a more enjoyable, fast, and efficient experience as opposed to a frustrating, confusing, and therefore an inefficient experience on your site. The layout is conducted by the outcome of a finalized wireframe for each page on the site.

Wireframe - A wireframe is a separate diagram for each page on a website. It maps out a grid including all main elements of a website, for example the spacing of how wide the text columns would be. This is an overly simplified layout without any additions of color, images, or design elements. The only items you see on a wireframe are grid lines, rules, outlines, and sometimes filler text. Each designer conducts their wireframes differently, whether sketching them out on grid paper or creating them in programs such as Adobe Illustrator.

Wireframe Example
Wireframe Example

Concept/Draft - A concept or a final draft of a website is created after a layout has been finalized and design elements have been implemented. Images, buttons, headers, colors, decorative elements and much more are included to portray the true expression of the personality of the site. Concepts are used to help clients pick what design style they want for their brand. They also make it very easy to start coding the site as the concept is finalized.

Header - The header is the location on a website that includes your company's name (logo), navigation buttons, and any other important links or information like social media icons or log in tabs. Usually a header runs along the top third of the website horizontally or run vertically lengthwise down the left side of the site. Some more modern and contemporary sites may include their header as a unique feature implementing more unusual design features to access the pages on a website. It is incredibly important to have the header easy to access or users will not know how to find the information they are looking for, or what site they are on!

Footer - The footer is located at the bottom of the site, usually running horizontally across. Footers include a site map, any social media buttons either repeating from the header or singular, and any extra contact information or outside sourcing buttons (log in tabs, content submission tabs, etc.). The footer content is much more varied in terms of the level of kinds of content. It acts as a sort of ending design piece to complete the bottom of the page design. Sort of like a period at the end of a sentence, and a capitol letter as the header or start of the site/sentence.

Sitemap - Sitemaps are most commonly implemented within the footer of the site. They include all links to the pages on the site, including sub pages. Users can access any page they need to quickly and efficiently if they are looking for a specific piece of information on a site.

Sitemap Example
Sitemap Example

Navigation - Buttons that access the main pages on a website are called navigational buttons. These are included in the header of a website. Commonly used navigation buttons are linked to About pages, Contact Us pages, Services pages, etc.

Sub-navigation - Pages that a user accesses within a main page of the website are called sub-navigational buttons. These can be accessed in a number of ways. Some websites, once you click on a main navigation page, have some extra buttons that take you to new pages. These main pages may include a list of links you can access. Other websites might have a "hover" option where when you place your cursor over a main page, more links to new pages show up underneath for you to access. Either way, all sub-navigation links should be accessed by the site map of your website so users can find those hidden pages quickly if they need to.

Social Media - Social Media buttons take you to any outside marketing pages, most commonly Facebook, Twitter, LinkedIn, YouTube, Google+, Pinterest, Tumblr, and many others are out there. These social media pages have a custom logo that is recognizable to use only based on their logo (example, the specific "F" used on Facebook). Social Media buttons are commonly seen in both the header and the footer of the site depending on the extent of the content on the site. It is very easy to customize social media icons to match the look and feel of your brand, therefore furthering the overall aesthetic of the website and any other marketing materials utilizing social media icons.

Vector - Vector images are line based images used by creating images or shapes in programs such as Adobe Illustrator. Images created in the vector style are icons, symbols, logos, typographic elements, etc. They create a certain look for a website, especially if they are designed specifically to cater towards the brand of the company.

Vector Example
Vector Example

Rastor - Rastor images are pixel based images most commonly and effectively described as photographic images edited in programs such as Adobe Photoshop. Artistic, abstract, and edited photos can be used commonly throughout a website to represent the company and importantly represent the brand or feeling of the site aesthetic.

Rastor Example
Rastor Example

Hover Button - When the cursor from your mouse is placed on top of, or "hovering" over a button and it changes it's look, that button is called a "hover button." They add a professional level of design to a website, whether it is a simple typographic button or an imagery-inspired photographic or vector based button that hovers to show a unique take on the same button.

Hover Example
Hover Example

Serif - Now getting into typographical terms, serif typefaces are typefaces that have tabs at the end of a vertical, horizontal, or curved line in each element of the letters. An example of a serif font include: Georgia.

Serif Example
Serfic Example - Georgia Font

Sans Serif - Sans serif font literally means a font without serifs. Therefore the ending of each vertical, horizontal, and curved line in each element of the letters ends without any additional design serifs. An example of a sans serif font include: Helvetica.

Sans Serif Example
Sans Serif Example - Helvetica Font

Slab Serif - Slab serif fonts are typefaces that are similar to serif fonts, but the decorative tabs at the end of the lines have a more blocked shape. An example of a slab serif font include: Caecilia.

Slab Serif Example
Slab Serif Example - Caecilia Font

Positive Space/Negative Space - Positive space is space on a website that is activated. There is some sort of informational or imagery based information that accesses the users eyes and utilizes the space there. Space that does not have any elements or simple background coloring or texture, is space that is negative and therefore the users eyes do not utilize that space. In order for there to be organized simplicity and an efficient display of information in a pleasing atmosphere, both positive and negative spaces must be equally thought out and emphasized. Filling in every inch of a website with information or images, or only representing the spaces in a fulfilled or positive energy, will create chaos and mismatched order, only pushing viewers off a site.

Logo - A logo is the mark that represents the name of a company. It is an image for viewers, clients, etc. to quickly recognize and associate with your brand. Simple but well thought out and creative logos are the best to remember and resonate with users. They are important to highlight on a website so that viewers easily know what site they are on.

Brand/Identity - The brand or identity of a company is based off a number of design elements, from the logo, the style of the brand, the coloring the company is associated with, to the type of services they perform. A website must portray the brand of the company it is about in order for users to feel a closer connection with the site, and also to create a much more professional and aesthetically pleasing appeal. This in turn makes viewers more comfortable to access their services, recommend the company, and overall have a more pleasing experience.

About Lindsay Turley

Lead Graphic Designer
Linkedin Icon