The basics about Illustrator: it’s compatible with both Mac and Windows, has a bevy of add-ons, plug-ins, and tutorials to choose from that will enhance your user experience. If you’re new to drawing, you’ll find help in the form of books, forums, how-to articles, and even videos. For the more seasoned users, if there’s something you want to do, there’s probably a (third-party) plug in for that. It’s a heavy app so make sure your hardware meets the requirements listed on Adobe’s page.

The catch is that Adobe Illustrator CS4 is unlike raster-based digital arts programs; Illustrator is vector based and therefore not designed to simulate the behavior of traditional media. If recreating an artist’s studio is what you’re into, then go straight for Corel Painter 11. To understand the differences, first know that vector based programs (like Illustrator) represent images and graphics in terms of mathematical formulas. Raster based programs represent images by their pixels, the individual points of color that collectively make up your image. The only thing you need to take away from these differences is that vector images, thanks to their mathematical properties, can be resized again and again without degrading. Raster images when scaled will lose clarity but raster graphics are much better for color-rich things like photographs.

With that said, Adobe Illustrator CS4 is a powerful graphics program and integrates seamlessly with the rest of the Adobe production suite (Photoshop, a raster based program, InDesign, and Dreamweaver).

Functionality and User Friendliness:

For those who have already used Adobe’s products, the user interface is very similar so you won’t have a lot to learn. I find the interface intuitive, even without much training in the software and like the “tabbed” appearance.

This version seems streamlined. For example, the new Appearance panel merges several panels you would have had to use separately in the past and gives a one-click access to editing your selected object. There have also been some definite improvements with the gradient tool from previous versions.

Awesome Features:

Probably the best improvement to the new Illustrator is the ability to work with multiple pages and the new Artboard tool. Basically, cropped areas become new Artboards and each Artboard is treated as a separate page. There are still some things Adobe needs to figure about this approach, but it’s definitely a good, much-anticipated feature.  

Another great improvement is the new Blob brush tool. It can best be described as an “intelligent” brush, one that is pressure sensitive and merges with other (same colored) objects to create one seamless path. You can even use the Eraser tool with it.

Features to Write Home About…

Aside from the previous mentions of the new multipage Artboards and the Blob brush tool, here are some fun tidbits of the new version.

This tool, which doesn’t have an official name, allows you to view your image on screen, as someone who is colorblind would see it. Why is this important, you might ask? Well, other than the entertainment value, it allows you as a designer to see the contrast (or lack of) in your image and whether the almost 8% of colorblind people will see it clearly enough.

The Bottom Line:

If you need a program that will improve your productivity, allow you to manage multiple files, has an entire slew of plug-ins and teaching resources available to help you, then Adobe Illustrator is for you. $599 without upgrade, that’s a bit steep but if this is what you’re doing as a living, you’ll want Illustrator. Upgrade is only $99.

Final Mentions:

You’re going to need a lot of RAM! Don’t skimp when it comes to using Illustrator.

Corel Painter 11’s learning curve may be a bit steep for new users but if you’re familiar with Corel Painter X (when the RealBristle tool was first released) you’ll have no problem adjusting to this version.

Functionality and User Friendliness:

Corel Painter 11 is easy to master if you’ve got at least a working knowledge of the previous versions but if you don’t, its worth learning. It’s available for both Mac (Intel-based only) and Windows and supports Vista. With the beta release of Windows 7 already out, Corel Painter 11 users need not worry as Corel has stated that they’ll offer any service pack upgrades, if necessary, from Vista to 7 free of charge.

Awesome Features:

In this version, Corel improved the color-recognition for files imported from Adobe – very important if you’re a photographer adding this program to your editing toolbox. Also, you can save color profiles for pretty much any kind of image format and Painter will remember the profile when you open that sort of file from then on.

The RealBristle tool, described in detail below is fantastic but Corel Painter 11 also lets you customize the digital canvases you’re working on with textures and grains unavailable anywhere else.

Features to Write Home About…

The RealBristle tool is definitely the standout feature of Corel Painter 11. Aside from allowing you to create an infinite possibility of tools that you probably couldn’t even get at the best brick-and-mortar art store, the application maps out the individual brush strokes by recognizing the pressure and speed applied on the stylus. So faster strokes mean thinner lines while slower, harder strokes mean broader strokes with more individual bristle marks. That, in addition to ‘tablet tilt’ – allowing you to control the width of brush strokes with the tilt of your pen – means you can replicate the feeling of brush to canvas without the mess.

The Mixing Feature on Corel Painter 11 (a virtual palette knife!)

Another feature I particularly liked was the “mixing” feature – a digital palette knife that allows you to mix colors on screen. It’s yet another tool on Painter 11 that bridges the gap between digital drawing and real-life drawing.

The Bottom Line:

If your livelihood comes from any kind of image creation – you’re a fine artist, illustrator, graphic artist, even a photographer – then you need this application. If you’re someone who enjoys playing around with digital drawing and can afford to $400 price tag, then by all means, go for it, but there are other more affordable alternatives. They’re just not as “non-digital” as Corel Painter.

Final Mentions:

It’s kind of silly to use Corel Painter without a tablet because you won’t get the full benefit of the RealBristle tool.

“This one goes to 11!”

This tutorial requires intermediate knowledge of HTML/XHTML. It only requires basic knowledge of CSS. All of the properties I am using are being added to an embedded page style sheet, which is between the <head> tags in the document. You must use this to define header CSS: <style type=”text/css”> and </style>. Alternately, you can apply each declaration directly by using the style HTML attribute.

Converting an HTML table layout into a CSS tableless layout isn’t as hard as you might think. Setting aside positioning for a moment, each table cell will become a <div> tag, which is more commonly referred to as a layer.

Below is an image of a common table layout. This layout is very common to CSS as well.

<html><head><title>My Website</title></head>

<body>

<table border=”1″ width=”300″>

<tr><td colspan=”2″ height=”40″>header</td></tr>

<tr><td width=”80″>navigation</td> <td>content</td></tr>

<tr><td colspan=”2″ height=”40″>footer</td></tr>

</table>

</body>

</html>

Changing each cell into a layer is as simple as changing each “td” to “div.” The table and tr tags should be deleted along with any layout attributes (like align or width) from your former table cells. In order to style one layer in particular, designers typically give it an id attribute. In the CSS, ids begin with #. For the web page to meet W3C XHTML specifications, a particular id can only be used once per page. If you name something id=”cat” you aren’t allowed to use cat again.

The class attribute, on the other hand, can be used as many times as you want. Its purpose is to allow multiple elements to access a single style. In the CSS, classes begin with a period (.). I typically name my ids according to what layer they’re attached to, such as “navigation” or “header.” I name classes according to what’s being styled, like class=”emphasis” (for important sections of content) or class=”list” (for special list formatting).

After making modifications to the code, you end up with something like this:

<html><head><title>My Website</title></head>

<body>

<div id=”header”>header</div>

<div id=”navigation”>navigation</div>

<div id=”content”>content</div>

<div id=”footer”>footer</div>

</body>

</html>

Though it’s not necessary with a simple layout, you can also place a layer around all the others. It’s a little like a table tag to contain the layout. Usually, it’s just called “container.” I use it routinely because you never know when it will save you time in the end.

Now, for positioning…

This is the part that took me weeks to fully master. By default the layers are “stacked” on top of each other. This is called static positioning. They naturally span the entire width of the page but are, by default, only as high as the content inside. If there is no content then the height is zero. To keep track of the size and position of your layers, you may find it helpful to place a border around them by using border-width:1px; border-style:solid; border-color:red; You can also use the shortcut border property border (border:1px solid red;).

I consider the float property a member of the positioning category but it technically isn’t. Floats are used to shift layers to the left or the right of content inside of neighboring layers that are below it. The floated layer will ignore all non-floated layers so there will be overlap by default. Things like text or images will flow around a floated layer. Each layer is outlined in red in the image below. You can see that the content layer and the footer layer are partially overlapped by the navigation. It has the declaration float:left;.

<style type=”text/css”>

#header {height:40px;}

#navigation {width:80px; height:100px; float:left;}

#content {height:80px;}

#footer {height:40px;}

</style>

The property used to create a float is just “float.” Its possible values are left, right, none, or inherit (from a surrounding layer). All layers have a float value of none by default.

To force a layer to move out of the way, you use the clear property. Its values are left, right, both, none, or inherit. Like the float property, the default value is none. If you style the footer layer with clear:left; it will drop below the navigation layer. Clear:right; clears floats on the right side of a layer while clear:both; clears floats on both sides of a layer. Clear:both; is needed when you have two layers near each other that are floating in two different directions.

<style type=”text/css”>

#header {height:40px;}

#navigation {width:80px; height:100px; float:left;}

#content {height:80px;}

#footer {height:40px; clear:left;}

</style>

To create space between layers you use margin properties. There are four different settings: margin-left, margin-right, margin-top, margin-bottom. Alternately, you can use the single margin property that sets all four sides at once in a clockwise direction (top, right, bottom, left). The margin is always transparent. Valid values are any number positive or negative but you must remember to specify a measurement type. Pixels, or px, are most commonly used. Unfortunately, setting the margin doesn’t work on layers using clear:left;, clear:right;, or clear:both; on the side that’s touching the floated layer. This means it won’t work on the top edge of the footer. If you haven’t used a background color or a border on the footer, you can use padding on the top instead. You can see that the word “footer” has moved down a little. That’s the result of padding. If you have a background color or border, you will have to place a layer around the footer and add padding to it.

<style type=”text/css”>

#header {height:40px; margin-bottom:5px;}

#navigation {width:80px; height:100px; float:left;}

#content {height:80px; margin-left:5px;}

#footer {height:40px; margin-top:5px; padding-top:5px; clear:left;}

</style>

It doesn’t work the way you think it should on the content layer because of the overlap. It’s there, but on the far left. The right margin on the navigation layer isn’t visible.

