Component Use

The Aptar website is designed to be a flexible tool. Our design system was crafted to provide visual consistency while also offering flexibility and the ability to evolve over time. While flexibility can be helpful, it is important that we understand the system behind the tool so that we can continually offer the best possible experience to our audiences. This section first covers how to build an ideal page structure and then dives into three distinct aspects of a page structure: the header, the footer, and the components in between.

 

Building a Page Structure That Works

1. Start broad and be more specific as you go down the page.
2. The top of the page should set the stage for the topic of the content to follow. The middle provides more detail and the end of the page should result in either:
   1. 1-2 clear CTA’s, or
   2. An invitation to explore related and relevant content
3. Don’t overwhelm users with too many CTA’s on one page.
4. Keep pages to a reasonable length. Studies show that users drop off the further they scroll down the page.
5. If you find yourself with a long page, consider shortening text length throughout, or simply provide a brief intro to a topic with a button for a separate page that dives into more detail.
6. On the web, readers scan. They don’t stop to read every word.
   1. Make text easy to scan using brief statements and apply the correct text styles to establish hierarchy of information.
   2. Writing for web is not the same as writing for brochures or printed marketing materials. Quick and to-the-point works best on web.
7. Long-form content has a time and place. Users will stop to read long-from content when it is an article, a research report, a case study or technical material. They generally scan pages otherwise, reading only the text or buttons that pop out the most.
8. Users will stop to play with interactive elements. Use interactive components (storytelling panels, tabbed content, etc) to break up important content where you want users to slow down and consume information in digestible pieces.

 

Usage Guidance

Header Use

The Aptar website was built with an underlying visual structure that supports wayfinding across the site. Depending on where a page falls within the information architecture and the content that is being displayed, we’ve established specific headers to help distinguish page types. It is important to maintain this system in order to provide clarity and consistency.

Only the homepage uses the distinct and dramatic L0 header. The L1 header can be identified by the rectangular hero image with the navigation placement over the image — this is used on all overview pages.

The L2+ header uses the same rectangular image style as the L1 header, but pushes it below a solid white navigation bar. There is a variation of this header used on L3+ pages that offers sub navigation.

There is an option to use a text-only header on any level. Aptar currently uses this approach for listing pages (e.g. Innovation & Insights, News & Events, Resources, etc.) and text-based pages (e.g. Terms and Conditions, etc.).

Detail page headers are specifically designed for content they display, but they follow the convention of leading with the title at the top left of the page and an image on the right. This visually sets these pages apart from all other page types.

 

Footer Use

The Aptar website provides a range of footer styles that can be used as needed. Options include a simple footer with the most basic information, a footer with a prominent, singular CTA block, and a multi-CTA block. It is important to consider the content and purpose of the page when selecting the appropriate component. Because the black portion of the footer is on each page by default, these CTA areas are created by adding a “More Information” or “Call to Action” component at the bottom of the page.

Components from left to right: ‘Call to Action’; ‘More Information, Site Help’; plain footer, no additional components

• ‘Call to Action’ Component
  • Best to use when:
    • You would like to end the page with a 1-2 clear calls to action, including a primary and secondary emphasis
    • On detail pages
• ‘More Information, Site Help’ Component
  • Best to use when:
    • The main CTA on the page is to “continue exploring”
    • There is not one, distinct CTA such as “Request more information”
    • On overview pages
• Plain Footer
  • Best to use when:
    • There are high priority CTA’s clearly present on the page higher up
    • There is only a simple need for a footer presence without additional CTA’s

Sample Page Structures

The components that are used between the header and footer are designed to be flexible, offering you the ability to customize pages to best reflect the available content. While this flexibility can be helpful, it is important that we consider the overarching purpose, content, and rhythm of a page in order to make an appropriate component selection.

Sample – Level 1 Page Structure

1: Hero > Content Below Hero

Clear and concise content setting up the purpose of the page.

2: Content with Visual (Default Style)

Breaks up long form content into more digestible bits. The overall length of the content pairs well with the size of the image. It is short enough to make sure the height of the image doesn’t become unreasonably tall.

