They’re a great extension to your business’ communication toolkit and offer you and your clients an excellent channel by which you can reach potential and existing customers.

In this article, we’ll explore common design patterns of email newsletters and learn which approaches work well, so that you’ll be prepared to create one for yourself and your clients.

We’ve also included a compilation and analysis of different newsletter designs so that you can learn from them as well as tips on what to do and what not to do.

If you know of any other tips, please share them with us in the comments area.

Which Came First: Chicken or Egg?

Before you create and send your email newsletter, you’ll need subscribers. Making this process as easy and intuitive as possible is important. After all, users are giving you permission to contact them. You wouldn’t want to mess that opportunity up!

Not Too Many Fields

You don’t need a user’s social security number to send them an email! It’s most frustrating when someone signs up for an email newsletter only to be confronted with a form that asks for their address, age, phone number, mother’s maiden name, favorite pet… All we really need is their email address and, if we want to push a bit further, their name.

Seth Godin, in his article Permission Marketing, offers good insight into getting viewers to sign up and follow you:

Permission marketing is the privilege (not the right) of delivering anticipated, personal and relevant messages to people who actually want to get them.

In other words, the viewer wants to listen to you. They are giving you their attention, so at least respect them and don’t ask for unnecessary data.

With that in mind, let’s look at some examples of good newsletter sign-up forms:

Joshua Porter’s sign-up form is an excellent example of what to do right. First, he puts the sign-up form close to his social icons, indicating that this is an extension of his communications with you, the user.

Next, he offers a short blurb explaining what the newsletter is about. This gets you and your users on the same page, so that they’re clear on what to expect from your content.

Finally, he asks only for the user’s email address and name, followed by a big button with a verb label: “Subscribe.” Very simple, yet packed with just the right information!

Threadless also puts its newsletter sign-up form in the social area of its home page. The location is prominent, and Threadless provides information on how often and when the newsletter will be delivered. Also, notice the simplicity of asking only for an email address: no name, no social security number, no favorite pet!

We’ve Got Subscribers!

Your sign-up form is now a success, and you’re ready to send out some content!

Before we move to the design stage, let’s figure out what the focus of our newsletter is. For example, if you are giving away coupons, you could use more graphics and buttons than usual. If it’s text-heavy, you’ll want it to be as readable and scannable as possible.

Let’s examine two newsletters with different goals. The first is from Barnes and Noble, offering promotions for its stores. The second is from Sitepoint, which gives its newsletter a magazine-style layout and structure.

The first thing you’ll notice about the Barnes and Noble newsletter is that it is designed like a website. It’s literally an extension of the main website, complete with top-level navigation.

You’ll also see that it’s timely; right next to the logo it says “This week,” reminding you that the offers are for a limited time only and that you should make your purchase quickly.

Notice how easy it is to scan the page. All of the paragraphs are short, and the images and content hierarchy make the design feel comfortable even in your email browser!

Finally, the designers have put a clever call to action at the bottom of the page. The numbers in big red type attract your attention, sitting beside buttons with verb labels, pushing you to take advantage of the promotion.

Sitepoint goes for a completely different layout because it has a different goal. Its goal is to build a following for its content, to be able to extend its advertising space.

It adopts a magazine style, starting each issue with a letter from the editor, followed by a table of contents (in-page links) that guides you to the concise articles in the email.

One important design decision made by Sitepoint was to include a photograph of the editor at the top of every email. This approach makes the email feel more personal, like it’s coming from a human who took the time to organize the content.

HTML or Plain Text?

Now that we’ve discussed your business goals for the email newsletter and how to support it with the design, let’s briefly consider the construction.

Back in the old days (i.e. three years ago), composing email newsletters in plain text was safer and more common. You would also see full-length articles incorporated in the email (as long as today’s blog posts).

Since then, people have discovered that they don’t really like reading long emails, and that scannable content that functions as a gateway to the main website makes more sense.

With this in mind, the most logical design would be a hybrid of images and HTML text. Jakob Nielsen has this to say about how much time users spend reading a newsletter:

Users spend 51 seconds reading the average newsletter. The layout and writing both need superb usability to survive in the high-pressure environment of a crowded inbox.

Once you’ve got a good hybrid design, you will have to dive in and code the newsletter (unless you have a great coder sitting next to you). A great resource for best practices and insight on the state of HTML emails is Campaign Monitor’s tips area:

Not only can you get started with one of the templates, but you can also consult a comprehensive checklist of supported CSS and HTML features in all modern email clients.

Email Newsletter Software

Now that we’ve got a solid grasp of what’s involved in creating an email newsletter that serves our business goals, we will choose the right software for our design.

You could, of course, manually write the scripts to create the newsletter, subscribe users and send out the email. But you likely have a business to run, and using tools that were created for these tasks would save you a lot of time.

Here are the three most popular email newsletter services today. They are all low-priced and feature-rich:

Campaign Monitor, which we mentioned earlier, not only has great resources for designers but also great prices: a flat delivery fee of only $5, plus $0.01 for each subscriber.

Mail Chimp is another popular email campaign service. It has a great analytics feature for your email newsletter campaigns and a free plan!

Emma offers email marketing with style. It even plants five trees for each customer who joins. If your business is growing, Emma allows you to easily adjust your pricing plan.

Inspiration

By now, you should have a good understanding of what’s involved in creating an email newsletter campaign for you or your client.

Now for some more fun. Let’s look at some email newsletters for reference and inspiration…

Apple looks good, as always. Its email newsletter is fresh, scannable and beautifully balanced. Notice the attention to detail, specifically how the buttons are color-coordinated with the images.

Zappos’ approach is similar to that of Barnes and Noble: its navigation at the top is an extension of the website, and it highlights its popular free 365-day shipping service.

Target also focuses on scannablilty and clickablity. Notice the email discount, rewarding you for following the newsletter.

Personal success guru Brian Tracy offers a clean, easy-to-read email newsletter. His approach is simple yet focused on his brand and main goal: helping you to achieve success.

Master chef Jamie Oliver has a more artistic email newsletter, keeping the visual language consistent with his upbeat and personal approach to cooking. The buttons match the background nicely and create a fun feel.

Think has followed sensible art direction for its newsletter. The design is consistent with that of its blog.

