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

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

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

Is It Time to Redesign Your Website?

Thursday, March 25th, 2010

You may be wondering when a good time would be to redesign your existing website. What I hope to present here are some ideas and thoughts that will help you make that decision.

First off I want to say, changing a site just for the sake of change is not really to best approach for a redesign. Design requires a specific purpose in order to be successful. Understanding your current site will help you understand its function. If care is not taken you could lose that function in a site redesign.

One reason for a site redesign is if the site looks outdated. Perhaps you’ve been online for 10 years and have the same web design. Over the years there has been a lot of improvement in the way sites are delivered. You can take advantage of these technological advances. What you don’t want is to lose visitors because your site looks old fashion. An out dated look is a good reason to consider redesigning your site.

When redesigning a website think of it as doing plastic surgery. Your current website has an identity associated with it. This could be good it could bad. What you don’t want to do is change it so much that your current users don’t recognize it. You risk losing them because they think they landed on the wrong website. To help facilitate updates, the redesign should constantly improve by ‘nip and tuck’ in areas that need improvement. Most elements will probably remain consistent like your logo and even color scheme or type style. Drastic changes can have an adverse effect. Making small, subtle changes over time is the best approach.

Your site’s visitors are an excellent resource that will let you know if your site needs to be redesigned. Their feedback is helpful in making this decision. As users they will know what works and does not work. If they believe that you need to update the look they will tell you.  If they tell you a new look is warranted, that is a good indication that you need to do a site redesign.

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

Web Tip: Website Accessibility and Usability

Tuesday, March 23rd, 2010

In this article I am going to explore two area in web development.  The first is the concept of “Usability“.  The next idea will be “Accessibility

In the world of web development usability is a major issue.  By usability I am talking about testing websites to make sure that the visitor can quickly, easily and simply navigate a website.  This makes the user experience better.

The idea of Accessibility goes even further than usability in that its goal is to allow access for all people.

A little history

Nearly 1 out 5 individuals in America have some level of disability.  This translate to about 30 million people.  As the population grows older this number is expected to increase as there will be more and more senior citizens.  Do you know that in the past 10 years there was an increase of 25%.  Unfortunately, with age come physical changes.  Some of these can limit a persons ability to do things.  But keep in mind this is not the only segment of the population that suffers disabilities.  And there needs need to be met.

Making the Internet Accessible

The Internet has become an integral part our everyday lifestyle.  It allows us to do things unheard of a decade ago.  The web offers us ways to communicate.  We can obtain information on nearly every subject under the sun and beyond.  We now have social online gatherings.  The opportunities abound will limitless ways to engage cultural activities.  The list could go on.  But the sad reality is that the disabled are sometimes excluded from totally experiencing these benefits.  However there is hope in providing for standard of accessibility that will help these individuals.

Ways to Improve Accessibility

Here is a list of ideas from the Web Content Web Content Accessibility Guidelines 1.0 that was created by the Web Accessibility Initiative of W3C.  These are way to increase the accessibility of web content.

1. Provide alternatives to audio-visual content

Not all people will be able to use different kinds of content. These people may be disabled or may have a lower version of Internet browsers. Movies, sound clips, animations and other contents should be translated into text alternatives so as to provide information to the broadest range of viewers.

2. Developers shouldn’t rely on color alone

Many people are impaired in color differentiation. Developers shouldn’t rely too much on the use of colors to relay information in the websites. Charts that are color-coded should be modified and the background and foreground colors of the websites should have enough contrast to enable people with color differentiation impairment to easily navigate the site.

3. Clarification of the use of natural language

Content developers usually mark up the changes in natural language in their websites. They should be able to identify the dominant language that is used in the site so as to avoid confusion.

4. Control of content changes that are time-sensitive

This issue particularly involves people who have visual or cognitive impairments and those who are not able to read texts that are moving quickly. Movement is seen as an over-all enhancer to the look of the site, but it may pose some problems to people with cognitive impairments.

5. Accessibility of user interfaces that are embedded

Objects that posses their own interfaces should be made accessible, and alternative solutions must be provided if this is not possible.

6. Provision of orientation and context information

The provision of information on how the objects are organized is important to provide people with guidance on how to access information.

This is by no means a comprehensive list but they are some practical tips to make a website more usable.  Careful consideration needs to be taken to make sure that Accessibility is included in the design process and that viable alternatives be provided.

Benefits

There are many benefits to improving accessibility of websites.  These benefit not only help those with disabilities but also improve the entire web community.  Businesses, Service Companies, Organizations and you as well will benefit.

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

Web Tip: Why You Need a Good Website Design

Thursday, March 18th, 2010

The center of your online business is your website.  It represents your company’s image virtually.  This image provides your prospect, clients and users an opportunity to interact with you even though they cannot visit or see you in person.  Still, people will judge you by what they see and experience.  That is why good web design is important to your online success.

Let’s say you are operating a physical offline organization.  Within your organization you have a staff of sales personnel.  How would you want them to appear to the client?  Most likely you will want them to look their best.  You would want their appearance to be clean, shaved, hair neat, with nice business attire.  This tells your prospects and clients that you care about quality.  You want to make a good first impression.

Let’s now look at your website.  If your site look shabby and was put together by an amateur, you are communicating to your visitors you are not professional and and don’t care for excellence.

On the other hand, if your website is organized in a professional manner, you are communicating to your visitor that you care.  You tell them that you pay attention to the detail.  A well designed website shows that you are serious about business.

Your business image should be consistent.  That means that your website should reflect the image of your business cards, letterheads, brochures.  The idea is to emphasis your image in a positive manner.  Your business image is the “face” that people remember therefore much consideration is required to insure that you have a good web design.

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

Web Tip: Ways To Improve Sales Through Your Website

Tuesday, March 16th, 2010

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