Overview

Note: It is assumed that users of the Pattern Library have basic to intermediate level familiarity with HTML and Cascading Style Sheets (CSS). While it is possible for users with relatively modest HTML skills to build out web pages using the Pattern Library, if you find following any of these examples difficult, brush up on your HTML/CSS skills using one of the excellent resources available in the Additional Resources callout box.

The Fireman’s Fund Pattern Library is a design and development resource for internal and external partners tasked with building out Fireman’s Fund web applications. Pattern libraries recognize a fundamental truth in application development: namely that the types of design or coding challenges designers face when creating web pages are fairly limited, and fall into repeatable design patterns. Pattern libraries attempt to capture and document best practices in design that have been validated by very smart designers who have gone before us.

An equally important goal of the Pattern Library is helping web designers and developers to build out easily maintainable web pages that conform with the Allianz Application Design guidelines. Standards are important in establishing the creditability and trustworthiness of a web site. The more consistent our Fireman’s Fund applications are in visual appearance and design interactions, the more favorably received they are by our agent users, and ultimately the more usable the underlying applications become.

To start using the site, read the Getting Started and Patterns Overview topics, and download the Starter Kit to start building a variety of different page types.

Getting Started

Additional Resources

The Pattern Library is intended to make it easier for internal and external partners to build out robust, easily maintained application pages that conform to the Allianz Application Design Standards. Most of the heavy lifting is accomplished through the Cascading Style Sheet (CSS) that you include in each of the application pages you build. The CSS takes care of details such as determining the width of your application pages and the colors, size, and positioning of all your page elements. If you decide partway through building out a set of application pages that you need to alter your page layout (for example, you decide to add a side log to your application pages that requires changing them to a wider page width), the CSS is setup in a flexible manner that makes performing these types of edits relatively painless. To get started with the Pattern Library, follow these basic sequential steps:

Download the Pattern Library Starter Kit. The Starter Kit includes the required CSS file, a number of starter page templates, and some sample pages showing examples of basic usage.
Decide how wide your application pages need to be. All Fireman’s Fund web pages are designed to a basic grid structure. Different applications will have different requirements for how wide their pages need to be, depending on how much text and data need to be displayed on a typical page. The CSS makes available a range of page types, from a three column layout suitable for popup or login pages (490 pixels wide) up to a six column layout suitable for data-rich pages (984 pixels wide). Don’t worry if you decide partway through a project that you need a different page type; the CSS is structured in a forgiving manner that makes performing these types of changes relatively straightforward.
Decide if you need to include navigation or a log in your application. Most applications will require some sort of navigation for moving between application pages, but some smaller wizard-based applications may not require page navigation.
Open the appropriate page template for your expected application page width. The five column page type (818 pixels wide) is suitable for most application needs, but smaller and wider page types are available to suit a variety of project requirements.
Browse the available patterns to view HTML code snippets you can copy and paste directly into your page. The pattern library provides a number of examples for building out a variety of typical page patterns. Some of these patterns you can use as is directly in your projects, while some will require slight modifications (for example, changing the label that is exposed on a page button).