Skip Navigation

Home  >  About IEEE  >  Digital Publishers Toolkit  >  Style Guide

IEEE digital publishers are asked to include IEEE-wide styles when structuring site templates in order to create alignment, provide orientation, leverage the IEEE brand, and prevent users from having to learn each site. IEEE styles are detailed here for the enterprise-wide navigation, favicon, and site footers and headers.

ieee required element icon= Required


Enterprise-wide meta-navigation

ieee required element icon The meta-navigation is a menu to appear on all IEEE websites (enterprise-wide) allowing visitors to quickly access IEEE flagship websites and options.

Requirements for the IEEE meta-navigation are as follows:

• Placement: outside of the main page above the site header. Within the meta-navigation:
  - Site links should appear at the upper-left and flushed left to the edge.
  - The upper-right side is reserved for single sign-on. To request single sign-on, please work with your IEEE employee representative to initiate a project with IEEE Information Technology.

• Links: Align site links to the left side of the page in the following order with the noted destinations:

- IEEE Xplore Digital Library: (The word "Xplore" should be italicized)
- IEEE Standards:
- IEEE Spectrum:
- More sites:

• Size: minimum height of 30–40 pixels
• Link interaction: should only underline upon hover and have no "visited" link color change
• Link separation symbol: should be a vertical bar (l)
• Typography: Verdana, no smaller than .07em
• Color: light or dark text can be used depending upon the background color/contrast 

Sample meta-navigation:

IEEE meta navigation


top of page


IEEE Favicon


The IEEE Favicon (short for "favorites icon") is a 16x16 pixel square icon that appears in the latest versions of digital browsers' address bars, tabs, and bookmarks. The 57x57 pixel square icon, Apple Touch Icon, is used for iOS devices where the user adds the icon to his or her home screen.

IEEE Favicon
  • All official IEEE sites are required to use the IEEE Favicon, or an approved IEEE sub-brand Favicon, as a way to improve user experience and leverage the IEEE brand.
  • Color can be customized to align with the color themes of the site.

    Contact the Digital Innovations team,, if approval is needed. 

Sample favicon usage within a browser:

IEEE favicon example


top of page