Clarus Wines beautifully illustrates its newsletter, giving it a human touch. The soft gray offers respite from your cluttered inbox.

A great example of borrowing real-world analogies (in this case, an event poster) and translating it to the web, Blick Shared Studios offers an attractively designed email newsletter.

If your interested in seeing more great examples, check out Campaign Monitor’s Inspiration Gallery.

When Should I Send?

We’re almost wrapped up, feeling inspired and ready to extend our communication with clients through an email newsletter! Just one more topic to cover, and that is what day to send it. 37 Signals has a humorous take on the question:

Want something to blow up? Tell the world about it on a Tuesday morning. Avoids the Monday avalanche people face and gives you the rest of the week to get play.

Want something to fade away? Tell the world about it on a Friday afternoon. It’ll fade into the weekend.

Written exclusively for WDD by Noam Almosnino, a web designer and blogger who helps businesses and individuals connect with their customers online!

Do you have tips to share with us from your email newsletter experiences? Please post them in the comments below…

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: B4da5k

The best way to keep track of our tweets is simply to follow us on Twitter, however, in case you missed some here’s a quick and useful compilation of the best tweets that we sent out this past week.

Note that this is only a very small selection of the links that we tweeted about, so don’t miss out.

To keep up to date with all the cool links, simply follow us @DesignerDepot Spooktacular Pumpkin Vector Pack (100 Free Vectors): http://bit.ly/2V9ZvN

How to Create a Basic House Icon in Photoshop: http://bit.ly/1Wt4mV

50 Funniest & Weirdest Twitter Tweets! http://bit.ly/x8FLg

The Coolest Pizza Cutters You Have Ever Seen! http://bit.ly/4rJkZz

Another awesome clock: http://bit.ly/1AYJco

70 Of The Best Photoshop Actions For Enhancing Photos: http://bit.ly/ljFlt

Awesome Japanese Maple: http://bit.ly/uRZhb

What to do When Your Project Starts to go Downhill: http://bit.ly/2iB6KR

6 Ways To Take Your Webdesign From Good To Great: http://bit.ly/XuMiH

How to use an Apostrophe: http://bit.ly/1EGSzs

Web Design Trends for 2010: http://bit.ly/46k3cW

The Quentin Tarantino Guide to Creating Killer Content: http://bit.ly/oPFEB

The future of interface design: http://bit.ly/1QRDxh

50 Beautiful and Creative Blog Designs: http://bit.ly/1fDNsG

Beautiful Stairs Photos: http://bit.ly/2QJo9E

Getting Clients to Embrace Fresh Ideas: http://bit.ly/4kQdVk

How to Deal with Trolls on Your Blog: http://bit.ly/23Nm4j

Stunning Pictures of Jellyfishes: http://bit.ly/17hfWO

8 Reasons Why You Should Be Prototyping: http://bit.ly/4sRw44

Out of the Blue: Islands Seen From Space: http://bit.ly/OzJLR

Edible Shoes Made of Bread: http://bit.ly/B42Uj

Apple co-founder Steve Jobs named Fortune ‘CEO of the Decade’: http://bit.ly/1bKQeQ

20 years of FontShop: http://www.fontshop.com/20y…

Morning glory pool: http://bit.ly/N9E2W

Want more? No problem! Keep track of all our tweets by following us @DesignerDepot

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: B4da5k

Niark takes his inspiration from street art, music and graphics.

He works in a broad scope of areas such as advertising agencies, music labels, art toys, streetwear and more.

His style features bright colors and abstract illustrations and finds balance in seemingly chaotic environments.

If you want to learn more about Niark, take a look at his portfolio. In this post, you’ll find a collection of his best works that you can use for inspiration.

What do you think of Niark’s work? Please leave your thoughts below…

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: B4da5k

Studies have demonstrated that even a split-second delay in thinking on the user’s part will weaken their perception and interest in a website and ultimately lower the website’s conversion rate.

In certain niches and industries, having UI elements that are not obvious in their use may be perfectly acceptable. The blogging and web development industry are perfect examples.

But when we design user interfaces for non-tech-savvy audiences—which is usually the case with client work—we have to ensure that certain UI elements do not stray too far from what users are accustomed to.

This article discusses some best practices and usability traits of six user interface elements and the conventions for each, so that developers can create user experiences that are both beautiful and simple.

1. Appearance of the Search Box

On large information-rich or product-heavy websites, search is king. Users here generally forgo conventional navigation bars in favor of the search box.

A search box that is not immediately visible will have one of two effects: 1) the user will assume no search functionality is available, or 2) the user will find the search functionality after a delayed, and possibly irritating, period.

Ensure that the search box on your website is easy to see. Dark backgrounds and fancy graphics will impair usability, so keeping it white or light gray is best. Also, make sure the search box is large enough relative to other important elements on the page, thus maintaining its position in the visual hierarchy.

The search box on Domain by IP fits the visual theme of the website nicely, being orange and graphically consistent with its surroundings. But if a search box on a busier website were given this treatment, it would probably be difficult to spot.

The design is not a hindrance on Domain by IP because the website has one function: search, which is right in the middle of the page. Plus, being in a technology niche, its developers have less of an incentive to stick with convention. But this degree of creativity should be avoided on larger websites, whose target audiences may not be as technically savvy.

Adventure Time, meanwhile, keeps its search box white, conveniently sized and easy to find on the page:

Despite being in a foreign language, Adventure Time has a very clear search box, even for English-speaking users. The size and color of the box is complemented by the magnifying glass graphic, which has become the universal symbol for online search. A user looking for this functionality will not have a problem here.

This pattern should be followed in all projects targeted to a diverse user base.

Further Reading:

• Search Box: Examples and Best Practices

2. Clearly Marked Collapsible/Expandable Content

Websites benefit from collapsible panels and drop-down menus because they make for cleaner and less cluttered layouts. The hidden content in these interface elements can, however, impair a website’s usability if their presence is not clearly indicated.

When a user clicks on a bare link or button, they expect to be taken to a new page. But when a user clicks a link or button that has a hidden content indicator, they expect the new content to be instantly displayed (via JavaScript or AJAX) and have the option to hide it subsequently. Thus, a website should sharply differentiate between normal links and links that reveal new content via JavaScript.

Collapsible content, such as in side panels and menu trees, can be indicated with an arrow, triangle, or Windows Explorer-like plus/minus indicator. The panel that logged-in users see on CSS Globe clearly indicates that it is collapsible:

