Webdesign glossary: Visual examples

Anouk Jodry, 2017/11/29

Everything you always wanted to know about web design key vocab but never dared to ask!

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)

cookies website

 

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 !

Call to action button

 

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:

favicon google

 

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.

Flash Session missing information

 

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...

footer website

 

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.

header website

 

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.

mockup vs wireframe

 

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.

modal

 

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...

responsive laptop    responsive smartphone

 

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 :

rollover

 

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.

tapbane table

 

 


 

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

Commentaires

Poster

Articles en lien