IEEE digital site header requirements are as follows and should be displayed in accordance with the IEEE Visual Identity Guidelines (PDF 5 MB).

  1. ieee required element iconSite Identifier: 

    • The logo or name of the site should appear in the upper-left corner of the site header and link to the home page of the site.
    • This logo or name must contain the letters I-E-E-E and appear larger in size than the IEEE Master Brand to avoid confusion as to which site the visitor is on.

  2. Site Purpose:
    • The purpose of the site should be obvious either through the site identifier or through positioning copy placed prominently within the site header. However, if for some reason the site's header cannot adequately convey this information, it should be placed in another prominent position within the home page.
  3. ieee required element iconIEEE Master Brand:

    • Placement: upper-right corner of the header and within the top one-third of the screen view
    • Size: a minimum of 100 pixels wide by 33 pixels high, and smaller than the site identifier
    • Clear space: space around the IEEE Master Brand should be 1/2x where x=the height of the letters I-E-E-E
    • Color: either black or white (the blue IEEE Master Brand is reserved for enterprise-level websites and
    • Hyperlinking: should link back to and should open in the same window
    • Ensure there is no white background behind the diamond symbol and never use the IEEE Master Brand as a background, watermark, or wallpaper;
    • Should not have any modifications or distortions applied (e.g., drop shadow)
    • Should be displayed in accordance with the IEEE Visual Identity Guidelines (PDF, 5 MB)

Sample header:

IEEE site header example


top of page



ieee required element icon All sites within the IEEE Digital Presence must utilize the guidelines below for site footers:

  1. Administrative links:
    *- Home: links to the home page of the digital site (should appear as first link)
      - Site Map
    *- Contact: contact page or form for the site
      - Help: instructional content for the site (if applicable)
    *- Accessibility: link to the IEEE Accessibility Statement page (
    *- Nondiscrimination Policy: link to the IEEE Nondiscrimination Policy page (
    *- Privacy & Opting Out of Cookies: link to the IEEE Privacy & Security page (
      - Feedback: form for users to give feedback about the site (if applicable)
  2. *Copyright line: © Copyright <YEAR> IEEE – All rights reserved. Use of this website signifies your agreement to the IEEE Terms and Conditions. (link "IEEE Terms and Conditions" to and it should appear as underlined)
  3. *Descriptor: A not-for-profit organization, IEEE is the world's largest professional association for the advancement of technology.
  4. Design: Use either a border or a different background color to ensure visual separation between the footer and the page areas above
  5. Width: extends the full width of the page
  6. Typography: Verdana, no smaller than .07em

* Denotes required administrative links/language in the digital site footer. Do not replicate the policies listed above. Link directly to the IEEE policies. If you believe there's a conflict, or that your site has need for a more explicit or restrictive policy, please contact the Digital Innovations team,

Sample footer:

IEEE site footer example


top of page


Home page content layout best practices

All IEEE digital sites should adhere to the following best practices and principles for page layout.

Establish hierarchy to aid readers' understanding and focus

  • Place important elements near the top of the page.
  • Use headings, subheadings, or bolding for key words, phrases, or topic divisions (but use bold sparingly).
  • Use white space to separate topics or to make important elements stand out.

Show relationships between content

  • Group similar items together and place them in proximity to each other to show similarity.
  • Nest an item under another item to show a child/parent relationship.

Other tips for creating a more readable, interesting page layout

  • Break text into short paragraphs or create bulleted lists.
  • Incorporate links to other relevant content.
  • Use left and right columns for appropriate content.
  • Use images, charts, graphs, videos and/or tables where appropriate to present or support complex information.  

Alert messages: Home pages should be designed with a prominent area in which user notifications can be posted by the site owner in the event of an emergency. A process should be in place to ensure that such messaging can be posted or removed in a timely manner.

Sample alert message:

IEEE site alert message example

Image carousels: Billboard-like promotional areas may be used on home pages and/or sub pages; however, the following conditions should be met:

  • All content should align with the purpose and tone of the site.
  • Animation should be user-controlled (advance, pause, stop, play, mute, etc.) and optimized for accessibility and usability. Ensure there is enough color contrast between the controls and the background images.
  • Animated frame advancement should allow all content to be read (typically eight–ten seconds).
  • Flash files (if used) should be animated at 18 frames per second (fps). 

Sample image carousel:

IEEE site carousel example

Please reference the sample home page wireframe in the following section as a guideline for how home page elements might appear on an IEEE site. 


top of page


Search tools

If used, search tools (field, label, and button) should be placed in a consistent area within the digital site's design.

  • Search tools should appear on all pages throughout the site.
  • The search field should be clearly visible to users.
  • Search labels should be placed to the left of the search field rather than inside the field for accessibility purposes.
  • Search tips and advanced search can be included if available.

Sample of search area:

IEEE site search example



top of page


Sample wireframes

When planning to create a website, the site's information/design structure is very important. Some tools that could be used in this planning phase are wireframes, visual comps, storyboards, and interactive prototypes.

A wireframe is a very basic visual guide used in digital design to lay out a structure. The sample wireframes below illustrate a home page and a subpage that contain the basic design elements that would improve the user experience.

Home page wireframe                               Lower-level page wireframe

sample IEEE wireframes


top of page


Policy adherence

In addition to the requirement to include the IEEE Privacy Policy, Terms & Conditions, and Nondiscrimination Policy in site footers, all IEEE sites and digital teams are required to adhere to the practices specified within the policies.

Sites may not have a unique privacy policy unless it is more restrictive than the IEEE privacy policy. In these instances, permission for an exception must be approved by the IEEE Privacy Officer.

Additional questions related to the privacy policy should be emailed to


top of page


Template and site evaluation

Site templates should be evaluated by the Digital Innovations Team during the wireframe stage of the project, as well as at the visual design stage, to ensure that requirements are met and to identify potential opportunities for optimization prior to moving into development.

To learn more, review the following:


top of page