Archive for the ‘Web Design’ Category

Web Site – Solutions Directed Coaching – Design Process

Friday, February 25th, 2011

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

Technorati Tags: , , , , , , ,

New Website – Questions

Thursday, September 16th, 2010

Questions the Book Website Layout

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

Technorati Tags: , , , , , ,

Kingdom Presenters – New Website

Friday, April 2nd, 2010

Project Description

This web site is for a ministry that assists people in sharing their faith.  Specifically, they teach presentation skills.   Individuals will learn how to present their unique message to small, medium and large groups.  This ministry is headed by Mary Ann Mariani.  The web site is a place where visitors can learn about various workshops that are available to help them with presentation skills.

Design Process

For this project I wanted to learn as much as I could about the organization and what their goals were.  I needed to get an understanding of what Kingdom Presenters wanted the user to experience.  In the beginning phase the goal was to provide information about Kingdom Presenters and to provide credentials and principals of the organization.   Also in this process it was important to get an understanding of the visual elements that would augment the message.

Graphic Design

With an understanding of the organization I started to create the Kingdom Presenters logo.  The idea was to show the kingship of God.  The elements of the heraldic shield with wings, banner and crown was selected.  The color theme would be Gold and Purple both very royal colors.

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

Building the Site

Upon approval by Kingdom Presenters it was now time to develop the website.  First, the graphic image was spliced in Photoshop.  Each graphic element was them placed on in the HTML and was positioned using CSS to create a master template from which all the pages would be build.  Creating the master template helps in developing as site and keep pages consistent.  Once the master template was created I could now develop the navigation.  In order to create the navigation a site map that show each page and its relationship to adjoining pages was needed. Some of the pages decided on were these:

  • Home Page
  • My Story
  • Workshop
  • Workshop Descriptions
  • Registration
  • Date
  • Reviews
  • Contact
  • 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.

You can visit this site at http://www.kingdompresenters.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 Ecommerce
  • 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

Technorati Tags: , , , , , , ,