BarackObama.com and JohnMcCain.com

First off, here are the details of these sites:

BarackObama.com

• Server Type: PWS/1.2.29 (Personal Web Server)
• Width: 960 pixels
• Code: CSS and PHP
• Color Scheme: White, Shades of Blues, Grey
• Design: Light feel, Use of Gradients, Modern, Crisp, Comfortable
• Cross-Browser Compatible: Yes
• Estimated US Visitors Per Month: 1,568,981
• Valid HTML?: Failed validation, 8 Errors (XHTML 1.0 Transitional)

JohnMcCain.com

• Server Type: Microsoft-IIS/6.0
• Width: 999 pixels
• Code: Mostly Tables and ASP / ASP.net
• Color Scheme: blue, grey, orange/yellow, navy, white, green, red
• Design: Harsh feel, very “boxy”, rigid, stiff look
• Cross-Browser Compatible: Two notable IE6 problems on homepage
• Estimated US Visitors Per Month: 350,340
• Valid HTML?: Failed validation, 85 Errors (HTML 4.01 Transitional)

Screenshots from June 9th 2008

BarackObama.com is immediately a striking yet calming website, designed with organization and cleanliness in mind. The main website navigation is clearly defined and the overall usability of the website is excellent. The format of each page begins with a nice page heading graphic, well-designed and interesting. Each page is organized clearly, and a perfect amount of white space and padding is added to each section.

Features on BarackObama.com are:

• User Accounts / MySpace style : Yes (My.BarackObama.com)
• Newsletter Sign Up: Yes
• Website Blog: Yes
• TV Channel and Videos: Yes
• Events Search Engine: Yes
• Local Grassroots Group Area Search Engine: Yes
• State Specific Pages: Yes
• People Group Pages: Yes
• Issues Pages: Yes
• Downloadable Logos, Wallpapers, Print Materials, Buddy Icons etc. Yes
• Social Networking Links: Yes
• Register To Vote Link: Yes (off site)

JohnMcCain.com’s design lacks real organization and a friendly user interface look and feel. The overall design looks contrived and forced together, without any flow or consistency evident throughout. The color scheme….well…there doesn’t appear to be a standard organized color scheme at all with different colors, and tones all over the website; Prominent blues, orange/yellow, red, bright green, turquoise blue and dull blue/grey. Font sizes throughout the website differ, as well spacing and padding. An example of this is if you venture between the Campaign Calendar page and the Blog page. The difference in padding and margin at the top left is a terrible lack of real professionalism in user interface standards, especially for such an important website like this.

Features on JohnMcCain.com are:

• User Accounts / MySpace style : Yes (McCainSpace)
• Newsletter Sign Up: Yes
• Website Blog: Yes
• TV Channel and Videos: Yes
• Events Search Engine: No (only events calendar)
• Local Grassroots Group Area Search Engine: No
• State Specific Pages: Yes
• People Group Pages:No
• Issues Pages: Yes
• Downloadable Logos, Wallpapers, Print Materials, Buddy Icons etc.No
• Social Networking Links:No
• Register To Vote Link: Yes (on site)

So, after studying both websites, it is clear which one is of a higher quality of web and graphic design standards. BarackObama.com is a modern, web 2.0 website, utilizing the latest in XHTML and CSS capabilities, along with capturing the interests of all ages.

JohnMcCain.com lacks a comfortable and appealing design, and is also extremely narrow in its reach. The only user that will enjoy JohnMcCain.com is a wealthy 70 year old man looking for some new golf gear (4th tab in dark blue in center of page)!

BarackObama.com seems to be reaching out to all ages, all ethnicities, all groups of society. His website has something for everybody, and it is interesting to note that this seems to tie in perfectly with his overall campaign promise; To unite everyone. His website certainly achieves that.

What do you think about the two websites? Do you think they achieve what they need to? Which one keeps you interested to click through to other pages and which one turns you away right off that bat?

UEFA EURO 2008™ Championship competition kicked off this afternoon, and it seems like a good time to discuss the identity and branding used for this tournament.

