Dear Papa John’s: I will fail to perform a usability assessment for *way less* than your guys are charging.

Behold, a maze of digital dungeons and garden-topped horror… *flashback dream sequence*

SCREEN ONE: THE HOMEPAGE

Giant picture of stretchy cheese, check. In-your-face order button, check. Masturbatory picture of founder making a manly basketball shot. Um, check. The door to the labyrinth is deliciously disguised in garlands of high-calorie photography. Pizza: I want it.

Except for the one that’s in Spanish, the nav buttons are looking pretty useful. Hell, standing here, I feel like I can do anything. I’m on top of the world. I can even follow Papa John’s on Twitter (“Making another pizza!” posted at 10:25a.m. “Making another pizza!” posted at 10:25-and-a-half-a.m. “Making another pizza!” posted at…). Turns out that what I can’t do is view the menu without plugging in my zip code.

Not that this is unique to Papa John’s. Thanks to the joys of franchising, each menu is probably a bit different, and they need your location to give you accurate readings. So we’ll cut them some slack, and click on “Menu & Specials”.

Which brings us to…

SCREEN TWO: PLUGGING IN YOUR ADDRESS

The problem here is that plugging in your address and zip code takes you to one screen, while plugging in your city and state takes you to a completely different and way more confusing screen. In a futile bid for expediency, let’s pretend I don’t know that, and I’ll jump straight into the ordering process by filling in an address and zip.

SCREEN 3: THE MENU

Helllooooo, ugly! But OK. Large pizza, plz.

SCREEN 4: CHOICES, CHOICES

If the choose-your-toppings screen has to be this long, then it better be fun to navigate. It had better not, Papa Johns, look like an interactive Privacy Policy. Bottom of the page, I’m presented with two options: “Add to Order”, and “Add to order & checkout”.

I’ve picked a large pizza, I’ve added some topping goodness, and now I want to eat it, so I’m gonna go ahead and “Add to order & checkout”.

SCREEN 5: OHEZ NOES!

But… I don’t have an account. The email address that auto-appears belongs to someone else who used this computer months ago. And there’s no “Not You? Sign up for a new account” option. Save me, Firefox Back Button!

SCREEN 4… AGAIN

Following the trail of garlic-powdered breadcrumbs I’ve cunningly strewn along my path, I land back on the Choices screen, where I, imitating the casual pizza buyer, fail to notice that all of my selections have been wiped, meaning I’ll need to plug them again. Getting hungrier, I try the other button. Add to Cart.

SCREEN 5’s EVIL TWIN: AN ERROR HAS BEEN DETECTOREDZ

HAHAHAHAHAHAHA. That would be the funniest prank call ever. “Yeah, hi, Papa Johns? Oh good. I’d just like to report that there are invalid items in deal code EDO89, but I think that’s only for restaurant number 369.”

I am so tempted to call them right now and actually… oh, no wait. Even if I wanted to, I can’t make that phone call, because there is no number, Neo. There is also no useful error text to explain to the user what actually went wrong. And in an age of live field authentication, there is no need for this screen.

I’m guessing I landed here because I didn’t re-do the choices screen. So let’s hit “Continue”, which should take me back to that screen, where I can modify my… oh. Nevermind.

SCREEN 3: WRATH OF KHAN

Aaaand we’re back to the menu. Aaaand I now have 2 items in my cart, though I only wanted one. I don’t see a checkout button. “View Cart”, maybe?

And another thing: I try really hard not to get my panties in a bunch over “their” vs. “they’re” mistakes and other small annoyances in casual writing. I don’t want to be that girl. But if you were to see mah panties in the presence of crappy grammar, you might rightly point out that they do wad up a little. And I can’t help feeling like having a “View Cart” button for a pizza delivery checkout is a copywriting fail. Just as there is, in fact, no crying in baseball, so there are also no carts in pizza.

Point is, it doesn’t matter what you put on the button, as long as your customers know exactly and immediately how to give you money. “View Cart” doesn’t do it for me.

SCREEN 6: CART

After removing the superfluous pizza, my order looks right, and I would really, really, really like to eat now. Checkout button gets some love.