Below is the same page after the panel has been expanded to reveal a group of functions:

With the content in the panel now expanded, the arrow is rotated 45 degrees, suggesting that the same content can now be hidden or collapsed. This same principle can be applied to drop-down or fly-out menus, although these would not require a rotating arrow. Surprisingly, this feature is often omitted even on professionally designed websites.

Further Reading:

• Collapsible Panels: Interaction Design Patterns Library

3. AJAX Loading Indicator

When you improve the user experience by loading content through asynchronous requests, make sure to inform the user that an AJAX request is being processed. Without this indicator, the user may give up waiting or wonder why nothing has happened in response to their click.

You can accomplish this in a number of ways; one way is to highlight a “Loading” or similar message in or near the location where the action will occur, as Google’s RSS reader does:

At the top of the screenshot is yellow highlighted text, which appears when the “Mark all as read” button is clicked, telling the user that something is happening.

Another way to indicate this is with animation or a revolving hour glass, which would be familiar to Windows users. An animated indicator is used on numerous websites, including Twitter, where users click a “More” button to view older tweets:

Once the button is clicked, and depending on the speed of the client’s connection to the server, a familiar animated swirling graphic appears, telling the user that their request is being processed.

AJAX loading graphics are available for free from a number of different websites, many of which allow you to customize the graphics with size, color and other options.

This type of visual indicator is important for asynchronous requests that don’t provide client-side clues about what activity is loading.

An AJAX-like indicator could also be used to enhance non-AJAX functionality that behaves like AJAX and takes time to load. This could include a photo gallery that loads a larger image when a thumbnail is clicked.

AJAX loading graphics and other indicators don’t actually speed up a page, but they do improve the “perceived” load time, which is often just as valuable as improving the actual load time.

Further Reading:

• The Truth About Download Time

4. Location of Shopping Cart and Log-In and Register Functions

When users scan a page for the “Shopping cart” button or “Register now” link, the first place they look is the top-right corner of the page. Unless you have a compelling reason to do so, keep this functionality in its familiar location, or else you risk slowing down and disrupting the user experience.

Options and functions that would fall under this category include “View cart,” “Check out,” “Log in,” “Log out,” “Register,” “Submit link,” “Forgot password?” and even “Contact us.” This last item would usually be the last one in a horizontal navigation bar.

TasteBook includes four such links in the top-right corner of its layout:

Maui Divers Jewelry is another good example and also includes a shopping bag graphic:

5. Expiration Date Format on Credit Card Forms

When a form asks for your credit card’s expiration date, the format is always the same: the month, represented by two digits, followed by the year, represented by two or four digits (e.g. 03/11 or 03/2011). The four-digit format is how the expiration date appears on the credit card itself.

The best way, then, to collect this information and strengthen the user experience is to use two separate select boxes, one for the month and the other for the year. Don’t make the user enter the expiration date in a single text box, even if you provide instructions.

Here is a good example from the payment page of Maui Divers Jewelry:

And here is an example of a poorly designed expiration date field:

Moreover, the month selector should not display the names of the months, but instead should list the numbers 01 through 12. There is no reason to slow users down by making them figure out that “08″ means “August.”

6. Easily Identifiable Links

This should never be a problem, but unfortunately some websites still do not clearly distinguish between links and regular text in the main body.

In most cases, the best way to indicate this difference is by making links a different color and underlining them. In some cases, a strong contrasting color alone is enough; but only underlining or just changing the color slightly is rarely enough and will often impair accessibility.

Cameron.io makes this distinction well:

These links would not be as visible if they were merely underlined but not changed in color. You wouldn’t design a button that didn’t look like a button, so why let text links blend into the main body? As most users scan text online, designers should ensure that all links are identifiable long before a mouse is rolled over them.

Further Reading:

• WCAG 2.0 and Link Colors
• Guidelines for Visualizing Links

Conclusion

All of the user interface elements and functions discussed in this article are crucial to website usability and play important roles in the user’s perception of your brand.

Many small enhancements can make a big difference in perceived speed and can keep users from getting frustrated or uncomfortable.

Make your user interface elements simple and streamlined, and follow conventions where possible. You will see reduced bounce rates, better conversions and a steady flow of returning traffic.

Written exclusively for WDD by Louis Lazaris, a freelance writer and web developer. Louis runs Impressive Webs, where he posts articles and tutorials on web design.

How could some of these or other user interface elements be improved? Please share your thoughts in the comments below.

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: B4da5k

His gravity defying photos have been mesmerizing the world, capturing impossible looking moments of apparent extreme danger.

You’ll find Wei hanging on in dangerous situations, or crashing head on into sidewalks and cars.

Li Wei states that these images are not computer montages and that he works with the help of props such as mirrors, metal wires, scaffolding and acrobatics. He then removes the wires and scaffolding with Photoshop to create these seemingly impossible photos.

“My artistic language is universal and deals with themes about contemporary politics and society using symbols understood by everyone in every part of the world. I am fascinated by the unstable and dangerous sides of art…”

Here’s a collection of some of Wei’s most outstanding photos, in a unique combination of artistry and acrobatics that are sure to make you take a second look.

You can find more about Li Wei at his website: Liweiart.com

What do you think of this type of art? Feel free to share your comments below.

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: B4da5k

The new design is beautiful, clean, organized and well-structured. It invites the eye to scan and find something interesting with the goal of clicking through to another page.

The previous design was somewhat cluttered and not very inviting; the content looked liked it was being forced into an unstructured space. The new layout is very different and embraces a number of modern web design and usability best practices and trends.

So, let’s look in more detail at not only the notable improvements, but some of the questionable design and usability decisions.

Grid-Inspired Layout

I’m using the phrase “grid-inspired” because the new design seems to be based on a grid, but the precision alignment of elements is not exactly there.

Taking a cursory look at their primary stylesheet, they appear to have loosely based their style and grid on the Blueprint CSS framework.

Their CSS reset bears many similarities to the Blueprint framework, and the word “blueprint” is included at the top, so this would be a logical assessment based on my own limited knowledge of Blueprint.

After analyzing a screen capture of their home page, I’ve concluded that if they based the new layout on a grid, the specifics of that grid would be: 16 columns, 50px per column, with 12px gutters (the space between columns), totaling 980px in width.