Back in June 2005, the UEFA EURO 2008™ logo was launched at a special ceremony at the Hofburg Place in Vienna, Austria. We were also introduced to “Flix and Trix”, seen in the header of this post. These two mascots, and the logo for the tournament were created by “English and Pockett Associates“, a London based creative agency.

The design evokes Switzerland and Austria’s mountain scenery and also the red and white colours common to both countries’ national flags.

The UEFA EURO 2008™ brand comprises of a variety of logo formats with a visual identity made of six individual and collective graphic icons, including three dimensional perspectives. The visual identity is produced in ten different color palettes.

Logo elements
The logo includes a variety of elements:

• Mountains
Welcoming. The love for nature and football is symbolized by the mountain embracing the football. The mountains’ stunning backdrop are central to the host nations, Austria and Switzerland.

• Typography
The word EURO is rendered in shades of red and symbolizes the unification of both Austria and Switzerland in staging this great event. The host country names are set in a confident and contemporary type face, with a rounded friendly feel.

• Ball
Inspired by the pure and rugged surroundings. The football is sculpted from stone and features the green forests and valleys of both countries. The pattern is based on contour maps of the Alps.

• UEFA arch
The mark of top European football.

• Colors
Red and white are the national flag colors of both host countries. The green core of the ball reflects the importance of nature in the region.

“Trix and Flix” have also been featured in a promotional video to further the branding and imagery of the competition. You can view the video here

Mascot action
The video sees Trix and Flix playing football and dancing in the mountains of Austria and Switzerland and in football stadiums, giving their growing legion of fans a chance to see the striking twosome in action. The video has been targeted at children and young people, but the organizers of UEFA EURO 2008™ hope Trix and Flix’s signature tune will be a hit with adults too.

Infectious spirit
With the real Trix and Flix being kept busy with their commitments to promoting UEFA EURO 2008™, the video will help the official tournament mascots spread their passion to parts of the world they cannot visit in person. While the video amply demonstrated their footballing skills, it is also hoped that their infectious spirit will give fans a taste of the great footballing celebration to come in Austria and Switzerland this summer.

Video signatures
Produced by Swedish animators KAKTUS, the project has been in development since last summer and is expected to be the first of a number of animated clips involving Trix and Flix released as the final tournament approaches. A 20-second animation of Trix and Flix’s unforgettable goal celebration is being planned which, along with a number of other sequences, may be used in the stadiums at the finals to capture the imagination of fans and players.

source: http://en.euro2008.uefa.com/

Related Links to this post:
About UEFA : The Organization
Official UEFA Euro 2008 Tournament Website

Previous UEFA Euro Logos and Identities:
UEFA Euro 2004 - Portgual
UEFA Euro 2000 - Belgium / Netherlands
UEFA Euro 1996 - England

What do you think of the current 2008 identity, with “Flix and Trix”? Do you think it will appeal to adults as well as children? Do you think these characters can inspire an atmosphere around the stadiums and cities hosting this tournament?

The combination of different elements

When combining different elements in a logo, you run the risk of making the statement of the logo more imprecise. Hence you should weigh up which elements are necessary, and which elements degrade the statement.

Creating a logo that contains both an identity mark and text is not too hard, as is creating a text only logo. However, you need to sit back from the logo you have designed and determine if the balance of all these parts occur in combination.

It is better to not “load” logos that are made up of many stilystic elements with lots of text. Often, you will see a logo with a mark, a text element and a smaller mark or creative icon within the text. This can often lead to a busy overall logo design that fails to achieve what it needs to.

Next week, Part 5 - Distortion

Read all previous part of this series so far

The Beta release of Firefox 3 is out and it comes with improved CSS support

