Website Anatomy
Please view the below diagram, which outlines various website elements and sections typically found on each of our Broadlume websites. The layout/design will vary based on the Inspiration Theme selected.Open in a separate window: https://whimsical.com/website-anatomy-DeXjgAQRR8CEczHzU23mMk
- Gray outlined areas notate entire sections on the homepage
- Red notates promotional areas found on the homepage
- Yellow notates specific elements
Website Terminology & Additional Information
- Accessibility: Making sure everyone can perceive, understand, navigate, and interact with the Web regardless of disability.
- Alt Text: Alternative text appears when an image can’t be displayed. The alt text will describe the image if a user listens to a screen reader to interact with the website.
- Anchor Link / Jump Link / In-page link: A link to content on the same page you are already on.
- Assets: Anything used to create a design, including images, illustrations, typography, colors, 3D elements, or templates.
- Breakpoint: A point, typically a set pixel width, when the layout of a website needs to adjust. For instance, a design might have two or three columns on a widescreen but a single column on a narrow screen.
- Button: any element that triggers an event
- Call to Action (CTA): content intended to promote a specific action
- Components: Objects you can reuse when designing a website or app. Components might be buttons, cards, a consistent header or footer, or any other element that can be used multiple times.
- Dropdown: additional menu options
- Favicon: small image displayed in the browser’s address bar
- Footer: the bottom section of a webpage, looks the same on every page of the website
- Header: the top section of a webpage, usually the same on every page of the website
- Landing Page: the first page a user “lands” on after clicking a link from a search engine, email, ad, or another source.
- Navigation: also nav or navbar, a set of links to other pages in the site
- Promotional Areas: areas on the website are available to be used to promote dealer’s special offers
- Responsive / Adaptive: Different ways of describing web designs that adjust based on the window size. Responsive designs adjust fluidly to the screen's width, and adaptive designs “snap” to fit set page sizes for desktop, tablet, or mobile devices.
- SEO: Search Engine Optimization, used to make your site appear higher in a search engine like Google.
- Steps Section: small, self-contained boxes of content
- Style Guide: A set of guidelines that ensure consistency in a website’s typography, colors, buttons, image treatments, animation, writing, and more.
- URL: Uniform Resource Locator (web address)
- User Experience (UX): UX focuses on the user’s needs, wants, values, abilities, and limitations. It involves designing with users to ensure content is useful, usable, desirable, findable, accessible, and credible.
- User Interface (UI): UI focuses on the structure and looks of a website. It usually addresses visuals, including layout, transitions, and styles.