Below is a visual representation of my grid estimate, as a Photoshop mock up:

Even though the elements on the page do not follow the kind of alignment and balance that would customarily be expected of a grid layout, there is a noticeable improvement in this layout over the previous design, shown below:

The new layout keeps all page elements inside the 980px-wide container — unlike the clunky-looking previous design that had a fluid-width header that spanned the entire page above a fixed-width content section.

Also, while the old design couldn’t seem to decide between rounded corners and square, the new design consistently features square corners with subtle bevel effects separating appropriate elements, as shown in the image below.

Although the format is grid-like, it is, as mentioned, not a strict grid format, and the sections below the fold stray quite a bit in structure from those above.

Drastically Improved Header Section

One of the most apparent improvements in the new design is the header section.

The horizontal navigation bar is modern, clean, and clear. The search box, signup option and login link are in the top-right corner, where they should be.

And, although it is not customary in modern design to center the site logo, in this case it works. It creates a very dominant, vivid, brand experience that is not easily forgotten.

Another nice feature of the navigation bar is that it indicates by means of color and graphics which links are primary, which are secondary, and which will open in micro-sites or sister sites. The latter are indicated by right-pointing triangles (”Money” and “Sports” — more on this below).

Effective Use of Space

On the right-hand side of the page, below the primary ad unit, they’ve included an accordion-style content switcher, allowing the user to view previews, in a relatively small area, of content related to a number of different topics.

Emphasis on Video & Story Popularity

In the previous design, video had fairly strong emphasis, featured in a box on the right side. In the new design, video is a major category in the primary navigation bar, given virtually the same visual importance as the “Home” link.

Video stories are featured throughout the site, and are clearly indicated by the customary “play button” link on photos that link to video content, as shown below:

Another category given the same importance as “Home” and “Video”, as shown in the image above, is the “NewsPulse” section, which is new and still in beta.

This section displays news stories by popularity (which seems to be calculated by total page views, not comments), and allows the reader to filter the results by category or story type.

Strong Category Pages

The main category pages (”U.S.”, “World”, “Politics”, etc.), accessed from the primary navigation bar, work similarly to the home page.

In fact, if you didn’t know what page you were on, you might think you were on the home page. The “U.S.” category is shown below:

Each of these sections conveniently displays top stories, latest news, and other items related to that category.

The black and white captions below images, also featured on the home page and on article pages, are eye-catching and easy to read, without the use of overly-fancy graphics or font styles.

Strong Article Pages

The article pages, for the most part, maintain the vivid branding of the home page. Body text is nicely displayed in 14px Arial with a very readable line-height.

Although some elements on the pages seem somewhat small, I personally like the way the font size of the article body stands out on the page, so the reader can stay focused on it.

Also, on the left side of each story, there is a section called “Story Highlights” that summarizes the current story in a few bulleted-list points. This shows that CNN’s designers are aware of the online tendency of users to “scan” lengthy material.

Information Overload

Of all the negative aspects of the new design, probably the first problem that is immediately evident is the overload of links and information on the home page — although it is more structured and organized, as discussed earlier.

The home page is about two and a half screens long, and includes sections that duplicate items in the main navigation bar, with about a half dozen sub-links under each category. These sections appear below the fold and are shown in this image:

Since CNN is one of the most popular sites in the world (38 million unique visitors each month), these sections will receive considerable traffic in comparison to other sites, however, because they appear so far below the fold, and because there are so many links, the relative amount of traffic visiting those links through the home page would likely be quite low.

Important Sections Buried?

As pointed out above, a lot of information on the home page appears well below the fold. And, significantly, it appears that some important content is completely buried at the bottom of the home page, more than two full screens below the header.

For example, a section entitled “Hot Topics” appears near the bottom, on the right side, just above some promos and ads.

It seems to make more sense that this section would replace the accordion content switcher, or else be incorporated into the accordion.

The ads and promos that appear below the “Hot Topics” also appear to be more important than their location reveals. Again, although such a high traffic website would receive many clicks on these areas, the click-through rate in comparison to the sections and ads above the fold would likely be drastically different.

Of course, CNN’s producers know what content is most important, and they understand their users’ habits better than anyone else — but these layout and usability challenges are helpful to analyze should other developers face similar decisions.

Usability Mysteries

There are a few elements on the new site that may not be designed for optimal usability.

One example is the right-pointing triangle that appears on each of the micro-site links. At first glance, I wasn’t sure what those triangles were for. They appear to indicate some sort of a JavaScript slider section that would pop up.

Some users not paying full attention may even mistaken them for downward-pointing arrows that produce drop-down menus.

Is there a better way to indicate a same-window micro-site link? I’m really not sure. Maybe something similar to the well-known Wikipedia icon would have sufficed — but then that would present the problem of users assuming that the links opened in a new window, which in this case is not true.

The accordion content switcher, discussed earlier, also has a few usability problems. First, when JavaScript is disabled, the accordion is rendered useless and doesn’t display any content.

It should expand by default to display all content, or else display one of the items. Also, the hyperlinked headers for the accordion sections should still link to their respective sections, but they don’t.

Another problem with the accordion content is that, since the text it contains is so small, it is not always clear what is clickable inside the accordion. This makes the links less distinct from the rest of the accordion content.

In the image below, the red arrow I’ve drawn is pointing to two bulleted list items. The text in those list items is hyperlinked, but this is not obvious at first glance.

Some Sections Still Reflect Old Design

As will be the case with any redesign of a site the size of CNN’s, some sections will still reflect the old design until all pages are fully integrated.

This is usually the case with older content that won’t be visited as often, but in the case of CNN, some important sections still have the old skin.

Two examples are the about and contact pages.

Small Typography

One particular design issue that does not conform to modern web design trends is the use of small text and small typographic elements.

The small size of the font in the accordion content was discussed earlier. There’s also the “share” toolbar that appears on article and video pages, the “Latest News” section on the home page, the “Sign up” and “Log in” links in the header, and the text links below the fold on the home page, to mention a few.

Would the “share” toolbar, shown above, be more effective with bigger typography? What about the “recommended” section, shown below, or other sections with smaller type?

Conclusion

The new CNN.com site has added a number of features not discussed here that relate more to their news services and customized content. The first link below contains a video presented by CNN that discusses some of the new features.