• The display property’s inline-block and inline-table values are now implemented.
• The font-size-adjust property now works on all platforms; previously it was only supported on Windows.
• rgba() and hsla() support for color (bug 147017)
• :default pseudo-class support (bug 302186)
• -moz-max-content, -moz-min-content, -moz-fit-content, and -moz-available values have been added to width, min-width, and max-width (bug 311415 and bug 402706)
• HTML soft hyphens (­) are now supported.
• Pre-formatted tabs work much better in proportional fonts, following the CSS 2.1 spec.
• The ime-mode property is supported.
• The CSS text-rendering property for HTML is now supported (bug 387969).
• -moz-border-*-start and -moz-border-*-end CSS properties are implemented (bug 74880).
• -moz-initial is now implemented for almost all CSS properties (except quotes and -moz-border-*-colors) bug 80887.
• window.getComputedStyle() now supports all supported CSS properties (bug 316981).
• content’s none value is now supported (bug 378535).
• cursor’s none value is now supported (bug 346690).
• Background images now properly clip to a -moz-border-radius (bug 24998).
• white-space’s pre-wrap value is now supported (bug 261081).
• Selectors like :first-child, :only-child, :last-child (bug 73586), :empty (bug 98997), or the + combinator (bug 229915) are now updated dynamically (bug 401291).
• Negative z-index values are supported correctly.

Here are some helpful hints, tips and tools to increase your productivity level in photoshop:

1. Hot Keys: Using hot keys can reduce a lot of clicking when designing in photoshop. Here are a few that I use most regularly and what they do.
   • CTRL + “N” = Create New Document
   • CTRL + "W" = Close Current Document
   • CTRL + "A" = Select All or Current Layer for Pasting
   • CTRL + "C" = Copy Current Selected Layer
   • CTRL + Shift + "C" = Copy All Layers and Merge Them
   • CTRL + "V" = Paste Copied Information in Clipboard
   • CTRL + Shift + "V" = Paste Inside a Selected Area
   • CTRL + "B" = Bold Text
   • "T" = Text Tool
   • "W" = Magic Wand Tool
   • "U" = Shape Tool
   • "D" = Stamp Tool
   • CTRL + Shift + ALT + "S" = Save For Web
   • there are many more, what ones do you use?
2. Use Masks Rather Than Eraser!
   Here’s a very helpful video with a side of humour!

   
   

3. Use New Layers Rather Than Painting on Image Layers
   Let’s say you have a photograph and you want to add some blue color to the horizon.

   WRONG WAY:
   Clicking on the paintbrush tool, choosing the blue color and painting all over your photograph layer

   RIGHT WAY:
   CTRL + SHIFT + "N" = Create New Layer (another hot key!). Now start painting! Even give it a name, "Blue Paint Layer"

4. Save Document Presets!
   Do you design ads, websites, flyers etc a lot and each time you have to create the dimensions from scratch?! Well, often you will be designing material that has the same width and height as a document you already created. Save a preset and save time!

   

5. Batch Scripts! (what, you didn’t know?!)
   Let’s say we’ve got 20 images that we took with our digital camera, saved on our hard drive. We need to use those 20 images for a design we are working on. One annoying problem…..all of the images are at least 2mb in size and I need them all reduced by 50%. Do I really have to open all 20 individually and reduce the image size myself?!

   Second problem….we also need all of the photographs to be in black and white only.Do I really have to manually and individually change all 20 images to make this happen?!

   Answer: No, of course not…..but you have been for the past 3 years haven’t you?! Well, today that all ends, and you will now save hours every year you work in photoshop.

   Here is a tutorial on batch scripting

Welcome to “Business Cards of Bloggers”!

If this post gets popular, it will feature hundreds of business cards from the active blogging community, or the graphic design and web design bloggers at least!

Here’s what to do:

1. Write a post on your blog or website about the “Business Cards of Bloggers” project, and present your business card in the following format: 460px (max width) x 465px , 72 dpi, jpeg or gif.

2. Link to this post with “Business Cards of Bloggers” so that your readers can view all of the business cards that will be presented right here!

UPDATE :: If you don’t link back to this post a rel="no follow" will have to be added to your link. Fair is Fair!

3. Email me with the URL to your post, or email the image file with a link to your blog or website.

4. Come by and visit BrianYerkes.com and see all of your blogging friends and their business cards.

Start creating your post right away! If you don’t want your email address or phone number showing, simply blur it out.

**Best of All: You receive a nice bit of link juice with your card posted!***

Here are a few to get it rolling!

====================================================

1. Brian Yerkes (Company: BrianJosephStudios.com)

2. David Airey

3.Aaank

4. Rob Cubbon

5. Randa Clay

6. Tammy Lenski

7. Jacob Cass (Just Creative Design)

