Web Design - The Creative Process

From an article by Tim O'Reilly at oreilly.com

This code <b>This is bold text</b> produces this This is bold text

From a definition at Wikipedia.org

Web Standards.org

Web Standards Group

A List Apart - By Web Standards Guru, Jeffrey Zeldman

Planning Your Site's Design

We are writing the content on this page as a guide to understanding the basic concepts of Website design. It is not intended to be an in depth study of the creation process since each genre and each individual Website demands distinct techniques, from design - to layout - to navigation and to back-end technologies.

There is one common thread however, and that is, to follow a series of planning steps before even one pixel is loaded to the live Web. Following such a procedure greatly increases the chances of online success.

Whether you're building your own personal site for family and friends, building your company's online presence, or working with a design agency, you are better equiped if you have a basic knowledge of the process.

First thing to do is to clear your mind of "the bottom line". What do we mean by that? We've all visited a Website that hypes up there product or services to the point where their credibility is questioned by its visitors. These days consumers simply get turned off and leave.

Don't sell your goals - communicate to the visitor the benefits of your services and products. Address the goals of your site's visitors by sharing with them the information they need to satisfy their purpose in visiting your site. They came there for a reason and that is their goal, their purpose and not yours. Provide solid advice, details, benefits and guide your visitors to the locations on your site that will cause them to take some sort of action that will provide an opportunity to build a relationship with him or her. Whatever action your visitor took be sure to follow up with a professional no-pressure response and invite them to call for more information or take a similar response action. When you motivate the buyer properly they will help you accomplish your visions by purchasing your products or service.

Focus on making your site customer centric with an eye to business continuity. Consider what services you can provide for your customers and visitors that will help them accomplish tasks, contribute their intelligence and provide top-notch support.

A site's home page is where the majority of visitors will first see its content. Is it a refreshing oasis with all the essentials in plain site or is it more like landing on the dark and evil Planet of the Apes?

You have less than 15 seconds to make a positive impression; after that people leave and will probably never return. Here is a list of essentials for your Website's Home Page:

1. Brand your site with a professional logo and tagline that quickly indentifies to the visitor that you have what they need.
2. Write a clear and concise benefit statement that speaks to how your service or product will help solve the visitors needs.
3. Stay away from marketing hype ("We are the best in the world", "Our software crunches the competition", "You will earn more than 2 million dollars in the first six months", etc, etc) and leave the buzzwords (aka - "Techno-Babble") to those that understand them.
4. Build "calls to action" into your Webpage. Examples: More information, sign up for our newsletter, RSS feeds, a free service or download.
5. Your primary call to action will be to get people to view your order page and that should be done in a low pressure manner. Providing a free trial (if possible) or a solid product or service warranty is a great way to engage your visitor and if you treat him/her right you have a much better chance of turning them from potential customer to a solid client.
6. Build an easy to use navigation system. Your site should take the guesswork out of finding information.
7. Provide a sitemap - for visitors and for the search engines
8. The contact page and the about page are of great importance. People want to know who you are, where you are and how to contact you. A Website with just an email address and nothing more does nothing to build trust and credibility. These pages should be clearly linked on each page of any site

Once you've considered the information above (and many more) it's time to think about site layout. Before you select colors, technologies, fonts and styles think about making your site do what your site visitors expect. Perhaps, in this situation, pictures will speak louder than words. Navigate the Websites listed below and pay particular attention to the layout and how it works to direct the visitor to essential areas. Apply these ideas to your own site, making sure you mantain a uniqueness and persona that best fits you and your company.

MailChimp

ProBlogger

Expression engine

Net Basics

Allowing users to navigate your site easily without endless page scanning is essential. Place items such as your privacy policy, copyright notices, terms and conditions, sitemaps and the like at the bottom of the page where people are used to seeing them. Be sure your important navigation is near the top of the page (above the fold - meaning in the viewable user screen without having to scroll); this again is where people expect to see them.

Keep your site's navigation positioned exactly the same thoughout your site otherwise viewers will become frustrated and will simply become blind to your content.

