Webdesign glossary: Visual examples

I met an prospective entrepreneur recently who was about to launch his ecommerce website. He was excited but had some issues during the design period of its website. Many times he felt disarmed because he didn’t understand the vocabulary specific to web creation and web design.

To help clear the jungle of those technical words, SubForce put together a guide of “web design key vocab”.

 

Graphical charter:

It lays the foundations of the website corporate identity, that includes for example colours, icons, etc… It conveys the universe of the brand and its atmosphere.

 

Cookies:

A cookie is a compact piece of information (a small file which is at most 4Kb in size) saved by the hard drive on your computer, that will make the use of a website faster and easier. (Cf Flash Session)

 

CTA or Call to action:

It is a button that incites the user to do something on a website. For example, it could be a “Buy now” button, or more simply “subscribe to our newsletter” etc… An effective CTA is a key element in any sit, but especially for our friend’s e-commerce website, because it is point of engagement that converts a lead into a customer !

 

Favicon:

In general it is an unknown expression, and yet we see it on a daily basis ! It refers to the little icon on the browser bar, usually the simplified logo of the company that owns the website:

 

Fixtures:

Newsletter, contact form, multilingual version, method of payment, etc… Those are the functions that could be needed on a website.

 

Flash session:

This is a message that is displayed after doing an action. It provides useful information to the user in case of a typing error (if a required field is empty, or does not comply with what is asked,...) or in case of success (message well sent, order or payment taken into account) or simply to deliver general information to the user, like for cookies.

 

Footer:

It is the bottom of the website, in which there is information such as the contact form, the links to legal notice, the terms and conditions, frequently asked questions, etc...

 

Header:

It is the top of the website, a part that generally represents the visual identity of the brand. It is often composed of the logo, the menu, and the visual identity.

 

Home Page:

It is the first page of presentation of a website. At a glance, i the user should be ableto understand what kind of website he is surfing.

 

Mockup vs Wireframe:

A mockup is drawing of the layout of the website, often done in a program like the new Figma, which gives an idea of the final presentation (what it will look like). Unlike a mockup, a wireframe is a simplified version of the website, and thus it is not representative of the visual identity, neither of the final content. A wireframe only gives initial thoughts about the organization of the blocs of the website.

 

Modal:

A modal, or modal window is a secondary window that takes the control of the screen and keyboard. It is generally associated with an essential question that is necessary to answer to so as to continue or modify anything, or else can provide additional details.

 

Parallax:

Allows you to arrange the images of a page on different planes, and to vary the speed of scrolling of each plane, so as to give the illusion of depth in a web page. It is a technique that aims to approach 3D effect.
An excellent website that uses parallax : http://www.sbs.com.au/theboat/

 

Responsive:

A website is called responsive if its navigation is also optimised for different hardware, such as tablets, laptop, smartphone, etc...

    

 

Rollover:

It is an effect in which the appearance of a graphical image changes when the user rolls the mouse pointer over it. It is often used for menus. For example :

 

Static web page vs dynamic:

A static Web page is a page that is built using HTML code and features the same presentation and content, regardless of user identity or other factors. Static Web pages are easier to code and assemble than dynamic Web pages, which may feature customizable content according to a user's identity or other factors. Dynamic HTML (DHTML) refers to code tags and syntaxes that allow developers to create highly animated and interactive websites.

 

Tabpane:

A tabpane is a table divided in different tabs. Each table tab allows navigation between the different categories without changing pages.

 

 

---

 

If you have any doubt about a web design expression or word, do not hesitate to leave your comments!