8. Jeffrey Way (Detached Designs)

9. Kelly Erickson (Maximum Customer Experience / Vision Points)

10. Robert F Russo

11. Catherine Morley (Designers Who Blog / Katz Design)

12. Tom Smalling

13. Emma Selley ( EMZ Design)

14. Tim Ernst (Raven Wood Creative)

15. Jennifer Farley (Laughing Lion Design)

16. Jeff Fisher (Fisher LogoMotives)

17. Aaron Russell

18. Steve Patterson

19. Sander Baumann

20. Jeremy (Papertree Design)

Start creating your post now and send the link to me or send the image and the link to your post!

Here’s the first one: Just found this over at SpoonGraphics.com

 Rssday.org are trying to build awareness of RSS technology and I am adding my support to the project. Many of us in the web design, graphic design and internet marketing business use RSS technology every day. It is important that our industries try to promote it and get it in front of all general internet users.

Q: What is RSS, and what are RSS feeds I keep hearing about?A. Wikipedia explains RSS feeds as:“RSS is a family of Web feed formats used to publish frequently updated content such as blog entries, news headlines, and podcasts.[2] An RSS document (which is called a “feed” or “web feed”[3] or “channel”) contains either a summary of content from an associated web site or the full text. RSS makes it possible for people to keep up with web sites in an automated manner that can be piped into special programs or filtered displays.[3]

RSS content can be read using software called an “RSS reader”, “feed reader” or an “aggregator”, which can be web-based or desktop-based. The user subscribes to a feed by entering the feed’s link into the reader or by clicking an RSS icon in a browser that initiates the subscription process. The RSS reader checks the user’s subscribed feeds regularly for new content, downloading any updates that it finds and provides a user interface to monitor and read the feeds.

The initials “RSS” are used to refer to the following formats:

Really Simple Syndication (RSS 2.0) RDF Site Summary (RSS 1.0 and RSS 0.90) Rich Site Summary (RSS 0.91). RSS formats are specified using XML, a generic specification for the creation of data formats. Although RSS formats have evolved since March 1999,[4] the RSS icon (”") first gained widespread use in 2005/2006. ”

source: http://en.wikipedia.org/wiki/RSS_(file_format)

So, we had to figure out a way for both domains to still show the Chamber website, but to not lose the rankings and link juice for either website.  As the websites are in PHP, we decided that the best way to go about this process was with .htaccess file re-directs. Pretty simple implementation involved as you can see from the small snippet of code below. All you have to do is add this code to your .htaccess file (create one if you do not have one already) , and yes, that is a period before the “h”.

.htaccess files only work on Apache servers so before you use them make sure your server allows this file.

Code:

Options +FollowSymlinks
RewriteEngine on
rewritecond %{http_host} ^www.fmbchamber.com [nc]
rewriterule ^(.*)$ http://www.fortmyersbeach.org$1 [r=301,nc]

Options +FollowSymlinks
RewriteEngine on
rewritecond %{http_host} ^fmbchamber.com [nc]
rewriterule ^(.*)$ http://www.fortmyersbeach.org$1 [r=301,nc]

It is pretty obvious what is going on in this code. I am telling the server to permanently redirect any fmbchamber.com and www.fmbchamber.com url’s to www.fortmyersbeach.org. I threw this together real quick and I’m sure hardcore php developers have a much cleaner way of coding this, but this snippet works perfectly for its purpose.

This week:

Part 3: Proportions

The relative size of the elements

Differences in size between the individual elements are often used to create a contrast. However, you should pay attention to not force the smaller element into the background.

All elements combined should result in a harmonical image.

It is often helpful to use a grid. For example, an element’s width in the logo could be used as the base of such a grid. To achieve a harmonical image, you could use half the width of the first element as the appropriate spacing from other objects or a scripture.

Another example is the logo’s “safety clearance“, or the space around a logo that should always be left blank. Considering a logo that consists of a figure part and a text part you could use the width of the figure part to define the safety clearance around the entire logo.

Take care when you design a logo with different proportions of the elements: The smaller part must be easily recognizable or legible also when the logo is used at a small size! Logos should still work down to a size of 2 cm

Next week: Part 4 : Combination