A kinder, gentler 404 page

You’ve been working on your website for a while. Your content is perfect, and your site goes live. Someone visits your site and searches for a word or a subject that isn’t included on your site.

What will they see as a result of that search? Maybe something like this?

screen shot of generic 404 page

Landing on that 404 page can be confusing and frustrating to visitors. So it’s important to do something to make them feel a little less lost. We’ve seen some pretty funny 404 pages, and humor is a great way to go. Or you could include a graphical element to tie into your business or blog theme.

For greatinsites, we created the following image of an office computer displaying a 404 page. Notice that the image includes our name and the WordPress cup and saucer from our logo.

404-graphic

Then we just added some text and a link to our contact page. Once we were happy with the results, we added the page to our child theme folder—to ensure that our page doesn’t get overwritten the next time we update our theme.

Have you customized the 404 page for your website? If so, what was your design inspiration?

Finding a picture in a picture

When we started on the website for Rochester Somatics, the client had an ocean theme in mind. She already had business cards printed with an ocean image, and we found something similar to use for the website’s background.

As we worked on a graphic for the home page, though, we found the ocean background was a bit restrictive in terms of color. So we needed to find a way to continue the ocean theme while increasing our color options.

We had this stock photo, which included blues and greens and every shade in between. We couldn’t include the island in our graphic, so we looked for a picture within the picture.

Photo of ocean coastline

We used Photoshop to extract a section of the ocean and used that cropped photo as a background for the following homepage graphic:

Thomas Hanna quote on ocean photo from Rochester Somatics website.

Later, when the client needed a cover image for her Facebook page, we revisited the same photo.  This time we chose a section of the ocean that included more blue tones to give the Facebook banner a bit more pop. Then we added an overlay so the text would be visible against the more vibrant colors, and the client loved the result.

Rochester Somatics facebook-cover-photo

When you’re looking for website images, you might discover that the perfect picture is actually hiding inside of a larger image.

Maybe you’ve discovered some hidden treasures for your own website. If so, show us what you found!

Ideas for customizing a stock vector image

When we needed a biplane for the banner graphic of a  blog, we started with the simple vector illustration shown below. The great thing about using a vector illustration (rather than a photograph) is that each element of the illustration exists on a separate layer. So we could open up the layers in Adobe Illustrator and just start playing.

Stock graphic of a biplane with banner

First, we changed the color of the plane, the pilot’s helmet, and the scarf. Then, we added a floral detail to the fuselage to “girl it up” a little. Next, we squared off the end of the banner and added the blog name. Once the text was placed, we exaggerated the wave of the banner to match that of the blog name.

The image was still a little flat, so we added a drop shadow to give it some depth. Then, last but not least, we added a background tile to the blog site to put some sky around the plane.

Below is the finished banner graphic.

Midlife Flyby banner graphic

Even though the blogger didn’t have the budget to hire an artist to create the bi-plane for the banner graphic, we were able to deliver a fun and unique image by starting with a stock vector graphic.

If you’ve used stock illustrations as the starting point for some of your custom graphics, we’d love to hear about it.