SCREEN 5: BACK IN BLACK

Dude, you have got to be kidding me. And don’t even ask me what happens here when you have a second Papa John’s tab open, because I’ll lose d6 sanity points. If you were gonna force me to login (which I shouldn’t actually have to do to order from you), then all login information should have been gathered when a) you were gathering zip code data and b) I was still excited about ordering.

This is where 95% of your frustrated customers pick up the phone and just call the order in, begging the question: Why, pray tell, did you spend 20 grand on an online ordering system?

With the Horn of Gondor ringing in my ears, I decide this is no longer about pizza. This is about war.

A very careful perusal of the screen I’m staring at yields up a clue:

A HAH!

SCREEN 7: A NEW ACCOUNT SIGNUP BUTTON!

Sigh. Click.

(Also, “Online Need Help Guide?” Yes, online help you need.)

SCREEN 8: FILLING OUT MY TAX RETURN

After filling out a strangely dual-paneled questionnaire (nice mushrooms) in which I tell PJ’s my marital status, favorite Crayon color and consistency of my last stool sample we get to:

SCREEN 9: NOW WITH 100% MORE POINTLESS CLICKING

SCREEN 10: MAKE IT STOP

SCREEN… 3

NOOOOOOOOOOOOOOOOOOOOO!

“I am so offended right now,” said my husband, giving up and logging onto Dominos, “that I’d rather be repeatedly kneed in the balls by the Noid than pay Papa John’s twenty bucks to not fix their interface. And I don’t even like Dominos.”

In this intermediate-advanced illustrator tutorial, we’ll learn how to make a 3D newspaper icon in Adobe Illustrator. This tutorial is based on the news icon in my <shameless plug> Formida icon set </shameless plug>, and was made in CS3.

We’ll be using the pen tool to create our basic background shapes, adding some shadows, color and shading to give the newspaper a sense of bulkiness and, uh, floppiness. And then we’ll use Illustrator’s Envelope Distort feature to mold the newspaper content to its background. This is the icon we’ll be making:

You should already have a basic understanding of how to use the pen tool and the direct selection tool (white arrow), how to apply color and gradients, and how to move, copy, and import objects and text boxes.

SECTION 1: PAGES

The first thing we’re going to do here is create a series of stacked “pages” to form our newspaper background. To each page, we’ll apply a light white-light gray gradient, and then we’ll apply a drop-shadow to each page to give the illusion of depth. Let’s get started.

Grab your pen tool, and draw a shape like the one below. This will be the top page of your newspaper. The color doesn’t matter at the moment. Mine is green so it can be seen easily. Note how the bottom bows out slightly.

Click on your shape so that it’s selected. Then click over to the gradient tool. You want to apply a light gray-dark gray linear gradient on the shape. The color is very important here, as an unrealistic color will make an unrealistic-looking newspaper.

My gradient colors are:
1. Light gray: #F7F4F5
2. Middle gray: #DDDCDC
3. Dark gray: #878585

Below is what my shape looks like with the gradient originally applied, then correctly aligned. After I’d created the correct gradient, I had to try several times to “realign” the gradient on the shape, so that the bottom dark gray lined up with the angle of the newspaper.

To realign a gradient, make sure the shape is selected. Select the gradient tool. Drag in a line over the top of the shape in the direction you want the gradient to go. This will reposition the gradient.

Now to apply a drop shadow. Select the shape, and go to Effect > Stylize > Drop Shadow. You probably want your drop shadow to be lighter than you think you do. The human eye picks up very subtle variations, so you’re drop shadow shouldn’t be too in-your-face. My settings, and results, look like this:

The trick to making a fully filled out newspaper is duplicating the finished front page you made, altering it slightly by re-aligning the gradient, and altering its shape slightly so that you appear to have multiple pages. This is my finished blank newspaper:

This stack looks like a filled out 3D object. But when we break it apart into its individual pages, we start to see how easy it is to construct a nice looking paper. Here are each of the 6 pages of the newspaper, from front to back:

Your gradients don’t have to look exactly like mine, but they should be varied.