There are two ways to get rid of the overlap while keeping the content on the right side of the navigation. One way is to also float the content layer to the left. The layers will then stop ignoring each other. Another way is to use a left margin on the content layer that is equal to the width of the navigation layer. This moves it out of the way. In order to have visible space between the two, width of the margin must be greater than the width of the navigation. If the navigation’s width is 80px then the left margin must be 81px or greater.

<style type=”text/css”>

#header {height:40px; margin-bottom:5px;}

#navigation {width:80px; height:100px; float:left;}

#content {height:80px; margin-left:85px;}

#footer {height:40px; padding-top:5px; clear:left;}

</style>

This is where a container layer would come in handy. The margin caused the content layer to expand beyond the width of the header and the footer, which is not something most people want. This happened because I have a specific width on the header, footer, and navigation. If I had a container around the entire thing then I could set the width on it instead. That would make it easier to control the layout. The red border around everything in the image below is the container.

<body>

<div id=”container”>

<div id=”header”>header</div>

<div id=”navigation”>navigation</div>

<div id=”content”>content</div>

<div id=”footer”>footer</div>

</div>

</body>

<style type=”text/css”>

#container {width:300px;}

#header {height:40px; margin-bottom:5px;}

#navigation {width:80px; height:100px; float:left;}

#content {height:80px; margin-left:85px;}

#footer {height:40px; padding-top:5px; clear:left;}

</style>

There are other ways to position layers but they’re not directly relevant to this topic so I’m not going to talk about them in much detail.

• • position:absolute; – All other layers ignore it and it ignores them. The positioning is set by using the top, bottom, left, and right properties. Top and bottom cancel each other out as does left and right.
• • position:fixed; – Like absolute positioning but it doesn’t scroll with the page.
• • position:relative; – These layers reserve space even when they don’t need it. It uses the same positioning properties as the other two. Relatively positioned layers can also be used to contain absolutely positioned layers.

What are the ‘Universal Principles’ … and how do they apply to the business of web design?

These are some of the principles that I have found to be true in all areas of life, business, web design, programming, eating, fighting .. whatever. They are:

• Simplicity
• Adaptability
• Persistence
• Balance
• Timing
• Luck

I’m not sure how much detail I need to give with regards to these principles .. so, I will give you a few examples and leave it to you guys to ask questions – if you are interested in more.

So let’s start with the principle of adaptability.

In web design, that means being flexible in terms of your skill set. Being able to learn new technology as it comes out to take advantage of it, while the competition is asleep. Adaptability also means being able to find different ways to approach a job so as to find the best way to accomplish it.

Simplicity means keeping your site design AND structure simple. Keeping the contracts between you and your clients simple and easy to understand.

… Unless you want to hide something from them!

Balance means keeping the site simple, but not too simple. Keeping the contract short, but not lacking in the details you need to have in there, to protect yourself and to educate your client about what he/she will be getting for their money.

Conclusion

In keeping with the principles of simplicity and another one of my principles not mentioned before: laziness, I will stop here with the examples. If you guys find this interesting let me know.

Stefan Mischook

www.killersites.com
www.killerphp.com

Using Web 2.0 for the Right Reasons

The term, Web 2.0, has become so common that it’s now almost one of those labels that everyone knows, but nobody knows the definition of. In fact, clients often ask me—with complete seriousness—if I can provide “Web 2.0 ” for their site. My reply is typically along the lines of “which function were you thinking of?” 

Their blank faces confirm my suspicion that they have no idea what Web 2.0 is, why they would want it, and what it may provide for them in terms of functionality their site needs. Sadly, many of my students have the same problem.

Many professional designers, it seems, suffer from the same drawback, evidenced by sites so jam-packed with useless widgets they make me long for the sites of the 90’s, with their far-simpler flashing banners and animated gifs.

What is Web 2.0?

In a nutshell, Web 2.0 is an approach to the internet characterized by the following mechanisms:

• facilitating communication, 
• collaboration,
• interoperability/interaction,
• information sharing. 

In other words, instead of a static HTML page with functionality that stops after the page loads, the functionality on a page with Web 2.0 continues. It essentially allows users to interact with the site’s page as they would a software program. Users can communicate to each other (and you), create content independently or collaboratively, and interact through mechanisms allowing the user to determine the look, feel or content of a page.

Functionality Before Style

Web 2.0 is not about style. This is one of the areas where many designers, and perhaps clients, get confused. Though trends in design have certainly changed in the past ten years (not unlike any other school of design: from cars to houses), Web 2.0 is about functionality, not looks.

I know many will agree with me. After all, the prolific use of rounded corners, narrow content areas that didn’t span the screen, transparency, etc. came into use about the same time as Web 2.0 functions did. Thus, it’s easy to relate the two. However, separating one from the other liberates the designer to focus on the two very different areas of a site: design and function.   

Common Uses of Web 2.0

Examples of Web 2.0 functionality abound. Some examples:

• Communication methods such as those in private messaging systems and “wall” systems (Facebook). 
• Collaboration mechanisms as seen in tools such as wikis and Google Docs. 
• Interoperability/interaction — functions that allow the user to change the site.
• Information sharing, aka user-generated content.

The two most overused categories, however, are interoperability/interaction, and information sharing and we’ll examine those in more detail.

