Below is a comparison of the previous icon used in the films and a still of how the new logo (with mass effects and accompanying typography) will feature in the trailers for The Amazing Spider-Man. I have to say that it looks meaner, leaner and deadlier. A new logo obviously means potential for a whole new range of merchandise & memorabilia.

Your first impression may be ‘that’s bloody horrific, it looks like a child drew it!’. Well….it was.

The logo was designed by 10-year-old Katherine Dewar, from Chester, who won a competition for children between the ages of 6-14 (yes – we know crowdsourcing is bad etc but I think we can make an exception in this case!). I have to admit that I quite like the logo, considering its context, and I love the fact that it isn’t serious like previous logos associated with Royalty. It definitely gets across the message of just having fun and celebrating a rare occasion.

There are even some logo usage guidelines for the logo/emblem, though I doubt Katherine had anything to do with those.

You can see the logo in action on the official Diamond Jubilee website.

A good place to start would be with my highest rated logo design book that I’ve purchased in that long period, Logo Design Volume 3 by Ed. Julius Wiedemann [TASCHEN]. The main reson behind acquiring this title is because it includes an in depth interview with the makers of the 2010 Oscar Winning short animated film, Logorama

The book is part of a series which also obviously includes Volumes 1 & 2, plus Brand Identity Now, which I will review in a few weeks time. Each book in the series is very robust, with a nice foil finish on the cover of the books own identity, with each letter set in a different font (which is normally a big design no-no but in this case – it works).
Before you starting reading any of the books in this series one thing you will have to get used to is that the copy is set in three different languages, all on the same page & in three separate columns. This makes it look like there is far more content than there actually is but it doesn’t take away from the quality of what’s inside. The book kicks off with a great article by the author who challenges the reader to think about the question, ‘Are logos still important?‘ followed by a more in depth piece by Paul Middleton, the Dean of Design at the University of NorthamptonNeville Brody and there is a feature on the new identity for international recording artist, Victoria Beckham.

As with most logo design books, the final section includes a showcase of logos created by designers from all over the world, which are helpfully categorised into the industry of the client. I can see this book being useful to budding design students looking for inspiration as well as seasoned professionals looking to get an insight into how the top design agencies tackle identity projects. The showcase itself is nothing new in concept but it is always great to see fresh work, though I do question whether some of the inclusions are real projects or self initiated. For a logo design book that costs less than £20 it is worth it for the feature on Logorama alone.

Buy the books mentioned in this post

SeaFrance

When SeaFrance, one of the biggest ferry operators between France and England, was liquidated at the start of 2012, this logo sank to the seabed quicker than you can shout ‘TITANIC!’.

Consignia

Unbelievably, Royal Mail spent a whopping £2m trying to send this rebrand to the four corners of the UK as the new identity for The Post Office Group. That’s one very expensive stamp, and I can’t imagine that much of that budget was set aside for the design of logo due to it’s uninspiring spiral mark.  This logo was eventually cosigned as ‘Return to Sender’ in 2002 due to a very strong public backlash, just over a year since the rebrand was officially put into practice.. It goes to show that rebranding a company that is over 500 years old is a very sensitive project.

Borders Group

At it’s height, Borders had over 500 bookstores worldwide but eventually turned the page on it’s final chapter in 2011.

Tweeter

Not Twitter. Tweeter, an electronics retailer giant founded in Boston, finally pulled the plug on operations in 2008. I think it would be hard for a brand with such a name to survive in the current social-media reliant age we live in today so it was probably for the best.

MG Rover

This logo (or should I say these logos), probably reminds people of misery more than most. They also mark the end of an era. MG Rover was the last British owned car manufacturer to operate on British shores, just a few miles away from the down with design office. After the company became defunct in 2005, the value of existing MG or Rover vehicles plummeted.

News Of The World

We all know how this headline story finished so I’ll just say that the majority will be glad to never see this logo in print again.

LDV Group

Another vehicle manufacturer based in Birmingham, United Kingdom (can you notice a pattern?). Aston Villa supporters will probably either love or loath this logo as it adorned their official kit between 1998 and 2000.

Kwik Save

The discount supermarket chain Kwik Save, also based in the UK, went bust in 2007, though it looks like it could be set for a comeback with a newer and cheaper logo.

World Championship Wrestling

80′s babies will remember this logo as the alternative to the Worldwide Wrestling Federation, which finally elbow dropped it’s main competitor, WCW in 2001.

Enron

Another classic tale which doesn’t need much emphasis, though it is probably the biggest disaster on this list. Employing over 20,000 people, Enron, also became defunct in 2001. You may be surprised to know that it’s logo was designed by Paul Rand.

Swissair

You may be confused in thinking that this company still flies the airways today but Swissair and Swiss International Air Lines are two different companies. Here is an interesting article on the evolution of the Swissair logo.

Pan Am World Airways

If you are lucky to be young enough not to remember this brand then you could be forgiven for thinking that it could have connections with basketball. Pan Am World Airways was the largest airline in the US up until its demise in 1991.

Orion Pictures

Another logo that you may not be familiar with but have probably seen many times before. Orion Pictures, a movie production company which went under in 1998 was responsible for big screen hits such as Robocop, Silence of the Lambs & Dances With Wolves.

