First with the styling

#slideWrap creates an extremely wide canvas for the slide to fit on aligned horizontally.
#wrapper then creates a sort of viewport to view the slides through.

<style type="text/css">
#wrapper { clear: left; overflow: hidden; position: relative; width: 520px; }
#slideWrap { clear: both; position: relative; width: 9000px;}
.slide { float: left; width: 520px; }
 
#wrapper #slideNav { float: right; margin: -2.75em 0 2em 0; }
	#slideNav li { display: inline; padding: 0; }
		#slideNav li a {
			background: url(http://cmcilrath.rssready.net/xcel/assets/images/bg_slideNav.png?v=3) no-repeat -12px top;
			display: block;
			float: left;
			height: 12px;
			margin-right: .5em;
			text-decoration: none;
			text-indent: -999em;
			width: 12px;
		}
		#slideNav li a.next, #slideNav li a.prev { width: 10px; }
		#slideNav li a.selected { color: #000; background-position: -12px bottom; }
 
		#slideNav li#prevSlide a { background-position: top left; }
		#slideNav li#prevSlide a.disabled { background-position: bottom left; }
 
		#slideNav li#nextSlide a { background-position: top right; }
		#slideNav li#nextSlide a.disabled { background-position: bottom right; }
</style>

The FBJS script

<script>
<!--
function Each(array, block){
	for (var i=0, l = array.length; i<l; i++){
		block(array[i]);
	}
}
 
var currentSlide = 1;
var maxSlides = 5;
var animating = false;
var slideWidth = 520;
var currentPX = 0;
 
function nextSlide(){
	var nextSlideNum = currentSlide + 1;
	if(nextSlideNum >= maxSlides){ toggleButton('next','disable'); }
	else if (nextSlideNum == 2 && currentSlide == 1){ toggleButton('prev','enable'); }
	currentSlide = nextSlideNum;
	if(animating == false){ scroll('right'); }
	return false;
}
 
function prevSlide(){
	var prevSlideNum = currentSlide - 1;
	if(prevSlideNum == 1){ toggleButton('prev','disable'); }
	else if (currentSlide == maxSlides){ toggleButton('next','enable'); }
	currentSlide = prevSlideNum;
	if(animating == false){ scroll('left'); }
	return false;
}
 
function toggleButton(button,state){
	if(button == 'next' && state == 'disable'){
		document.getElementById('nextSlide').setInnerXHTML('<a href="#" class="next disabled">next slide &gt;</a>').removeEventListener('click',nextSlide);
	}
	if(button == 'next' && state == 'enable'){
		document.getElementById('nextSlide').setInnerXHTML('<a href="#" class="next">next slide &gt;</a>').addEventListener('click',nextSlide);
	}
	if(button == 'prev' && state == 'disable'){
		document.getElementById('prevSlide').setInnerXHTML('<a href="#" class="prev disabled">&lt; previous slide</a>').removeEventListener('click',prevSlide);
	}
	if(button == 'prev' && state == 'enable'){
		document.getElementById('prevSlide').setInnerXHTML('<a href="#" class="prev">&lt; previous slide</a>').addEventListener('click',prevSlide);
	}
}
 
function scroll(direction){
	Each(document.getElementById("slideNav").getElementsByTagName("a"), function(as){
		as.removeClassName("selected");
	});
 
	document.getElementById("slideNav-"+currentSlide).addClassName("selected");
 
	animating = true;
	var pixelShift = slideWidth * (currentSlide-1);
	var startingSlideNum = currentSlide;
	var Slide_container = document.getElementById('slideWrap');
 
	if(direction == 'left'){
		Animation(Slide_container)
			.by('left', '-' + pixelShift + 'px').from('-' + currentPX + 'px')
			.by('right', '-' + pixelShift + 'px').from(currentPX + 'px')
			.duration(300).ease(Animation.ease.both).checkpoint(1, function() {
				if(startingSlideNum == currentSlide){ animating=false; }
				else { scroll('left'); }
		}).go();
	}
	if(direction == 'right'){
		Animation(Slide_container)
			.by('right', pixelShift + 'px').from(currentPX + 'px')
			.by('left', '-' + pixelShift + 'px').from('-' + currentPX + 'px')
			.duration(300).ease(Animation.ease.both).checkpoint(1, function() {
				if(startingSlideNum == currentSlide){ animating=false; }
				else { scroll('right'); }
		}).go();
	}
 
	currentPX = pixelShift;
}
 