Interoperability/interaction is easy to identify. These are any functions that put the power to change the website in the hands of the user. It is, perhaps, as easy as a slide show that the user can scroll through, a lightbox image gallery, or multimedia presentations that the user can start, stop or somehow modify. More complicated examples are evident in Yahoo’s MyYahoo! and iGoogle. Both allow users to include and exclude feeds, move modules around, change skins, etc. 

Information sharing, or user-generated content, is evident in any mechanism that allows users to upload information to the site. Commenting, photo galleries, real-time blogging, and any other way to facilitate allowing the user to create what’s on the site/page are included here.

These last two categories, perhaps because they’re either the easiest to insert on a site or because they have the flashiest presentations (the wow factor) are used in over-abundance all the time. 

An Incorrect Use of Web 2.0

I recently, for example browsed a site for a local Chamber of Commerce. The site was brand new and made by a large, local design company. While browsing the site I came across a gallery of photographs of the Chamber’s directors. No name was beneath the photo, it was just the photo. However, upon selecting the photo, a beautiful lightbox appeared in the middle of the screen. The lightbox dimmed the rest of the page and below the photo in the lightbox was the director’s name. However, the photo in the lightbox was the same size as the photo on the page.

So why use it? Why was it there? It provided little more information than the page itself did, so why did the designer use it and the client buy it?

It’s because the client wanted Web 2.0 and had no idea what Web 2.0 was, and the designer was either all too eager to charge extra for something flashy, or had no idea himself how to really use these functions.

And this last line is perhaps the point. While it’s great to understand, from a technical point of view, how to use these functions or how to make them, it is better to understand how they should be used on the client’s site. Or, even more to the point, it’s better to understand why to use them.

Think about the lightbox, for example. What does it do? 

• It provides a way to focus the user’s attention on a single image and send the rest of the page to a layer of inconsequentiality. 
• It provides more detail for an image. 
• It allows you to keep your page of information from being cluttered by large images and instead include only thumbnails. 
• It is a way to provide more written information about an image. If we wanted to display a product in a catalog, for example, a lightbox would be a great tool to use. We could have on the page small thumbnails with simple labels. If a user selects a thumbnail the lightbox appears, displaying the product from various angles in a much larger size and better resolution, and accompanied by a full description.

It was not designed to be used for one line of text below a photo the same size as the original.  

Ultimately though, Web 2.0 is about the user.  All of the utilities I point out put power into the user’s hands. For example, users needed a way to share galleries of photos with each other, so the solution was flickr, an online mechanism to do so. Users also wanted to share videos, the solution was YouTube. Likewise, users wanted to keep up with friends and family, so Facebook was created. In every instance the solution—a Web 2.0 solution—was created because the user wanted to do something.

So to ensure that they’re using it right, designers should start with the user’s wants and needs. Will the user want to respond to content? Then include a commenting feature. Will users want to communicate with each other? Then include a forum. Using Web 2.0 correctly becomes far simpler once this approach is taken.

There are, of course disadvantages. Knowing only HTML will no longer be enough. Designers will have to know HTML, CSS, PHP, and Javascript (especially their important libraries, like mootools and jquery). The payoff, though, is huge in terms of revenue and user satisfaction. Explain this to the client. Make them aware that something which is flashy but useless might actually drive users away instead of attracting them.

The web is changing at a breakneck pace. Already there are discussions about the next generation of web utilities. Some are even beginning to call them Web 3.0. As designers, we really need to be aware of the foundations and work our way up. Before too long, clients will be asking us to use this Web 3.0 functionality (whatever that may be). Before we do, however, we need to make sure both the client and ourselves understand the Web 2.0 functionality first.

So as a designer, how should you choose to use these tools? How do you respond to clients who ask about them? Do you go after the easy money and put widgets and gadgets in every corner you can possibly put them? Or do you step back and ask if your client really needs an RSS feed on the welcome page that never changes? As always, think about your design completely before you charge into it. Explain and educate your client about what you think he needs and why. If you can provide real rationale for the Web 2.0 tools you think he needs, you can probably get a better price for those tools. And that is, after all, one of the points, right?

There’s a pretty tired cliché used all the time that goes something like this:

“The journey of a thousand miles begins with a single step.”

Like all clichés, it’s true while at the same time a bit trivial. In the case of building websites, this particular cliché can help teach one of the most important lessons to learn. Let me try to put it in terms of what we do: it’s not how you end a project that gives you success as a web designer/developer; it’s how you begin it.

My students often have trouble with this uncomfortable truth when designing and creating their web sites. They usually want to jump right into a project and start designing it before they do anything else. But before I let them begin to even sketch out their ideas for a single page, I make them answer two key questions about their projects:

1. Who is my audience, and …

2. What purposes do I need to consider?

The answers to these questions, and not the design considerations, are what you need to focus on when you start a project. And, without carefully considering each question individually (and then together) I assure you that even the most dynamic of websites will ultimately fail.

For this article I’ll discuss each aspect in turn, and then combine the two to show you how attending more to these areas will give you a much easier design job in the end. I’ll also spend a little time talking about the economic aspects of this strategy, and how you can use it to increase revenue and lower your chances of spending hours designing a site the customer doesn’t even like.

