This document provides guidance on designing banners for blogs and websites. It explains that banners display across the top of a page and often include logos, slogans and color schemes. Good banners make sites look professional. The document recommends including logos or images, titles/names, and taglines in banners. It provides examples of good and bad banner designs and advises finalizing banners before the class deadline.

1. By Mark Grabowski
www.markgrabowski.com

2. Overview
• For your blog – and, later on this semester, for
your personal website – you will need to
design a banner.
• In online journalism, a banner basically means
a logo or headline extending across the width
of a webpage, usually centered across the top
of the main page.

3. • Almost every website and blog you visit
probably has a banner proudly displayed at
the top.
• The banner often incorporates marketing and
branding tools, such as the company’s or
organization’s logo and slogan, and a color
scheme that is harmonious with the logo and
the rest of the blog.

4. Why have a banner?
• A banner makes your blog or website look
professional, thus separating it from all the
amateurs and hacks online.
• A well designed banner tells your readers that
you care, it shows that you care about your
website/blog, about the people visiting your
website and ultimately about the content you
are providing.

5. Where it goes
• As you can see in the diagram on the next
slide, your banner should be placed at the
very top of the blog, above the blog posts and
sidebars such as the “About me” section.

7. Think before acting
• Before you begin designing your banner, take a
look around the Internet to see what others have
done with their banners.
• This will show you all the possibilities available
and help give you ideas for your own banner.
Think about which banners you like and don’t like
and the reasons for your preferences.
• Then sketch out a design for your banner with a
piece of paper and pen.

8. Sample banners

9. Sample banners

10. Sample banners

11. Sample banners
Above: Banner for journalist & Adelphi professor
Liza Burby’s website (an SJU alum)

12. Sample banners
Above: Banner from last semester’s class
for student’s blog about volunteerism on
campus

13. Sample banners
Above: banner for student blog on campus a
capella group

14. Sample banners
Above: banner from student blog on baking

15. Creating a banner
• Banners can be created through a variety of
tools.
• In class, I will demonstrate one: Adobe
Photoshop.
• Adobe Illustrator, Fireworks and MS Paint also
work.

16. Size matters
• When you design a banner, your first
consideration is size.
• Your banner needs to be big enough to clearly
display any important logo, image or text.
• But you don’t want to make the banner so
large that it dominates the webpage and
distracts from the website’s or blogs content.
• You may also need space for a navigation
menu.

17. Size matters
• Think about a newspaper masthead. If the “New
York Times” was written so big that it took up
half the page, readers wouldn’t be able to see
what the top stories were when glancing at a
newsstand. And newspaper sales would likely
suffer.
• On the other hand, the New York Times is a well-established
newspaper brand. So, if the logo was
written in tiny print, many prospective readers
may overlook it in the newsstand and not buy it.
So, there needs to be a balance.

18. Including important info
• All banners should contain the following
elements …

19. 1. Logo or image:
A banner with just text (e.g. Fashion Blog) is
boring. To make an eye-catching banner,
you’ve got to incorporate graphics. If your
website or blog relates to a team, company
or organization – and it has its own official
logo – that should be displayed prominently
on the banner. Logos aligned to the left of
the banner usually look good. If there is no
official logo, try finding an image (a photo,
caricature, drawing, etc.) or series of images
that epitomizes what your blog is about.

20. 2. Title/Name:
If the logo/image doesn’t display the company or
organization’s, you may want to add it to the banner (e.g.
“AU Volunteer”. As you can see in the example above,
that’s basically what Rachel and Perez Hilton did with
their banners. Alternatively, you could come up with a
catchy and creative name for your blog. Note that the
Eagles blog above, for example, doesn’t say “Eagles
Blog,” but rather “Birds’ Eye View,” which is a catchy play
on words that works well for the topic. Having a catchy
title can help make your blog more memorable. After all,
there are probably several blogs called “Eagles Blog” or
“Football Blog”. But there’s likely only one “Birds’ Eye
View”. Similarly, Audrey came up with a clever name
(“Webitics” – a combo of Web, politics and analytics) for
her blog about how politicians use the Internet.

21. 3. Tagline:
This can be one of two things. First, it can be a phrase or
catchword that becomes identified or associated with a
person, group, product, etc., through repetition. For
example, the tagline for Perez Hilton’s blog is “Celebrity
juice, not from concentrate.” Creative taglines work best
when your blog has a generic-sounding name or a topical
name, such as “St. John’s Student Life” or “St. John’s
Basketball”. Second, the tagline can be a brief
explanation of what your blog is about. This is the case
for the “Birds’ Eye View” blog, which has a tagline of “The
Inquirer’s Eagles Blog”. Explanatory taglines work best
when your blog’s name is creative and, thus, its topic
isn’t apparent.

22. Avoid these banner mistakes
• http://poochaumusic.blogspot.com/
(not a custom banner)
• http://johnotano.blogspot.com/
(banner is way too big - takes up most of screen)
• http://autechdeck.blogspot.com/
(banner too small - only fills half of screen width)

23. Avoid these banner mistakes
• http://nicholaslapollo.blogspot.com/
(Artwork doesn’t match blog theme: LIC skyline is
nowhere near campus)
• http://aupanthersbaseball.blogspot.com/
(very good, actually, but uneven line at top)
• http://aucommute.blogspot.com/
(not bad, but could have been more imaginative)

24. Assignment due date
• Your banner must be completed and
presented to the professor during the final
day of class.
• Try to complete your banner as soon as
possible because it will make your blog look
better. You may also forget how to use
Photoshop, if you wait too long.

25. About the Presenter
Mark Grabowski teaches Web Journalism
at Adelphi University and Online News at
St. John’s University. Contact him at
mark [at] cubreporters.org