Website 101 - Website's common terms

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.

Key Takeaways

Before diving into the details, here are the essential points to remember about website design terms:

• Layout & Structure: The foundation of your website consists of the layout (how content is arranged) and wireframe (the skeletal blueprint). These elements determine how users will navigate your site.

• Visual Elements: Style, alignment, and icons work together to create your website's visual identity and brand consistency across all pages.

• Key Components: Headers, banners, and footers are standard elements that help organize content and provide navigation points for users.

• User Interaction: Calls-to-action (CTAs) and hyperlinks are crucial elements that guide users through your site and encourage engagement.

• User Experience: "Above the fold" content is what visitors see first, making it vital for capturing attention and communicating value quickly.

Layout

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: Layouts automatically adjust to fit different devices (smartphones, tablets, desktops). This is now implemented using: flexible grids that resize with the screen, CSS media queries to adjust layouts for different devices and mobile-first approach to ensure optimal viewing on smartphones

• Container Systems: Modern layouts often use container elements that maintain consistent margins and padding while allowing content to flow naturally.

A well-planned layout enhances both visual appeal and usability across all devices, ensuring your content remains accessible and engaging regardless of how users access your site.

Wireframe

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

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

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.

Header

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.

A well-designed header serves multiple critical purposes:

Navigation Center:

• Primary menu items for main sections

• Search functionality for larger sites

• Quick access to key features (like shopping cart or user account)

• Clear, logical organization of options

Brand Representation:

• Logo placement and sizing

• Consistent brand colors and styling

• Visual hierarchy that emphasizes your brand

• Professional appearance that builds trust

User Tools:

• Login/account access

• Language selectors for international sites

• Contact information or support access

• Shopping cart for e-commerce sites
  
  

Today's headers need to adapt to various scenarios:

Responsive Behavior:

• Collapsible menus for mobile devices (hamburger menu)

• Sticky headers that follow users as they scroll

• Smart hiding/showing based on scroll direction

• Adjusted content hierarchy for different screen sizes

Technical Implementation:

• Fast loading for immediate user interaction

• Smooth transitions for interactive elements

• Accessibility features for all users

• Performance optimization for mobile devices

Strategic Design:

• Clear visual hierarchy of elements

• Intuitive organization of navigation items

• Balanced use of space and elements

• Consistent behavior across all pages

Remember that while headers need to be feature-rich, they shouldn't overwhelm users. The key is to provide easy access to essential functions while maintaining a clean, professional appearance that supports your brand identity.

Banner

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

Above the fold

The concept of "above the fold" originates from newspaper publishing, where the most compelling content was placed above the physical fold of the paper. In web design, this refers to the content visible on your screen before scrolling. This space has become increasingly complex with the variety of modern device sizes, making it more important than ever to use this area strategically.

Your above-the-fold content needs to accomplish several goals simultaneously:

• Capture attention within seconds of page load

• Communicate your core value proposition clearly

• Provide immediate navigation options

• Build trust through professional design

• Guide users toward key actions
  

The challenge lies in balancing these goals without overwhelming visitors. Modern above-the-fold design requires careful consideration of:

• Content hierarchy that guides the eye naturally

• Load times that keep users engaged

• Clear pathways to important information

• Adaptive design that works across all screen sizes

Remember that while this area is crucial, users are now comfortable with scrolling, especially on mobile devices. The key is to use your above-the-fold space to encourage further exploration rather than trying to compress everything into this limited area.

Call to action

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.

Hyperlink

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.

Icon

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.

Footer

The footer has evolved from a simple copyright notice to become a crucial navigation and information hub. Modern footers serve as a safety net for users, providing essential information and alternative navigation paths.

A well-designed footer typically includes:

Essential Information:

• Company contact details

• Legal information and privacy policies

• Copyright notices

• Business hours and locations

Navigation Support:

• Site map or key page links

• Quick access to important sections

• Alternative navigation paths

• Search functionality

Engagement Elements:

• Newsletter signup forms

• Social media links

• Customer support access

• Language/region selectors

Modern footer design considers:

• Mobile usability: Easy touch targets and readable text

• Information hierarchy: Organized in clear, logical sections

• Loading optimization: Balanced information density

• Cross-device consistency: Maintains usefulness across all screens

Remember that while footers are typically at the bottom of the page, they often serve as a crucial resource for users seeking specific information or trying to accomplish particular tasks.

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.