I definitely think the new site presents a much more beautiful and interesting user experience than the old, and aside from the weaknesses in the accordion content switcher, the drawbacks to the new design are not really that significant.

It looks like a lot of time and planning went into the design of the new CNN.com, and I think web designers and those interested in improving usability on their own sites would do well to consider and try to learn from some of the changes presented on CNN’s new website.

Further Reading

• Welcome to the New CNN.com (Video on CNN.com)
• The New CNN.com (First Screenshots on TechCrunch)
• New CNN.com Goes Live: What Do You Think?

This post was written exclusively for Webdesigner Depot by Louis Lazaris, a freelance writer and web developer. Louis runs Impressive Webs where he posts articles and tutorials on web design. You can follow Louis on Twitter or get in touch with him through his website.

What do you like or dislike about CNN’s new site design? Share your comments below.

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: B4da5k

The best way to keep track of our tweets is simply to follow us on Twitter, however, in case you missed some here’s a quick and useful compilation of the best tweets that we sent out this past week.

Note that this is only a very small selection of the links that we tweeted about, so don’t miss out.

To keep up to date with all the cool links, simply follow us @DesignerDepot

20 Quotes To Live Your Life and Design By: http://bit.ly/2sNg9i

The world upside down: http://bit.ly/2mgiap

Brand = User Experience: The Interface of a Cheeseburger: http://bit.ly/3xS2bX

14 Bold and Colorful Print Ads from Various Brands: http://bit.ly/4AYuXY

9 Useful Twitter Retweet Button Scripts For Blogs: http://bit.ly/4nl2wo

20 Do’s and Don’ts of Effective Web Design: http://bit.ly/3ccr8B

The Most Common Design Mistakes That Web Developers Make: http://bit.ly/cH7wm

Afraid of heights? http://bit.ly/3jKwP2

Fireworks vs Photoshop Compression: http://bit.ly/4hTjFk

Hard-code your navigation and get over it: http://bit.ly/145SFd

Eight steps to Internet unpopularity: http://bit.ly/3COM75

Brilliant clock: http://bit.ly/25Wxq

Minimalist Gmail: http://bit.ly/2q7zcG

Web Typography: Font Embedding Services: http://bit.ly/4tYzyC

How to Make Your Web Design Stand out from the Crowd: http://bit.ly/1ewSJs

Single page websites: http://bit.ly/cXE97

Speed Painting Photo Realism: http://bit.ly/Nk0Ri

This sink is awesome: http://bit.ly/Crh19

Stephen Wiltshire draws spellbinding 18ft picture of New York from memory: http://bit.ly/2dPr4R

10 Pre-Press Tips For Perfect Print Publishing: http://bit.ly/1sh9tv

The 10 Lies and Misconceptions that Web Entrepreneurs tell: http://bit.ly/1vWpMs

London’s Eye at night: http://bit.ly/1AKEag

Hokusai’s great wave is everywhere: http://bit.ly/3FjiHv

The 3 Fatal Diseases that Kill Good Blogs: http://bit.ly/3F79CO

Great incentive to make you take the stairs instead of the escalator: http://bit.ly/3WXcpS

Start drawing and have some real fun with this one: http://bit.ly/ZDqT7

Want more? No problem! Keep track of all our tweets by following us @DesignerDepot

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: B4da5k

Blog headers need more functionality. Other web designs may differ in terms of their use and therefore, what’s included in the website header and how it’s presented can vary greatly.

With a blog specifically, though, there are best practices that can help the reader navigate through the blog and become better involved.

That’s exactly what this article will do. We’ll help you define what should be a part of a blog header and how to finally implement it, and then we’ll look at twenty awesome examples that do just that.

To determine how a blog header should be designed and what to put into it, we need to ask a few questions about the blog:

• What mood needs to be set to attract the correct target audience?
• How can the first impression via the header communicate what the blog is all about?
• How can the blog’s header give the first impression, “I’m different from the others.”
• What pieces of content need to be immediately noticeable to create better action? (clicking on links, subscribing, etc.)

Let’s dig a bit deeper…

What mood needs to be set to attract the correct target audience?

When a visitor first comes into any type of website, the first thing they determine is the blog’s “personality” — and whether or not it’s right for them.

This is essential for blog design, because blogs require the correct target audience to be successful.

For example: with content in the creative industry, a blog design should have a creative header to impress and inspire newcomers. A more technical or business blog will want a straight-forward, high-end header that is both aesthetically appealing, but yet fairly subtle.

How can the first impression via the header communicate what the blog is all about?

We have a part of this covered by developing the overall mood the header should create, but a header can do more than that to clarify to the new reader what this blog is about.

The very first impression discovers the personality of the blog, but what exactly is it all about? One could include a tagline with a logo that says it, or include a small paragraph/phrase telling the reader what this blog is and who it is for.

How can the blog’s header give the first impression, “I’m different from the others”?

Another way to put this is, “How is this blog going to be remembered?“

If it will blend in to every other blog on the Internet, that’s not a good blog theme at all. This is why the header is a prime place for the logo, tagline, and any other branding.

The overall look and the content presented at first glance is what will stick, if presented well enough.

What pieces of content need to be immediately noticeable to create better action? (clicking on links, subscribing, etc.)

The header should be overall simple in terms of content, but some forms of content can be present to help aid in their call to action. After a new reader judges the initial impression of the blog and decides to stay, they’ll start looking for pieces of content and where to navigate.

When categories are immediately present, the viewer will look over them and find areas that interest them. When a search field is present or an RSS feed, they may not subscribe or do a search right away, of course, but they have made a subconscious note of its placement and where to find it in the future.

The options vary much beyond this, but basically any content placed in the header is the first impression for content, so it should be the most important and designed well.

Let’s now take a look at a few great blog headers, and then discuss their benefits.

1. Tutorial9

Tutorial9 features just about all of the benefits discussed above. The logo and tagline instantly display what the blog is about and how it can help the reader.

The primary navigation pieces are on huge, noticeable tabs with icons included to draw in the eye. This instantly leads the user to content and promotes them to dig deeper into the blog.

The background design is creative, and even has a theme of artistic creation — exactly what the tutorials are meant for. Furthermore, there is essential content to the right including the RSS feed, search form, the blog’s pages, and more.