To start duplicating pages like this, select the first page we made, Page 1. Ctrl + C to copy, and Ctrl + V to paste that copy onto the screen. Using your direct selection tool, select just the top-right corner of the copy and change it by dragging it outward, pulling it in, or changing its curve ever so slightly. Do the same for the top-left corner.

With the new page still selected, select your gradient tool, and re-align the page gradient as desired. Then, with your page still selected, right click > Arrange > Send to Back, and position Page 2 behind page 1. Repeat. Adjust page corners as necessary for the desired effect.

You might want to remove the drop-shadow from the last page by selecting the last page (Page 6, in my case) going to the Appearance palette, selecting the drop-shadow field, and dragging it to the trash. If you can’t see the appearance palette, go to Window > Appearance.

Once your pages are stacked and arranged, you’ll want to add some very light shadows to the front of the page to simulate light page folds, and make the newspaper appear to be a little floppy. These will look unrealistic until we drop the newspaper content on top of everything, but bear with me here.

First, using your pen tool or the arc tool, create two curved lines across the newspaper – one thin, one thick. They should be dark gray in color.

Select the smaller arc, and set the opacity (under the Transparency panel) to 63%. Then, go to Effects > Blur > Gaussian Blur. I set my gaussian blur to 17.0 pixels, but your blur will depend on the relative size of the object in your document.

Select the larger arc, and do the same. The opacity on my larger arc is 55%, with a gaussian blur of 42.0 pixels. Select the appropriate blur and opacity settings for your own strokes, so that when you’re done, you have something like this:

Okay, that’s it for the pages and backing. In the next section, we’ll talk about laying in some content.

This is the first set in a new series of 3D icons. You get 6 icons in three sizes, 48×48px, 64×64px and 128×128px. Icons includes – newspaper, RSS, briefcase, home, download and mailbox. Prepaid GraphicRiver customers will pay $3.00 for this set, or buy it without a deposit for $5.00.

We were going for cheap, fast, and simple, simple, simple, so in terms of a design, I settled on the blissfully free Grace Photoblog Theme developed by the UK’s own 7879 Designs.

Price: 5 out of 5

There’s only one f-word I like better than “Free”. And that’s Fibrous Astrocyte.

Functionality: 4 out of 5

Grace comes with a couple of delectable features: an optional “featured content” image rotator that pulls posts from a pre-determined category and displays their attached images on the homepage; and a auto-resizing thumbnail script that, um, auto-resizes thumbnails.

There was some “hrm”ing, some turning the box upside down and shaking it, and some re-re-re-referencing the Grace homepage comments to get the rotator kicked off, and I gather that a few other users had installation issues, but it did work. If you’d like a demo of the rotator, it’s been disabled on patriciapschaefer.com, so check out the live demo courtesy of 7879.

The thumbnail script works like a charm, with each post only requiring one image upload. Grace takes your main image, tosses it up at the top of your post, makes a thumbnail out of it, and drops that thumbnail into the home page. If you’d prefer to control the look and feel of the thumbnails yourself, making them by hand, the Grace admin panel lets you toggle auto thumbnails off and on.

Out-of-the-box Design: 3 out of 5

The beauty of Grace Photoblog is the simple media engine that drives the theme, and in the fact that the photographer’s work, not the web design, is what the theme highlights.

Grace puts the photographer’s creations front and center, with a default capacity for 900px width for each photo – that’s a maximum size I couldn’t find from any other free theme, particularly while the photo is still residing inside the template (not linked off-site or in another tab / window). In terms of photographic display, I think Grace has everything a photographer likes to see.

But an overlarge header that drops photo content too far below the fold, ultra-basic CSS, and a dubious grungy background make Grace in desperate need of some pre-launch tweaks.

Ease of Modification: 5 out of 5

Though the out-of-the-box design isn’t all that much to look at, Grace doesn’t need too much work to look sharp. I made four extremely fast mods to this theme:

1) Took the header height down to a manageable size.
2) Added a dark wood background
3) Added the “wp-pagenumbers” plug-in, which replaces the default Wordpress “<< Previous – Next >>” links with proper page numbers.
4) Dropped in a new logo.