Question 1: Who is going to be using this site, and what are they like?

The first and most basic consideration to make is about the audience or users of the site (I’ll just use ‘audience’ from now on as a general term). And I don’t mean your audience, but the audience of the website you’re about to make. You must both identify that potential audience and then identify the characteristics it possesses, affecting how they engage your site.

Start with your client: ask him or her to tell you who the customers are. There’s a good chance they’ll already have a fairly good understanding of the customer’s demographics—from their ages to their ethnicities. You can also simply think about the product, service, or organization that the site is being designed for. Do some simple Internet research to help you figure out as much as you can. Record all you can about the potential audience. 

Factours to think about include:

• age.
• education level.
• technological literacy.
• familiarity with the organization or product.

Next try to understand how these characteristics will affect the design of the site. For example, the age of the audience could determine what images you include or what references you make to popular culture. To highlight this point, look at www.Barbie.com, a site designed entirely for girls between the ages of 8-13. The site design would be completely inappropriate for an audience of older girls, an audience of boys, or an audience from a culture or country that knows nothing about Barbie (though, finding a locale knowing nothing about Barbie is sadly becoming difficult).

The next characteristic I list—education level—should seem pretty straightforward, but “technological literacy” may not. What I mean by this is the extent to which your audience is comfortable with and experienced at viewing websites and surfing the Internet. If your audience is “highly technologically literate,” you can be comfortable in assuming they’re familiar with many of the features of Web 2.0, like user forums or article comments and feedback (user-generated content). However, and I run into this all the time, there are those users who have no idea what a forum may be for or how to use one—and they’re said to have low technological literacy.

For each of your user’s characteristics there will be an associated effect on the design of your website. I always urge my students to first brainstorm about the characteristics of their audience, and then next to each characteristic, brainstorm the associated affect and how they can design for that affect.

In the case of technological literacy, the audiences’ level could determine what type of features your site includes. Does it have a high degree of interaction, expected by young people or those who spend much of their time online, or should the pages be static, and “safe” to reassure those unfamiliar or uncomfortable online? For each characteristic there will be a number of associated compensations you must make in the design, and knowing this at the beginning is a whole lot better than finding out about it after the site’s been deployed.

Question 2: What is the purpose of the site, and what are the users’ purposes for going to the site?

It doesn’t make a lot of sense, but people will often design a site that doesn’t necessarily reflect the site’s true purpose. An e-commerce site, for example, should have as its focus not only the product, but also the e-commerce mechanisms needed to carry out a transaction. Even if a site is displaying the store’s products in stunning galleries with comprehensive descriptions, detailed close-ups, and multiple views, all of these features will be for naught if a customer can’t figure out how to check out and pay for the products. Even worse are the e-commerce sites that simply “hide” the products from the customer to begin with.

The fault in such cases usually lies with the designer who spent too much time being creative and not enough time planning. Understanding the site’s true purpose and planning a design around that purpose will resolve potential conflicts between creativity and function.

On the flip side of this discussion are the users themselves: what do they want to do on the site? Do they want to learn about something, like a product or service, or do they want to purchase something? While seemingly related, these are two entirely different purposes. If users are browsing your site to gain knowledge about something, they’ll be turned off by pushy e-sales tactics, like incessant pop-ups and links leading them to purchase mechanisms. Instead, in this particular case, a more passive approach is called for.

Take for example a car company. While the company’s website has the primary purpose of selling their cars, the company understands customers go to the website to learn about the products, not buy the products. So instead of treating the site strictly as an e-commerce site, which overtly “push” their products, the car companies instead use their sites to disseminate information about their vehicles, and they do it in a way that makes customers more willing to buy it at the dealerships. To see what I’m talking about, look at Ford.com and CarMax.com. While Ford wants you to learn about their cars, CarMax just want you to buy them. Look at how different the approaches are, and you’ll instantly recognize the different purpose each site has, and the corresponding purpose the audiences for each site have.

To find out these purposes you again need to do research. Talk to your client first. Make sure that, not only do you understand what the client’s purpose for the site it, but that the client himself understands the purpose (they commonly won’t). If you can, the best way to understand the audience is to talk to potential members of that audience. Conduct surveys if possible to really make sure that you are designing this site to fulfill the goals—that is to meet the purposes—of both players: the client and the user.

Knowledge is Power

Sorry to use yet another tired cliché, but, tired as it is, it rings true. From a design perspective, answering the above questions will naturally lead to an easier job of creating the website. From the answers about the customer you will have a better sense of what images, colors and fonts to use. You will also understand better how you can organize the site to provide the user with an experience they will already be familiar with (necessary for increased usability). Your tone will be appropriate as will the language you use (derived from understanding cultural characteristics and education level). In essence, the design will have been narrowed down immensely.

At the same time, by understanding your audience, you will better understand why they may go to the site in the first place. From their, you match that against the purpose of the site itself. Although I’m sure Ford would love to sell cars online, as CarMax is capable of doing (though I’m sure rarely does), they adjust their own goals and make them as much as possible coalesce with the goals of the audience.

