Designing a banner for blogs & websites


Published on

Offers tips for creating a custom banner for a blog or website.

Published in: Education
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Designing a banner for blogs & websites

  1. 1. By Mark Grabowski
  2. 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. 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. 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. 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.
  6. 6. 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.
  7. 7. Sample banners
  8. 8. Sample banners
  9. 9. Sample banners
  10. 10. Sample banners Above: Banner for journalist & Adelphi professor Liza Burby’s website (an SJU alum)
  11. 11. Sample banners Above: Banner from last semester’s class for student’s blog about volunteerism on campus
  12. 12. Sample banners Above: banner for student blog on campus a capella group
  13. 13. Sample banners Above: banner from student blog on baking
  14. 14. 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.
  15. 15. 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.
  16. 16. 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.
  17. 17. Including important info • All banners should contain the following elements …
  18. 18. 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.
  19. 19. 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.
  20. 20. 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.
  21. 21. 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)
  22. 22. 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)
  23. 23. 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.
  24. 24. About the Presenter Mark Grabowski teaches Web Journalism at Adelphi University and Online News at St. John’s University. Contact him at mark [at]