Webpage Layout Brand and Best Practices

Note: For a deeper understanding of the  Magellan Brand, please review the brand guidelines here or contact Creative Services

Branding Elements

The websites come ‘pre-branded’ for the most part. All pages display the Magellan logo as well as the mosaic pieces branding element at the top and the bottom of the page. Fonts are automatically matched to our brand guide (type and color), including five layers of headers, links, buttons and body copy. You may, however, need to add more branding elements to the page. This is very important if the page is a home-page, a major landing page or a page connected to a specific marketing campaign. In these instances, it is highly likely that the page will mark the user’s first exposure to the website and making a strong brand statement is of the utmost importance.

Fonts | Links and Buttons | Headers | Footers | Brackets | Images | Videos


Fonts

The following fonts and type treatments are included with WordPress. Note that the title of each page automatically becomes Heading 1 (H1). There are also two H2 headings. One in Magellan Blue and one in Black to give editors more variety without limiting accessibility compliance.

 

Header 2 Blue (H2)

Header 2 (H2)

Header 3 (H3)

Header 4 (H4)

Paragraph (P)


Links and Buttons

WordPress includes preformatted buttons and links that can be added to many of the modules. Links are best used within a paragraph. Buttons are best used on a separate line at the start or the end of a paragraph.

Links:

Arrow – Use for links to internal pages

External – Use for links to external sites

Email – Use when creating ‘Mail to’ links

Download – Use when linking to a document for download or a PDF

Video – Use when linking to a YouTube or Vimeo video or to an internal page set up to feature a video

Press – Use when linking to a press release or news article

Twitter – Use when linking to a Tweet or Twitter Account

LinkedIn – Use when linking to a LinkedIn Company or Showcase Page

YouTube – Use when linking to a YouTube Account (but not for individual pages)

Facebook – Use when linking to a Facebook account or post.

 

Buttons:

Arrow – Use for links to internal pages

External – Use for links to external sites

Email – Use when creating ‘Mail to’ links

Download – Use when linking to a document for download or a PDF

Video – Use when linking to a YouTube or Vimeo video or to an internal page set up to feature a video

Press – Use when linking to a press release or news article

Twitter – Use when linking to a Tweet or Twitter Account

LinkedIn – Use when linking to a LinkedIn Company or Showcase Page

YouTube – Use when linking to a YouTube Account (but not for individual pages)

Facebook – Use when linking to a Facebook account or post.


Note: Click Thumbnails Below for Enlarged  View of Examples

Headers

All pages have the option of a header area. Depending on the page type, you have different options for this. To change page type, go to the Templates tool on a page’s editor interface.

Landing Pages

Landing pages have three options for the header area:

  • Animation: You can use text and icon graphics to create a multi-step animation that takes up a large section at the top of the page. The animation will allow you to display a series of text elements along with icons (to match Magellan’s brand book) and will culminate in a prominent call to action. A simplified, non-moving version of the animation appears on mobile browsers.
  • Large Banners/Slideshow: This option can be used several ways, to create a large image and text area at the top of the page. This header can include a headline, a sub heading and a call to action. The image can be made into a link. You will need to upload two different versions of your image, one for desktop and one for mobile. This header can also be used to create a rotating slideshow of images. You can add up to five images, each with their own headline, subheading and call to action. The slideshow can be set to rotate automatically or manually.
  • Short Banners: This option is a shrunken version of the large banner. It includes a headline and a much smaller image. The image can be made into a link but there is not option to add a call to action. Note, this header is best suited for content pages and less-important landing pages. It is not recommended for a home page.

Content Pages

Content pages have two options for the header area:

  • Simple/Automatic: The simple header is automatically created. It will display the page title as H1 level text and include the Magellan mosaic pieces branding element. Note that this is the recommended option for most content pages.
  • Short Banners: The short banner header options from the Landing Pages is also available for Content pages. This is recommended for particularly important content or for pages that will likely be linked to directly from off-site (for example, a resources or FAQ page, product feature pages, contact us or form pages)

Footers

There are two footer areas on each site:

  • The Universal Footer: This area appears at the very bottom of every page and cannot be turned off. It has a dark blue background and white text. The Universal Footer includes the site’s copyright information as well as links to content that must appear on every page, such as the Non-Discrimination statement, Privacy Policy and Disclaimer. This menu can be customized by site in the Menus section of the Appearance toolset. It is not recommended to add any branded content to this area.
  • The Fat Footer: This area appears immediately above the footer and can be customized by page. It has a Magellan Blue background and white text. The Fat Footer includes text content, social media links, links to important pages, and other websites. Each site will have a default Fat Footer, you can choose to turn this off for any page. You can also set up Fat Footers that only pertain to individual pages or to certain areas of your site. For example, you could have an area of your site aimed at members and another at providers. For each area, you can have a Fat Footer with specialized links and content for those very different user-bases.

Brackets

