You might ask, “What made them similar?”

Each of these websites uses a feedback tool of some sort. These feedback tools are immensely helpful to use on sites, particularly those with complex functionality. Before websites launch, they (should) go through an extensive QA process; despite all of the testing and pre-launch preparedness, there will always be little things that the QA team or testing group missed. By having feedback tools available to the end users, you’re able to collect feedback from some of the best testers: your actual website visitors!

Here’s my list of faves, and you’ll notice that all of them use the nifty feedback tool.

Stay

This websites provides travel guides for major cities around the world, and they’re available both online and for download. Why lug around Rick Steve’s (another favorite of mine) blue book when you can keep all of this information online? I like the flexibility of managing your travel information in whatever format you prefer: read it online, save it electronically, or print it out and take it with you. Note how easy it is to supply feedback should you notice something funky on the site.

Stay

Walk Jog Run

LOVE this site! For those of us who enjoy running, but who tend to run the same routes all the time, this is a great resource for sharing running routes and getting inspired to try a new workout. This interface is so much better than some of the other sites I’ve tried to use, and I really like how it utilizes Google Maps (who doesn’t like Google?). And, for the off chance that something isn’t working well for you as you browse through running routes, giving feedback is readily available and easily accessible.

Walk Jog Run

Movieclips

If you like catching glimpses of your favorite movies, or just wanting to catch the good or funny parts, this site is for you. I love how they’re categorized by easy-to-understand filters: bros & bromances, hilarious, and most popular. This makes it super easy to find what you’re looking for. And, the feedback tool is present again…

Movieclips

And, just because it’s fun, here’s some good old-fashioned office humor to brighten your day. Enjoy!

Movie Videos & Movie Scenes at MOVIECLIPS.com

There are rarely any rules or design parameters when doing show posters, aside from including all the pertinent information and staying within the limits of basic printing capabilities. Poster design is a virtual designer’s playground where we are given license to experiment with typography, color, illustration and layout to express our visions; there is rarely any sort of creative filter or limitation.

Given the fact that I primarily contribute inspiration posts to Fresh, and I moonlight as a poster designer while not pushing pixels at eROI, this post will combine these two constants. I would like to share some of the work of Toronto-based designer and screen-printer brother-duo Andrew and Matt McCracken, otherwise known as Doublenaut.

I don’t know much about the background of the brothers McCracken, other than their work. They have a beautifully simple site, complete with a blog of recent work and a shop where they sell prints of the posters in their portfolio. Doublenaut seems reminiscent of Oakland’s Small Stakes and Minneapolis’ Aesthetic Apparatus, in that their small scale operations pump out tons and tons of stellar work and they seem to only do show posters — which is traditionally very far from lucrative.

Their work shows obvious inspiration from the tactile  and hand-done aspects of classic Saul Bass, while integrating clean and modern vector illustration and typography. Vibrant color choices, clever compositions with smart hidden imagery, and an apparently solid understanding of the serigraph medium make Doublenaut’s body of work one to get easily sucked into. Trust me — I just examined every image on their site before beginning to write this post.

The following is a series of my favorite pieces. Enjoy, and if you are smitten enough, go buy a print here.

This grouping of color palettes is inspired by all of the beautiful, lackadaisical colors of late summer. School is starting again, Fall is on the horizon, and leaves are starting to turn.  I’m thinking about enjoying a drink on the porch, watching the sunset.

I selected these from palettes created by users on Colourlovers (an awesome source for inspiration). If you haven’t checked out this site before, take a peek and see which color palettes inspire you!

Roses by Earth

Love, love, love the fuchsias of my first choice!
It is on the more lively (and less relaxing) side of my group today. Hot!

Indian Summer by prairieman

Can’t you just see the leaves falling?
I love the delicate, almost Victorian, quality of this palette.
The pumpkin color second from right is amazing; the most Fall-esque palette.

Falling Leaves by nocturne

I love the pairing of these muted greens with super vibrant yellows.
The greens are so calming but the yellow has tons of energy; a great mix.

Rose Garden Sense by Nice Autumn

The pairing of a soft yellow with a medium pink is a feminine classic.
I love where these two colors meet in the middle. Divine!

Roses Are Not Red by girlboheme

This definitely has a bit of a 70’s vibe going on.
The lime color is awesome because it isn’t too vibrant, and I love the two creams.

There you have it! I’m sad to think that summer might be coming to an end soon, but it is all the more reason to embrace it while we can. Get out there and squeeze out every last drop of summer!

What colors are inspiring you?