Grace landing page before:

Aaaand after:

And then I gave myself a Girl Scouts sloganeering badge for coming up with Grace: the easy-bake oven of WP-powered photoblogs. Eh? Eh? All in a day’s work.

So, in conclusion…

Awesome for: Photo-centric sites with bare-bones content and navigation, or for use as a “blank slate” engine to design on top of.

Not so much with the: Integrated design.

The set contains 117 free mini pixel icons in two sizes, 20×20px and 16×16px. The format is .png. Each icon is less than 1KB in size.

I’ve done small icons before, usually 20×20, but this is my first go at a 16×16 set. Some of these, like the speakers, film strip, and web cam icons, are dark, and won’t work well on a black background, but the majority of this set should do just fine.

Please read my license before using for commercial purposes.

With this set, you get 128 white and 128 black audio-themed icons for your music player or sound editing application or website. Set includes microphone icons, wave editing icons, music upload icons, cd burning icons, and much more.

On a recent web design project, it became necessary to drop a newsletter sign-up area in a rather space-restricted footer. Instead of try to cram the form fields into the footer itself, or redirect the user to a sign-up form page, I opted to drop the form into a lightbox – or to be specific – a greybox.

This is not a tutorial for beginners – if you’re building your first site, or don’t know much about HTML, I’m sorry to say I didn’t get into too much hand-holding here. This tutorial was created with Wordpress 2.8.5, and I used the Greybox Integrator Plugin.

You might want to start off by installing the plugin through your Wordpress control panel, or through the plugin site.

For an example of what we’ll be doing, check out the site I was working on. Bottom left-hand corner of the page, there’s a “Click here to subscribe” button. Click it. You’ll see what I mean. The newsletter subscription box is not a normal pop-up. I didn’t have to plunder anything from HotScripts, or fumble around with javascript. Instead, the form pops up in a Lightbox (Greybox, specifically). This was done almost completely with available plug-ins and some easy HTML & PHP.

Step 1: Build the form

This bit might seem fairly simple. There’s a billion Wordpress plug-ins that will let you easily create forms, then drop a special tag that references that form onto a Wordpress page, and wallah.

Problem: You tell Greybox to reference the page which houses your form. Greybox loads that page – the ENTIRE page, meaning your site template will load into the Greybox window as well, and your users will be seeing double copies of your site. Not very slick. You just want Greybox to load the form, and only the form – no extras.

You’ve got two major solutions here:

The coder way: If you’re functional with PHP, you can get around this by dropping some easy if statements into your index.php page, ie, if the website is on the form page, don’t load the theme or any other graphics. Or, tell it to load a totally different template to do some hot-shot form styling. I’d throw in an example, but everyone’s page is a different story. This is probably the best method, as it allows you to still use Wordpress plugins and pages to create the sign-up form.

The HTML-er way: Not good at coding, but good with design? Open up your hosting account file manager or jump on FTP, and upload a few form pages that reside outside of the Wordpress directory structure, with a pre-made script that handles the form. You should already know how to create a functioning form, and there’s a hundred billion ways to do it. One way is to create four pages: yourform.html, yourformhandler.php, sent.html and error.html (it doesn’t matter what you name them).

Yourform.html will hold the form fields of your contact form (the main form). This is the page that greybox will reference. Error.html will hold nothing but an error message in case the form doesn’t process. Literally, something like:

<html>
<head>
<title>Form</title> <strong>(greybox handles the title)</strong>
</head>
<body>
<p>We're sorry, your form didn't go through. Want to <a href="yourform.htm">try again</a>? If not, please email us directly at <a href="yournormalcontactpage.htm">email@emailaddress.com</a></p>
</body>
</html>

Your sent.html should be similar, just a “Your form was sent successfully!”

yourformhandler.php will take care of form routing, redirecting the user to error.html if the mail didn’t go through, and redirecting to sent.html if it did. Etc.

Or you can skip all that, and use a form generator like Wufoo.