function showSlide(num){
	startingSlide = currentSlide;
	currentSlide = num;
 
	if(num > startingSlide){ scroll('left'); }
	else if (num < startingSlide) { scroll('right'); }
 
	if (startingSlide == maxSlides && currentSlide == 1){ toggleButton('next','enable'); toggleButton('prev','disable'); }
	else if (currentSlide == maxSlides && startingSlide == 1){ toggleButton('prev','enable'); toggleButton('next','disable'); }
	else if (currentSlide == 1){ toggleButton('prev','disable'); }
	else if (currentSlide == maxSlides){ toggleButton('next','disable'); }
	else if (startingSlide == 1) { toggleButton('prev','enable'); }
	else if (startingSlide == maxSlides) { toggleButton('next','enable'); }
}
//-->
</script>

FBML Markup

Simple markup here, slideNav controls the slide with onclicks, the JS does the magic.

<div id="wrapper">
	<h2>Header</h2>
	<ul id="slideNav">
		<li id="prevSlide"><a href="#" class="prev disabled">&lt; previous slide</a></li>
		<li><a href="#" id="slideNav-1" onclick="showSlide(1); return false;" class="selected">1</a></li>
		<li><a href="#" id="slideNav-2" onclick="showSlide(2); return false;">2</a></li>
		<li><a href="#" id="slideNav-3" onclick="showSlide(3); return false;">3</a></li>
		<li><a href="#" id="slideNav-4" onclick="showSlide(4); return false;">4</a></li>
		<li><a href="#" id="slideNav-5" onclick="showSlide(5); return false;">5</a></li>
		<li id="nextSlide"><a href="#" class="next" onclick="nextSlide(); return false;">&gt;</a></li>
	</ul>
	<div id="slideWrap">
        <div id="slide_1" class="slide">
			<h3><a href="#">Title 1</a></h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
 
        <div id="slide_2" class="slide">
			<h3><a href="#">Title 2</a></h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
 
        <div id="slide_3" class="slide">
			<h3><a href="#">Title 3</a></h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
 
        <div id="slide_4" class="slide">
			<h3><a href="#">Title 4</a></h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
 
        <div id="slide_5" class="slide">
			<h3><a href="#">Title 5</a></h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
	</div>
	<!-- end slideWrap -->
</div>

What you CAN’T do in FBJS

I learned very quickly, that Facebook JavaScript does not allow some very common native functions such as onload, arrays and alerts as well as access to many properties of the document or window level of the DOM. There are workarounds and alternative methods that you can use instead:

window.onload in FBJS

Instead of using window.onload to initialize your functions, use setTimeout.

setTimeout( function(){  }, 10 );

Even an empty setTimout at the beginning of your script will kick start your functions which would normally auto init (this seems to work fine in canvas, but not so much in tabs).

alert alternative for FBJS

Since you can’t use alert or document.write, use Facebook’s dialog box:

new Dialog().showMessage('Dialog', 'This is text');

document.write alternative for FBJS

Since you don’t have access to the document or window levels of the DOM, you’ll want to setup a little include for testing. I drop in this code when i want to quickly output:

<script>
function logOutput(){
    var text = "This will be inserted into my log div";
    document.getElementById('log').setTextValue(text);
}
</script>
<div id="log"></div>

Trouble with JS Arrays in Facebook

For whatever reason, facebook also decided to rip out support for creating objects which also eliminated the way most of us make arrays:

// new Array() is not supported in FBJS
var myarray = [];
myarray[0] = 'stuff';
 
// or
myarray['foo'] = 'bar';
 
// or 
myarray.push('another example');

More to come as I wrestle further with Facebook. Any tips or comments are greatly appreciated!

What is Zen Coding?

From a general perspective Zen Coding is simply the practice of making lightweight and reusable code to allow for peaceful coding and debugging (that’s my definition anyways). There has been a movement in the front-end development community towards finding new ways to use CSS with semantic markup in order to produce the desired layouts and styles. Now Sergey Chikuyonok has taken that to a whole new level. He’s reversed the idea of Zen Coding using HTML markup to generate CSS Selectors and allowed us to create our markup from using CSS Selectors. This might seem confusing, so lets look at some code:

Plain and simply put, the Zen Coding plugin (supported on multiple text editors) translates code like this:

div#header>ul.nav>li*5

into this:

<div id="header">
	<ul class="nav">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</div>

.. and yet, this is still nothing folks! Dive in deeper over at Smashing Mag

In my last post regarding sIFR, I compared sIFR against a few of the other popular font replacement methods such as Cufon and FLIR. Since there is obviously a great deal of interest in the subject of font replacement, I figured it would be beneficial to show a deeper analysis at sIFR which I believe is the superior out of the three.

A deeper look at pros of sIFR

sIFR is quite different to the many font replacement techniques in the wild. Instead of manually generating each header through an image generator such as FLIR and Cufon do, sIFR is able to load a flash object and replace each element on the fly. The scripted effect works for roughly 95% of world wide web users according to statistics for Flash support and JavaScript support in modern browsers. Note also, that sIFR is by no means required, and degrades gracefully if the user does not have one of these components required. I’m sure some purists would react with contempt, but this method causes no harm to usability and only effects load time if used incorrectly (such as replacing body text rather than headers).

sIFR… what’s not to love?

First and foremost, implementation can be slaughtered. For an inexperienced developer, sIFR can take up to an hour to implement (from what I’ve heard in complaints anyways) and can cause pages to load slowly. From my experience, both are due to an incompetent developer, as sIFR is quite easy to implement if you understand all front-end technologies (which you should be a front-end developer) and only causes slow load time if its used for large blocks of text. Compare sIFR to the first wave of Web 2.0 technologies.. to this day I see wannabe developers implementing 20k+ javascript libraries to do one simple “jiggle” or “ajax” ability, which you can do with a few lines of code if you understand raw JavaScript. We can’t blame the technology for human error.. sIFR is brilliant. It may have a ways to go before it’s perfect, but respecting the principles of semantics, usability, and accessibility.. sIFR by far is winning the race against Cufon and FLIR.

Now to address the purists and their complaint about flash and JS dependency. Plain and simply, if a user falls within the 3-10% that doesn’t have Flash or JavaScript enabled, then BIG DEAL. That’s what good old HTML/CSS are for.. a fall back solution. Should we punish those with modern browsers and technologies for the minority that will get a slightly-less-quality rendering? I don’t punish modern browsers by neglecting the wonders of CSS 3. If Internet Explorer sees a box with square corners instead of rounded.. BIG DEAL. So why should we fight about whether a user has JS or Flash enabled? Heck, you can even use image replacement at that point, if you really want to.

The Big Picture

The real issue is that there aren’t enough fonts supported in Internet Explorer. If we want to point fingers and find something to criticize, there it is. Firefox, Safari, Chrome, Opera.. they’re all supporting more CSS properties such as @font-face. However, due to copyright laws and support from Internet Explorer we are bound to 5-10 fonts that we can reasonably assume the user has installed, and that’s ALL we’ve got. Solutions have been offered and argued but the problems are still much broader.. ranging from font licensing, support and rendering, with no clear solution in sight.

sIFR is one solution of many offered by developers fighting a war for creative freedom. It’s here and now, it’s legal despite the font, and regardless of the few quirks.. it’s usable. If you use it, then I hope you implement it well. If you protest it, then I hope you have valid reasons, and aren’t just complaining because you’re ignorant. Take this post with a grain of salt.. it’s my 2 cents and nothing more.

Read further:

Cufon vs sIFR vs FLIR
Style vs SEO
Fonts and the Law

Validators

• Total Validator: simple HTML/CSS Validator with browser plugin support
• W3C Validator: the organization that defines markup standards, and validates according to those standards
• Cynthia Says: screen reader which will help you with accessibility in mind

Accessibility

• WebAIM: Introduction to Accessibility
• WCAG: Web Content Accessibility Guidelines
• WCAG Overview: Overview of WCAG Standards
• WCAG Tutorial: A useful educational resource to learn the standards
• Section 508: Federal requirements for web accessibility

Javascript Libraries

• jQuery
• Prototype / Scriptaculous
• MooTools

Firefox Plugins for Developers

• CSS Validator
• CSS Viewer
• Web Developer Toolbar
• Firebug

Tutorials

