Web Designer Terminology

Web Designer Terminology

Communication is the key to a successful business. Here at Studio K we provide a list of words along with their definition you may hear while working with a web designer. 

 

HTML

Stands for: HyperText Markup Language

Consists of different tags combined to create the structure of any website. The tags are put together in pairs with the content of your website filling in the spaces in between.

HTML is the language of the web.

Put simply, HTML provides a way for the web designer to tell your web browser how to treat a particular piece of content. HTML contains a number of different tags that allow the designer to mark up their content with semantic meaning so that paragraphs are identified as text copy, while images are imported as images

CSS

Stands for: Cascading Style Sheets

HTML isn't enough on its own to create beautiful web pages. CSS provides a method for designers to create a visual set of rules that determine how different elements within a web page will be rendered on screen by the browser.

CSS allows things like the color of text, the background, the size, shape and position of all the different parts of a page to be set.

JavaScript

JavaScript is (as implied by the name) a scripting language that allows designers to create interactions on a web page.

Historically JavaScript was primarily used for form validation, and provided those annoying alert boxes that popped up when you forgot to enter your telephone number in the phone field. These days there are many more viable uses for JavaScript, including special visual effects, or the ability to load new content without having to reload the whole page.

One important thing to note is that despite its name, JavaScript bears no relation to the Java programming language whatsoever

Responsive design

For the past several years this has been a real buzz word around the web, and it shows no signs of letting up. Clients have even started demanding responsive websites from their designers, often without fully understanding what it is that they're asking for!

In simple terms, a responsive design is one that adapts to the user's device and, in an ideal world, the user's context so that it displays the content required in the most appropriate and accessible manner, regardless of what kind of web-connected device is being used to view it. In practice this means a web page will re-paginated itself as the screen size reduces or increases, displaying in multiple columns when viewed on a desktop computer, but only a single column when viewed on a smartphone

A/B Testing

A/B testing is a methodology for trying out different ways of achieving the same end result, with the aim of establishing through experimentation which solution is the most effective.

Typically A/B testing is used to trial different layouts of web pages, tracking how many users convert to paying customers using the alternative layouts.

By continuing an iterative process of prototyping, evaluating and adapting, A/B testing can provide a significant increase to the conversion rate of individual pages. It's a useful tool to use: better conversion means a better balance sheet!

Visual hierarchy

This isn't limited to web design alone, but it's being used increasingly when referring to the design and layout of a web page. Put simply, visual hierarchy refers to the arrangement of design elements on a page so that the most important elements appear to have more emphasis.

This emphasis is normally achieved through the use of size, colour, font and special effects such as drop shadows. Visual hierarchy is often a conscious decision as a result of an Information Architecture process.

PHP

Stands for: HyperText Preprocessor

It allows for dynamic web content to be displayed and/or interacted with on a web page.

CMS

Stands for: Content Management System

A CMS allows it’s users to edit, delete and manage the content of a website from a visual interface. A successful CMS requires no knowledge of programming languages, CSS or HTML to easily update a website. A CMS can be open source or built from scratch depending on the budget of your web project and the needs of your organization.

Open Source Examples: Expression Engine, WordPress, Magento, Drupal, Contao.

SEO

Stands for: Search Engine Optimization

Planning out and writing a website’s content to improve the likelihood of it showing up for relevant search terms in search engines such as: Google, Yahoo & Bing. SEO can be a part of the following tasks: Keyword research, content writing, web design, web development & blogging.

SEM

Stands for: Search Engine Marketing

SEM is the practice of marketing a business using paid advertisements that appear on search engine results pages (SERPs). Advertisers bid on keywords that users of services such as Google and Bing might enter when looking for certain products or services, which gives the advertiser the opportunity for their ads to appear along side results for those search queries.

SEO and SEM: What’s the difference?

Until recently, search engine optimization used to fall under the umbrella term “search engine marketing,” but both have become so complex that SEM and SEO now exist as two separate (but closely related) entities.