This year, at the annual eROI party, our theme was “Release Your Alter Ego”.  The idea behind this theme was to push our creativity — how did we want to express ourselves to each other? Are you a sinner, or a saint? A beauty queen, or a goth chick? Trust me, it’s not as easy as you might think to identify your own alter ego.

Check our our stellar party invitation:

eROI Alter Ego Party Invitation Email

To preface these upcoming photos, people chatted for weeks prior to the party about their alter egos. “Who will people come as?” we’d ask ourselves in our team meetings. Part of the party’s allure was coming to the shindig in your alter ego outfit and surprising all of your co-workers. As you can see, some folks had a lot of fun with their alter egos.

Cowboy Ryan

Bad-Ass Karen

Richy Rich and his confused footwear

Old Man Tom

Princess Robyn

Garrett as Guido

We love our neighborhood here at eROI.

Nestled in between downtown Southwest Portland, and the ever-classy Pearl District, Old Town / Chinatown remains one of West Portland’s neighborhoods that has held on to some of its history and gritty peripheral personality while it has changed over the years. It’s one of the last few neighborhoods where you might see a screaming crazy person, a crowd of folks eating at a fancy restaurant, and a DIY art gallery opening all within a few blocks of each other, and its residents take pride in this edgy diversity.  It’s a happening sort of place, and a lot of creativity and progression take place right under our noses, even if we might not be aware of it every day.

Image courtesy of Portland Ground

It is in this light that a committee of people who work in Old Town banded together in 2009 to create the Old Town Block Party. The concept was simple: to get businesses, restaurants, and all of their patrons and employees out in the open, share their work and culture with everyone else, have a few beers, and enjoy some good music – all for a charitable cause.  2009’s inaugural Block Party was a big success boasting over 3,000 attendees throughout the day and donating money to resurrect the historic Hung Far Low Cocktails sign, and this year’s party promises to up the ante. Killer food, drinks, and bands are only part of the reason that this free (What?! Free?!) event is going to rule this year.

Continuing its charitable cause, this year the Old Town Block Party committee chose to split the donations between a few shelters and homeless transitional projects in the area. Proceeds will go to benefit Transition Projects, Rose Haven, Sisters of the Road, and P:ear, so we all have our fingers crossed for a big turn out.

Occupying part of the large parking lot in the center of Old Town / China Town, the event’s format revolves around booths from local businesses showcasing their
services / wares, which remain up all afternoon accompanied by some of Portland’s best DJs (The Fix DJs, Matt Nelkin, DJ Nature and others), food carts, and The Mactarnahans Beer Truck. The afternoon will culminate with a handful of epic bands performing live on the main stage.

Musical acts this year will range from synth-pop trio, Lovers, to self-prescribed party animals, Mean Jeans, to technical axe-wizards, and long-time PDX favorites The Joggers, to multimedia audio-visual outfit Deelay Ceelay. Though the lineup may vary by genre, these hand-picked bands all have high-energy and positivity in common, and will undoubtedly provide a show not to be missed.

Join us in Old Town this Saturday, August 28th. Come for a stroll around the booths, a bite to eat, and a cold beer — stay for the awesome bands. Doors open at 12 noon, DJs all day, and bands starting between 5 and 6pm.

Be there, or be square.

When I think of the accessories that help us function better throughout the day, they’re usually something digital: an iPod for listening to tunes while we strut down 5th Avenue (I’ve only been accused of doing this a time or two), a cell phone, or a laptop.

These digital accessories can be shown some serious love by spicing them up with stickers, covers, or any other kind of decal to personalize them to your tastes. Here are some of my personal faves for your accessorizing enjoyment.

Cell Phones

One of our very own eROI designers, Tom O’Toole, designed this fancy case, “New Vibes“, for Grove. This bamboo case is pretty sweet, and for those of you who prefer something a bit more distinct and sustainable, Grove gives you plenty of great options. And — BONUS — Grove offers free wallpaper downloads of your favorite designers. So, you can heart your fave designers by showing your love on an iPhone cover and on your desktop.

New Vibes, Grove

Here are some other iPhone decals that I’m digging right now, too. A lot of these have coordinating iPod and laptop skins, too.

Emperor Cock, Infectious

This skin actually offers a downloadable background image that coordinates with your skin — a nice touch, if you ask me.

Almond Branches in Bloom, GelaSkins

MP3 Players

For the aforementioned 5th Avenue strut, my accessory of choice is my iPod. This design by Decal Girl is both whimsical, playful, and colorful — three of my favorite things. When you go to buy a new iPod, you have the choice of customizing the color and any potential engraving that you’d like. Increasing your options by considering these decals make the customizing process that much more fun. And, for less than $10, it’s not a deal breaker, either.