Factory Records

Factory Records was an independent record label responsible for releases by recording artists such as Joy Division, New Order and The Happy Mondays. The label eventually ceased in 2007 when its founder, Tony Wilson died of a heart attack. I think this has to be one of my all time favourite logos due to it’s sheer simplicity.

Daewoo

Trying to remember the brand name of a major worldwide company based in South Korea that ceased operations in 1999? That’ll be the Daewoo. You can be forgiven for not remembering it as it’s quite forgettable, though the type does remind me of the Kenwood logo, possibly due to the treatment on the ‘W’.

Pay ‘n Save

The Washington based retail chain, Pay ‘n Save finally cleared it’s shelves in 1992 after recording huge losses.

If you enjoy looking at old logos you may be interested in this flickr account which has the largest collection I have seen online. I am unsure whether any are still in use but they are fun to look at anyway.

With a 37.3% share, contrasted to 36.3% and 18.9% for Firefox and Internet Explorer respectively, the latest figures indicate the first significant change in user preferences since Firefox surpassed Internet Explorer in January 2009. Consider the fact that Internet Explorer and Firefox had a near four year head start on Chrome, and it’s success becomes even more impressive.

The official figures, published each month by W3 Schools, clearly outline Chrome’s rise to the top, and if the usage trends are anything to go by, we can expect them to continue rising for the foreseeable future.

We’ve tried to include icons for as many of the most commonly used social media platforms as possible. The full set of icons are listed in the image below. If we missed some out and you would like a new icon added, let us know and we will see what we can do.

So, in the absence of type in logos that utilise simple shapes and enclosures is it possible to still recognise them or do they rely upon the assistance of a logotype? Colour obviously plays a massive part in making a connection with a brand identity and so for this study I have discounted it completely and focused upon form alone, in the same way that I do in the early stages of my own design process. I think that over exposure of certain logos through the saturation of advertising helps to ingrain the image of a brand’s symbol or even a logo’s outline into the subconscious. Take a look at some of the stripped down logos below and I think you will be surprised at how many you can identify:

The Structure

First off, we need to create a HTML layout similar to the following:

<div class="tab">
View Content 1 Container
</div>
<!-- tab item used for navigating through different content -->

<div class="content">
First Container Content
</div>
<!-- content that will be switched -->

<div class="tab">
View Content 2 Container
</div>
<!-- tab item used for navigating through different content -->

<div class="content">
Second Container Content
</div>
<!-- content that will be switched -->

<div id="screen">
</div>
<!-- The div that will contain the interchanging content -->

As you can see, we simply have two divs declared with the class “tag” to be used as the navigation and two divs declared with the class “content” containing some content that will be switched between. We have also created a div named “screen” that will contain the changeable content.

Now that we have our structure in place we need to hide the “content ” divs, so that we can use jQuery to only enable one “content” div to be viewed at once. Adding the following CSS

.content {

display:none;

}

does this for us.

NOTE: you will probably want to add some styling to the “screen” div to meet your own requirements.

Adding the jQuery

Now that we have our structure sorted, we can go about adding in our tiny jQuery snippet to bring the content switcher to life:

<script>
$(document).ready(function(){
var $content1 = $('.content').first().clone();
$content1.css("display", "block");
$('div#screen').html($content1);

$(".tab").live("click", function() {

var $content = $(this).next('div.content').clone();
$content.css("display", "block");
$('div#screen').html($content);
}
);
});
</script>

As you can see above, we firstly set our code to immediately clone the content of the first div named “content”, and place it into our “screen” div. This is necessary to ensure that our page has some content when first loaded. The next part of the code sets out that when a “tab” is clicked, it should clone the contents of the “content” div that immediately follows it, and place that content into the “screen” div. There we have it, a super simple jQuery content switcher!

There are a couple of things to discuss before I feel comfortable to finish off the tutorial though:

1. The structure section is a lot more important than you might think – The jQuery code will open the “content” div in the code that immediately follows the tab clicked, so it is important you structure your code in the same way as outlined above. I.e tab, content, tab, content, tab, content etc. If you were to structure your code, tab, tab, tab, content, content, content, all three tabs would only open the first content and as such, your switcher will be ineffective.
2. This code uses jQuery’s .clone() method, alongside with it’s .html() method to copy the entire contents (divs, images etc)  into another div. It will not however, be able to perform ajax updates within itself.

Both of the two issues above can be solved, but for such a simple task, our above code is a super lightweight solution to what can sometimes be an over-complicated problem. For a slightly more advanced version that does enable ajax updates and has a more flexible structure, be sure to check back here soon.

The default function

The default options that WordPress offers in displaying your blogs archives are rather rigid, in that you can only display them in one way. Using the wordpress wp_get_archives function we can set the following options:

<?php wp_get_archives('type=daily'); ?>

To display a list of archives grouped by date.

<?php wp_get_archives('type=weekly'); ?>

To display a list of archives grouped by week.

<?php wp_get_archives('type=monthly'); ?>

To display a list of archives grouped by month.

<?php wp_get_archives('type=yearly'); ?>

