Posts Tagged ‘examples’

I finally got around to a makeover of the first blog template I ever designed which seems overdue after being in custom web design full time since 2004 and doing websites more as a hobby since the mid-1990′s.

The screenshot here (smaller than actual size) is from the newly designed Growin’ Up in Maine personal blog where I tell stories of “Childhood Memories of Small Town Maine Life During the 1950′s and 60′s”.

While at it, I moved the blog from free hosting on Google’s Blogspot.com to a custom domain. Buying the custom domain through Google for $10 includes free hosting, so the old blog has a new template and home on a TLD top level domain.

The future cost to keep it online is $10 a year.

Originally the plan was to use the blog as a test site for offering custom blog design services, and the intent was to learn template design from the experiment then trash the blog.

To my utter surprise people my age in the boomer generation just loved the stories that brought back memories of their childhood. Based on the popularity and positive feedback I decided to keep the blog going.

The top header in the Blogger template design uses original photographs I took this summer in Maine for a widescreen view of the place we referred to as Down Back for 3 generations in the 1900′s.

Additional photos and video footage were used to create a YouTube video that you may want to view showing that special place including the old swimming hole Down Back on the Sebec River in Derby, Maine.

At times I’ve gone months without writing new stories, but that’s about to change after this makeover of the first blog I ever designed. Watch the video. Check out the new look of the Growin’ Up in Maine template and blog.

Bookmark the site or subscribe to the rss feed to read future stories about what it was like living life in a small Maine town.

Back by popular demand, readers may now download free custom business card artwork with the release of my free 2012 business card artwork download.

New BONUS! I’ve added 3 new colors for 2012, so besides the original grey marble, white granite, and plain white, take your choice of marble in pale green, light blue, or pink salmon for 6 versions of the free business card artwork.

Click on the graphic to the right for an enlarged (low-res) view of all 6 colors!

FREE ARTWORK LINK

Use this link for free 2012 business card artwork to download now. (zip folder, 2.9mb)

Artwork is enlarged 300 dpi high resolution in CMYK 4-color for at home or professional printing.

Unlike some free resources, you do not have to register or reveal your email address to enjoy another set of free business card calendar artwork to add to the back of your 2012 business card.

Questions or blog comments are welcome.

Take a moment to peek into the future with this Google+ social network video preview from the official Google YouTube account.

Google tried a social network type application called Wave that flopped to some extent and some think Google+ (pronounced as in Google-plus) will be a winner. From the video you’ll see that they overcome some of the pitfalls of the top social sites, Twitter and Facebook, by avoiding sharing too much information.

The idea of defining multiple circles of “friends” so that content you post may be selectively shared is excellent. I am personally amazed at the number of young people publicly trashing their boss, using profanity, or admitting facts that could come back to haunt them in a job interview later in life, or worse. Divorce attorneys already use social content to gain advantage for their clients.

I think the overall plan for Google+ is a winner and expect they will soon dominate online social interaction in ways we could only imagine a few short years ago.

The following web design tutorial demonstrates how to do a real estate website graphic edit to enhance a photograph of a Florida home to use in a new custom web design. As you view each part of the illustration concentrate on the lawn. The color of the lawn is all that changed.

The above photo collage shows the original photo (left) with a less than ideal lawn likely taken off-season because the grass is dull, not green. The after version (center) shows the identical photo with a lush, green lawn. The final graphic (right) shows the mask overlay used to create the perfect lawn effect.

How the enhanced web design illustration was done:

1) The dull lawn (left) was traced using vector graphics software to zoom in 500% and create a mask.
2) The mask was used to crop an overlay of very green grass from a photo of a perfect lawn.
3) The cropped overlay then had 20% transparency applied so the shadow of trees appear “on the lawn” for realism.

Use the help files of your vector graphics software to learn about masking and then try the advanced techniques in this real estate web design graphic tutorial.

The cropped graphic as shown below is from a memorabilia newsletter html design launched within the last week and shows the top portion of the March 2011 edition of the Memorabilia News Bulletin for web design client Mainstream Memorabilia.