2. Home Design Find

This header uses a great use of visual hierarchy to get the point across. The blog’s title is nearly enough to tell the reader what it’s all about, and it promotes staying and seeing in further detail what it’s about.

The eye is then lead to the first set of navigation, where the about page is clearly noted, as well as the contact page. The images to the right then set the mood and provide inspiration for those interested in this blog’s topic.

Finally, the images to the right lead the eye downward to a more descriptive phrase for the blog.

3. Blog Design Blog

The most notable features of this header are the logo and tagline. The specific target audience of this blog makes it more unique, and by stating what the blog is all about at first glance, a new reader sees that and is convinced that it is different from others.

Down a bit further, and in smaller text, is the number of readers and link to the RSS feed, as well as primary navigation to further delve into what the blog is about, or into the content itself.

4. Kevin John Gomez

The hand-drawn appeal and photo makes this blog’s theme feel personal, and matches the name of the website — the webmaster himself. This is a personal blog of a creative person, and the header communicates that perfectly.

The complete navigation is in the header, as it is limited navigation and is able to have more emphasis on it.

5. Naldz Graphics

This header provides a great logo and effective use of content in the header. The largest part of the header is the logo, or blog name, and that makes it easy to remember.

The eye is then lead to the navigation, where the reader can dig deeper into the blog right then and there, or at least get an idea of what the blog is about. Navigation and categories are a great way to tell new readers what the blog is about, if they are well defined.

A graphic on the right helps set the mood of the blog, and also leads the eye to the number of subscribers and the RSS link. With a blog that has a moderate to high feed count, it is a good idea to show that count in the header, because it, in a way, validates the blog’s content and gives it credibility.

There is also additional content on top, in a traditional place for this type of content so it can easily be found.

6. Pro Blog Design

The two contrasting green elements in this header do more than one may think. Most see the logo with the green pop of color the left first, where they read the title of the blog and the headline. This is yet another great headline that tells new readers how this blog can help them.

Then, large over-sized tabs are put into focus with 1) their obvious size and 2) that other pop of green color. The other green tab tells the reader that this is not just a blog that can help give you a better blog design, but it has blog design services to offer. Above that, social media icons that the reader can take note of for later action.

7. Octwelve

This illustrated creative header sets the mood for the blog quite quickly. The illustration is of the webmaster, and gives the blog a personal approach. We begin to get an idea about the content of the blog, before it is even presented.

This design puts a small introductory sentence right in the header, defining what exactly this blog is. The main navigation is right below the logo, so it is noticed almost immediately. There are also other details within the header that are fun, and lead the viewer into looking at the header longer.

8. Mark Forrester

This fun, quirky, and creative header sets a mood, and is unique enough to really catch your attention.

The viewer at first glance is immediately examining the header and its fine details, and the story it presents. In that, comes the logo and tagline, where the view finds out what the blog is all about.

When done enjoying the header, they can see navigation up top and social bookmarks to the right. The header also leads nicely into the content, leading the visitor to scroll down and check out more.

9. Cult-Foo

This is just a beautiful header that catches the attention of many readers daily. The mood is set as a creative and inspiring theme, and attracts just the right audience. The logo in this header is the “source” of the rest of the header — a box that leads out into the rest of the design.

The search bar is right below that for ease of access, and the two content areas are defined on the right.

The navigation is what’s really cool about this header, though. It has more of a tag-cloud feel, with the larger categories being the larger text. This way, once a new reader sees the tag cloud, they see the biggest items first.

In return, they make a connection with these words and the blogs content. Now, the content featured on the blog has the most of what is now most memorable about its content. Be sure to check out the live version of this site: the header tag cloud area actually moved with the user’s scrolling, with a decorative and yet unobtrusive border.

10. Vectips

This header is rather minimalistic, which puts more emphasis on the bits of content it does hold. The logo is decorative and outlined in a contrasting color, making it memorable.

It is followed by a tag line that shares what the blog is about, and then simple navigation which further defines that. The navigation is great because it has individual icons to bring attention to each as the reader is skimming over them.

The fun illustration to the right sets the mood and leads the eye to the navigation up top.

11. Part Time Post

In contrast to Vectips, this header has a lot going on. The logo in the top left includes a tagline, and then leads the eye to navigation. Before clicking through the navigation though, the header continues to how the website can help its new visitors, and then below that features more navigation. Through this hierarchy, the reader just got a great overview of how to navigate throughout the website.

The illustration on the right then leads the viewer to take note of the RSS feed, and then the eye is lead further right to promote the company’s Facebook fan page.

12. TutCandy

The biggest feature of the TutCandy header is its creative, colorful, and detailed imagery. With that, it sets the mood and creates credibility for a blog such as this. The name is intertwined within the colorful illustration, and can be considered the logo.

To the right there is a tagline that explains what the blog is, and how it is different: “Only the Tastiest Design Tutorials.” Despite it primarily being a simple and fun play on words, there are a few keywords that strike the reader to cause positive judgment. “Only” — it’s unique, original, one-of-a-kind.

It answers the “How is this blog different from others?” question. “Tastiest” — the tagline could have been “Tasty Design Tutorials.” Not only does that sound a bit strange, but it does not imply any precedence over other design tutorials, or other tutorial blogs.

Above, there is also navigation concerning the blog, and a search bar to the right. Directly below, the content is defined and organized, leading the reader into digging deeper into the blog.

13. Yoast

This blog provides great content in the header. The unique wireframe allows the header to contain graphics and sufficient content to make a connection with a new reader. The character and illustration behind him is one of the first things a new visitor will notice, and they make a good call by having the character point to the header content on the left.

After the eye is lead to the header content, they see the logo, and ways to subscribe or connect with the blog. It then reads just like a normal bit of “about page” content, except its featured right on the front page, meaning not only readers that are interested enough to go to the about page make that personal connection — instead, all new readers do. The content explains what the blog is about and then displays some popular and featured content.

Below the illustration to the right, the RSS feed is featured again, but this time with a more recognizable graphic. Notice how this second feed display shows to the right, after the reader would have just completed reading some content titles, a bit of about information, and after they’ve already made a connection with the blog.

14. That Indie Dude

The character in this header, like all other headers with characters, provides a personal touch and acts as a great introduction to the blog. It is the first thing a new reader will notice, and its high quality, as well as the design features surrounding it, make a statement about the style of this designer and what to expect from him.

