Archive for the ‘web design’ Category

Posted on February 20, 2010 - by David Etheredge

Web Design Process – Types of Websites

So you want to get a website built for your business or organization. If you are like most people, you have little or no experience with website design, so you may feel like you are flying blind when it comes to the best process for selecting a designer and what you can (and should) expect from that designer as the project proceeds.

Building a website is just like any other business process – the more informed and educated you are about the process, the more likely you are to achieve your goals and stay within the budget and timeframe you have available. We’re here to help!

In this series of articles we will explore the process of developing a website. Specifically we’ll cover;

1. Types of websites
2. The development team
3. The development process
4. Costs and development schedules

Types of Websites

Before you start looking for Web Designer, it is extremely useful to know what kind of website you intend to build. In general there are 7 types of business websites:

Postcard Sites – this is a very small website (1 or 2 pages) that provides information about a company, event, product or service intended to drive a very specific action on part of the user. Examples include placeholder websites that precede the development of a larger, more fully featured website, promotional websites tied to seasonal offers, special events such as concerts, periodic marketing campaigns and the like. Postcard sites are similar in many ways to full page magazine or newspaper ads – they are used to communicate a single, strong message and to drive action off of that message.

Brochure Websites – these are online marketing tools that provide visitors with key information about a company including who they are, what they do, the location of their business, contact information and information on the kinds of products and services they offer. Brochure sites are characterized by having a small number of pages (3 to 20) which are mainly comprised of little more than text, a graphic or two and possibly a simple form. They are designed to serve the same function that a company prospectus, sales kit or marketing brochure serves in print marketing.

Product Websites – this a website that focuses primarily on driving sales or leads for individual products and services. Product websites are characterized by having individual product information (pictures, descriptions, pricing, data/spec sheets, etc) for a larger number of similar products. Product websites may incorporate e-commerce allowing customers to buy products directly, or it may serve as an online catalog providing customers with the information required for them to make purchases offline. Product websites are often database driven and incorporate systems allowing the client to adminstrate product information and inventory directly, in real time.

Publishing Websites – sites that focus on distribution of periodic content including articles, videos, interactive games and podcasts like ESPN.com or the SavvyTalk blog. Publishing sites are characterized by the use of a Content Management System (CMS), such as WordPress, SlideShowPro or Joomla to author, edit and publish content to the site in real time, without requiring a programmer to code the content for you. Publishing sites are typically broken into categories of content, have authors and editors for each content category and publish new content on a regular schedule. Publishing sites may only have a handful of pages when initially launched, but can grow to hundreds or thousands of pages over time as the publisher adds content.

Community Websites – websites that focus on allowing visitors to particpate in online discussions and other multi-user activities through the use of chat, private messaging, user forums, bulletin boards or classified ads. Craig’s List, E-bay, Facebook and Ning networks are examples of community websites. Community websites are characterized by being focused on the proliferation of user developed content and will almost always include tools that enable users to publish directly to the site. Most Community websites require a very signficant amount of moderation and user support relative to non- community oriented sites.

Productivity Websites – these are websites that offer tools and systems designed to allow users to accomplish specific tasks or activities related to their business or personal lives. Etrade (trade stocks), Bank of America (manage bank accounts), MapQuest (get driving directions) and Google (search the web) are examples of Productivity websites. Such sites are characterized by having proprietary back end tools and systems that can be exceptionally complex and often require constant maintenance and support.

Hybrid Websites - many websites are hybrids of the types shown above, with a postcard, brochure or publishing site forming the main offering and product catalog / e-commerce, productivity tools, community and/or publishing components “bolted” on to the core website. It is very important to understand that in most cases  adding more complex functionality such as e-commerce, content mangement, productivity tools or communinty systems to a brochure website will increase the cost building the website by a signicant amount.

We have a saying around here that “just” is the most expensive word in the English language. We often get client’s who will say something like “I want a small brochure website, just with e-commerce”.  They don’t understand that adding e-commerce can mean;

• Integrating a shopping cart solution
• Getting a merchant provider and a payment gateway
• Purchasing and installing an SSL certificate on their server
• Providing product, order and customer administration
• Developing and editing web ready copy and photo images for all products
• Integrating analytics and conversion tracking
• Integrating shipping
• Back end integration with the client’s order tracking or bookkeeping system
• Extensive testing of the entire system