• W3Schools: Very in-depth, free tutorials on the most commonly used web markup and programming languages
• A List Apart: Articles and tutorials on an extensive list of topics
• QuirksMode: Good articles and test pages concerning javascript and CSS

The Four-P’s

If you’ve taken an advertising or marketing class, you’ll know what the Four P’s are already: Product, Price, Placement, and Promotion. These are the four keys to selling a product or service, and will help you change how you market them:

Product

The product (or service) should be the first thing you analyze and possibly get some non-bias feedback on. Answer some simple questions by both your expertise and a few external opinions:

• What is the total cost to make/produce/ship the product?
• What is the quality of the product, and what guarantees/maintenance do you offer?
• How well does your product compete against competition?

Price

Math is one of the most important factors in determining long term success of a product. Start by breaking down the data that you have: price – cost = profit. How well does your product compete on a price level? What is the percentage of profit made, and do the long-term profits exceed the costs of marketing, advertising, promotion, etc?

Placement

Location, location, location! We’ve all heard that phrase, and for good reason. Location really matters. You can sell a pile of junk if it’s in the right location. Analyze location/placement in a hierarchy:

• What city are you located in (analyze demographic and potential number of customers in that city)
• Once you have a rough estimate on that number, consider your store location and how many of those customers see it
• How well do you position you product (physically or mentally) when customers enter your doors (or website even)?

Promotion

Once you’ve figured out all that data, you have the tools necessary to start promoting yourself. If it’s a new product/service/business then jump right into the Promotional Mix. Otherwise start by analyzing how information is distributed and advertised currently and give some thought to the strengths and weaknesses of your current tactics before reading the next bit.

A-Three-PS (The Promotional Mix)

The A-Three-PS model is the biggest key to promoting your product or service. Within each of these points there are other branches and such that are important also, but for the most part, every type of promotion falls within the A 3P S: Advertising, Publicity, Packaging, Personal selling, Sales promotion.

Advertising

Advertising comes in many names and shapes, but put simply, advertising is a form of promotion that explicitly details the product and markets it towards a specific demographic. I’ll go deeper into advertising with another post, but here’s a quick look at the most popular methods of advertising:

• Web Media (pay-per-click advertising, social media, viral marketing)
• Outdoor (vehicles with large ads, billboards, building ads, posters)
• Print Media (business cards, brochures, newspaper)
• Broadcast Media (television, radio, live web feeds)

Publicity

This is one of the most impressive ways to promote your product and usually causes a huge spike, but is not necessarily a steady flow or good model to base your business. Publicity can come in many ways, whether it’s word-of-mouth, a promotional event, news story, or some crazy stunt. Usually it comes at little to no cost (because it pays off whatever costs their may have been), and generally has a greater impact for immediate business, but as I mentioned.. is not a steady source of income. This is a great place to start for a new and emerging business, and is also highly effective when combined with other promotional resources (such as Sales Promotion).

Packaging

It’s so amazing how packaging effects a consumer’s decision to purchase. Packaging is huge, whether it’s a physical product, how you package/sell your product online, etc. This is where you can be creative and stand out from your competitors. Rather than going into too much detail about how creative packaging works, check out some of these links for yourself:

• Highly Creative Product Packaging
• More Creative Product Packaging
• Food and Beverage Product Packaging

Personal Selling

Out of all the forms of promotion, most businesses either nail the others and miss this or nail this and miss the others. Personal Selling is a face-to-face interaction that takes the product from beginning of sale to closing of sale. This is crucial in selling a large product like a car, boat, or expensive service. Generally anything that is selling for over $3000 is going to require personal selling. I have seen many businesses flop because they didn’t promote themselves, meet with clients, or sell on a personal level. If you have any product or service that is near or above $3k, put this on the top of your list of skills to master!!

Sales Promotion or Incentives

You’ll see this form of advertising at almost any retail store. Sales cause hype which becomes a free promotion by word-of-mouth. Sales can be really effective on an older, polished product to draw the user to look at a new product that you are promoting.

Take a wireless store for example. You’ll often see sales incentives offering you a deal with a new phone. They will often promote a free bluetooth headset, or a discounted price with a 2 year contract. These are sales promotions that seem like a good deal (and often can be), but for the store have large turnover. Either the bluetooth headset is really cheap for the store to give away, and the smart phone that you’re paying $500 for easily covers the cost.. or a free phone with a 2 year contract.. you just buahg the phone for your monthly payment * 24 months!