Ultimately, following the guidelines here will save or make you more money, and will definitely pay off in time dividends (and will probably cause you less frustration). Organization is always a key to success, but for some reason I’ve seen many a web designer throw organization out the window in favor of the instant gratification gained by the creative design process. And sometimes it works out, and the designer delivers a product that the client is happy with, that meets the audience’s purpose and compensates for their characteristics.

However, this rarely happens. Instead, the scenario usually unfolds like this: after spending a short amount of time with the client, the designer thinks she understands what the client wants, gives little if any thought to the audience or user, and creates a site based on a cool design that meets the designers presumed purpose. This, of course, fails miserably, is nothing like the site the client actually pictured or wanted, and is not useful at all to the audience.

The designer then has to sacrifice more time starting from scratch, learning the things she should have learned to begin with, and ends up with a site the client is happy with. By this time, however, the billable hour average has dropped to somewhere around $10.00 per hour because of all of the extra time the project has cost.

In some instances, you can also charge for the time you spend in these discussions. I bid recently against another company to build an enterprise-level content management system (and won). During the process I inadvertently ended up with a copy of the competitor’s cost sheet (a generic one, not for this specific project, so nothing unethical about it). The first phase of their design and development process is called the “Discovery” phase. 

Let me quote what happens in this crucial “Discovery” phase:

· Review current Web site and available documents.
· Company consultant, writer, designer and interactive strategist visit the organization (one day)
· Develop the discovery document with up to two rounds of revisions

So, before they set mouse to PhotoShop, before they set CSS to Notepad, they try to understand what they need to create. They do so by conducting online research and visiting the organization to talk to the client (for one whole day). Their cost for this is—and I swear I’m not making this up—$20,780.00!

Obviously things change with an enterprise-level project: the organization is bigger, the problems and solutions are more complex, the profile of the site is bigger, etc. I don’t expect many individual designer/developers to get that kind of money for the discovery phase of a small business’ web site design. But know these two things:

1. You’d be justified to charge something, and …

2. Even if you don’t charge anything overtly, include it implicitly in your price because the process creates a better product. Guaranteed.

About the author:

Clinton R. Lanier is an Assistant Professor of Technical Communication at New Mexico Tech, and the owner of Lanier Infomedia (http://www.lanier-infomedia.com), a web design/development and technical communication consulting company located in Las Cruces, NM, USA.

Functionality and User Friendliness:  

The first thing that stands out as soon as you open GIMP, is just how different its interface is to Photoshop’s.  Seasoned Photoshop users may have to get used to the multiple screens and the different tool placement, but you shouldn’t have a problem adapting over time.  If you’ve never used Photoshop before, you don’t have to worry about this as much.

GIMP has advanced color management tools, filters, useslayers and channels, and allows you to undo your history with the click of a button.  The program also has a pretty nifty “Align” tool that allows you to align a list of layers, paths, or guides with another object, a selection, or the image itself.  

Although GIMP has managed to stay competitive by offering more advanced tools, it is lacking in its advanced color scheme support (No CMYK) and as of right now, it only supports 8-bit per channel images (whereas Photoshop supports 8, 16, and 32).  The new version also offers beginner-friendly tools like automatic Red-Eye Correction (not available in previous versions) and guided color selectors and crop tools. 

If you’re set on the Photoshop interface, be sure to check out GIMPShop, a modified version of GIMP that has the familiar Photoshop layout.  In terms of compatibility, GIMP uses XCF format but can save to PSD formats as well as BMP, JPEG, GIF, TIFF, and PNG.  

GIMP is available for Linux, Windows, and Mac OS.

Awesome Features:  

• Nestable/dockable palettes keep your workspace streamlined and less cluttered.  
• Crop Tool Guides (Rule-of-thirds, Golden Rule, etc).
• Great selection of filters, especially for a free program.
• The color picker tool allows you to pick a color from anywhere in your desktop, not just a GIMP window.  (Saves the hassle of taking screenshots and importing the image into GIMP just to take a color sample!)

Features to Write Home About…

  Although it may take some getting used to, GIMP is        incredibly customizable using the “Preferences” section.  In  fact, this is where it may actually surpass Photoshop  (although recent Photoshop versions have become more  customizable as well).

  The Bottom Line:  

 Definitely try GIMP if you’re looking for something new (or  something free) to edit your photos.  The functionality and  customization options are great for a free program although  the multiple-window interface could take some getting used  to.

Final Mentions:  

If you’re a newbie to photo editing, you might find the “help” section lacking and there aren’t as many guided options available for GIMP as there are for Photoshop or the more affordable Photoshop Elements.  If you’ve tried GIMP in the past and didn’t like it, go into 2.6.5 with an open mind and remember, these developers don’t have the resources that Photoshop developers have and they still managed to churn out a kick-ass product.

If you want to download gimp, click here:  Download

I wanted to introduce you to a new contributor to the magazine, Clinton R. Lanier, a fellow educator who has agreed to share some of his practical web design knowledge with a series of articles. This is the first.

Thanks for reading,

Stefan Mischook

-

“I make everything in-house!”

As the owner of a web-design business, hearing this exclamation from competitors puts a smile on my face. As a web design instructor, however, I admonish my students for the same declaration.

I don’t know why so many web designers feel the need to try to make everything themselves. Maybe it’s the innate creativity flowing through their veins, or the fact that web design is a very artistic enterprise. Whatever the case, the philosophy that everything on a website should be proprietary costs designers time and money.

The reason is simple: reinventing the wheel—creating your own solution to a design problem instead of purchasing an already-made solution—does not give you the return on investment that you’d see by using a third party’s solution. This is true for every business, but especially so for web designers.

Here’s a simple case to illustrate this point. Let’s say you have a client that is going to pay you $2000.00 to design an e-commerce website with an online catalog, a shopping cart and a checkout mechanism. You could spend your own time to make this portion of the site, or you could purchase an off-the-shelf component.

Now imagine you find the component you need for $500.00 (companies like ecommercetemplates.com sell customizable solutions for as low as $149.00). Is it worth it to buy the product rather than make it yourself?

Well, now let’s say it would take you 20 hours to make the component yourself. If you do the math, you’re making $25.00 per hour to create the component you could otherwise buy for the $500.00. If you save yourself the 20 hours to work on or find another project, you could end up generating much more income in the long run through the volume of projects you’re able to complete.

The number of solutions available is enormous, and chances are you can quickly find just about anything you may need at a cost-effective price. The most numerous, perhaps are templates, which are usually available free or for a reduced cost by websites hoping to get you there to increase the number of page views for advertising revenue. Often the freebies require you keep the developer’s copyright logo at the bottom, but by spending a bit you can buy the right to erase their name and replace it with your own. Templates are especially smart to think about because they’re so easily modified, thus simple adjustments to the style sheets or the HTML pages will change the look dramatically.

It’s also a good idea to shop for and buy royalty free images. I’ve seen many designers—including, sadly, some of my own students—have to cough up money or pull down sites because they ripped images off of Google or some other place. Paying money to a third party for source images shuffles the copyright responsibility off to them, and you’ll have recourse if it turns out the image is copyrighted elsewhere. And like all other third-party solutions a primary rationale for buying royalty free images is to save you time (and therefore, money) and to additionally get a good quality product.

Not to pitch for anyone, but I personally use istockphotography.com for images that I’m confident won’t get me sued when I use them on sites. They also sell Flash videos, music and vector graphics. Like the templates, the products can be modified after you’ve purchased them. I’ve actually never used an image I’ve bought without first cropping or in some other way editing it. Thus, I’m pretty sure the image I finally end up with on my site won’t closely resemble images on other sites.

Speaking of Flash, there’s nothing I hate more than wasting time making a Flash intro movie or menu when I could be doing something else. I’m a bit biased against Flash, to be sure, but many customers want it, and for some reason there’s a belief by those same customers that Flash products justifiably add 25% to the cost. I won’t complain when the customers up-sell themselves, but like other components of a website I try to get around doing it myself. Websites like flashcomponents.net sell just about any Flash-oriented component you could want, including slideshows, menus or whole site templates: and when compared to the time it’d take you to create a custom component, they’re quite affordable.

To explain my disdain for Flash, let me just say that I’m not what you’d call a Flash expert: I’m more comfortable with other aspects of site design and development. This, though, brings up yet another point to support using third-party solutions. I’ve noticed in my own students that for some reason they seem to gravitate towards different aspects of design/development. I have on a team of developers right now an individual who is about the best PhotoShop mock-up person I’ve ever seen, and he’s definitely above-average on Flash. But, he’s nearly illiterate when it comes to PHP (and just, ‘okay’ on CSS). However, another member of the team is a whiz on PHP and CSS, but only passable with PhotoShop and Flash.

The lesson here is that you can’t be an expert in everything. Yet if you are going to design/develop websites professionally you are expected to be a “Jack of all trades.” And this, in addition to the time-savings (leading to a higher ROI for both time and money) and the customizability of third-party solutions, is the next most important reason to consider using what someone else has made. In any of the sites I’ve used for example purposes here the products are the result of people who are masters at that particular tool. I guarantee that PHP experts are not spending their time making Flash components, and vice versa.

Some designers think that perhaps taking this approach makes them appear more like an amateur and less like the professional they want to be. But consider this: many larger technology corporations use this same approach. While working for IBM years ago I witnessed them go through a dilemma. While they had the DB2 product—a great enterprise-sized database tool—they needed a dedicated, online storage manager. Their solution? Partner with Tivoli and co-develop the Tivoli Storage Manager in order to customize the features of both it and their own proprietary product. They took the same approach to Lotus and a whole host of other products (which they eventually purchased, but the point remains).

Perhaps a better example is that of Adobe. In his book, Sketching User Experience, Bill Buxton—a designer for Microsoft Corporation—points out that of all of the applications sold by Adobe, only two were created in-house. ONLY TWO!!! Aside from Illustrator and Acrobat, every other application Adobe puts its name on was created by another company and then bought by Adobe.

Thus, there’s no need to feel like relying on third-party solutions makes you less of a designer/developer. Instead, rest easy in the knowledge that doing so is actually the same strategy used by big industry.

Personally speaking, I take this approach when I develop sites. For example, I do much of my work with the open-source CMS, Joomla. The wonderful thing about Joomla is not that the main component is free or powerful, but that so many extensions have been written for this primary system that functionality and modification is made super-simple. With just a few small tweaks of already existing components, I can have an online gallery or an online catalog (or both). If I spent the time making from scratch what others have already created, I’d end up losing in the long run.

One caveat, however, must be discussed before closing. While using third-party solutions is a great business strategy, ethics demands you not mislead your clients. If they ask for, and you charge them for, from-the-ground-up customized solutions, well then you’re obligated to deliver the same. I’ve found most clients don’t care as long as you’re charging them an honest fee to begin with and the final product does what you’ve promised and they want.

Thus, embrace the third-party solution. Revel in the fact that you can with confidence promise clients just about anything under the sun on their website and then deliver quality, professional solutions you didn’t even have to make. The time-savings will lead to better revenue in the long run. And that, I guess, is the bottom line, right?

About the author:

Clinton R. Lanier is an Assistant Professor of Technical Communication at New Mexico Tech, and the owner of Lanier Infomedia (http://www.lanier-infomedia.com), a web design/development and technical communication consulting company located in Las Cruces, NM, USA.

Elements is a great choice for those web designers who want great functionality at a fraction of the Photoshop’s price.  If you’re looking for a piece of photo editing software that doesn’t sacrifice features for simplicity, look no further than creative software giants Adobe’s Photoshop Elements program.  Although not as robust as the full-fledged Photoshop or as interfaced with the Creative Suite, the new Photoshop Elements 7 has proven itself through its consistent high rankings in ease of use, features, and best of all – price.

Like its predecessors, Elements 7 appeals to both those beginners looking to do a bit more editing than what iPhoto has to offer and the more savvy photogs who choose not to foot the bill for the higher-priced Photoshop application. 

Functionality and User Friendliness:

In everything that Elements is designed to do, it exceeds expectations for its ease of use and compatibility with multiple formats (PDF included!). 

Easy to Import

Elements can import files from almost any media:  camera, scanner, cell phone, CD, etc).  Bonus points for allowing PDF files and saved video frames into your library; Elements help you organize all of your files within one program. 

Easy to Organize

Organizing photos is also easy as the photos organize as they import.  You can also add keyword icons and ratings and if you’re easily influenced, you can take the built in suggestions for “stacks”.  Everything is pretty much drag and drop.

Easy to Share:

This helps those using Elements to create projects they plan on sharing (also made surprisingly simple with a click of the Elements’ “Share” button, linked with several  functions like Kodak Gallery, SmugMug, and Photostamps.)

The Elements interface is also enjoyably simple.  By clustering similar functions, you’ll not need to navigate through countless tools or a complicated interface to find the ones you’ll use most, a definite plus for those who get frustrated by the full Photoshop’s overwhelming toolsets.

Awesome Features:

Notable features include three editing modes:  quick, guided, and full. 

·      Quick mode let you access a few features to tweak lighting, sharpness, and colour, amongst others for those quick fixes. 

·      Guided mode provides you with step-by-step How to’s on common editing choices and shows even the beginners the robust functionality of the Elements program.  In fact, its almost like having a private tutour to show you how to work through the program, saving you the trouble and aggravation of looking for third-party tutourials or the dreaded instructional books. 

·      Full mode opens up twenty-two different tools and the opportunity to work with multiple layers, for those more seasoned editors. 

Features to Write Home About…

Elements’ “Photomerge” feature lets you pick the best of all worlds when trying to edit a group photo.  If someone wasn’t smiling or their eyes were closed, simply choose the best side of each person (providing you have several photos of the group) and merge the photos to create the perfect group shot, ensuring that everyone is happy with the next pic they’re tagged in.  And, as mentioned before, definitely use Elements’ “Guided Help” if you need to beef up on your editing skills.

If you need more help outside of the built-in assistance that Elements has to offer, you can find your pick of online tutourials and printed books – but play around with the “Guided” editing and you’ll find that you may not need them.  Because of Adobe’s popularity, you can find a lot of forums and third-party help.

The Bottom Line:

A great program for anyone who wants an (almost) full-fledged photo-editing suite without paying the price for Adobe’s Photoshop program.  At an MSRP of $99.99 (USD) and many outlets offering a lower price, Elements is the way to go if you’re looking for hassle-free photo editing without sacrificing functionality. 

Final Mentions:

Elements works incredibly with the Adobe Premiere bundle if you’re also interested in video editing.

Look for our upcoming reviews of the Top Ten Photo Editing Applications (including freeware) and an upcoming series of articles on web design software.

I wrote a quick article today on what to expect in the web design business now that we are in a recession.

I’ve seen this before (in the last recession) and I also see what’s going on now … so I got some answers! I also give you some clues as to how to position yourself so you can actually profit in this environment.

The link:

Web Design in a Recession

Thanks for reading,

Stefan Mischook

www.killersites.com