Working with Graphic Designers:

A Primer on How to Get the Most for Your Money

By Janis Burenga

As professional marketers, we work with many different graphic designers based on their individual strengths matched to the client project. Most of our clients – as marketers themselves – are well aware of the “rules of engagement” and have learned to rein in impulses that can lead to high costs. From time-to-time, however, we will work with a client unaccustomed to the design process and invariably inexperience leads to unnecessary cost.

If you’re new to graphic design, here are some basic tips to help you get the best design value for your money.

1.    Finalize copy before handing it over to the design team.
Designers charge by the hour, so once they have your material, every tweak to the copy costs money. You may need to edit copy to better suit the design layout, but if you enter into the design phase with final revisions behind you, you’ll save money.

2.    Do not make changes piecemeal.
You’ll absolutely want to make changes. But do so all in a single session, if possible. Every time you “Make the logo bigger on page 4” or “Make a page break before that subhead,” the designer must assemble the digital files, style sheets, scans, photos and fonts that make up your piece and open everything onscreen to make changes. Each time you do this, the designer is incurring hourly charges to accommodate you. Changes are fine; piecemeal changes are more costly.

3.    Be specific about what you’re seeking in a design.
Design is a very subjective thing. Giving a designer directions like “Make it look hot” or asserting “I’ll know it when I see it” is a recipe for difficulties, if not disaster. If you want your material to resemble another piece that you’ve seen, share that piece with the designer. Words like “hot,” “cutting-edge,” and “cool,” are mostly useless in a pre-design discussion.

4.    If you’re uncertain about what you want, trust the designers.
Sometimes you may not have a clear idea about what might work best, so trust the designer to interpret what the approach should be. Second-guessing can add up. Worse, maybe you have a notion of what you want, but don’t communicate it. When the design is presented, you declare “That ain’t it” and the entire process starts over, a time-consuming and potentially costly exercise.

5.    Identify your audience and your objective.
These are crucial bits of information to share with the designer. Designers can “speak” to your audience if they know who they are. And, if the objective is to shock, soothe or sell, the designs can reflect these moods.

6.    Collaboration is great, confusion isn’t.
Let’s face it: for many people, the design phase is the “fun part.” Everyone wants to be part of the team because everyone has an opinion about a design. The adage about design-by-committee resulting in a camel is based in fact. No offense to dromedaries, but your public image is riding on the professionalism of your materials and their design. Chances are, if there’s a six-member team, there’ll be six different opinions on what should be tweaked. If it’s your responsibility to oversee creative services, trust your instincts on purely design issues. If you don’t trust yourself or if everyone wants to get in on the act, let the final decision rest with the person with whom the buck stops.

7.    Let the professionals do their job.
Unless you’re a professional designer yourself, you should ask yourself if changes you’re about to make better communicate your message, or just cater to your own (subjective) preferences. If the ultimate “client” is someone else in your organization, you may end up making design changes only to have them changed back. This costs money, so resist the urge to act as designer.

8.    The design process should not cause angst.
Your materials are important to everyone involved including the designers. But keep your perspective. Every piece cannot be all-things-to-all-people. Hopefully, the piece you’re working on now will be followed by another and another and another, each helping to burnish the brand you’re trying to convey. The longer you agonize over a piece, the less likely your changes will appreciably change the strength of it.

Most of us who work with designers day-in-and-day-out make quick decisions regarding a particular design. Because we know and trust the designers with whom we work, it’s very rare we literally “go back to the drawing board” because we know a brand is not won or lost on the basis of a single piece of collateral, or PowerPoint or even annual report. When we’ve done our homework before we’ve sent it off to the designer, the designer has taken our words, our concepts, our color schemes and our brand attributes into consideration before showing us mock-ups of a design.

PLAN:

1. This is most important tip—work with a professional website designer-developer.
   • A professional web designer should have a collection of sites to share with you.
   • They should be able to provide you with references if asked, or you could just take it upon yourself to ask the website owners whose examples you are shown.
   • Their business should seem stable and solid, like they’ve been around for awhile and intend to be around for awhile more.