Building an e-commerce system doesn’t get any cheaper or easier to do simply because its added to a brochure website. Unless by “e-commerce” you mean adding one or two PayPal buttons to your site, building a web store is almost certainly going to increase the cost of development by thousands or tens of thousands of dollars (or hundreds of thousands of dollars if you want to build the next Amazon.com!).

The moral of the story is that if you want a hybrid website that combines elements of a publishing website, an e-commerce website and a productivity website (for example) then cost and time required for development of the site will be significantly more than a site that features just one of those elements.

So now that you have a grasp of the general types of websites, the next step to understanding the Web Design Process is to review the different disciplines required to build a professional website.

The next article in this series - “Web Design Process – The Development Team”, will be published soon.

Posted on February 20, 2010 - by Lisa Nalewak

Content Formatting Tips for WordPress Pages

WordPress is a popular content management platform that many web designers use to enable content management features on sites they build for their clients, meaning that someone at a client’s organization can access content on their website through an editor and make modifications to the content on a page as they like, without knowing any code or having to FTP web files up and down from their web server.

For the most part, our WordPress clients are fairly conversant with the content management editor (and if they aren’t, we train them), so learning how to efficiently use WordPress tools generally isn’t a challenge. What does become something of a challenge for our clients is understanding some design fundamentals for text and content layouts that allow for neat, professional looking web pages, and that helps each page clearly communicate its message or value proposition.

It is not uncommon for folks untrained in design and layout to try and embellish pages with too many fonts, typesizes, or colors in an effort to give pages some “pizzazz”, which instead leads to pages that look “too busy” or “messy”. Or, perhaps they are not sure how to break up text and arrange other elements on a page to give it proper visual hierarchy and make it easy and intuitive for a reader to follow. Or perhaps content isn’t being clearly communicated because there are not enough subheads or supporting graphics on a page to help tell the story at a glance.

To help, I’ve put together a quick list of tips to keep in mind when formatting pages. While these tips apply when laying out pages in WordPress managed websites, they also are general formatting principles that will help any document look more professional and polished.

1) Text fonts, sizes and styles

The same text elements on every page should be consistent. For example, all titles should be the same font, typestyle and type size. The same goes for subheads and body text.

2) Placement of graphic images in content areas

The size, placement and treatment of graphics on each page in a Word Press site should be similar. For example, if a large image is associated with an article, it should be someplace very visible within the body text of the article and above the fold and the text should always have the same margins around the photos from page to page. Images should be similar in size. Some clients prefer images to be in the same place each time. Some prefer placement variation. What is important is that each page is consistent in how the text and photos interact.

3) Splitting text into 2 columns

Splitting text into 2 columns helps add more white space to a page and makes large passages of text look more manageable, which makes it more likely people will read the content rather than skip over it.

4) Using subheads to split up large chunks of text, and to aid in the communication of messaging.

By using subheads in the body of text, you accomplish a few things: a) Users get a good sense of the main messages being communicated on a page by reading the title and subheads before having to read all the text, so you can communicate your main points faster. In addition, calling out the main ideas of text in subheads means you will enjoy reinforcement of your message or value propositions in the subheads as well as in the main body of the text, so you drive your point home more than once. b) Breaking up text using subheads makes a page look less “threatening” visually. When you break up text into smaller, “digestible” chunks, readers are more likely to read each bit than if it were presented in one long passage.

5) Addition of graphic under page titles

The addition of a graphic under page titles, like a rule line, (be sure it’s consistent across all pages) adds visual interest to the page and gives it a more polished appearance.

6) Inclusion of larger graphics or call-outs to each page to visually communicate messaging

The addition of graphics to a page can be extremely helpful in illustrating your messages or value propositions for the content on that page. Graphics can be photographs, charts, or even text that communicates your main points, but is laid out in a way that is graphically interesting and pulls a reader’s attention.

For example, a long passage of text on a single web page might explain the 3 steps of a “How To” process. To help communicate the main message of the article, create a graphic call-out that lists the “3 steps” in bullet points. Embellish it with graphically interesting (but appropriate) text, and perhaps supporting background graphics (but be sure it is still easily readable). Place the graphic near the top of the article.

This page now communicates the 3 steps of our “How To” process immediately upon hitting its URL. As a reader, I already understand the main point of this entire page of text without reading a single word in the main body of the article. Now that I’m interested, I’ll read the rest to get the full story.