“The most powerful and enduring brands are built from the heart — if people believe they share values with a company, they will stay loyal to a brand.”

Howard Schultz (Chairman and CEO, Starbucks Coffee Company)

The following are some guidelines that I believe are crucial to any identity that a company wants to market effectively:

Minimalism

WWF
Designed by Sir Peter Scott, in 1961

KISS (keep it simple stupid) the logo

Don’t make the design unnecessarily complex. Logos can be seen from different distances; therefore it needs to be universally noticeable. The design should be able to maintain its detail.

Color

It should all start with monotone

Because there are people out there that may have a disability in their color vision, it is important that logos be designed to give the same effect and meaning with or without color. Therefore, it is important when designing a logo to start with simple shades of black. Colors can then be applied afterwards to enhance the visual.

Maintain global recognition

Color is important to the brand because it unifies everything together. If the client already has a color scheme specified, the identity must follow the scheme accordingly (even if the scheme is not appropriate). On special occasions it is allowed to suggest a more appropriate color scheme.

Shape

Shell
Designed by Raymond Loewy, in 1971

Rely on shape — not effect — to express meaning

Keeping accessibility in mind, it is important to design the identity in which the meaning is expressed by its shape, not by its effect. So make sure that the design itself doesn’t rely on fancy patterns that could become useless in some mediums. We tend to recognize shapes first, especially from afar.

Typography

Don’t underestimate the power of type

In some cases, the brand doesn’t require an icon, therefore relying on type entirely. The type should be visually balanced, especially if a tagline is to be embedded with the identity.

Avoid extraneous details

Speaking of taglines, it is best to let the client know that taglines are meant to be used outside the logo itself. Try to make your clients aware that taglines can change much more rapidly than the brand themselves. Other details to avoid are the technical names in a company, such as LLC, Inc, etc. These are meant to be included in documentation where it is relevant and warranted. This might be a hard rule to follow — because of the client’s demands.

No more than 2 fonts are necessary

Continuing with the visual balance, it is a good idea to minimize the number of fonts used. The font family is the first priority and then the font style. If using two fonts, make sure the font families complement each other.

USA Network
Designed by Peloton Design, in 2005

Flexibility

Always use vector!

It is necessary that all brand identities be designed using vector graphics (composed of paths) as opposed to raster graphics (composed of pixels). Adobe Illustrator is the de facto standard program to use. This is essential because it enables the identity to be scalable without the quality deteriorating.

Make it cross-media compatible

There are many different types of media, each with their own mediums. It is important that the brand identity be able to be reproduced across all of these. The three primary types are web, print, and broadcast. In particular for print media, the identity needs to be able to be reproduced through offset, flexography, screen, gravure, and digital printing.

Trend

Think trend-proof

While it can be greatly influenced, current trends should not be the primary focus of the brand identity’s design. The design should be able to withstand current and future trends.

Uniqueness

Don’t replicate, innovate

Try to be creative and don’t rely on what others are doing in their designs. It is okay to observe for inspiration, but don’t steal from others. Focus on the purpose of the identity and determine the best course of action.

Don’t use stock art

Don’t rely on art that is available to others. Not only does this void the logo’s uniqueness, but it implies poor judgment on the designer. However, taking shortcuts by morphing stock art into something unique is okay in some cases. Again, focus on the purpose and make sure that you are taking the best approach.

Scope

Design for the client, not for the designer

The client is the one that is paying the bill, so it is best that you try to make them happy first. Just because a wild font may look awesome to you, it will not necessarily look awesome to the client. Always refer to the primary purpose of the logo before daydreaming on the design.

Atlantic BT strives to enhance culture with various team building activities. The most recent, which closely aligned to the candy holiday that is known as All Hallows’ Eve, was a pumpkin carving contest. This being the first of its kind we weren’t sure what to expect. We knew our designers could carve a mean pumpkin but were pleasantly surprised with the originality and enthusiasm all the departments showed. We had a lot of good laughs and enjoyed reviewing each other’s work.

