There is one kind of design that brings together a wealth of varied experience into one single form: banners. Although there are several kinds, they all have a few design elements and parameters in common:

drawing by Liane Sebastian1. uses horizontal shapes— are always within a certain range so it is best to have a design that is easy to scale. Formats for sites can change, can spawn series or variations. A strong design concept can allow a family of variations that still all tie to

drawing by Liane Sebastian2. supports branding/identity—usually in the form of a logo or illustration that visually explains the topic of the site. The more visually expressive of the subject, the more communicative the banner. Templates are too limited for this important role.

drawing by Liane Sebastian3. refines typography—must be bold and intent clear. How many sites do you go to that you can’t tell what it is about? The “who is this?” question must be answered immediately.

drawing by Liane Sebastian4. sets color palette—that ties all the pages together. Colors are one of the main vehicles to convey emotion and need to be chosen to complement the theme identity. A major text color and a secondary color need to also go with black, always a way of gaining the greatest contrast.

drawing by Liane Sebastian5. create a square design complement—this becomes the “face” of the site online and used promotionally, especially in sidebars. An effective banner theme also makes a good ad.

drawing by Liane Sebastian6. scale to other formats—modular design is essential. From blog banners to ads to displays to publishing to Facebook to social media, the visual theme is consistent.

The formula of the banner layout is usually logo in the upper left corner, often with contact info in the upper right, and a tab bar either above, below, or both. Using the features of templates can add specific parameters for what is allowable. Basically, any website that carries narrative information (blogs, publications, reports, forums, articles, etc) benefit from three graphic elements:

drawing by Liane Sebastian1. BANNER DESIGN that goes at the top of the site and often remains the same on all subsequent pages. Any changes in that position usually entail designs that derive from the original and separate categories, departments, or other groups of information. The main home design carries through.

drawing by Liane Sebastian2. SEPARATOR DESIGN that can be used to divide information within the pages—such as subheads, accents, or to signify the end of a segment. This device is useful when there is not much else visual to use—and can be the same all the time or provide a series of images tied to categories or topics.

drawing by Liane Sebastian3. BULLET IMAGES that can highlight a third hierarchy of information. These are particularly useful when there are no photos or illustrations available to highlight the content.

Highly symbolic and representative, designing banners that communicate well is a specialty that takes in layout, image-creation, identity branding, editorial understanding, and modular strategy. Those that are crafted add memorability to the reader experience, they become meshed with the content and give it more impact.

My favorite current banner design (albeit not my most recent) is for Bowler Business Review. Its parameters had to mesh with the page version while also flowing into social media. Set up as a modular family, as a typographic design, it offers enough boldness to be seen very small and enough detail to have finesse when very large. I feel this is one of my best designs in this last year—particularly in the way it works in the huge range of applications.

Also please visit my other blogs that discuss banner design:

Never Done: Online Publishing” that discusses theme designs.
Cleaning House” that explores updating and polishing ideas.
Consolidating Presentation” that explains content fragmentation.

Liane Sebastian, illustrator, designer, writer, and publishing pioneer


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s