To the left is the logo, which further leads the eye to the tagline explaining the content featured on the blog. The eye is lead once again to a piece of content sharing the personality of the blog.

15. Ozon3

The theme of this header is unique, and in that sense it creates a memorable web design — a truly great first impression. After appreciating the illustration, the eye is lead to the logo for memorization of the brand, and then directly lead down to the primary navigation, and then to the content.

First time viewers can see that this blog is focused around a web design portfolio, and they discover this after truly viewing the designer’s work on the header.

Despite its simplicity, this header is very effective in terms of visual hierarchy and sets a huge statement for viewers.

16. nDesign Studio

This colorful header is the main attraction to this web design, and the logo tells the visitor that it is a design studio.

The amazing header validates the designer’s skills, and his brand. The navigation, feeds, and search bar are all very much intertwined with the header as well, making them one of the first noticeable elements.

The main navigation is in the form of tabs, and is first recognized as being a part of the header. Because it is in the form of tabs though, it seems connected to the content as well, bringing the visitor’s eye down into the important content of the blog.

17. Web Designer Wall

This is another great blog by Nick La of nDesign Studio, and we see a similar technique: an amazing large background/header, validating the talents and expertise of the designer. The logo is larger here, providing a tagline connecting the blog’s name to its purpose.

The rest of the content in the header is the initial navigation, contact/RSS, and the search bar. They are all decorated in a similar fashion to the header, connecting them.

These elements also have similar features to the content though (more plain background, paper-like texture) so they also feel as though they are a part of the content as well. This section of the header connects the introductory header to the content area.

18. Ma.tt

There seems to be an ultimate web design rule to not make headers over 200-250 pixels. This is a great rule to follow for many different reasons, but this header shows just how to effectively break that rule.

By not showing any content at first, Matt is using his design to make the biggest impression on the first-time viewer. Its elegant detail and creative ways create a memorable first impression.

The logo is large, and as the website is a name, it assumes the position of a personal blog. The RSS feed is also in the top left, telling the viewer that it is indeed a blog from the beginning. Finally, the navigation is what is seen last, and this provokes the visitor to continue through the blog.

19. Pixel Resort

The detailed illustration style of this header makes it fun, yet clean and professional. It is even animated as the scene goes through day and night, reminding the visitor to keep looking back up at the header, which features the logo (brand) and the navigation. This method can easily promote more activity in the blog.

Below the navigation that is put into the forefront, there is sub navigation with an arrow “connecting” it to the rest of the header. It helps further define categories, and helps the reader find the content that interests them best.

20. Webdesigner Depot

Ahh, yes — the blog you are currently viewing. Whether you’re a first time visitor, or have been reading Webdesigner Depot for long, the header most definitely gets your attention.

What’s great about this header is that it’s not only a header with a creative appeal, but the elements within it state that it is a header with a creative appeal focused around computers, or the web. The laptop illustrations, the “www.”, and other pieces of technology all bring in the target audience more specifically.

The header really doesn’t have much to offer in terms of content, except for a hovering link back to the homepage. However, because it is so complex, any additional features may overwhelm the design and make it too cluttered.

This header is just perfect though: setting the mood, inspiring the viewer, and it is short enough that it leads the viewer down to the rest of the content.

Wrapping Up

Hopefully looking over these twenty examples can help many better define the questions presents in the beginning of this article, and help every web designer to pay better attention to blog headers.

Content to include in a header can vary greatly from blog to blog and it is important to keep in mind the goals of the blog, the theme, and what a first-time visitor would be looking for when visiting the blog.

Written exclusively for WDD by Kayla Knight.

Feel free to share your own tips for header design, as well as any additional examples.

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: B4da5k

He is currently based in New Delhi, India. As you scroll through his art, keep in mind his goal of creating works was inspired by various phases or moments of life.

Archan comes from a different industry than most graphic designers: Fashion.

He started developing digital artwork in 2006 by editing simple wallpapers, and his hunger for learning more about the world of design hasn’t ceased since.

His skills have been sought out by companies such as Pepsi Co., Microsoft, Tiger Beer, Boss and more.

We’ve gone through many of his sites and have selected some of his best works for your inspiration.

Archan’s work can be found on these sites: Archann.net, DeviantArt Profile, Behance Network, Carbonmade.

What are your impressions of the work of Archan Nair? Have an awesome portfolio that you’d like us to feature here? Please send us your details…

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: B4da5k

But formal academic training is a touchy subject for some people. Going to school to learn a discipline is still not an option for everyone.

As someone who has worked in the graphic design field for quite some time without an advanced degree, I understand that self-education is not to be underestimated.

But just how far can this type of training get you in life before you reach an impasse?

This is one of the big questions in the world of graphic design: is design school worth the time, money and effort? Does it pay off?

We have all heard tales of such self-taught design heroes as David Carson, who single-handedly ushered in a new era of digital design. He didn’t go to design school. He had a gift and was disciplined enough to refine it.

But is Carson’s extraordinary story relevant to us? Is there even an answer to the question of whether design school is actually worth it?

Why Go to School?

We have to consider this question in the right context. Not all graphic designers want to pursue the same career path.

In today’s market especially, art and design are such diverse fields that colleges are finding it more and more difficult to keep their curricula up with the changes.

When I was going to school, my program focused mainly on print and had only two classes on web design. Now, only a few years later, almost all of the jobs I am offered are web-related.

Designers not only are expected to be aware of design principles and how to apply them to physical forms, but are also often expected to have detailed knowledge of many other subjects, including:

• Coding
• HTML
• CSS
• PHP
• RSS feeds

The acronyms are enough to make your head spin. Many top design schools still do not cover even the basics of these modern aspects of design. For example, Yale’s graphic design program does not have a single class covering web design.

This makes sense if design is studied as theory. Design principles are somewhat universal. However, it means that students have to obtain further education in their field of choice.

Degrees Help

I recently spoke to a colleague of mine who graduated from the graphic design program at Yale. I asked him where he learned his Flash, Dreamweaver and PHP skills, which are the cornerstone of his business and account for most of his income.

He told me that he got all of his knowledge of web design from free online tutorials. Hearing this, I asked whether he regretted spending so much money on his education at Yale.

