John Pape Online Blog

Project Description

This is a website for a business coach that helps financial advisors and attorneys.  What Solutions Directed Coaching does is help individuals grow their business and improve their personal life.  The website was created to introduce the services that are available to the client.  The owner of the company is Thomas Fuchs.  Site visitors can learn more about the ways Thomas can help them grow there business through various coaching programs.

Design Process

In the beginning I spoke with Thomas regarding the primary goal of the site.  I also requested that he provide some sample sites that he liked.  We also looked at web sites from others in the industry to see what they were doing.  After looking at the sites and the competition, I set out to create the graphic layout.  Also for this project I decided to build it using WordPress.  By doing this I allowed the client to create the primary content.

Graphic Design

As this is a newly formed business there weren’t any  graphic assets to work with.  Therefore I needed to start from scratch.   Using the ideas and concepts collected in the initial phase of the project I designed a layout.  During the process the idea of being global kept coming up.  As you can see the main heading is a map of the world to indicate the global aspect of the company.

As I mentioned before there were no assets to work with so I also designed a logo for the company.

Because the site was built using WordPress, I knew that certain areas of the site would require certain design features. Even so, it seems like 80% of  WordPress site use a horizontal menu.  The layout that the client liked had a vertical sidebar navigation menu.

All of the site layout was done in Photoshop with some elements built in Illustrator. Several variations of the design were created and the best solution was selected.

Building the Site

Once the design was approved, it was time to built  the site.   WordPress was installed and now I needed to modify it to match the design.  For the Theme I started with Thematic.  This gave me a starting point and I built it from there.  During this project I learned that it is best policy to leave the main theme alone as much a possible and modify it using what is called Child themes.  Child themes basically modify the main theme.  In some ways it is like using layers in Photoshop.

One thing that make this a distinct WordPress site is it has a vertical navigation in the side bar.  I happen to like side menus because they can expand as more or less items are placed in the navigation.  The menu was styled using CSS.  Also I used the new 3.0 menu function.  This made it easy to add only those pages that we wanted in the navigation.  Here was the final navigation at the time of publication.

• Home Page
• About the Coach
• Coaching for Financial Advisors
• Coaching for Attorneys
• Program Options
• Guarantee
• Contact
• Blog

One great feature of WordPress it the ability to add functionality through plugins.  There is a great community of contributors and you can find almost anything you want.  Here are some of the plugins used

• All in One SEO Pack – Make page optimization easier.
• Audio player – Allows easy installation of MP3 audios
• Blogger Importer – Previously Thomas had a Blogger account.  This plugin made it extremely easy to import all of those posts into WordPress.
• Contact Form 7 – This plugin allow for custom forms
• Easy Sign Up – Use for lead generation
• Google Analyticator – Add Google Analytics  code and allows for custom attributes to be added
• Google XML Sitemaps – Helps the site get indexed in Google, Bing and Yahoo
• Smart Youtube – Really easy way to embed videos into posts or pages
• Subpage Listing – Needed this to keep track of subpages, especially because I used to WordPress menu
• Enhanced Paypal Shortcodes – Allow the addition of Paypal buttons

I decided the build the site in WordPress because I knew it could be build quickly and economically.

You can visit this site at Solutions Directed Coaching to learn more about this organization.

Need A Web Site?

Custom Web Design for Small Businesses by professional and experienced web designer and developer.

Here is what I can do for you…

• Innovative Web Design
• Graphic Design Logos
• Maintain Your Website
• Data Driven Content
• Flash Applications
• Build Shopping Carts for E-commerce
• Custom PHP Applications and Programming
• WordPress Installation & Customization

Get an affordable, attractive great website today. Hire John Pape Web Designer For Your Web Design Solution. View my portfolio at http://portfolio.mediatunes.com – 619-593-9483

Project Description

This is a website for an author who is self-publishing his book.  He needed a website to help promote and sell the book.  The book is written by Tim W. Turner.  The web site is a place where visitors can learn the book and other item available as well as request Author Visits

Design Process

For this project I got an advanced copy of the book in PDF format.  By browsing through the book I was able to get an understanding of the content as well as the general look and feel of the book.   I was able to design the layout using graphic elements and page layouts to develop the basic web layout.  I was also in communication with the client to get information regarding what they wanted to website to do.

Graphic Design

A logo was provided by the client.  It is basically a question mark.  It was important to include this in the design.

