Archive for the ‘examples’ Category

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.

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!

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.

For clients interested in a custom cms web design with a matching custom WordPress blog, you may want to review the Custom WordPress Theme Portfolio.

This flash gallery presentation features 10 unique and one-of-a-kind custom WordPress blog themes with graphics linked to actual blogs. The flash gallery is inserted here for reference, also.

Each example custom WordPress theme is an integrated custom blog with graphics and navigation to match the main cms content management system web design. Use your back button to return to this review of the WordPress theme portfolio. View the examples then email us from any page with questions.

The latest custom cms web design project just completed was a recruiting custom CMS and blog that went online earlier today for SynergyHire LLC of Atlanta, Georgia. The main site and matching blog allow the owner to add, edit, or delete content 24/7 without paying each time.

Here is a reduced size graphic screenshot of just one page:

Compare the main site to the matching Atlanta Recruiter custom WordPress theme used on their blog. As with all my designs, the custom integrated blog is a unique one-of-a-kind design for a consistent look moving between the main site and blog.

Other features to consider are the custom logo, clean layout, and special page with 12 audio players to demo their innovative automated candidate phone screen service. Upon review of the initial custom cms web design launch the owner commented “I give you two thumbs up… you did a GREAT job on this Jim!”.