He quickly responded that the contacts and portfolio that he built at Yale led directly to his success in business. He did admit when pressed, though, that he considers his MFA unnecessary for the actual work that he does.

Degrees Don’t Matter

Yale or Parsons or SCAD or NYU may be one person’s foot in the door to design success, but what about those of us who don’t have the opportunity to attend such prestigious institutions. Is our design career toast?

Let’s look at another example. A few years ago, I met Andrea Campbell, now Art Director of Orange Element in Baltimore. She told me that when she considers someone for a position, she bases her decision on the interview and the applicant’s portfolio, and that’s it.

If the position is an upper-level one, she also makes sure the applicant has some experience under their belt. But degrees don’t matter. Those words, “degrees don’t matter” are now stuck in my mind.

Here are some key points to remember:

• Emphasize your portfolio. It is the key to your success.
• If you are interested in a position, ask someone at the agency if you can send your work over. If they like what they see, you might just get an interview, even if you haven’t gone to Yale.
• The most important thing is to know what you’re doing. If your portfolio looks good and you can talk design, you will be considered for the position.

Gaining an Edge

Getting your foot in the door is not the only battle, though. The job market is tough, and the graphic design field is extremely competitive.

According to Linda Katz , an employment specialist, the key to gaining traction in the job market is to have an edge. For graphic designers, that edge could be different things, but the main challenge is to show the employer why you are the best person to fill that position.

The simple truth is that, in some situations, a college degree is an edge.

Another fact to remember, especially if you’re a freelancer, is that teaching is one of the best side occupations.

Teaching pays well, and some colleges even offer benefits to their long-term adjunct faculty. Freelancers often need this, but a degree is almost always required for these teaching positions.

No School?

But let’s say design school is not an option for you. Perhaps your situation doesn’t allow it. Perhaps you’ve already gone to school for something else and don’t want to go back. Or perhaps college just isn’t your thing.

Whatever the reason, fear not. Many successful graphic designers are self-taught. In fact, skipping design school has some definite advantages. You learn how to educate yourself; you avoid a big debt; and you can take advantage of market segments that are not over-saturated.

I know of several designers who, upon finishing school, did not learn how to self-educate. Either you quickly learn to adapt and update your knowledge of the field or you quickly become obsolete.

Graphic design changes rapidly. If you don’t pay attention almost constantly, you can easily lose your competitive edge.

No Problem

What kinds of opportunities are available for graphic designers who have chosen not to go to design school? Some of the best ones are often overlooked. For example, outsourced work from big agencies.

Big agencies often make short-term commitments with designers to see if they are a good fit. Because the position is not permanent, they often pay less attention to degrees and more to the quality of work.

Another opportunity is direct competitive design. This is a growing model for many online graphic design studios. The most well-known example is CrowdSpring. CrowdSpring allows any designer to submit mockups for the projects listed on its website.

At the end of a competition, the client chooses the designer whose work they like best. I have gotten some work through CrowdSpring, and it is a wonderful opportunity to get criticism and feedback.

It is also a potentially good money-maker. One of my colleagues makes an excellent salary solely from his CrowdSpring work. He treats it like a full-time job. He puts in 40 hours a week and treats each client as if they had hired him for the design. He makes $60,000 a year, and his degree is in business administration!

In the end, you can do very well without going to design school, if you know what you’re doing.

Know Your Stuff

One of the biggest challenges of forgoing a traditional education is to actually get an education at all.

Self-taught designers must be extremely well disciplined. In addition, they must have the resources to be able to study graphic design and learn any skills they will need. The Internet is both a blessing and a curse. We’re so used to finding everything instantly that we forget the importance of internalizing information.

• Attention to detail is of utmost importance. People will judge you harshly because you don’t have a degree, so you have to show them why they are wrong. Know your design principles and practice them well, and the critics will shut up pretty quickly. In addition to tutorials and online information, read books on graphic design. Some recent research-based design books introduce new principles that are here to stay.
• Like it or not, people have a bias for academia. You need to prove why being self-taught gives you an edge to better engage your audience. Don’t forget the importance of the portfolio as a tool to earn people’s trust in your skills. In addition to conventional projects, make sure to showcase work that is somewhat academic in nature and that shows off your knowledge of sound design principles.

Again, if you know what you’re talking about, people will listen to you and respect you.

Professionals

Whether or not you have a degree, remember that you are a graphic designer; to maintain your standards and keep up with developments in the field, self-education is imperative.

Good designers forever seek out resources to update and hone their skills. The Internet is a vast bank of shared knowledge; you just have to know where to look.

Aside from free resources online, classes won’t set you back too much. The classes I teach in graphic design and typography at McWeadon Education, for example, are college level but cost only $99 each. Similarly, eclasses.org offers inexpensive online classes taught by seasoned professionals.

Not all professionally written resources cost money, either and there are literally endless resources online.

Google Tips

Google is often the best place to start pinning down resources and sorting them by subject. Be specific in your searches.

For example, if you need free resources, be sure to include the word “free” in your search. You can often find exactly what you are looking for by phrasing your query right. For example, “standard packaging templates” would probably return jumbled results. But “standard package design templates for Adobe Illustrator” would return more helpful websites.

The same is true of web design. If you need a specific code for a website, don’t just search for “HTML code.” You would quickly get lost in the sea of information. Try something like “HTML code for bullet points” or whatever it is you are looking for.

Also, remember to archive good information when you find it. Bookmarks are great, but if you have space, save the pages on your hard drive. Information, especially on blogs and message boards, can disappear rather quickly.

Plenty of Hard Work to Go Around

We must always remember that good design communicates something.

Training ourselves to be able to research and develop solutions to design problems that we face every day is essential. Training is the launching point for any successful career in design.

Whether at school, at work or on the Internet, continually expanding our knowledge base is crucial, not only to keep up with changes but to maintain the edge we need to win clients and wow employers.

Going to design school and self-educating both take dedication and effort. Even the best curriculum doesn’t contain everything you need to succeed. Gaining that edge entails crafting your own personal program of sustained education.

Written exclusively for WDD by Christian Hurst. He has an MFA in Graphic Design. He is currently senior designer at Kristag Design and teaches graphic design at McWeadon Education.

Did you attend a school or are you self educated designer?  How has your choice impacted your career?

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: B4da5k