• 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.
• Almost every website and blog you visit
probably has a banner proudly displayed at
• 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.
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
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.
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.
Above: Banner for journalist & Adelphi professor
Liza Burby’s website (an SJU alum)
Above: Banner from last semester’s class
for student’s blog about volunteerism on
Above: banner for student blog on campus a
Above: banner from student blog on baking
Creating a banner
• Banners can be created through a variety of
• In class, I will demonstrate one: Adobe
• Adobe Illustrator, Fireworks and MS Paint also
• 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
• 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
• 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.
Including important info
• All banners should contain the following
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.
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.
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
Avoid these banner mistakes
(not a custom banner)
(banner is way too big - takes up most of screen)
(banner too small - only fills half of screen width)
Avoid these banner mistakes
(Artwork doesn’t match blog theme: LIC skyline is
nowhere near campus)
(very good, actually, but uneven line at top)
(not bad, but could have been more imaginative)
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.
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