Can we talk?
We at Pleasant Web Design understand that everyone would love to have a beautiful, custom, cutting-edge web site. But we also understand that many people do not want to involve themselves in technical detail, or they do not want to spend $5 thousand or more, no matter how beautiful the site.
So...given these challenges, how best to proceed?
If you have the time, interest, and resources, then contract with us to develop a 100% custom design for you. We'll go at your pace, we'll create and modify mock-ups upon request, and we'll bill you for our time. You can estimate a minimum of approximately $1 thousand a month, and estimate at least a few months of development time.
If you want to develop a much less expensive site at a quicker pace, then your choices are:
Cost: the cost of either the 5- or 10-page package, plus $350, plus an hourly charge for significant design alterations
Cost: the cost of either the 5- or 10-page package, plus an hourly charge for significant design alterations
If you want less work and a faster result, then the first option is best. Our E Z design package lets you mix and match pre-designed sections until you find an attractive combination for your web pages. Then, after you meet with us to discuss refinements, Pleasant Web Design will create a mock-up of your custom design.
If our mock-up meets your needs and requires only minor fine-tuning, then there will be no extra charge. If you would like significant design alterations, we will bill you for the additional work (you can estimate $50 an hour).
If you are willing to do more work in order to save money, then the second option is best. For example, if you know or are willing to learn about web-page structure and design, and if you are willing to surf the Internet looking for pages that have design elements that you want to include in your web site, then you can use the remaining sections on this page to guide your design research. If you can specify almost all of the details required to put the site together, then the total cost will be only the cost of the 5- or 10-page package. If you need a little help from us to refine what you have come up with, then we can bill you for the time it takes to extend your initial design (you can estimate $50 an hour).
There is no right or wrong way to develop a design for your site. So, feel free to continue on with the remaining sections on this page, which describe specifics of web-page structure and design. Your level of interest as you read further may help you to decide which design-development process you would prefer.
Understanding structure and design
Simply put, it is easier to design a site if you can look at examples that resemble the one you want. To prepare you for searching the Internet looking for sites that you like, this section provides information about some basic components of web-site structure and design. If you already know this information or if you learn better by looking at examples, click here to skip this section.
Common structural elements include, from the top to the bottom of typical web pages:
A typical flow of content for a small web site — first page, second page, and so on — might include some, but not all, of the following:
The first page that someone sees when that person visits your site is often called the home page. Think of a home page as being similar to a brochure cover. If someone reads no further, they should feel a strong draw to your service, and they should be able to contact you easily using only the home page.
Design elements are techniques used for presenting the structure of your web pages. Most often, the design is virtually identical from page to page. However, if you can convey your branding (for example, with a prominent logo or banner), it's possible to vary the design based on the content of a given page.
Here are some examples of design elements:
Liquid content expands and contracts given the current size of the browser window. A fixed design stays the same size regardless of the window size.
Fixed content is almost always virtually flush left or centered.
The background is the color or design that appears around (and sometimes beneath) the entire content of your pages.
These can be boxes, circles, other shapes, drawings, or photographs. They can enclose the entire page content or subsections on the page, or both.
Pick a basic design type
If you have very little idea of what your site should look like, review the sections that follow, note one of the three design types you like best, and be prepared to find a few examples of sites on the Internet that you like and that use your chosen design type. The three basic design types are:
In the sections that follow, when you click on the link of an example web site, we will display it in another browser tab or window, so that you can easily return to this page to keep reading.
The professional-box design type: These designs are best for those people and businesses that have a significant amount of information to convey on the home page and for those who need to appeal to the broadest spectrum of potential clients. Typical professional-box designs have a banner at the top, with navigation links either at the top or along the left side of the box. A frequently-used layout for these sites would be one narrow column (1/3 of the total content area) and one larger column (2/3 of the total content area). However, one-column and three-column designs are not uncommon.
There is a new wrinkle being applied in some of the professional sites, and it is the use of a one-column section at the bottom of the main page. This can be a good place to locate less-important information; think of it almost like a "reference section." Examples could include secondary-and-related links, alternative navigation (for example, the same set of links as those located at the top, except categorized differently), or a display of portfolio items.
Examples:
This site is a great example of how attractive a web site can be using a professional-box design. It is almost a monochromatic color scheme, using primarily shades of green (there's a touch of blue, gradient shading the top of the second column). Note also that it prominently features a client quote in the left column; a great client quote, tag line, or elevator pitch often does more to set your site apart from the competition than any design element.
This site uses a color that is linked thematically to their business (orange as in the fruit, and orange as in a Thanksgiving-like backdrop to a basket of fruit and nuts). It softens the boxes by using rounded edges. And it uses a very nice "Most Popular Links" section in the top-left corner, followed by an easy way to submit your email address for inclusion in their newsletter.
One of the most creative use of boxes and columns that I've seen. Click on a link, and watch how it morphs into an even more traditional use of columns, but still maintains its theme. Very nicely done!
This site has a nice, clean banner. It's navigation is to the left. It presents a significant amount of information without the reader feeling overloaded. And it uses the modern secondary-links section at the bottom. Nicely done!
This is a very attractive take on this design type. But don't let the attractiveness fool you...it's actually a fairly simple design, with flush-left content, limited navigation at the top, column groupings below, navigation toward the bottom, and copyright information at the very bottom. Simple, professional, and bounded in a box doesn't have to look boring!
I love this site because it is both very traditional and very unique at the same time. On the one hand, it places the title and navigation toward the top of the page, and it uses the standard 1/3 and 2/3 two-column design for its information. On the other hand, the business-card and background graphics make it very unusual. A professional-box design doesn't have to be boring!
~ Go back to links for the three design types ~
The professional-open design type: These designs tend to imply boundaries around information rather than drawing literal boxes. They tend to work best for those people and businesses that can break down information so that each page contains a limited, concise amount of text (this is especially true for the home page). It also works well for those who may need to convey a more creative aspect than a typical box approach or for those who want their web site to have a light feeling to it.
Examples:
This is a classic. It's the best, minimalist site I've ever seen. It doesn't contain anything on its home page that isn't absolutely necessary.
On the one hand, this site could have been placed in the professional-box category due to its traditional use of columns, yet notice how open and light it feels. Note the subtle, blue background coloring located only at the top of the page. Also, click projects in the top menu, and notice how the design moves from a three-column design to the more traditional 1/3 and 2/3 two-column design.
This is a unique site, because, although it draws a box around its content, it uses a very open design within the box (they use no columns and rely on lots of graphics). It also uses a dark background with light text.
This site does a wonderful job of containing subsections in smaller boxes, using columns, yet still keeping a very open and light feeling. Notice the use of varying numbers of columns.
This is a good example of a nice, open site that uses dark background colors with light text.
This site makes great use of an attractive banner, and it projects a nice, personal, open feeling, despite the content area being quite limited. A design like this would work best if you have a very small amount of information to convey on each page, and if you had few pages to present.
This is a nice, open design. It's a great example — like The Grow Collective and Okun Consulting — of an open design that is more conservative-professional and less funky.
This is also one of the only example designs that uses a liquid design. To test this, change the size of your browser window. In particular, watch what the design does as you collapse and expand the width...the text adjusts to the size of the window, as liquid would adjust itself to the shape of the glass.
~ Go back to links for the three design types ~
The playful-and-creative design type: These designs emphasize high-energy, color, and creativity. They often resemble posters or real-world objects more than they resemble web pages. The playful web sites are best for those of you involved in the creative arts, wanting personal web sites, needing web sites targeted for children (or children's products), and so on.
With the professional-box and professional-open design types, you can tell us 80% to 90% of what you want, and we can take it the rest of the way. Because the playful design type is, by definition, the most unique, you would need to provide us with the most detailed specification. You may also want to consider working closely with a professional graphic artist to develop online art that we will need to construct the site. Remember that enlisting professionals to help with theme and with developing the sharpest level of graphics needed for these types of sites is likely to push the price of your web site into the "$5 to $10 thousand" range...or more.
If this is your first web site, and if you are not in a creative or artistic profession, I would recommend that you use one of the other two design types.
Examples:
This is a fairly conservative site, but it uses a nice graphic that makes it look as if you are using a child's toy to "flip through" toy selections. It's the viewing screen at the top; notice the orange-colored, right and left arrows used to view different toys. This is a good example of how you can have a fairly conservative (and inexpensive!) web-site design and spice it up with one playful element.
This professional site actually uses a box, openness, and poster-like color. Click on a few links in the navigation bar to the right, and notice how the designers alter the page-design slightly for larger pages, but they manage to keep the same theme going. This is a great method for having a very attractive-yet-contained home page, and then "opening things up" for subsequent pages that require more text.
The sites that are listed next are notable in that they never open things up. Their information is very minimal and designed to fit neatly within a graphic. (This is very hard to do, and could create maintenance challenges down the road, should your content change.)
Very attractive, minimalist site.
This site makes very interesting use of background images and pictures. Note the unusual sideways, right-side menu of navigation links.
Great use of theme, which places all content on the label of a pop bottle. When I viewed the home page, I thought, "Very cute, but how's he going to display the rest of the pages?!" He did it, and he did it beautifully. (Again, if you use a design like this, you'd better be a person of few words.)
Examples of CSS design
It's not important that you understand CSS. What is important is that you understand that CSS-based design is less expensive than graphics-based design, and the more you use CSS design, the more likely it will be that you can keep the costs closer to the prices of the 5- and 10-page packages.
The following are just a few examples of how we can style your page using CSS coding or using very easy Photoshop tools. Of course, when viewing these samples, remember that we can mix and match techniques. Also, we can vary the font types, height, width, and color. (We can alter the shapes, as well, but anything other than boxes will reduce the flexibility of the text you can place on/in the shape, and this may affect whether your site meets accessibility standards.)
Here are some examples of ways that we can style containers:
Find examples on the Internet
Selecting one of the three basic design types is a good start. However, even within one type of design, there are many more potential design choices. So, it can be helpful to provide examples of the design type you have chosen. You can either select one example ("this design is great...give it to me in pink"), or you can select multiple examples ("I like the colors in this one, the menu in that one, and the banner in this one"). It is also fine to give us an example of something that you do not like. However, finding what you do like is more helpful to us.
Next, take a little time to surf the Internet with a new focus on your selected design type. When I was searching for examples, I specified the title of a profession or service followed by a geographic location (for example, "dry cleaning boston" or "financial planning boston"), and the search page displayed many web sites to review. If you can find between three and five sites that have design elements that can instruct us, it would be very helpful.
Your competition
While you are surfing the Internet, take a look at up to a dozen sites of your competitors, and then provide a few addresses of the sites you want us to keep in mind as we are designing your site. On the one hand, it might be a good idea to have a site that takes a similar approach as the sites of your competitors, so that it appears as if "you are in the same business." On the other hand, it can be helpful to have something about your site stand out as being better or different than your competition.
Although design elements are important, the best way to set yourself apart from your competition is to develop a tight, effective elevator pitch that we can position prominently on your home page. If you would like help in developing an elevator pitch for your business, consider including our business consultation package in your purchase.
Talk it through
Given all of the guidance in the previous sections, it is possible for you to provide a design specification that can keep the costs close to the prices of the 5- and 10-page packages.
However, some people feel more comfortable when they talk things through ahead of time. Also, people who prefer more creative control or who want to cut down on the review time at the end of the project may want to meet with us up front, so that we are designing the site "to specification" as much as possible.
Regardless of the reasons, Personal Web Design provides a few, reasonably priced consultation packages that you can use to develop an elevator pitch, find words that set your business apart from the competition, discuss various design options, review sample web sites together, and more. Also, if you would like to have more consultation than is available in our packages, we would be happy to provide a quote for a customized set of consultation meetings.