The next point of action was to create an effective web layout that was clean and easy to navigate.  From here Photoshop and Illustrator was opened and began to create the basic layout. Several ideas were created and the best solution was selected.

Building the Site

One the design was approved it was time to built out the site.  For the images, I spliced the Photoshop image to get the header, footer, navigation and page background images.  Using CSS I put together the page elements and place each image as a background for each area.

• Home Page
• About the Author
• Authors Visits
• Questions Stuff (Ordering)
• Contact the Author
• Site Map
• Privacy Policy
• Terms of Use

Because the site has under 20 pages it was build on a static rather than a dynamic platform. A site with under 20 pages can be easily managed without a CMS. However as the site grows it can be converted to a dynamic site that utilizes some kind of CMS.  PHP was used for the form submissions and JQuery was used for form validation.  Once all the pages were created and link through the Navigation system it was time to upload and test the site.

For common elements like the header, footer and navigation.  I stripped the HTML code and created separate files that can be included using PHP.  The primary reason for doing this is the ease of maintenance.  By including the files there is only one file to change or edit rather than going through all the pages.  Make life easier.

The client wanted to have scrolling review and testimonials this was accomplished by using  jQuery. This made for quick and easy implementation of the scrolling function.

You can visit this site at http://www.questionsthebook.com/ to learn more about this organization.

Need A Web Site?

Custom Web Design for Small Businesses by professional and experienced web designer and developer.

Here is what I can do for you…

• Innovative Web Design
• Graphic Design Logos
• Maintain Your Website
• Data Driven Content
• Flash Applications
• Build Shopping Carts for E-commerce
• Custom PHP Applications and Programming
• WordPress Installation & Customization

Get an affordable, attractive great website today. Hire John Pape Web Designer For Your Web Design Solution. View my portfolio at http://portfolio.mediatunes.com – 619-593-9483

Anyone who has been marketing online knows that the lifeblood of a business is the traffic of a site. More visitors equal more sales. However, here are some ways that you can tweak your sites with to improve sales without the need to get more visitors.

The first method is to weave in your personal touch in your sales message. Nobody wants to be sold to by a total stranger, but many people will buy what their close friends recommend to them. If you can convince your audience that you are a personal friend who has their best interest at heart, they will be convinced to buy your products. Remember to speak to an individual in your salesletter, not to your whole audience.

The second method is to publish testimonials and comments from your customers. A good idea would be to publish both good and bad comments; that way prospects will be really convinced that these testimonials are real. When prospects see testimonials on your website, they will have the confidence to buy from you because human beings follow the herd mentality; when others have bought and proven it authentic, they will jump on the bandwagon and buy too.

Use visual representations for the problems and solutions that your product offers. Not everyone will read your text copy from the head to the tail, but most people will pay attention to images on your website.

Offer quality bonuses to accompany the product. When you offer bonuses that complement your product, your prospects will feel it’s a very good deal and it would be stupid to miss it. Be sure to state the monetary value of your bonuses so that people will be even more compelled to grab your good bargain.

Lastly, ask for the sale! Many people entice their prospects with the benefits of their product, sell to them with stories of how it has solved many problems, even offered killer bonuses but forget to ask for the sale. Give a clear instruction on how to buy your product (e.g. “click the button to buy now!”).

Need A Web Site?

Custom Web Design for Small Businesses by professional and experienced web designer and developer.

Here is what I can do for you…

• Innovative Web Design
• Graphic Design Logos
• Maintain Your Website
• Data Driven Content
• Flash Applications
• Build Shopping Carts for Ecommerce
• Custom PHP Applications and Programming
• WordPress Installation & Customization

Get an affordable, attractive great website today. Hire Me For Your Web Design Solution. View my portfolio at http://portfolio.mediatunes.com

Today I want to explore the element of design.  Design is an art and is subjective to the tastes of the individual that experiences the design.  To put this concept into perspective I will present this scenario.  Imaging you are going to but a T-Shirt.  What do you look for?  For most of us we will look for a design that works for us.  So we can conclude that design is a key aspect in our decision.

One of the best ways to look a problem is to look at it from another person’s point of view.  To do this I will present two different situation to help you understand this concept.

Site 1:

Bob is shown a website.  This website has good design features, amazing images, good choice of color.  All the images are relevant to the content.  The choice of font are easy to read.

Site 2 :

