Website 101 - Website's common terms
LayoutLayout refers to the arrangement of the content: text, images, video and other elements on a page. Includes the margin, color, size, padding and any grid or template used to establish the overall appearance, relative importance, and relationships between the graphic elements to achieve a smooth flow of information and eye movement for maximum effectiveness or impact.
WireframeA website wireframe is a visual guide that represents the skeletal framework of a website, indicating the style, the location and usage of the elements of each page. This allows the client or stakeholder to quickly have a visual reference of the arrangement of website elements without requiring the designer to create an actual site, which makes the design decision process quicker. Also works as an overall blueprint or road map for the developers.
AlignmentAlignment is the position of the elements (e.g. text, images, etc.) of your page. These elements can be aligned to both: the page and to each other – e.g. in the image below the paragraphs are aligned to the left margin, and the photo is aligned to the right.
HeaderThe header of a website is the absolute element in the top of each page, it’s present across all pages and parts within the website. Usually the header includes the business’s logo, as well as the navigation bar; but also includes language selector, search bar, cart (ecommerce websites), log in / log out, and many other features depending on the needs and targets of the website.
BannerA form of advertising that is usually at the top of the page and goes from one side to the other. Depending on its purpose, can be a graphic image that announces the name or identity of a site or an advertising image. On many sites, the banner also contains links that can be clicked through to reach other pages within the website.
Above the foldThis is a design term that refers to the elements located at the top section of a web page, appearing to the user when the page first loads without having to scroll. Normally will include the header, a banner (like a slideshow, a video, a graphic or image with a call-to-action) or any type content of the most relevance for the website publisher.
Call to actionCall to action or CTA is a text link, a button or an icon located all around the website. This will tell the user what to do next (with a messages like “Buy now”, “Subscribe”, etc.) to make it continue in the conversion process. There are a few different types of call to action buttons. While each type aims to get visitors to perform a certain action, that action can vary considerably. Below are the most common types of call to action buttons, based on the action they want you to take.
- Add to Cart Buttons: e-commerce sites generally use a number of call to action buttons, but the most widely-used one is the “add to cart” button. These buttons generally appear on individual product pages. Their purpose is to entice customers to purchase an item. Common design elements in "add to cart" buttons include simple wording (such as “Add to Cart” or “Add to Bag” or “Buy Now“) and the use of icons (usually a bag or cart).
- Download Buttons: download buttons are similar to add to cart buttons in that they’re trying to entice a visitor to take possession of an item. In the case of download buttons, many designers opt to include more information than other types of buttons (such as version information or download size).
- Trial Buttons: some sites try to entice their visitors to try their offerings, generally in the form of a free trial. This could be a free download or a free account, depending on the particular site. Some sites use the “less-is-more” philosophy and keep the language on their buttons to a minimum, while others like to offer more information on what the trial contains.
- Learn More Buttons: this buttons are generally used at the end of a block of teaser information (often on the home page). These buttons are usually simple, but often oversized to attract visitor attention.
- Sign Up Buttons: this appear most commonly in two different versions. The first type is usually directly associated with a sign up form. The second type is usually used in a similar fashion to “add to cart” buttons, as a way for users to purchase or sign up for a service or account, before they actually reach a sign-up form.
HyperlinkA hyperlink or simply a link is a word, phrase, graphic or image that the user can click to jump to a new section or page within the website, but also to an external document or website. Currently hyperlinks are found in almost all web pages. The most traditional form is a blue color and underlined word or phrase. When you move the cursor over a hyperlink, whether it is a text, image or graphic, the arrow will change to a small hand, letting you know that it is a link. Basically a hyperlink is an element that allow the user to browse information or navigate in the web at high speed.
IconIcon is a graphical image representing an object, status, specific entity or idea that it is easily recognized by a wide cultural group. Frequently, the icon is a hyperlink that will lead you to another section within the website or to an external page. Their primary function is to serve as a common visual language, removing the possibility of open interpretation or ambiguity. Because of this is often used to present a content or message in a clear, concise way that facilitates the user’s experience in a website or app.
Because of its versatility, icons are used in numerous way, this are a few:
- To draw attention: Grouping multiple icons representing products, services, menus or features, makes easier to display large amount of content and let the user to focus and navigate in a more interactive and friendly way.
- To indicate content to users on text-heavy pages: Using small icons to represent each part of a text, gives the user a clue of what the content is about, making possible to the user to scan and filter information of what its more relevant to him. Also help to make the page visually more interesting.
- In graphs or diagrams: Using icons to explain concepts make it easier for the user to understand and engage with the content.
- Supporting call-to-action: Using icons to emphasize a call-to-action button, it’s an extremely effective way to draw the attention of the user and tempt him to click and continue in the conversion process.
- Directional: With the appearance of parallax and multi-directional navigation website, icons representing directions have become usual in order to help the user to understand and experience the full potential of the navigation in a website.
As the trends and needs of the web evolves, other elements have been added to the footer like:
- Social media hyperlinks (usually represented in a group of icons of each platform)
- Location linked to Google Maps (in case of business, corporation, etc.)
- Subscribe features for website that have a newsletter (normally website that have a blog or news section)
Website 101 is a series of articles the NILEAD’s team will create explaining the terms related to the website, from the basics, to web design and development. Our goal is help and empower the users for the web, this way will be easier for them to comprehend a website and the process behind.