Each edition consists of 3 sections including an intro plus opt out info, discount price specials info, and an insider’s view of the memorabilia industry. 3 celebrity photos of autographed memorabilia are used and cropped to fit the format to decorate each section.

Links are included to their website pages for home, specials, contact, and their blog. Additional links across the bottom allow for changing preferences or unsubscribing per CAN-SPAM Act requirements.

For those in web design who work to the latest code standards, learning newsletter design may be a shock because you cannot use all the latest techniques of xhtml and css for a wow first impression. Literally, you must use code and basic html tags from 15 years ago including tables for layout.

This I learned the hard way in the testing phase of the news bulletin design for Mainstream Memorabilia.

The layout for an email newsletter template design must be simple and rigid. The reason you almost have to unlearn how you code is tables for layout and basic html code from 15 years ago will display properly in the widest range of email programs.

A 600 pixel wide standard newsletter layout works best, plus it gives a full view in most preview panes of the majority of email software programs.

For me, and after hit and miss climbing the learning curve, the evidence was in actual results during testing. After a few disasters the final design has the wow factor we wanted despite any code limitations, and the client is very pleased with the look and technical functions.

Mainstream Memorabilia is owned by memorabilia industry insiders with years of past experience in film and television production. They have the contacts for providing quality, selection, and value in celebrity autographed items, so visit their custom online store website that I just happened to design.

While there, you may want to sign up and subscribe to the memorabilia news bulletins, too!

Part of having a WordPress platform to combine a blog format and custom cms web design is the flexibility to create content rich websites for a wide variety of business models.

When considering a suitable custom content management system for an online store, you may want to reference this list and 12 WordPress eCommerce plugin reviews.

Each is a summary of WordPress plugins suitable for running an online store except 1 which is designed to manage online auctions.

7 are free plugins and 5 are premium for sale by the developer.

User ratings are based on votes as of January 2011 on WordPress.org, and I have not yet tested or used any.

Plugins are listed in alphabetical order.

Dippsy User Rated: 3.5
Specialty: Digital Downloads
Author Description: An easy to use PayPal e-commerce solution with only downloadable goods in mind, hassle free installaton and many configurable settings.
Comments: Long list of features. Author is responsive to inquiries.

eShop User Rated: 4.5
Specialty: Products
Author Description: eShop is an accessible shopping cart plugin for WordPress, packed with various features.
Comments: Long list of features. Author is responsive to inquiries.

Image Store User Rated: 4.0
Specialty: Images
Author Description: Image Store(ImStore) is a image gallery and store plugin for WordPress with a slideshow and paypal integration.
Comments: Includes a feature for download after purchase. Author is responsive to inquiries.

PHPurchase User Rated: PAID (from $49)
Specialty: Products, Services, or Digital Downloads
Author Description: PHPurchase has a very rich set of features that lets you easily and powerfully manage your online store with WordPress.
Comments: Well documented online support. Multi-site and developer licenses available.

Shopp User Rated: PAID ($55 base and up)
Specialty: Products
Author Description: Shopp is an e-commerce plugin that adds a feature rich online store to your WordPress powered website or blog.
Comments: Necessary gateway and shipping options may add $50 or more to single (or multi developer) license.

ShopperPress User Rated: PAID ($79)
Specialty: Products, Services, or Digital Downloads
Author Description: This is the ideal solution for anyone starting their own online store selling their own products or services, affiliate products or even ebooks, music or file downloads!
Comments: Discounted from $199 to $79 for unlimited installations. Real Estate, Classifieds, others, too.

StorePress User Rated: PAID (from $50)
Specialty: Products
Author Description: StorePress is a premium WordPress theme, fully coded and packed with scripts that will allow you to transform your WordPress blog into a veritable e-commerce virtual store.
Comments: Single, mixed, or dev license plus offer other niche themes like auctions, classifieds, reviews.

WordPress Shopping Cart Plugin User Rated: PAID ($50 single, or dev $249)
Specialty: Products or Digital Downloads
Author Description: The WordPress Shopping Cart plugin gives you the ability to quickly and seamlessly integrate an online shop with a fully functional shopping cart interface into any WordPress website.
Comments: Excellent online support and documention, plus offer 12 other specialty e-commerce related plugins.