To display a list of archives grouped by year.

All are very handy functions to use. Depending on the amount of blog posts you have, you use the necessary function. I.e, if you had 2000 posts on your blog, you are unlikely to choose the daily option as it would take up a huge amount of space on your site. This is not a foolproof solution though. What if you wanted to display a list of archives grouped by year, and then display the corresponding months in a handy dropdown menu?

Extending the function

The following simple code snippet will set up an archive list grouped by year, and place any child months of each year in a sub menu:

<div class="blog-list-archive">

<?php
/**/
$years = $wpdb->get_col("SELECT DISTINCT YEAR(post_date)
FROM $wpdb->posts WHERE post_status = 'publish'
AND post_type = 'post' ORDER BY post_date DESC");
foreach($years as $year) :
?>
<li><a href="JavaScript:void()"><?php echo $year; ?></a>

    <ul class="archive-sub-menu">
        <?    $months = $wpdb->get_col("SELECT DISTINCT MONTH(post_date)
        FROM $wpdb->posts WHERE post_status = 'publish' AND post_type = 'post'
        AND YEAR(post_date) = '".$year."' ORDER BY post_date DESC");
        foreach($months as $month) :
        ?>
            <li><a href="<?php echo get_month_link($year, $month); ?>">

                <?php echo date( 'F', mktime(0, 0, 0, $month) );?></a>

            </li>

        <?php endforeach;?>

    </ul>

</li>

<?php endforeach; ?>

</div>

As you can see, the code does exactly what you would expect. It selects a yearly archive from your WordPress database, and then selects the child months of said year and places them in a sub menu named ‘archive-sub-menu’, looping through for every year your blog archive contains. Don’t worry about the div named ‘blog-list-archive’, this is simply added so we can reference a container in the jQuery code later on. We now have a unordered list of archives (both yearly and monthly) that we can turn into a dropdown list.

Creating the dropdown

Firstly, we need to hide the sub menus, so that they only display when the yearly titles are clicked.

.archive-sub-menu {

display:none;

}

achieves this. Next, we simply add a very simple snippet of jQuery code that will display each years corresponding monthly drop-down archive when clicked.

<script type="text/javascript">

$(document).ready(function() {

    $('.blog-list-archive li ul').hide();
    $('.blog-list-archive li a').click(function(){
        $(this).parent().addClass('selected');
        $(this).parent().children('ul').slideDown(250);
        $(this).parent().siblings().children('ul').slideUp(250);
        $(this).parent().siblings().removeClass('selected');
    });
});

</script>

NOTE: The lines ‘$(this).parent().addClass(‘selected’);’ and ‘$(this).parent().siblings().removeClass(‘selected’);’ simply enable you to style the title of the currently selected archive.

That’s all there is to it! Please feel free to download the full code.

1) They are popular

Surely this is a sign of a concept that works? Ordinarily, this would be true, but in this case the more popular a design, the less unique your website becomes. One website is already boasting at having over 200,000 of it’s templates downloaded and installed across the web. It is therefore obvious that there are going to be tens if not hundreds of websites out there that look remarkably similar to your own. Standing out from the crowd has long been a fundamental target for companies, and these templates only make this target harder to achieve.

2) They are rigid

The creative options you have available to you whilst using these templates are extremely limited. Common ‘features’ offered by such templates include the ability to add your own text and images. This can hardly be called a feature. Have you ever seen two websites that contain the exact same images and text? (except for those infringing copyright) A unique website does not just refer to the colors, images, and text used. In fact, more so, uniqueness is generally measured by layout. Take a look at one of the companies in question (I’m sure you know of a few) and each and every template they offer shows almost identical structures. ‘Customizing ‘ such templates can only go so far, your template based website is never going to be unique.

Imagine you wanted to update your design somewhere down the line, or wanted to add a feature such as an image slideshow or a blog. These templates offer no way of doing so unless your original template includes it. The solution if it doesn’t? ‘Upgrade to our better template!’.

3) They are easily recognizable

The increasing levels of advertisement that website template companies are throwing at us are only helping to familiarize us with the sort of designs that these companies offer. This usually includes a generic title, header image and some ugly styled navigation. As such, potential clients are becoming more and more aware of when a website has used such templates, and this is only likely to defer them from doing business with you. Websites templates suggest laziness and a lack of creativity or ambition.

4) One size doesn’t fit all

The companies offering these templates (I’m trying hard not to name them!) allow you to pick your industry, and pick from one of their industry specific templates. Great, right? Wrong. Typically, the industries offered are so generalized they offer no real benefit. One example I came across was an industry entitled ‘Restaurants’. Off the top of my head I can think of at least 20 different cuisines, and at least 5 well known food chains within each who offer differing culinary experiences. That’s 100 different restaurant chains in one single industry, and that’s only the well known ones. Is one template going to be applicable to each one of these businesses? I think not.

5) They are cheap

The main selling point for these templates is the comparatively low costs they offer. However, as is often the case, you get what you pay for. The templates are cheap, because they look cheap. When you invest in a new website, you are paying for a first impression. Using a website template is a lazy move and is unlikely to trigger a positive response from first time viewers.