2. If you have something in mind tell the designer. It’s very helpful to share a list of sites you like and why, especially ones from your industry.
3. Make sure the designer knows who your audience is. Day spa customers are much different than computer network engineers.
4. Let the designer know before making a commitment if there are technology requirements like ASP, PHP, mySQL, and Cold Fusion. Most web designers are familiar with certain technologies but probably not all of them. We work mostly with PHP and mySQL plus some Flash. We would good or efficient doing a website project in ASP or Cold Fusion.
5. Use a designer-developer who can build a site that is easy to update. You may want to handle most of the updates yourself if you have the time and/or staff or the designer can do it. Either way it should be an easy process. The major search engines (Google, Yahoo, and MSN) like fresh content.
6. If you’re concerned about search engine optimization (SEO), you most likely should be, choose a designer who is familiar with the innumerable ins and outs of SEO.
7. As hard as it may be, try to have a starting point outline and maybe even some content. You and the designer-developer will refine your site as it develops so it doesn’t have to perfect or final. But it’s very helpful to have at least a rudimentary site structure (home, about us, contact us, services, products, sitemap, blog, etc.) and perhaps a rough draft for at least some of the pages. The designer should be able to help you with the site structure. FYI: as of this writing Google like to see 300 to 600 words per page for SEO purposes.
8. Use excellent photography or illustration if you plan to use it. Good imagery will make or a break a website. Hire a professional photographer or use high quality stock images if you need to.
9. Of course, get an estimate. Before getting an estimate you might consider asking the designer if there is a base fee or minimum for website design. If the base fee is more than you are willing to spend tell the designer thanks but no thanks. There’s no sense in wasting your time or the designer’s.

DESIGN:

1. After the designer has enough information and the initial materials to get started they get to work. The first step is to design some initial layouts so the designer, with your feedback, can develop the look. Some designers show one layout, some show more. We usually show two or three layouts, each consisting of a home page and one interior page. Sometimes we do them as working web pages and sometimes as PDFs or JPGs. It depends on the budget and time.

DEVELOP:

1. Once a layout is finalized, the designer creates the web pages. It can help avoid miscommunication and errors to use a designer who is willing to let you see the work at stages during the development. Once we have something presentable we give the client a URL so they can check on progress. It’s not so different from peeking through the plywood wall at a city construction site.
2. One caveat… let the designer do their job. There will be times when the site doesn’t look like you think it should or there’s a nasty error message instead of a beautiful web page. That’s all part of the development process. Missing images, the page not looking right and error messages could appear because the page has been uploaded but supporting scripts or other files have not been yet.
3. Good preparation will minimize changes and make the project go more quickly. However, there will almost certainly be changes from your side and maybe from the designer’s side as well. Language that you thought sounded right or the site structure that seemed logical on paper didn’t quite work on the web. Or an approved layout didn’t translate to HTML and CSS (cascading style sheets) as well as expected. Changes are always part of any web design project and should be expected.
4. Test. As the site is being developed the designer should be checking to make sure the web pages work in the major browsers on both PC and Mac. No one wants a nasty surprise at the end where the page doesn’t display right on a prospect’s computer. Also test that everything functions as it should, especially forms and shopping carts, on a variety of computers. You and/or the designer-developer should get colleagues, friends, family and the guy on the street to make check your site.

LAUNCH:

1. When everything is ready to go the web designer-developer will launch the site. There are number of ways this happens but it usually only take a few minutes.
2. Have another good look at the site to make sure everything is still working.

MAINTAIN:

1. The major search engines (Google, Yahoo, and MSN) like fresh content, so try to update the content on your site every so often, the more frequent the better. Having a site that is easy to update, either by you or the website designer-developer, is a consideration that should not be overlooked.
2. Track your site. Your designer-developer may have set-up a Google Analytics account. This is a very powerful, free tool that provides excellent visitor analysis.