WordPress Simple Paypal Shopping Cart User Rated: 4.5
Specialty: Products
Author Description: Very easy to use Simple WordPress Paypal Shopping Cart Plugin. Great for selling products online in one click from your WordPress site.
Comments: Developer also has premium eStore plugin for digital products or eMember for membership sites.

WP Auctions User Rated: 3.0
Specialty: Auctions
Author Description: WP Auctions is a revolutionary plugin which allows you to host auctions on your blog or website and to sell anything.
Comments: Well documented. Free version is a sidebar widget only. Premium versions allow post/page auctions.

WP E-Commerce User Rated: 3.0
Specialty: Products, Services, or Digital Downloads
Author Description: WP e-Commerce is a free bolt-on shopping cart that lets customers buy your products, services and digital downloads online.
Comments: Excellent support documention, plus premium upgrades are available for downloadable, members, others.

wpStoreCart User Rated: 4.0
Specialty: Products or Digital Downloads
Author Description: Quickly and easily sell your physical and digital downloads using your new or existing WordPress website.
Comments: Well documented help files and forum, plus offer a $29 premium Pro version with bundled extended functions.

My advice is investigating each WordPress plugin that seems of interest. Most have links to demo stores or live websites that are using the plugin, so take the opportunity to do some comparison shopping before making a choice.

FireFox browser users may share online gems with a tweet on Twitter or post a message on Facebook while surfing the web as you share page content instantly. In addition you can quickly email links to the content via GMail, as well. The following graphic illustrates how the F1 FireFox extension may be used in Twitter, Facebook, and GMail.

The tiny “V on its side” icon (left) takes up very little real estate in your FireFox browser menu toolbar. While on a page of content you want to share select the “V” icon and choose from Facebook, Twitter, or GMail (center). Finally, insert a message and hit the share button (right) to instantly share the link.

The Facebook post will include a snapshot from the page, the Twitter tweet uses bit.ly shortened URLs to save characters, and the GMail option automatically inserts the URL into the message body. Download and then install the F1 social sharing FireFox extension or watch the video and begin using it now.

Consider the fear factor of buying online in your web design. People get ripped off by unscrupulous crooks who take your money without ever intending to fill an order. As a result, your website visitors will leave in an instant no matter how great the offer if they sense less than 100% confidence in your business.

Besides having an obvious offer and call to action in your web design you need to establish credibility as a business that people can trust. If your content interests a visitor they will look for evidence your business is real. That includes full disclosure of contact information to include name, email, phone, and an address.

A common web design mistake that hurts trust and credibility is using a postal box number.

Most internet thieves hide behind a P.O. box or have no address at all, yet a legitimate business may make the same choice without considering the consequences. You will increase your odds for success converting visitors to customers with a web design that includes a physical street address in your page footer or contact us page.

Don’t make this serious web design mistake. Establish credibility with full disclosure so people know you are for real, and then make it a habit to review site content regularly to improve offers and call to action.

Current web design changes in Google search engine result pages, and more specifically the color used for the background of sponsored ad results, are both interesting and ingenious. The ongoing changes to Google’s home page design are more than a whim for entertainment value, and deserve closer study from a web design and marketing perspective.

The screenshot below taken on 30 Sep 2008 as placed in the background of this collage is being compared to another taken today and almost 2 years later on 3 Sep 2010, and displayed towards the front. You have to be impressed with the web design colors and Google ingenuity as they experiment with the layout of search results year after year. Some web design and layout changes are subtle and hardly noticed yet could have a dramatic impact on effectiveness generating revenue.

Search results appear near the center and down the entire length of the page. Sponsored results are the first 1 to 3 listings and people pay for those slots based on key words or phrases whenever a person clicks and follows those links. The rest of the search results are organic meaning they are selected naturally according to Google algorithms to represent the best and most relevant in importance. Sponsored results have a contrasting color for the background while the natural results match the white on the rest of the page.