The rules were simple. Atlantic BT provided the pumpkin and employees brought the tools of their choice. Props could be used to help support the overall idea. Initially we did set a time limit but soon found out the task was of greater difficulty (our pumpkins were massive, gutting alone took 30 minutes) and quickly removed it. Tools used ranged from delicate clay modeling tools, pumpkin carving kits and Dremel sets to less refined Dewalt drills.

We had a great time and it truly showed in the final results.

Voted by Atlantic BT employees.

The Winners

• 
  

  Overall Winner

  Mark Caron

  Pumpkin Name: “Guessalope”

• 
  

  2nd Place

  Eileen Allen

  Pumpkin Name: “Why so serious?”

• 
  

  3rd Place

  Andrew Bartlett

  Pumpkin Name: “Hannibal”

Take a look and let us know which one you liked the best.

To get around this conundrum, I present to you jquery and ajax, my two favorite web technologies ever. AJAX is a group of technologies that allows you to interact with the server from the client-side without affecting the behavior of the existing page. What this means is that you can post to a page without getting the associated postback from .NET (and subsequent page refresh). If that doesn’t sound important, trust me, it is. If we can post to a page without getting a postback, then we’re already pretty close to real-time updates. All we need to do now is use jQuery to update the DOM as we do posts. Sound complicated? It isn’t.

Back to our example, suppose a user clicks a button and that button fires a postback and runs 3 methods in the code-behind, DoStep1(), DoStep2(), and DoStep3(). The first thing we need to do is simply move these methods to a new page. If your original page was called DoWork.aspx, then a good name for the new page would be DoWork_Ajax.aspx.

Now, back on DoWork.aspx, you probably have an asp element on your page that you’d like to update as the functions progress. You can replace this with a standard HTML element. DoWork() is a javascript function that will update this element. It looks like this:

function DoWork(step)
{
    if (step == 1)
    {
        $(“#update-msg”).html(“Starting Work”);
    }

    if (step == 4)
    {
        $(“#update-msg”).html(“Finished”);
        return false;
    }        

    $(“#update-msg”).load(
        “DoWork_Ajax.aspx #results span”,
        { workStep: step },
        function(){ DoWork(step + 1); }
    );
}

Assume that #update-message is a span on our page, i.e. a placeholder for the status of our worker functions.

The logic flows as such: If we’re on step 1, tell the user we’re starting. If we make it past step 3, we’re done, so tell the user that too and return from this function. Finally, the meat of the function — Do an asyncronous post to DoWork_Ajax.aspx, telling it what step we’re on, and injecting a span from it into the DOM for the current page.

The PageLoad method for DoWork_Ajax.aspx looks like this:

switch (Request[“workStep”])
{
    case “1”:
        DoStep1();
        break;
    case “2”:
        DoStep2();
        break;
    case “3”:
        DoStep3();
        break;
}

Each method updates an element on the page, just like before. This is the element that gets injected into the DOM by our jQuery function on DoWork.aspx.

You’re doing the exact same work as before, but now you can update the page in real time. I’ve included a sample application that demonstrates everything I’ve talked about. For those that are interested, you can download the project and run it locally to see this in action.

More often than not, users are on a mission and are determined to find specific information. You [as a company] get one chance to impress your targeted audience with your design. Based off of previous studies, users can judge your website in as little as 50 milliseconds!

Does Apple give you a good first impression about who they are? Still curious?

Most designers would think that they should focus solely on the home page design, thinking that the users would go there first. On the contrary, users could possibly land on any of the pages in your website through search engines or outside links from blog posts, emails, websites or more.

A research team lead by Dr. Gitte Lindgaard found that people can make rough decisions about a Web page’s visual appeal after being exposed to it for as little as 50 ms. In her study, she had participants judge websites that were flashed on a computer screen for 0.05 seconds. It is worth noting that most users don’t actually browse the web in this same manner; however, it informs us that users can make decisions rather quickly. Most eye tracking studies show that the human eye can quickly skim over a page. It is almost a general rule of thumb in usability that all Internet users browse or scan websites, not read them. This directly elevates the importance of content usability.

0.1 second is the response time limit if you want users to feel like their actions are directly causing something to happen on the screen. For example, if you click on an expandable menu and see the expanded version in less than 0.1 seconds, then it feels as if you made the menu open up. If it takes longer than 0.1 seconds for the revised state to appear, then the response doesn’t feel “instantaneous” — instead, it feels as if the computer is doing something to make the menu open.

Thus, to create the illusion of direct manipulation, a user interface must be faster than 0.1 second.

Jakob Nielsen

Judge Me in a Heartbeat!

BP keeps their home page clean and concise, allowing users to skim effortlessly

First impressions are critical to keeping a user curious about a website. Chances are that if you don’t make a good first impression, you’ll lose them permanently. Websites that use enhanced usability strategies are more likely to keep the user from bouncing. Some of these strategies include:

Don’t Make Me Think

As a rule, people don’t like to puzzle over how to do things. If people who build a site don’t care enough to make things obvious it can erode confidence in the site and its publishers.

Don’t lose search

Some people (search-dominant users), will almost always look for a search box as they enter a site. These may be the same people who look for the nearest clerk as soon as they enter a store. This can be an exception to small sites with very 1–2 levels of structure.

Make it easy to go home

Having a home button in sight at all times offers reassurance that no matter how lost I may get, I can always start over, like pressing a Reset button or using a “Get out of Jail free” card.

While it may be hard to judge anything in as little as 50ms, the key fact is that people can be hooked or discouraged by a website’s design and content rapidly. It is always good practice to test your site designs for usability and see what participants think of the site. It only takes a handful of people to determine distinct patterns on what is right or wrong.

So let’s hear from you. Let us know your experiences when browsing a website for the first time.

Luckily a solution exists, and best of all it isn’t all that difficult to implement. The solution is built around the idea that child pages can access their master page, as well as any publicly exposed properties on the master. For example, in the Page_Load method of a child page, you can write:

MyMasterPage masterPage = Master as MyMasterPage;
masterPage.Property = “property value”;

This is not ideal though, because we are now committed to never changing our child’s master page; if we do, it will break our build. The correct implementation of this concept is to create an interface that all of our master pages will implement, then use that in our child pages’ Page_Load method:

IMasterPage masterPage = Master as IMasterPage;
masterPage.Property = “property value”;

We can still set our property this way, only now we can later change what master page we use, as long as the new one still implements the same interface. Good stuff. So good, that it puts us most of the way there towards dynamic body ids and classes.

To get these, we need a couple of properties on our interface:

public interface IMasterPage
{
     String BodyId { get; set; }
     String BodyClass { get; set; }
} 

Then, in the code-behind file for our actual master page:

public partial class MasterPagesDefault : MasterPage, IMasterPage
{

    private string _bodyId;
    private string _bodyClass;

    public string BodyId
    {
        get { return _bodyId; }
        set { _bodyId = value; }
    }

    public string BodyClass
    {
        get { return _bodyClass; }
        set { _bodyClass = value;}
    }
} 

Finally, in the master page’s body tag:

<body id=”<%= BodyId %>” class=”<%= BodyClass %>”>

Now, to set these dynamically, use the child page’s Page_Load method just like before:

IMasterPage masterPage = Master as IMasterPage;
if (masterPage != null)
{
    masterPage.BodyId = “index”;
    masterPage.BodyClass = “index two-col”;
} 

By using publicly accessible properties, we give child pages the ability to set values on their master page. With this, it is easy to create dynamic body classes and ids in .NET.

Read the Full Article.

Bounce Rate

Your bounce rate is simply when a visitor enters your site and does not go to any other page on your site. This data can help you identify certain pages that need improvement. For example, if you have 10 service pages on your site and 3 out of the 10 have an extremely high bounce rate compared to the rest, it may mean that you need to add/change content, replace images, or add an offer/call to action. If your bounce rate is not design related, it may be that you are driving the wrong type of traffic to the site. Organically, if you are optimizing your site for the wrong keywords/phrases you could be driving irrelevant traffic to your site. On the paid side of things, if you are bidding on the wrong keywords or that the keywords are too broad you may have to bid on more targeted keywords.

Time On Site

The time on site indicator is very closely related to bounce rate. It is one of the best ways to see how engaged your visitors are on your site. If you notice that visitors are leaving within 30 seconds, you may not have content that is not compelling enough for a user to stay. Usually if your time on site is low, you will notice a higher bounce rate. Like bounce rate, if you drive the wrong type of traffic to the site you may have a low bounce rate.

Unique Visitors

Depending on the type of site you have, you may want to know how many new visitors you have compared to returning visitors. If you are managing a content-based site like a blog, forum, or wiki, you may want to take notice of visitors who return to your site. However, if you are a business trying to gain market share in your industry you may want to see what percentage of new users are visiting the site.

Top Keywords

It is always important to see what top keywords people are using to find your site. Your keyword list can help you see what keywords you are organically showing up for in the search results. Along with top keywords, pay close attention to each keyword as it correlates with time on site. You will notice that certain keywords/phrases will bring you higher time on site, lower bounce rates, and higher conversion rates.

Top Content

Extremely important for e-commerce sites, monitoring your most visited pages can help generate more revenue. Analyzing to see what products people are looking for can help you determine which products to market and promote more. For blogs and content focused sites, seeing which articles or blog posts are most popular can help you figure out which content you should highlight on your site or re-purpose on other content sharing sites.

Goal Conversions

Ultimately your site conversions are what generates leads and sales. When monitoring conversion data you want to look at it from a few angles. From one side, you want to see where your conversions are coming from. Are they coming from Google? A site you are marketing on? Paid search? An email marketing campaign? From another side, you want to see what keywords people used to convert. You may see trends in certain keywords that convert better than others. Another angle to look at is geo-location. Are more people converting within your city? State? Country?

I have just started really digging into building some services hosted in IIS using WCF and the above quote is what the sign says on most articles and books about Microsoft’s Windows Communication Foundation (or maybe just this one). I am in the process of creating several services for our company and for the most part I have been achieving success…except for a nasty serialization issue I encountered yesterday.

I have been adding lots of trace statements to my code to make sure I have the appropriate amount of diagnostic capabilities in my suite of services to figure out just such a problem.

I execute my unit test…and of course it dies…but where?  In the client?  In the service?  Did my call even make it to my service?

I found this article on MSDN that helped me immediately solve my problem.  Enter your old friend logging and tracing…here are the settings:

<configuration>
 <system.diagnostics>
  <sources>
    <source name=“System.ServiceModel”
            switchValue=“Warning”
            propagateActivity=“true” >
      <listeners>
        <add name=“xml”/>
      </listeners>
    </source>
    <source name=“myUserTraceSource”
            switchValue=“Warning, ActivityTracing”>
      <listeners>
        <add name=“xml”/>
      </listeners>
    </source>
  </sources>
  <shareListeners>
    <add name=“xml”
         type=“System.Diagnostics.XmlWriterTraceListener”
               initializeData=“C:\logs\Traces.svclog” />
  </sharedListeners>
 </system.diagnostics>

<system.serviceModel>
  <diagnostics wmiProviderEnabled=“true”>
  </diagnostics>
 </system.serviceModel>
</configuration>

With a couple quick config settings a complete trace in XML of my problem was revealed to me — serializing an enumeration.  Now with most tracing capabilities you have to be careful about how verbose you want it to be and you don’t always want the hose running all the time, only when you have to wash the car…you dig?

The other cool item of note is that the .svclog file that gets generated comes with it’s very own reader that allows you to parse the service log.  It is called the Service Trace Viewer Tool or SvcTraceViewer.exe. Check it out!

Have fun with WCF…it is where the all the contracts are strong, all the services are good looking, and all the developers are above average. Cheers!

Consumer Needs for a Products:

1. Functionality
2. Usability
3. Pleasure

Take a chair for example. How many different types of chairs have you seen? A lot. They range from the very basic to the extravagant. What do you look for in a chair when shopping? Is it the bright, attractable colors? How about the cool cup-holder feature? Maybe the shape and feel are what you like. Chances are that you’ll return the product back or abandon all use of it if it doesn’t meet at least 2 out of the 3 consumer needs levels.

Functionality

Level 1 refers to the core basics of a product. Can it perform basic functions of what it is designed to do? In our example, a chair simply needs to support the person’s weight. Also, it’s good to point out that functionality may include the endurance of a product. Can it perform basic functions over a long period of time? Depends on the quality.

Usability

Level 2 refers to the functionality in relation to the consumer. Do the functions appeal to me? If so, how? I want a chair that not only supports my weight, but rocks too! I would also like a cup holder when drinking a cold beverage and enjoying my comfortable chair. Those are features that would appeal to me. Usability is a tough one because the designer of the product attempts to appeal to their intended audience as best as they can.

Pleasure

Level 3 refers to the emotions that a consumer endures with a product. Does the product look aesthetically-pleasing to me? If I were trying to match furniture (which I know my fiancé would expect me to) I would want the color, shape, texture, etc. to coordinate with what I am trying to match.

Pleasure-based approaches are about really understanding people and respecting and celebrating human diversity. They are about understanding the benefits that people want from a product and understanding what is required in order to deliver these benefits. Above all, pleasure-based approaches are about designing products that can bring a real joy into people’s lives.

Patrick Jordan

Apple® consistently provides products that meet all 3 levels (at least to me personally) to satisfy consumers. I know for a fact that I feel emotionally-satisfied when I use my iPhone everyday because it:

1. Reliably functions properly (and consistently)
2. Pertains to my needs of use
3. Looks amazing and feels comfortable

We can look at any product and tell whether it is valuable to us by going through the 3 levels described here. Consumers can greatly be influenced by the way websites are designed. The same hierarchy applies.

So let me hear from you! In what ways have you been influenced by a product? Does it make you think about what you really look for in a product?

It’s the story of students who sat where you sit 250 years ago, and went on to wage a revolution and found this nation. Students who sat where you sit 75 years ago who overcame a Depression and won a world war; who fought for civil rights and put a man on the moon. Students who sat where you sit 20 years ago who founded Google, Twitter and Facebook and changed the way we communicate with each other.

Prepared Remarks of President Barack Obama
Back to School Event, Arlington, Virginia
September 8, 2009

And how.  We sure do communicate with each other differently now.  This speech even before being delivered caused such a stir and as an involved parent of a child in school I of course was naturally interested in what the president had to say and what he was going to say about learning in school.

But from a technology perspective think about how amazing that above quote is.  The president is immediately drawing a comparison between our founding fathers, the “Greatest Generation” and the Geeks that have changed us forever.

Twitter is being used by Iranian demonstrators to organize, Facebook has changed the way we organize our lives, and Google helps everyone find what they are looking for.  I went to college in the early 90’s at the dawn of what I like to call the first Internet-based technology revolution and the dawn of the “internets.”  I can’t help but think that we are now involved in another.  Can you believe that information from http://www.whitehouse.gov can be disseminated via a RSS Feed, a Tweet, see pictures on Flickr, or watch a video on Vimeo.

Everything around us is changing at a lightning pace, what will the next tool be?  For those of us in the technology world when we are not shaking our angry fists into air complaining about some nasty serialization issue, I hope we all can take the time to think about what an amazing time we are living through and how these tools can be used to bring us all closer together.

So get out there kids and go create something that will make this crazy world a better place!

Full text of the remarks can be found here:

http://www.whitehouse.gov/MediaResources/PreparedSchoolRemarks/