Next, Bob is shown another website.  This website features gross and ugly images.  The resolution is out of whack.  The images have nothing to do with the content.  The color scheme looks like it came out of a blender.  There are no less than 10 font styles used on the page.  Each page has a different layout.

Observation:

Looking these two sites from Bob perspective might go something like this:

Bob really likes Site 1 a lot.   He is impressed with the artwork and design.  He found it easy to navigation.  It was as though the design enhances the content.  Bob, enjoyed the site so much he stayed a while, learned many new things and even came back.

As for Site B Bob could hardly wait to leave the site. Visually it gave him a migraine.  There was now way he would ever want to return.  It was so bad that he even removed from his browser history. Now that’s bad.  The worst thing Bob did not fell comfortable, was distracted and was disappointed.  Not very welcoming was it?

Analysis:

Like it or not most people DO judge on first impression.  In these two cases the impression ranged from good to bad.

Often our ego gets in the way of good design.  The primary thing to take away is to plan your websites carefully.  Get feedback for others and get their perspective.  Remember, everyone is different.  Keep in mind design is subject to interpretation.  The goal is to create a favorable impression the first time.

Need A Web Site?

Custom Web Design for Small Businesses by professional and experienced web designer and developer.

Here is what I can do for you…

• Innovative Web Design
• Graphic Design Logos
• Maintain Your Website
• Data Driven Content
• Flash Applications
• Build Shopping Carts for Ecommerce
• Custom PHP Applications and Programming
• WordPress Installation & Customization

Get an affordable, attractive great website today. Hire Me For Your Web Design Solution. View my portfolio at http://portfolio.mediatunes.com

The Internet is built on connections. These connections bridge one computer to many others.  As a result we can access an abundance of information quickly and easily.

To get around the Internet we click on links.  Now think of these link in the same way the synapses of the brain are formed.

With website design one of the most important feature that is required is a way to link from one page to another.  Having a dead link is like crashing into a brick wall.  It stops you in your tracks.

As a web designer I make it a point to include a link on nearly every page I design.  These links are important.  If there were no links there would be no other place to go and get additional information.

A website had different kinds of links.  There are unspoken standards of design that should be followed for better usability.  Messing with these convention can have a negative effect on the user.  And as a designer I don’t want to see that.  Understanding the rules of convention that need to be followed is the first step in understanding.

When you look a typical website you can imagine it is like a book.  A book holds several pages.  These pages are often categorized in chapters.  A web page can be likened to pages of a book.

The two types of links: Internal and External

Let’s begin with Internal links.  These are the links that join content within your website.  If we look at the book example.  The Index or the Table of Contents of a book contain internal links that connects a page to another page in the same book.   On a website Internal links connect pages to other pages in the same website.  This allows a visitor to access the about us page from the home page though an internal link.

The other type of  link is the External link.  This link will move you from the current site you are on to another site.  In the book example this would be similar to a citation or reference.

Layout Conventions

Over time more users and website are added and certain assumption about the location of certain links.

One of the most common location for internal links is either horizontally across the top or vertically along the left margin of the page.  In nearly every case this will be the main navigation to the website.  Designer thought these area to be the most natural position for this grouping on links.  As a result these area are prominent in graphic design of the page.

You will also find internal links toward the bottom of the page.  This area is called the page footer.  Here you will find links of secondary importance or are more informational.

Within the body of the content you will usually find External link.  There are no set rules for this it is just a convention that has come out out common use.  The location of the link could be within the body text or as a reference note at the end of the content.

Keep in mind these ideas are only convention and not set in stone rules.  Designer have a lot of freedom to adjust the layout.  These variations can make surfing the web more intersting.  The important thing to remember is to not confuse of alienate your visitor.

Need A Web Site?

Custom Web Design for Small Businesses by professional and experienced web designer and developer.

Here is what I can do for you…

• Innovative Web Design
• Graphic Design Logos
• Maintain Your Website
• Data Driven Content
• Flash Applications
• Build Shopping Carts for Ecommerce
• Custom PHP Applications and Programming
• WordPress Installation & Customization

Get an affordable, attractive great website today. Hire Me For Your Web Design Solution. View my portfolio at http://portfolio.mediatunes.com

Your website is where your business resides — it’s like the headquarter of an offline company. Hence, it is important to practice good design principles to make sure your site reaches out to the maximum number of visitors and sells to as many people as possible.