The Brackets module is available on all content and landing pages and allow you to add a colorful, on-brand statement. The Brackets module allows you to place text, such as a quote or an important title on a colored background and in parenthesis. The text can be large, small or a combination of the two. You also have the option of including a text area below the quote. There are several color options to choose from and depending on the page format, the color background behind the quote block can stretch to the edges of the screen or be constricted to the main content column.

The best use of the Bracket tool is to highlight key quotes or important points.

The Bracket tool should not be used for Calls-to-Action or important links.


Images

In terms of impact, the usage of images gives you the best opportunity to make a statement about Magellan. There are several different ways of displaying images throughout the site:

 

Large and Small Headers

As discussed in the Headers section, the sites give you the option to use large and small-scale images in the header. If you are using this option, you do not need to worry about including branded images. The Header system will automatically add the Magellan Mosaic pieces over your image. You will however need to ensure that the image you wish to use will work with these branding elements. Creative Services have a template that will allow you to see which parts of the image will be covered and which will be visible.

 

Image Module

The Image module allows you to display a large-scale image along with accompanying content and header. This module is ideal for sharing very detailed images, such as infographics or for making a very strong visual statement such as at the top of a section on a longer page. This module does not create any brand elements automatically, so these should be included within the image itself. For example, we have edited photos to include brand colors, added mosaic pieces, added logos and more.

 

Image Block

The Image Block module allows you to display a smaller image alongside content. You can choose if this image appears on the left or the right of the screen. You have option of including a call to action button or no. You can choose different colors for the background of this module. This module is best used to prominently feature a product, service or key content area of the site. This module does not create any brand elements automatically, so these should be included within the image itself. For example, we have edited photos to include brand colors, added mosaic pieces, added logos and more.

 

Image Cards

The Image card module allows you to display a smaller image alongside content in a boxed area. You can choose if this image appears on the left or the right of the screen. You have option of including a call to action button or no. This module is best used to prominently feature a product, service or key content area of the site. Image Cards are also a good choice for creating a call to action area at the top or bottom of a page. This module does not create any brand elements automatically, so these should be included within the image itself. For example, we have edited photos to include brand colors, added mosaic pieces, added logos and more.

 

Embedded Images

When you are using the free-form modules (Free-Form and Accordion), you can embed smaller images within your text block and set the text to wrap around them. Note that this works best with smaller images. If you wish to use a larger image, it is recommended to break your text into multiple modules and to use the image module to place the image in between sections. This will display better on desktop and mobile. This module does not create any brand elements automatically, so these should be included within the image itself. For example, we have edited photos to include brand colors, added mosaic pieces, added logos and more.

 

Tiles

The Tiles module allows you to build a grid of small images and accompanying text. These grids can be two or three columns wide and as many rows as you need. This module is best used for connecting users with a varied array of information, such as a number of articles, featuring case studies or building a directory of websites or pages. This module does not create any brand elements automatically, so these should be included within the image itself. For example, we have edited photos to include brand colors, added mosaic pieces, added logos and more.

 

Logo Grid Module

The Logo Grid module was created to allow you to display a grid of small images without any additional content. It is best used for URAC and NCQA accreditations, displaying the logos of event sponsors or displaying industry awards or certificates.

 

Featured Links

The Featured Links module lets you build a row of two or three columns, each with a text block, header link, optional call-to-action and image. This module is best used on a home or landing page to prominently display links to key content within the site. Featured Links provides two different branding opportunities. You have the option of uploading small images such as photos or company logos; or you can upload icons. If you choose the icons option, they will appear within Magellan blue circles. If you include a header link, your image or icon will automatically become a button.


Videos

There are three methods of sharing videos. None of these modules automatically add branding elements. For all three it is recommended that you include branding elements such as logos or mosaic pieces within the video itself. You should also provide a branded and designed, thumbnail to External Communications when the video is uploaded to YouTube. This will ensure the video will be frozen on an appropriate and branded still-frame before it is played.

 

Video Block

The Video Block allows you to share a small-sized video alongside a block of text and header. There is also an optional call to action. This module is best used for technical videos that demonstrate a concept that is being explained by content on the rest of the page. This module only requires a YouTube link. You do not need the video file itself.

 

Full Width Video/Video List

The Full Width Video/Video List module allows you to share one or more video in a large-scale format. Add one video to the module and it will display across the full column width of the page. Add more links and it will also create a carousel of thumbnails beneath the large video, allowing the user to choose which they would like to watch. This module is best used for Marketing videos or member stories that rely on a strong visual impact. Other uses include building a library of instruction videos for members/providers. This module only requires a YouTube link. You do not need the video file itself.

Image

The image module allows you to add MP4 video or GIF animations. Note that these videos play on a loop and do not include user controls. This module is best used to provide animated accompaniment to other content. For example, an animated infographic. We recommend not including sound if you are using this option. As you have to upload the file to the website, this module should only be used for very short videos to reduce page load speed and to ensure an optimal experience for the user. This module does not work with YouTube links and requires the user upload the file.