John Pape Online Blog » Web Design

Kingdom Presenters – New Website

johnpape — Fri, 02 Apr 2010 14:00:24 +0000

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.

Technorati Tags: css, design process, HTML, HTML web development, jquery, Kingdom Presenters, PHP, Web Design

Is It Time to Redesign Your Website?

johnpape — Thu, 25 Mar 2010 17:09:34 +0000

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.

Technorati Tags: Web Design

Web Tip: Website Accessibility and Usability

johnpape — Tue, 23 Mar 2010 18:53:10 +0000

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.

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.

Technorati Tags: accessibility, information technology, usability, Web Design

Web Tip: Why You Need a Good Website Design

johnpape — Thu, 18 Mar 2010 18:27:10 +0000

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.

Technorati Tags: accessibility, Web Design

Web Tip: Ways To Improve Sales Through Your Website

johnpape — Tue, 16 Mar 2010 18:50:29 +0000

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!”).

Technorati Tags: ecommerce, selling online, Web Design, Web Development

Web Tip: Use Graphics Wisely to Improve Website Usability

johnpape — Thu, 11 Mar 2010 18:44:25 +0000

Design is one of the defining element that attract Internet user to your a site. A major deterrent that keeps someone for staying on a site is the lack of appealing graphics. The challenge for a Web Designer is the create a site that not only is attractive to the user but to keep them interested as well

Just putting graphics on a website isn’t the only factor to consider. Graphic must be used correctly. If the graphic cause the user to turn away because they are just plain bad or they are overwhelmed that’s not good at all.

It is important to have an attractive design. It it the choice of design that needs consideration. And the main consideration to be concerned with the the final user. A successful design that is attractive and functional is one that reached its goal.

Graphic on the Web is considered of of the element of multimedia. When using several design elements like text, sound, animation and graphics your goal is to really a message to the user. When using multimedia in a web site it is vital that it is integral to the content. It must reinforce and support the message of the page content.

Using graphic can increase learning in a positive way. That is only if the image is being used properly. The concept is to remove all barriers to communication and increase understanding.

To help illustrate this point I’ve put together this short list of things to consider when using graphics on your website.

1. Make sure have to have the graphic

Don’t add a graphic for the sake of having a graphic. Make sure it serves a positive function to the content. It is easy to overuse graphics on a page. The real down side is that large unnecessary graphic slow down page load time. Remember time is important to your user. All graphic therefore must support the message and have relevance to its meaning.

2. Repetitiveness

Repeating a message or concept over and over increases retention. This can be true of graphic elements as well. A logo used consistently on your site will increase brand identity. Button with similar graphic elements are useful in usability.

3. Keep it Consistent

Keep thing it their place. If your logo is located at the top left it needs to be there at the same place on each and every page. The same with your navigation graphics. Don’t move things around this will confuse and frustrate your user. The same goes with the use of color. Find a theme and stick to it.

4. Media Loading Priority

As a page loads certain elements get loaded as the browser loads the page. Try to have the markup done is such a way as to load text before graphics. This will help the user know if the information is pertinent to there quest for information.

5. Page Loading

Keep in mind that graphics load much slower than text. The goal is less than 5 seconds. The maximum amount of time should be no more than 15 seconds. Also, with more people using High Speed Connections this frees you to add more multimedia to your site. Just make sure that your target users is up to speed.

6. Optimize Speed

Images need to processed to optimize speed. The web world is much more different than the print world. In the print world Hi-Res images are the standard. However Hi-Res does not work on the web. By optimizing the image you will save time for your visitors. Here are some thing to consider when optimizing for speed.

Make the graphic size a small as possible. Don’t use the browser to resize
Decrease image resolution. If your image is 600dpi you must reduce it to 72dpi
Limit the colors that will be used for the images.
Limit the use of animation in the graphic.

In web design there can be a conflict between total control of the look of the page and the needs allowed by the user. This is the great balance of design. A good design accomplishes both ends. It take a lot of effort to create an attractive and effective web site. By following the guidelines here the results will be better. But first is to satisfy the user above anything else.

Technorati Tags: design, graphics, usability

Web Tip: Designing the Best Website Possible

johnpape — Tue, 09 Mar 2010 18:40:39 +0000

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.

Technorati Tags: information technology, Internet, usability, Web Design, Web Development

Web Tip: The Importance of Web Linking

johnpape — Thu, 04 Mar 2010 18:34:28 +0000

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.

Technorati Tags: linking strategy, usability, Web Design, Web Development

Web Tip: Is There Such a Thing as Optimal Web Design?

johnpape — Tue, 02 Mar 2010 18:31:42 +0000

When it comes to the concept of design it is difficult to nail down the best by using a singular standard. Design is an art and what is good or bad art is hard to define. Design is fairly subjective and is vulnerable to the likes and dislikes of the user.

Now come the concept of optimal web design. What exact does optimal mean? It means “the most favorable or desired form of any particular subject”. How does this relate to the subject of optimal web design? Perhaps we can say that it is a design that best satisfies the tastes of the masses, while at the same moment works within the limitation of the function.

