After a lot of thinking and analysis, finally, you decide to have a website. Having found a good web design and development service provider, it pays to be familiar with the industry’s common terms to know how to communicate your needs to your service provider. This way you will prevent that the design team have to make assumptions, that possibly will affect the final result
Layout 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.
A website wireframe is a visual guide that represents the skeletal framework of a website, indicating the style, 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.
Alignment 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.
The header of a website is the absolute element at the top of each page; it’s present across all pages and parts of the website. Usually, the header includes the business’s logo, as well as the navigation bar. It can also include a language selector, search bar, cart (e-commerce websites), login/log out, and many other features depending on the needs and targets of the website.
A form of advertising that is usually at the top of the page and goes from one side to the other. Depending on its purpose, a banner 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.
This 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 it will include the header, a banner (like a slideshow, a video, a graphic or image with a call-to-action), or any type of content of the most relevance for the website publisher.
Call 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 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: these 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: these appear most commonly in two different versions. The first type is usually directly associated with a signup 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.
A hyperlink or simply a link is a word, phrase, graphic, or image that the user can click to jump not only to a new section or page within the website but also to an external document or website. Currently, hyperlinks are found on almost all web pages. The most traditional form is blue color and underlined words or phrases. 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 allows the user to browse information or navigate the web at high speed.
An icon is a graphical image representing an object, status, specific entity, or idea that 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 icon is often used to present content or message in a clear, concise way that facilitates the user’s experience in a website or app.
Because of their versatility, icons are used in numerous ways:
To draw attention: Grouping multiple icons representing products, services, menus or features, makes it easier to display a large amount of content and lets the user 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, makes it possible for the user to scan and filter information of what is more relevant to him/her, and also help to make the page visually more interesting.
In graphs or diagrams: Using icons to explain concepts makes 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 is 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 websites, 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.
The footer is the bottom section that we find on a webpage, it’s present across all pages and parts within the website. This area usually contains the name or logo of the company, business, or organization that publishes the website, relevant copyright information. It can also include basic navigation links like: “About Us”, “Contact”, “Help” and many others depending on the needs and structure of the web page. Corporate, E-commerce and similar type of websites often include additional links to “Terms of Use”, “Privacy Policy” and “FAQ” pages as well.
As the trends and needs of the web evolve, 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 a business, corporation, etc.)
Subscribe features for websites that have newsletters (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 to help and empowers the users for the web, this way will be easier for them to comprehend a website and the process behind it.
[widget:CTANew]