Flashback for iPod Touch, Decal Girl

You can find a lot of MP3 player skins; I think it’s important to find several decal designers that you like and then look through their collections to see what they offer.

Shopping with the Poodle for iPod Nano, Skinit

Again, I’m a fan of the colorful whimsy that this print represents. The vibrant colors and lush swirls are super engaging.

Summer Oasis for iPod Nano, GelaSkins

Laptops

If you’ve been to our office lately, you’ve probably seen Dylan Boyd carting around his very own Sleeping Beauty (well, his laptop sticker version of her, anyway). He bought his laptop decal off of Etsy, a great site for smaller business doing online transactions. I’m kind of surprised he didn’t get this one of the Storm Troopers. Pretty bad ass! This would play nicely with the plethora of toys he’s got placed throughout his office.

Storm Trooper, Etsy

I’ve got to admit, I’m loving the street vibe of this boom box sticker from GelaSkins. It seems like a design that would appear on the computer of Chris Masagatani, resident author of the eROI NYC blog.

Boombox II, GelaSkins

MacStyles is another website that’s got some great Mac accessories. They have full laptop cover designs (called MacStyles or MacTatts) and then additional accessories (Maccents) to further spice up your laptop. I love how you can customize all of these pieces by selecting your perfect color! Don’t you adore these Love Hands?

Love Hands, MacStyles

iPad Bonus

Some folks are evolved enough to have an iPad as one of their main accessories. I personally don’t have one, but a few people here at eROI do and they sure are slick. Alex Williams, from our Return on Subscriber blog, has the sweetest iPad case from DODOCase.

This case actually looks like a moleskin journal, and if you’re involved in the design community you know how important it is to have a nice moleskin journal to tote around. You’d never even know he was carrying around an iPad until he opens that bad boy up and starts moving his index finger around instead of putting pen to paper. (Note: Alex special ordered his case and had to wait a while for it to actually be produced and shipped to him. They’re THAT cool.)

For the larger brands, it is a simple way for a client to communicate the essential elements and rules as they apply to their brand in a concise document. A large brand may have multiple agencies working on projects at any given time, and this ensures consistency across the board. This is especially important when working on projects with tight timelines; there is little time for brand misinterpretation. A good style guide will cover all of the major elements, which allows for a Creative Brief to be more focused on the project at hand.

For smaller companies, a style guide is equally important as it becomes the blueprint from which the brand evolves. A small company may not have the resources to employ a marketing/brand manager, and so a style guide needs to work that much harder.

While many companies are already familiar with brand guidelines that include things like logo usage and brand statements, I want to focus instead on what specific elements should be considered for the digital space and the screen.

1) Typography & Color

It’s important to have specifications around typography for both print and the web. For instance, a brand font might be Aksidenz Grotesque but the web font may be Helvetica or Arial. It’s also important to define font sizes as they relate to screen. There’s no such thing as points or picas on a screen, so all typography should be defined in pixels. Color should be handled similarly. Brand guidelines go to great lengths to define color in terms of Pantone, CMYK, and RGB, but they often leave out the hexadecimal values for color that a developer needs.

2) Grid Layouts & Forms

In some cases a website design might be done by one company and developed by another. In these instances, it’s important to define some basic rules around global elements. For example, a design might be based on a 12-column, grid structure on a 960 pixel wide design with a 300 pixel sidebar. Having these dimensions clearly defined allows for a developer to easily create new pages without having to make design decisions that they may or may not be comfortable making. The same goes with elements such as forms; a designer can define what a basic form layout should look like and then a developer can apply those rules across the board.

3) Spacing & Alignment

Again, define all spacing in pixels. It’s important to specify column width, gutter width, and  line-height as they apple to the CSS. A style guide may even go so far as to define the text alignment (e.g. left aligned, centered, fully justified etc.). One of the biggest issues I see during our eROI Q/A sessions is sloppy spacing. It saves an enormous amount of time to have  this spelled out ahead of time.

4) Button Usage

Buttons are an important way-finding element for any website, but especially for larger sites that have many content levels. For example, there may be a primary button style and a secondary button style followed by a text link call to action in order of importance. Many designs now have buttons that utilize web-text and are styled using CSS. This may not look as custom in every case but it allows the developer or client to easily update it, and eliminates the step of having a designer fire up Photoshop just to change the copy on a button.

5) Tone of Voice

While many style guides cover high-level tone of voice for copy writing, they frequently overlook the nuances of writing for the web. For example, the way in which a brand talks to its users on a website is just another extension of its customer service and should be valued equally. This plays in important role when a user is in a scenario like a checkout process, or inputting personal information. Buttons, instructions, confirmations, and error handling should all have a consistent tone of voice.