SEO is about optimizing your website to get better rankings in the search results while SEM goes beyond SEO. It involves other methods that can get you more search engine visitors like PPC advertising (pay per click also known as CPC cost per click).

Alt attribute

Alternate text used to describe an image. Used by search engines and screen readers in place of an image.

Example of HTML: <img src="example.jpg" alt="example image">

Title attribute

Text used to describe the webpage in the top of the browser window. A HTML page title is recognizable by search engines and should be carefully detirmined. It is displayed in search results for the title of a page listing.

Example of HTML: <title>This is your page title</title>

Call to action

A button, arrow or other graphic element, which entices a user to perform a particular action.

Example of Usage: A button appears to be clickable, causing the user to click on the button and bring them further into the website.

Hero

A common term used to refer to the main image on a homepage or landing page.

Promo area

An area on a website which can be used to promote products and/or services and is typically changed out frequently. A promo area is typically used to showcase graphics.

Exit page

When looking at web analytics (data statistics from your website) an exit page is the last page a visitor may see before exiting your website.

Example: On many e-commerce websites, the shopping cart is a popular exit page.

Landing page

A page on a website that contains specific and direct promotional content or information that a user is directed to from clicking an advertisement or other external link.

Drop-down

A drop-down can be one of two elements: A drop-down menu is a navigational menu that has sub-menus or categories below it. When clicked on, the sub menus “drop down” and are then visible to the user. A drop-down field is found within a form on a website. It acts similar to a drop-down menu, but it requires the user to choose an option from multiple choices.

Flyout navigation

A flyout navigation menu contains multiple links to different pages and/or categories on a website. It’s typically contains multiple columns, whereas a drop-down menu may only display one column below the main tab.

Rollover

A rollover is an action that happens when a user places his or her mouse over a particular element that has a rollover effect applied to it. The mouse action causes the element’s appearance to change into a different image, color or font style.

Input field

An input field is a blank area where a user would input specific text based information. They are found within a form on a website.

Optimization

This term is used to refer to the reduction of size of an element to be more ideal for web use.

Example: Images used on a website should be optimized to a smaller file size to decrease the time it takes to load the page they reside on.

White space

This term is commonly mistaken for actual “white” colored space. White space could be red, green or any color. It refers to the space around elements. White space allows the elements to stand out to the user. If your designer says your website needs more white space, that means there are too many elements crammed in too small of a space. Having too much white space can also cause elements to be pushed too far down the page. There should be just the right balance of space and elements to form a successful web page design.

UI

Stands for: User Interface. A UI designer focuses on the usability between a website and it’s users. They make sure the targeted user can use the website with ease by designing elements to make their experience easy.

Example: The UI of the website allowed the user to easily find the product they were searching for and make a purchase.

UX

Stands for: User Experience. This term encompasses UI. It includes all of the emotions, feelings, moods etc. associated with the use of a website’s UI.

Example: While using Sarah Lynn Design’s UI to find work samples, the user experienced happiness, a sense of clarity and no feelings of frustration while completing the task. The UX of user “A” was relatively good. If they felt confused, frustrated and lost, their user experience would be poor.

Wireframe

Very crude and simplistic drawings and/or layouts of a webpage, which typically have no design applied. Wireframes are used in the preliminary stages of a website design. They allow for designers to focus on the UI and the layout of content first before applying any design. This is a critical step in any mid to large size website that has a lot of different elements and/or content.

The design of a website can often distract from it’s true purpose of displaying information and content effectively. Many designers do this step first to avoid missing any crucial elements or information. Wireframing can save time in development by allowing for items to be missed in the planning or design phase rather than in the final stages. It typically costs more to rework an already designed and developed web page than to catch a mistake in the planning stages.

Below is a very basic example of a wireframe.

Wireframe

Branding

A brand encompasses all messages, promotions, actions, products etc. that a particular business releases to the public. A common misconception is that a logo design is a business’ brand.

To retain consistent branding for your business, it’s important to keep the same level of design across all of your promotional pieces that are visible to the public.