Make sure you have clear directions on the navigation of your website. The navigation menu should be uncluttered and concise so that visitors know how to navigate around your website without confusion.

Reduce the number of images on your website. They make your site load very slowly and more often than not they are very unnecessary. If you think any image is essential on your site, make sure you optimize them using image editing programs so that they have a minimum file size.

Keep your text paragraphs at a reasonable length. If a paragraph is too long, you should split it into seperate paragraphs so that the text blocks will not be too big. This is important because a block of text that is too large will deter visitors from reading your content.

Make sure your website complies to web standards at www.w3.org and make sure they are cross-browser compatible. If your website looks great in Internet Explorer but breaks horribly in Firefox and Opera, you will lose out on a lot of prospective visitors.

Avoid using scripting languages on your site unless it is absolutely necessary. Use scripting languages to handle or manipulate data, not to create visual effects on your website. Heavy scripts will slow down the loading time of your site and even crash some browsers. Also, scripts are not supported across all browsers, so some visitors might miss important information because of that.

Use CSS to style your page content because they save a lot of work by styling all elements on your website in one go.

Need A Web Site?

Custom Web Design for Small Businesses by professional and experienced web designer and developer.

Here is what I can do for you…

• Innovative Web Design
• Graphic Design Logos
• Maintain Your Website
• Data Driven Content
• Flash Applications
• Build Shopping Carts for Ecommerce
• Custom PHP Applications and Programming
• WordPress Installation & Customization

Get an affordable, attractive great website today. Hire Me For Your Web Design Solution. View my portfolio at http://portfolio.mediatunes.com

I recently updated the look and feel of the Silent Voices website.  Here is a brief description of the organization:

Silent Voices is a ministry that provides services to women struggling with pregnancy and abortion related issues. Silent Voices provides care to pregnant women, single mothers and their children, as well as to women who had already had an abortion.  They offer pregnancy tests, abortion/pregnancy education, emotional, physical and spiritual support and post abortion support groups. While Silent Voices firmly believes in and advocates the sanctity of human life, all of our clients know that they are loved and accepted no matter what their situations, backgrounds or choices.

Here is a screen shot of the website before.

Silent Voices Web Layout Before

Sharon, the director of Silent Voices contacted me and wanted to get a fresh new look.  The layout was created several years ago she wanted to move away from the pink and blue theme.  As we we discussed the changes, she indicated that she would like to have brighter colors, more of a springtime feel to the site.  She felt that it would be more inviting.  It was at this point that I put my creative juices to work.  One thing that did help was she did provide me with examples of websites that she liked.  This is always helpful as a starting point.  I proceeded with creating three mockups in Photoshop for her and the board members to view.  Once we nailed down a design, I was able to further refine the design with additional revisions.  Finally, we had a new layout design had here is a screen shot of the final version.

Silent Voices Website Layout After

The conversion

For this project, my job was to create a new look to the website.  The existing content is the same.  I did add a couple of additional pages but nothing major. The old site also had a “splash page” and that was eliminated.   The previous site was built on a table style layout.  The new layout would be based on a tableless CSS design.  For many of my projects lately I’ve been using the Blueprint CSS framework as a starting point for my designs.  It is a good idea to have this in mind when creating the layout.  Blueprint does have a PSD with the Grids to help with the design layout.  The Silent Voices layout is 950px wide with 2 columns based on the 1/3 divisions.  The left column is 1/3 and main content is 2/3.  Blueprint makes it simple to make these divisions in the CSS.

The website is hosted on a Windows based server.  And all of the existing pages are static html.  The orginal site was created in Dreamweaver using the Template function.  Using Templates in Dreamweaver made the conversion of each of the html files very easy.  I don’t use this very often, but when I started maintaining the site I needed to learn how to use the templates.  What I did for this site was update the main.dwt file to the new layout and then convert the files.  It was quick and easy.

I’ve also started using  jQuery recently.  This is a javascript framework that is used to create some amazing effects.   There is a slide show that uses this technology and was easy to implement.

When the site was approved, I backed up all of the old files.  It is always a smart thing to backup when making a conversion.  Just in case there is a problem and you need to revert back to the old design.  Of course this was not the case.  The conversion when quite smoothly.  I only had to make a few very minor adjustments.

You can view the site at http://www.silentvoices.org/ And finally, if you have an idea for a website that you want designed and developed please contact me.  I am available to help you with your online presence.

rwjbd5ixpe