Most of us have viewed movie storyboards; they are simply a graphical representation of scenes and how they should play out. We can and should storyboard our Websites.

A superb way to make sure all the information, navigation and services on your Website flow nicely and are easy to use, is to storyboard your Web site. Storyboarding allows you to see what information goes where and how that page will flow with the other pages on the site. The best place to start is with your homepage as it's most probably the first page people will see when they find your site; and without question must make a good impression.

We have included a Storyboard Template that will give you an idea of how to use a Storyboard to plan your site. You can right click on the image and save it to your PC or MAC.

You can also use the great service at My.Lovelycharts.com to build a nifty looking Storyboard.

The information presented on this page is intended merely as a primer - to help you set your sails
 in the right direction. There is, of course, much more to the complete process of site design and planning. 
You must decide on colors, fonts, look and feel, services and much more. The more you know - knowledge
 really is power - the better equiped you will be to realize your Internet dreams.

Should you build your own Website?

Most mid-sized to large companies outsource their Website Design and Development work. Why? Time and cost. They want to focus on their core business and simply do what they do best.

For an individual or a small business the motivation might be different. Perhaps the budget simply is not there and how to get a functional, quality Website becomes a dilemma.

This decision rests on several factors - your site requirements (eCommerce, blogs, forms , databases), your budget, your skill level, and, perhaps most importantly, whether you have the time. Saving $2-3,000 may end up costing much more if the site does not pass the toughest of all litmus tests - the one administered by your site's visitors.

Next Step - Click Here to view "Now What?"

One of the biggest mistakes many site designers make is their failure to include SEO (Search Engine Optimization) as part of the site. So what we discuss on this page really doesn't fit into Web Design but SEO and other items presented on this page are of critical importance.

Your Web Designer will do great work for you in color selections, graphics such as navigation buttons and site layout but for the rest you'll need someone who knows SEO and SEM (Search Engine Marketing). Later a Web Developer makes his/her way into the picture.

Search Engine Optimization should be built into your site's coding from the very beginning. This will give you a jump start and will help get you better results in the SERPS (search engine results pages). Search engines like Google will find your site not long after you post it to the live Web - you don't have to worry about submitting it, their Bot (named GoogleBot) will find you. In fact, you're better off not to submit your site to Google through their submission page or any other submission service.

If GoogleBot comes to your newly posted site and you have little or no SEO at all, then you have little chance of showing up anywhere close to the top of the SERPS. Consider the fact that Google simply does not reward new sites with high results rankings and the importance of having a properly optimized site is even of greater significance.

Here's a list of a few of the necessities of SEO:

1. Your site's code needs to validate in compliance with acceptable Web standards. This is important because corrupted code could break the search engine's bot and prevent it from properly indexing your site.
2. You need to do keyword research so you can place keywords and phrases within your site's content.
3. Your content needs to be well written so it reads normally and not as if it was stylized just for the search engines
4. You'll need a Google Site Map to tell Google where your content is and what you want it to do with it
5. You must make sure that your site complies with Google's and other search engines guidelines. Search spamming could get you banned
6. Effective SEO involves dozens of different variables that should be analyzed and applied in a strategic process. It is therefore an ongoing task and is characterized and defined by the constant changes that the major search engines are making to optimize search results for their users. What was important a week, a month or a year ago can be easily minimized by new search technologies or Web site evolution; consider the impact of sites such as Tweeter^tm, Facebook^tm and other social media sites; the importance of blogging; developing strong one-way back links and much more. Today a more holistic approach is needed when it comes to online marketing

The process of marketing a Website on search engines, submitting your site to the search engines and directories for organic listings, pay per inclusion, pay per click, banner ads, Google Adwords or any other marketing programs offered by search engines.

With Google AdWords, you can create and run ads for your business, quickly and simply. Run your ads on Google and our advertising network -- no matter what your budget, you'll only pay when people click your ads.