The illustration displays 3 graphics in the collage: 2008 search results for “custom cms web designers”, 2010 search results for the same phrase “custom cms web designers”, and a small color chart of the hex codes for the 3 colors used in the page background. Why the phrase: custom cms web designers? That phrase summarizes my job description in 4 words, stats tracking confirms Google sends me traffic for that phrase, and I happened to have that 2 year old screenshot saved to allow this comparison.

In the 2008 results the sponsored ads (A) have a #FFFADD background which is obviously high contrast in a medium shade of yellow (B) compared to the rest of the page #FFFFFF white background (C). The 2010 sponsored ads have a #FBF0FA very light pink background (D) which may appear almost white depending on the viewing angle of your pc monitor. Let’s consider how a near white background of sponsored ads could affect user behavior.

The top natural search results (E) after sponsored ads happen to be my website at #1 and #2 worldwide both years for custom cms web designers. Comparing 2008 to 2010 and from personal experience, I tend to skip past the paid sponsor ads to the first natural results because those get listed based on merit and relevance. On my pc the 2008 background contrast is very obvious yet on the 2010 results the sponsored and natural results all appear to blend in with the overall white background which may make it difficult to tell if there’s 1, 2, or 3 paid sponsor ads.

The “pink” became apparent as my lcd monitor was tilted back and reached approximately 40 degrees, and then very apparent at 45 degrees. Maybe it’s just me, but I keep my monitor angle closer to 15 degrees. If it looks white on your screen use the tilt test to see the actual pink, yet use care you don’t break anything! Notice the contrast of the yellow becomes even more obvious when tilting the monitor, as well.

Google revenue from sponsored ads doesn’t come from simply listing advertisers at the top of search pages. Ad revenue is generated when visitors actually click through to the advertiser’s website. Will the current background color of sponsored ads affect traffic to your website if listed in the top 10 of natural results? It may. If you know seo and your page titles and descriptions are more interesting than paid ads, it may not matter.

Regardless, the ongoing testing of color and layout of their results pages is a fine example of web design colors and Google ingenuity. They could be getting more clicks and revenue from their experiment, yet I wouldn’t be surprised if the background color of Google sponsored ad results changed again, soon, or often.

Footnote: For those skeptics who wonder about my advice for online success with your custom cms web design, note that the #2 result worldwide in 2010 above is the blog post published yesterday revealing the web design secret to online success: add original quality related content often. The concept obviously worked for me. One day after it was published that blog post is #2 worldwide on Google page one for a phrase very important to my core business!

Spice up your blog design with photo or graphic illustrations to enhance the look and value to readers. This blog illustration design tutorial shows how I did just that on my personal blog Growin’ Up in Maine on a recent blog post about a childhood story called First Plane Ride Ever.

Follow the link above to read the story and see the blog design illustration.

The finished Piper Cub plane illustration is shown larger than actual size as used on the blog post to make the tutorial easier for viewers to imagine how to combine elements into an illustration.

Here is the step by step plane illustration tutorial in 4 graphics marked A through D and explained below.

• Graphic A: Original Piper Cub photo from Wikimedia Commons prior to any crop or edit of markings
• Graphic B: Graphic elements including the plane cropped, text to be added, and alternate plane markings
• Graphic C: Crop of personal sky and fluffy cloud photo I took and chose as a replacement background
• Graphic D: Final illustration actual size 300×200 as used on the blog post for a more dramatic look

The original Piper Cub photo (A) was cropped to remove the background, and then (B) graphic elements for the illustration were created: plane (resized and different angle), text caption, and new plane markings “July 1957″. The photo (C) is an original that I took recently of a blue Florida sky and fluffy clouds used as a replacement background, and then (D) shows the finished illustration actual size. Edits were done using Xara Xtreme software.

The personal blog about Growin’ Up in Maine has over 100 childhood stories that feature a photo or graphic illustration on every post. While having a graphic for every post adds pressure to staying creative, even an interesting graphic on every other post is better than none. Perhaps this blog illustration design tutorial will help readers become inspired.