Sales can be combined in so many ways, that it would be impossible to give all the different examples. The biggest thing to note when promoting a sale or incentive is what your costs are, how much the price outweighs the cost, and how that is presented to the consumer. If you take those three point into consideration, and combine this form of promotion with some form of advertising, it should be a large success.

Identify your Audience

The absolute first step in the marketing process is to Survey and Explore your target audience to establish your marketing tactics. In this phase you’ll identify your Target Market by asking yourself.. Who specifically am I trying to speak to? and then compare that answer with your geographic, demographic, and psychographic analysis results. Then you will discover your Market Segmentation by defining how you niche the market to speak directly to the consumer you want to target. This is usually figured by looking at the geographic, demographic, and psychographic results, and then simply asking yourself.. What makes you stand out from your competitors in the target’s mind?

Geographic

I’m sure you’ve heard the term “Location, Location, Location!”, so identify that first. Often times defining your Geographic location of the consumer will affect your marketing the most, especially if your business is mostly offline or without a web presence (check out my web development business and our services if this is the case).

Demographic

Demographics are simply the basics that make your consumer such as age, sex, martial status, education, income, race, religion, etc. There are many websites that will easily allow you to research by city, zip and radius to help you identify the ideal demographic in each location.

Psychographic

After you’ve established Geographic and Demographic, you should then analyze psychographics, which are the he underlying things that make your customer who they are (sexual preference, specific religious beliefs, Lifestyle, how they view/carry themselves, etc).

Many people want to know how to design a logo from start to finish. Let me address first, that logo design is not something that should be taken lightly and doesn’t come cheap. Not everyone can be as fortunate as Nike and get an effective logo for only $35. In fact, designing a highly effective logo takes expertise in many fields including advertising, marketing, and design.

This post is intended to help young and ambitious designers with resources to research, conceptualize, and design a logo. If you’re a business looking to hire a logo designer, you can hire me through my graphic design company, which offers full company branding as well as internet marketing and advertising.

Identify and Brainstorm

Before getting into the concept stage of logo design, you must first identify who your client is, what branding (if any) they have, and what demographic their business is targeting. These are all going to be crucial to the design and development of a logo.

To get started with the tools you’ll need to design, you need to identify the colors, fonts, icons, and images that will best represent the client. If they have a brand already you won’t have much difficulty doing this. However, if you’re starting from scratch, you’ll need to do some research just to setup your workspace in photoshop or illustrator.

Logo Color

Start with a color scheme and browse around for a while on colourlovers.com and ask yourself while you browse what is the demographic the client is targeting? I usually go by age, sex, and location to get started.

Age

Targeting Young Children and Parents
Start by looking at pastel colors (soft, chalky colors), because babies and children are viewed as fragile and gentle.

Targeting Children and Teenagers
Try heavy contrasts (neon pinks, greens, blues, black), just look at any typical teenager’s myspace and you’ll see what I mean

Targeting Young Adults
Try the primary colors with different lightness/darkness and contrast (light blue and white on dark blue for example)

Targeting Middle Aged Adults and Older
Try soft and dark (beige, grays, retro). Pretty much match the style that was popular when they were young adults

Location

Then look at demographic by location to determine an even narrower selection of colors, often times you have to think backwards of what society has taught you, and stereotype people. Cultures can be very different and have different trends and styles that are attractive. Compare Japan to the US for example, and you’ll see a huge difference in color preference and design.

Logo Shape

Next identify iconography. This is actually easiest to do with finding words that relate to the client. For example, pretend Nike needed a brand and the “swoosh” didn’t exist. In this phase I would identify words that relate to their business to use as a base for iconography:

Words Relating to the Company Name and Services:

• Running / Movement / Fast / Motion
• Sports / Tennis / Soccer / Football / Basketball / Baseball / Hockey
• Greek Gods / Victory / Active / Fast / Strength
• Shoes / Shirts / Apparel / Equipment

Finally identify font. Typography for a business is almost as important or sometimes IS the logo design. Occasionally this phase comes AFTER the logo design, but if it’s easy to identify in the beginning then do so.

Check back in to read the next part of the series How to Design a Logo, which will cover the actual Logo Design. For more reading on logo design, check out How to design a logo by Jacob Cass.