Every company’s needs are different, but its become increasingly important to address some basic definition around how brand exist in the online space. Consider a style guide a living, breathing document that may need to be updated periodically as the different ways a brand interacts with its customers expands to new technologies.

Here are a few examples to explore:

We the Media’s style guide for the Nike We portal

BBC- Global Experience Language Style Guide

List of Corporate Brand Guidelines

Need this wallpaper in a specific size? You got it!

1024 x 768

1280 x 800

1280 x 1024

1440 x 900

1680 x 1050

At the bottom of this post is a table that explains the various error code messages.

Unfortunately the 404 error page is usually an afterthought, or not a thought at all. Let’s get creative! When designing a custom 404 error page, consider the company’s culture, and the type of response desired by their audience. These will no doubt lighten the actuality of the situation (the page they wanted can’t be found) and possibly steer them into a different direction and increase exploration of the site.

I have scoured the web for clever 404 error pages and compiled a list of 25 for your enjoyment. This list is relatively short compared to other websites such as:

• 60 Really Cool and Creative Error 404 Pages
• 49 Nice and Creative Error 404 Pages
• 36 Cool custom Error 404 Pages
• The 100 Most Funny & Unusual 404 Error Pages

Get inspired to create a custom 404 error page for your site!

www.heinz.com

www.24-7media.de

www.acorncreative.com

www.ateaseweb.com

www.carsonified.com

www.catalyststudios.co.uk

www.catswhocode.com

www.css-tricks.com

www.expanisionboardcast.com

www.chelmsfordlibrary.com

www.homestarrunner.com

www.slonky.com

www.trompe.la.mort.free.fr

www.fryewiles.com

www.jibjab.com

www.martinkorner.co.uk

www.pen-and-paper.de

www.ifolderlinks.ru

www.jotsai.com

www.wpnetdna.mugnai.netdna-cdn.com

www.limpfish.com

www.retardzone.com

www.soocial.com

www.wpbeginner.com
www.project-euh.com

Back to top

List of Status Codes

A brief overview of HTTP status codes is given below.

Back to top

“Was this helpful?”

In a situation where you want to help the user find an answer to a question, or learn how to do something with your product or service, you can ask them directly: “Was this helpful?”  or “Did this answer your question?”  Allowing the user to also leave a comment along with their “Yes/No” answer (most likely “no” if they are frustrated enough to leave a comment) might give you some insight into what they were looking for and how you can improve the content itself, or the search algorithm to better help answer their question in the future. But the “Yes/No” buttons alone, along with a good look at your help documentation search logs, might be enough to show where you may have dropped the ball in your documentation.

Some sites will even display the number or percentage of people who found the answer helpful. However it’s important that you actually do something about unhelpful content rather than let it continuously collect more “no” votes. You don’t want to give the impression that you’re ignoring the feedback the users are taking the time to give.

Feedback Forum Tools

If you want to get feedback from your users on the functionality of your site – if you want them to let you know if anything’s broken, or what they would like to see in the future – you could go the old school route and put up a simple contact form. Enter name, email, a bit of text, and send.  That’s usually the end of the story, and not very satisfying for the user when they don’t know if you even got the message, let alone whether you will act on it.  That’s where Get Satisfaction and other user engagement tools come into play.

Get Satisfaction (and others such as User Voice) helps you integrate community-powered feedback into your site.  Users can not only submit problems and feature suggestions, but they can see what others have submitted and converse directly with those other users and with you (and/or your support person/team). Users can “vote” for issues or features which lets you know which problems are most prevalent and which features are most wanted. With an active support community involving the site support team and other users, the people using their site will feel more confident that what they are saying will be heard and acknowledged.

Social Network as Feedback Tool

If you don’t want to dive in with a big platform like Get Satisfaction, a much simpler way to engage users for feedback is through Twitter.  Monitor mentions of your site or business and see what people are saying about you. Are they frustrated? Confused? Happy? Impressed?  Have a human being man your company’s Twitter account (no automated replies, please) and send thoughtful replies offering help or giving thanks.  Comcast generally has a reputation for horrible customer service, but they really impressed users by making use of Twitter to track down users having problems and providing them with help (or at least consolation).

Making use of user feedback will help you provide the best quality of information to your users, and the best overall site experience.  The best way to get good feedback is to make it easy for your users to provide it to you.  Whether you have something integrated in your site (“was this helpful?” questions and feedback forms), or you go to where your users are (on Twitter), the most important thing is to open up the line of communication so ideas and feedback can flow freely.