However you go about this, the end result should be a functioning form that resides outside of your Wordpress hierarchy.

About Greybox Integrator

Like many things in Wordpress, the Greybox functionality works with tags. When you install Greybox Integrator, a new tag button, similar to the wordress “link”, “more” and “lookup” tags, will appear in your page editing window. It’s called the GBI button. You can (and should) read more on exactly how to use Greybox by reading this.

Before moving forward, you should have Greybox integrator installed.

Step 2: In the appropriate page, add with a link to your form

In your Wordpress dashboard, navigate to the page where you want to add the form, or create a new page. Make sure you’re in HTML view, not “visual” view.

Type “Click here to subscribe!”, or any other text you’d like to use. Highlight the text you just typed, and with the text still highlighted, click the GBI button.

Enter “3″, and click OK.

Enter the path to your form. If you used the PHP method, and your form is a Wordpress page, enter the permalink to your form.

Enter a title.

Enter the width of your form – this is how wide your greybox window will be. Because my form only has two fields, I want to keep it small. If your form is larger, go ahead change the size to suit. Size should be entered in pixels.

Enter the height.

And there you go, a link is generated:

Now, when you go to your page or post on the front-end of your site, you’ll see the link to your form. Huzzah.

But what if you want to put the form outside of page content? Like in a sidebar, or a footer? Since greybox relies on tags to generate its links, you’ll still need to do step one and two above, creating a page, and then creating a greybox link in that, but then you’ll also need to pull the contents of your page into a div.

I found a great snippet of code for this, written by WordPress user stvwlf. Read more about it here on the Wordpress forums: http://wordpress.org/support/topic/266861

So, implementing a greybox on the sidebar or other non-content area requires a couple of extra steps, which are:

1. Create your form, as in step 1 above.

2. Create a new Wordpress page, and then follow the steps in step 2 above, to add a greybox link inside of that page.

3. Open up your index.php file, navigate to the place where you want to place your code, and inside of the <div> tags, drop this:

global $more;
$about = new WP_Query();
$about->query('pagename=newsletter-sign-up');
while ($about->have_posts()) : $about->the_post();
$more = false;   // set $more to false to only get the first part of the post ?>
<?php the_content('Read the rest...'); ?>
<?php endwhile;
$more = true;   // restore default $more behavior
?>

So, for example, if you want this in your footer, drop it between <div id=”footer”> and </div> (or whatever the div is called).

In the above code, you’ll need to change “newsletter-sign-up” in $about->query('pagename=newsletter-sign-up'); to the name of your own page. If you’re not using permalinks, you may need to change the query arguments to make sure your code can find, and is pointing to, the right page.

And that’s it!

This file contains 10 high-resolution Asian lantern GIMP and photoshop brushes. Same 10 brushes, two formats (one .abr set for Photoshop, 10 separate .gbr files for GIMP).

It’s not just Eric, either. I used to country-hop a lot, and I remember being baffled when my change-challenged friends would moan about the terrors of packing up your life and unpacking it again elsewhere. It’s so easy – just buy a ticket and follow the signs. Hell, if you’re on the road and you stop paying attention for a couple of hours, chances are good that you’ll snap out of it in the midst of a complimentary continental breakfast.

This is partially due to a fairly standardized transportation system and the well-worn grooves of the several million rolling suitcase wheels that have gone before. But it’s also made possible by an entire world of nice people. Where my caravan would once have had to keep a vigilant eye on the bandit-ridden horizon, now I can enjoy a gin tonic and happily drool on myself for 15 blissful hours without the appearance of so much as a single saber.

So say we’re morally corrupted as a culture if it makes you feel fashionable. Tell yourself we’re circling the drain of courtesy. But I have an Amazon gift card here that says otherwise. Thanks, Eric.

We now return to our regularly scheduled pessimism.

Don’t ask me why I made these – I don’t design games. But I do have a special place in my heart for everything fantasy.

I couldn’t get these to be 100% vector, as the finishing touches are mostly done in Photoshop, so I’m afraid you can’t have the .eps file with this one. But you do get 13 153×153px fantasy icons for your game or website.