3: Storytelling Panels

Continues to tell a high-level story, but uses an interactive component to encourage users to play with the site and discover each piece of content within the module.

4: Columned Content

Because this is a landing page with sub-pages below it in the navigation, we use this component to give brief overviews of other pages within the section. The headlines are just a few words to make them easy to scan. The descriptions are no more than 2 lines to give users just enough to be an “appetizer” of information. They are encouraged to click the button to get the “full meal.”

5: More Information > Page Listing with Markets

We use this component to lead to content that doesn’t sit directly in this section but may be related in topic. Because this is a one-Aptar level page, we also use the moment to promote our speciality markets.

 

 

 

Sample – Level 2 Page Structure

1: Hero > Content Below Hero

Consistent treatment at top of the page. This should be the only text style applied in this area of the page across the site. Do not include All Caps or various other type sizes or colors. This creates a better experience for users and helps them anticipate the flow of information on a page. Aim for a minimum 2 lines and maximum 5 lines of text.

2: Content With Visual (Box Style)

Rather than putting all the brand differentiators or supporting details in the component above, we introduce a new component to break up content and make it easier to comprehend on web. The image infuses branding into the site and humanizes the digital experience.

3: Tabbed Content > Full Width Image

Rather than simply listing multiple paragraphs of text, we break them out and divide them up within an interactive component. Users naturally are drawn to interactive components that use motion and hover effects. Place text here that you’d like users to slow down for and digest.

4: Product Listing

Placing the product information at this point in the page reinforces our branding goals to position ourselves as a Partner not a Supplier. We tell our story before we show our product.

5: More Information > Page Listing Promo

This is a nice component to use when it is a high priority to drive users deeper into pages within this section for more specialized detail. The color draws the eye to the headline which should be quick to read but always exudes our voice & tone.

 

6: Post Listing

Use this component to highlight timely content and show freshness on the page.

7: Call to Action

The main call to action, if a user has made it this far down the page, is to encourage contact, so the ‘Call to Action’ component is an ideal choice at this point in the page.

 

 

Sample – Level 3 Page Structure

1: Tertiary Navigation

Including the on-page sub navigation for this component to help wayfinding at this deeper level within the site. The tertiary navigation should be added for all market sections that have 3+ pages (i.e. ‘Expertise & Services’).

2: Hero > Content Below Hero

Brief overview using consistent styling throughout the site to reduce mental strain on users and avoid asking them to learn too many new patterns and page types.

3: Columned Content

Short snippets of content. Similar to what is mentioned above on Sample Page Level 1, we use this component to give brief overviews of other pages within the section. The headlines are just a few words to make them easy to scan. The descriptions are no more than 2 lines to give users just enough to be an “appetizer” of information. They are encouraged to click the button to get the “full meal.”

4: More Information > Site Help

Because this is an exploratory page rather than one with a singular CTA, we present optional pathways for users to dive into additional relevant content.

 

 

Sample – Another Level 3 Page Structure

1: Tertiary Navigation

Similar to above, because we are deep in the site, we add the on-page sub nav to help wayfinding within this section.

2: Hero > Content Below Hero

Consistency in the intro text across all levels.

3: Storytelling Panels

Use an interactive component to break up the details of the story behind the service. One way to think of the panels is as though each headline is a “bullet” of information with the paragraph below acting as a “sub-bullet.” However, we present it in a much more engaging manor to harken back to our vibrant brand.

4: Content With Visual (Default)

For information that should be presented together all at once, we use this component along with simple h4’s and paragraph text to break it up into digestible chunks.

5: Post Listing

Pull in timely content that acts as a proof-point of the service that is being highlighted on this page.

6: Call to Action

Because this is a service and a natural “end-point” for a user journey, present a singular call to action to contact and complete the conversion.

Additional Layout Guidance

The 2020 site designs are always available to reference for the original suggested layouts. Keep in mind that this an evolving project. As such, there may be differences in the live site due to intentional and mutual decisions and/or updates in the ongoing enhancement of the site.

ORIGINAL SITE LAYOUTS (PDF)