AdWords ads are displayed along with search results when someone searches Google using one of your keywords. That way, you'll be advertising to an audience that's already interested in your business. You can also choose to display your ads on content sites in the growing Google Network. And, you can choose the exact content placements where you'd like your ad to appear, or you can let contextual targeting match your keywords to content.

You can choose from a variety of ad formats, including text, image, and video ads, and easily track your ad performance using the reports available in your account.

There's no minimum monthly charge with AdWords -- just a nominal activation fee. Learn more about the cost of advertising with Google AdWords.

To find out more about Google AdWords or to begin creating your ads, visit the AdWords home page.

The above (in red type) is right from the source - The Google Adwords Page.

Today there are many that believe that "Online" is the real world. Well, whatever you may believe, the fact is that the real world still exists and it stands as an integral part of the Internet; afterall didn't real world characters develop the Internet to start with? Having said that, there are many ways to market your website to the "real world".

• Yellow Pages - Yes, people actually still use it and if you're business offers consumer products or services, you should too!
• Flyers, Direct Mail - Google^tm sends us direct mail on a monthly basis offering discounts on their Adwords services. We see flyers from many small to mid-sized businesses on a regular basis.
• Business Cards - Hand out your business card to people you meet; you might be surprised at how many will show interest.
• TV, Magazines, Newspapers - Local or nationwide, people still read.
• Direct Calling - Visit a handful of local businesses each week that may need your products or services. It takes only a few minutes to market yourself and your services and provide them with a link to your website.

Of course, there are more methods available to market your services to the real world and you can surely find them and use them. It's an open area that many have abandoned and one that you can definitely work to your advantage.

Next Step - Click Here to view "Under The Hood"

Looking Great ! But What's Under the Hood?

Awesome looking automobile, isn't it? Attracts attention and is certainly true eye-candy. These days, as compared to the 90's and early 2000's, there are plenty of great looking Websites out there. Today we have so many great tools available that make turning a Website into a work of art possible for those who know how to use them.

One just hopes that what's under the hood of that sleek looking Jaguar will make it roar and humm exactly as expected. When it comes to a Website what's under the hood and not visible to the site visitor is the coding and programming that deliver the user functions that add value to its use.

In our definition this constitutes the Web Development process.

For the purposes of this discussion we are going to address this subject in a very general manner. We will list some of the programming languages out there and how they are utilized; and will speak briefly about coding. We are not going to get into specifics as that goes well beyond the scope og just one page. We suggest you research and you can find out more about programs and coding that we list herein.

Web Development is a rapidly expanding industry as campanies rush to bring the products and services online. In January of 2008 there were more than 365,000 web Developers employed in the USA and Canada alone.

For those reading this that have a project in mind, feel free to contact us for any questions or advice you may need.

Next Step? Some Pricing Estimates

The Expectations of Project Costs are drastically different.....

The expectations of project costs can, and usually are, drastically different between the client and the Web Development Team. So how much should a Website really cost? The answer is almost directly proportional to the Website itself.

DIY - The Personal Website

By Sonny Origitano, VP Advisory Services, PSC Group, LLC


Once upon a time there was a steam generating plant that was not producing much steam. After a
 frustrating search for the cause, the plant manager, in desperation, called in an expert.  After only two
 hours on site, the expert found the problem and placed "X's" on two pipes that were causing the problem,
 saying that they had to be removed.


When presented with the bill, the plant manager asked the consultant how he could charge $5000 for only
 two hours of work.  When he asked for an itemized bill, this is what he got:

    
Placing "X's" on two pipes                     $  400
    
Knowing where to place the "X's"        $  4600

Total amount due                                                  $5000



The plant manager got what he paid for and probably a lot more.  He had already used up more than that
 amount on his own staff not to mention the loss in revenue while the plant was shut down.  For him,
 securing the advisory services of a consultant was the right thing to do.  It was a matter of make versus
 buy.  He could have funded his own internal staff but chose to "buy" outside advice.  In today's business
 climate, particularily for mid-sized enterprises, advisory services for many of us makes good business
 sense.