This now beg the question. What is optimal web design? You can say that a website is optimal when it provides maximum usability to the visitor while providing operational viability. The balance for the designer is to provide results for both the client and for the end user.

When designing it is important to keep the end user’s experience a priority. The site needs to be friendly to them. It needs to be easy to use and navigate. It needs to provide useful and pertinent content. The content has priority over the look and feel of the layout and artwork is secondary.

There is nothing wrong with a simple white background or very clean and simple lines in a website. Perhaps even a reduction in unwanted images that cause long page loads is needed. Keeping essential elements like page title, navigation and content is necessary.

The use of pictures need be be used sparingly. Only those that reinforce the content should be used. Don’t use picture to only decorate the page. This will be distracting to the site user. Although pictures are helpful they need to be used wisely.

Your site’s navigation needs to be simple, organized and consistent. This makes moving though your site easy and predictable. This will only help your visitor to get to the content they want.

Include in the design a way for your visitor to gain access to basic information regarding the website. A good start is to include an about us page as well as a privacy policy for the website. These element help foster your relationship with your visitor.

Having a consistent layout is rudimentary in creating an optimal web site. You will need area reserved on the page for these four areas common to most every website.

Header
Navigation
Content Area
Footer

Finally, while aesthetics play an important role, creating an optimal web design is still one that best methods for better usability in a website. Form and function need to work perfectly together to create a positive user experience.

Technorati Tags: usability, Web Design, web devlopment

Web Tip: The Art of Arranging Website Content

johnpape — Thu, 25 Feb 2010 18:25:07 +0000

If you’ve ever moved furniture in your house you will learn that arranging content on your website is very similar. In a house you will group certain types of furniture to match specific rooms, likewise you need to group certain types of information on specific pages.

This simple example is useful in helping your understand the importance of positioning content into your website. The goal is help eliminate a mess caused by confusion.

Group similar information together

In a home you will put beds and dressers in the bedroom. In the living room you will put a couch, easy chair, coffee table. You do this because these item help in the function of the room.

In a similar way you need to categorize your website’s content. You need a constant logical flow of information. You site’s visitor probably doesn’t want to bounce around from page to page and back again to the information they want. For the most part you want to put similar content in the same area.

Let’s say you sell items on your website, the idea here is to group these onto one page. If you have several items then you will want to create a category and organized them into similar kinds of products.

Perhaps you maintain a website for an organization. Again you want to group similar content into certain pages dedicated to that topic. Also, you want to categorize your content to avoid cluttering the site. I always like the simple and clean approach.

When creating categories for a website you will find that these are typically what you will find.

Home
About Us
Resources
Contact

Let’s go through each of these pages and figure out what type of content goes into them. First let’s look at the Home page.

The Home page is usually the first page someone will arrive at on your website. This page should have content that tells the visitor “What is this website about?” In addition, it needs to show links to the other areas within the site.

Next let’s look at the About Us page. This page contains content regarding the organization or person who owns the website. By including this page you add reliability by allowing your visitor a chance to know who you are and some of your qualification and credentials. This builds trust.

You will also want to include some sort of Resources page. The primary aim of your website should be to provide something useful to the visitor. This is done through your resources page. If you have several resources you can have multiple pages under the Resources page to accommodate these items. What can be included in your resources page. You can include products, services your provide, audio, video, inactive games. What goes here really depends on the goal of your site. Remember the resource pages are there to provide something to the visitor.

Next you want a Contact page. You want to provide a way for a visitor to contact you if they have a concern, question or need help. Although this information could be put in the About Us page a better practice is to create a separate page to handle the communication. On this page you will want to provide email, phone and address information. You can also include a form to make communication easier.

Create a Layout That Help the Visitor

With an understanding of the various page and you have your information ready, it is time to place this information on each page in an organized fashion. To do this a page layout needs to be created.

As we continue with the furniture in the house example, you need to place your your content in such a manner that it is useful to the visitor. In a room you will place certain furniture in specific spots in other to increase the function of the room. For example in the living room you most likely place the couch in front of the television. You will also make sure that there is an unobstucted path though the room. Similarly, the information on your site should have a layout that help to visitor find what they want.

It is recommended that a uniform layout be created for all the pages on your site. This assists the visitor to move though the site quickly and easily.

There are four basic elements on a web page. You will have a header that contains the name of the website or an organization’s name. It may also include a company logo. The header is usually found at the top of the page. Next you will find an area dedicated to navigation. The navigation will be located in the same on every page of the web site. There are several popular locations for the navigation. These are Horizontal above or below the header, Vertical on the left or right of the content area. Next you need a content area which will contain the information specific to the page. And finally a footer page that be located at the bottom of the page.

When laying out the content on your website you want to consider the convenience and practicality of the site in the same way you would arrange furniture in a room.

Technorati Tags: information technology, page layout, site architecture, site navigation, usability, Web Design, web devlopment