I hope this helps clarify how to work with a website designer-developer. Please add your suggestions and comments below.

That said, I am currently writing a new post using a more advanced method. It uses the Thematic theme and a customized child theme. The advantages being Thematic has a lot of great features and using a child theme leaves the base code in tact. Please stand by.

You’ll need to know some basics:

• how to FTP to your site;
• how to set permissions;
• your database hostname (probably localhost), the database name, your username and your password for the database; and
• some CSS and XHTML basics.

Download and install WordPress

1. Download WordPress.
2. Install WordPress on your server in a new directory. Call it something user-friendly like ‘blog’ or ‘articles’. A separate folder for your blog helps keeps the your site organized and reduces the chance of accidentally overwriting an existing file with a file in the WordPress installation. Follow the easy five-minute installation instructions.
3. Complete the installation and make sure everything is working. See Common Installation Problems or add a comment below if you’re having trouble.
4. Right off the bat you may want to install the Akismet plugin to help keep the spam at bay.

NOTE: The steps below assume that you can edit files with a text or web editing program on your local computer and save them directly to your web server. Alternatively, you can work on the local files (the WordPress directory you downloaded) and upload them to your server as you work.

Initial set-up for your blog template

1. FTP into the WordPress installation on your server.
2. Go to the themes directory. It’s in /yourwordpressdirectory/wp-content/themes.
3. In the themes directory you’ll see that each theme has it’s own directory. Duplicate the classic directory, which houses the classic theme.
4. Think of a name for your new theme, like ‘My Theme’ or ‘Existential’. Let’s call this one My Theme’.
5. Rename the duplicated directory to your new theme’s name except use a server friendly name. Following the My Theme example, we’ll call the directory my_theme.
6. In the my_theme directory, open the file style.css with a text or web editing program, I like Adobe Dreamweaver and BBEdit (Mac only).
7. Change the following lines (should be about lines 2-7) to information about you and your theme:

   Theme Name: Your Theme Name
Theme URI: http://yourwebsite.com/
Description: A description for your theme.
Version: 1.0
Author: Your Name
Tags: tags, for, your, theme, separated, by, commas

8. Once that’s saved login your blog control panel at http://yourwebsite.com/yourwordpressdirectory/wp-login.php.
9. Click on Appearance then on Themes if it isn’t already selected.
10. You should see your theme name, in this example, My Theme, with a thumbnail that looks exactly like the Classic theme thumbnail. That’s because we haven’t changed the thumbnail yet. Click on the thumbnail or the theme name. You’ll see a preview window that looks exactly like the Classic theme, then click on Activate “Your Theme Name” in the upper right corner of the preview window. Of course, in this example Activate “Your Theme Name” would be Activate “My Theme”.
11. View your blog in another browser window or tab to make sure it’s still working. For now it should look just like the Classic theme.

Make an empty skeleton page of your website

This part gets a little ugly before it gets better. You’re going to overwrite index.php in your new theme’s directory with a page from your existing website then fix broken links to style sheets, images, hyperlinks, includes and scripts. Later you’ll add the WordPress code as needed after the skeleton page is working correctly.

