After a lot of thinking and analysis, you've finally decided to create a website. Once you've found a reputable web design and development service provider, it's beneficial to familiarize yourself with common industry terms. This knowledge not only aids communication with your designers but also empowers you to make informed decisions about your website. Understanding these terms ensures that you can clearly articulate your needs, preventing potential misunderstandings that might affect the outcome of your website.
The layout refers to the arrangement of content on a page, including text, images, videos, and other elements. It encompasses margins, colors, sizes, padding, and any grid or template used to establish the overall appearance. Key components of a good layout include:
Columns: Most websites are designed using a columnar structure to organize content horizontally across the page. This helps create a clean, aligned look that's easy to navigate.
Responsive Design: Responsive layouts automatically adjust to fit the screen size of different devices, such as smartphones, tablets, and desktops. This ensures that all users have a good viewing experience, regardless of how they access the site.
A well-thought-out layout not only enhances the visual appeal and readability but also underlines the relative importance and relationships between the elements. This ensures a smooth flow of information and guides eye movement for maximum impact, making the website effective and engaging for users.
A website wireframe is a visual guide that represents the skeletal framework of a website. It indicates the style, location, and usage of elements on each page, allowing clients or stakeholders to have a visual reference of the site's structure without requiring the designer to build the actual site. This speeds up the design decision process and serves as a blueprint for developers.
Style in web design refers to the visual appearance and feel of a website, governed by brand guidelines, design styles, and patterns that ensure consistency across all pages. This includes the choice of colors, typography, imagery, and other elements that align with the brand’s identity. Key aspects of styling a website include:
Brand Guidelines: These are a set of standards that dictate the colors, fonts, logo usage, and other elements of a brand’s identity. Brand guidelines ensure that every component of the website reflects the brand’s core values and maintains consistency, which is crucial for brand recognition and trust.
Design Styles: This refers to the overall look and feel of the website. It could range from minimalistic and modern to vibrant, depending on the brand's personality and the audience's expectations. The chosen style should appeal directly to the target audience while staying true to the brand’s essence.
Design Patterns: These are reusable solutions to common design problems. Patterns can be visual motifs used throughout the site, layout conventions, or standard user interface components like navigation menus and contact forms. Design patterns help in creating a cohesive user experience and aid in navigation and accessibility.
Understanding and implementing these style elements is critical in creating a website that not only looks professional but also effectively communicates and resonates with its intended audience.
Alignment refers to the positioning of elements like text and images on your page. Elements can be aligned concerning both the page itself and each other—for example, text aligned to the left margin and an image aligned to the right. Including visual examples of alignment could help illustrate these concepts more clearly.
The header is a consistent element at the top of each page and is visible across all parts of the website. It typically includes the business’s logo and the navigation bar, and may also feature a language selector, search bar, shopping cart (on e-commerce sites), and login/logout options, among other things. The header plays a crucial role in navigation and branding.
A banner is usually a wide advertisement or graphic at the top of a page, extending from one edge to the other. It might announce the site's identity or promote specific products or services and often includes clickable links leading to other pages within the website. Clarifying the function of banners in branding versus advertising can help users understand their use in website design.
A hero banner, often simply called a "hero," is a prominent graphical element found at the top of a website's homepage and sometimes on other key pages. This large, eye-catching display typically spans the full width of the webpage and serves as a focal point. It usually includes one or more of the following elements:
High-quality Images or Videos: These are used to grab attention and convey a strong visual message about the site or brand.
Headline Text: A concise and compelling headline that introduces the site or company and communicates key value propositions.
Call to Action (CTA): A button or link prompting visitors to engage further with the site, such as "Learn More," "Sign Up," or "Shop Now."
This term refers to the portion of the web page visible to the user upon loading, without scrolling. Typically, this area includes the header and a banner, which may feature a slideshow, video, or graphic image with a call-to-action. Understanding what content to place "above the fold" is crucial for engaging visitors immediately upon their arrival at the site.
A call to action (CTA) is an element designed to prompt an immediate response from the user, such as a text link, button, or icon. CTAs are strategically placed around the website to guide users through the conversion process. Here are some common types of CTAs:
Add to Cart Buttons: Frequently seen on e-commerce sites to encourage purchasing.
Download Buttons: Used to prompt downloads, often providing additional information like software size or version.
Trial Buttons: Offer free trials or accounts to entice users to try a service.
Learn More Buttons: Often found on home pages to provide further details about products or services.
Sign Up Buttons: Used for registering for services or newsletters.
A hyperlink, or link, is a clickable word, phrase, or image that takes the user to a new section or page within the website or to an external site. Traditionally styled in blue with an underline, hyperlinks are fundamental to navigating and exploring additional content quickly and easily.
Icons are graphical images that represent objects, actions, or ideas and are universally recognized within certain cultural contexts. Icons may also function as hyperlinks, leading to other sections of the website or external pages. They are used to:
Draw attention to specific products, services, or features.
Provide visual cues on text-heavy pages to help users scan content.
Explain concepts in graphs or diagrams.
Emphasize calls to action.
Indicate navigation directions in innovative website designs.
The footer is the bottom section found on every page of a website. It often contains the publisher’s name or logo, copyright information, and basic navigation links like "About Us," "Contact," and "Help." Additional links such as "Terms of Use," "Privacy Policy," and "FAQ" are also common, particularly on corporate and e-commerce websites. As web trends evolve, footers increasingly include social media links and location maps linked to Google Maps.
As the trends and needs of the web evolve, other elements have been added to the footer:
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 websites 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 empower the users for the web, this way will be easier for them to comprehend a website and the process behind it.