1. From your website, open an existing page that has a layout similar to the layout you would like for your blog. Consider the header, number of columns you’ll want, the footer and any other common parts. I will use my About Us page because it has the header, a simple 2-column content area the footer.
2. Save the file as index.php in /yourwordpressdirectory/wp-content/themes/yourthemename. Make sure you save the file in the correct directory so you don’t accidentally overwrite an important index file.
3. Leaving the page layout structure intact, delete the content from this file that you will not want in your blog. I deleted just the about us content and left the header, empty content area and footer as is. Preview your blog in another browser window or tab, it probably isn’t looking so great. Not to worry.
4. Make sure the CSS file links are OK. You can use relative links with dots like ../../../../styles/main-styles.css, absolute links like http://www.mywebsite.com/styles/main-styles.css or a reference to the root directory like /styles/main-styles.css. You’ll know it’s OK if your background and divs are working. Personally, all those dots confuse me. I prefer the reference to root directory method.
5. Fix links for hyperlinks, to images and to any scripts as above.
6. If there are header, footer or other files that are used in your skeleton page with a PHP include() statement, copy the files into the yourthemename directory. WordPress 2.7 does not recognize the PHP include() statement.
7. Replace the PHP include() statements with:

   Using include (TEMPLATEPATH . '/your_include_file.php'); is the WordPress 2.7 way to include a non-WordPress file. But as far as I know the file has to be in the template directory. I would be interested in learning an easier and better solution for this if anyone knows one.

8. Preview your skeleton page again. It should look and function OK but without blog content.

Create the header and footer files

1. Make a new PHP file and save it to the yourthemename directory naming it header.php. It will overwrite the existing header.php file. Again, make sure you save the file in the correct directory.
2. Make a duplicate of the index.php in the yourthemename directory and name it index-backup1.php or similar. This is a backup copy just in case.
3. Open index.php from the yourthemename directory if it isn’t already open. Cut (not copy) the code from the top of the page up to and including the closing head tag .
4. In the new header.php, replace all of the existing code with the code in your clipboard cut from the top of index.php.
5. Save both files.
6. Make another new PHP file and save it to the yourthemename directory naming it footer.php. It will overwrite the existing footer.php file.
7. From index.php, cut (not copy) the code beginning with your footer, just after the end of the content divs, and paste it into the new file footer.php, replacing any code that was there.

   You may need to customize this part some because this tutorial is assuming you are using well-defined div for the different areas of your skeleton page.

8. Save footer.php.

Put it back together and add the WordPress parts

1. Open index.php from the yourthemename directory if it isn’t already open.
2. Also open index.php from the classic directory.
3. Copy (not cut) the first PHP block, probably lines 1-7, from classic/index.php and paste it immediately above the body tag in yourthemename/index.php.
4. Save yourthemename/index.php and preview your file. You should see your header but no blog, footer or sidebar with categories, recent posts, search, etc.
5. Copy the last PHP block, it should be <?php get_footer(); ?> and paste it at the very end of yourthemename/index.php.
6. Save yourthemename/index.php and preview your file. You should see your header and footer but still no blog or sidebar.
7. Copy the middle section—everything between between the header block and the footer block—from classic/index.php and paste into the main content area of yourthemename/index.php.
   ^?View Code PHP

   ','   '); ?&gt; <div> id="post-"&gt; <h3 class="storytitle"><a rel="bookmark" href="&lt;?php the_permalink() ?&gt;"></a></h3> <div class="meta"> — @ </div></div>

8. Save yourthemename/index.php and preview your file. You should see your header, footer, your blog but no sidebar.
9. Open classic/footer.php. Copy the code <?php get_sidebar(); ?> from classic/footer.php and paste into the div in yourthemename/index.php where you want the sidebar to go.
10. Save yourthemename/index.php and preview your file. You should now see all of the basics.

Everything should be working now. Next you can customize sidebar if you want to or finish up with a screen shot.

Add the screenshot

The final step is to replace the screenshot of your blog.

1. Take a screen shot of your new blog.
2. Crop it to 300px wide by 225px high.
3. Save it as a png to the yourthemename directory as screenshot.png replacing the classic screenshot that is currently there.
4. Login your blog control panel at http://yourwebsite.com/yourwordpressdirectory/wp-login.php.
5. Click on Appearance then on Themes if it isn’t already selected.
6. You should see the screenshot of your integrated blog. You may need to refresh the page.

In the blog you are reading this from, I modified the sidebar bar a bit. Please visit How to Customize the WordPress Sidebar.

I hope you find this tutorial useful and accurate. I would greatly appreciate comments, suggestions and corrections.