Fresh

Our lovely admin assistant, Catt Clark, sent around Time’s list of the 50 Best Websites 2010. Most of these are sites that I’m familiar with, but some were completely new to me. While I perused through the list, and clicked through to check out most of these sites, I noticed a commonality amongst some of my favorites.

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

(more…)

One of the most interesting things about working here at eROI is the variety of clients in which we deal with on a regular basis. On any given day we work with large national brands, and then turn around and help a start up company grow from the ground up. In both cases, it has become essential to have a comprehensive style guide for several reasons:

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.

(more…)

If you use the internet, chances are that you have seen a 404 error page. It is basically inevitable. The 404 error page will be displayed whenever someone asks for a page that is not available. There are many possible reasons for this error; it could be an incorrect link somewhere on your site or someone made a typo when entering the URL.

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!
(more…)

Today I’m going to look at three e-commerce sites that are inspiring us over here at eROI. They’re all fashion related but feature totally different aesthetics. They’ve all done a great job usability-wise, but what really impresses me is how well each of them engage the user in the brand and lifestyle for a holistic and fun shopping experience.

Kate Spade

The current home page is hot! Wow. You’ve got to go see it because the Flash is really well done. It has a 50’s paradise vacation vibe going on (they’ve got a trip to Bali contest currently running that speaks directly to the design). The background color — currently teal — is a custom element that changes frequently to match the design’s style; the last time I looked it was hot pink.

(more…)

With some of the anticipated features of HTML 5 already being supported by major browsers combined with the lack of support for Flash on popular new interactive devices like the iPad and iPhone, the future of Adobe’s Flash has never been so uncertain. Is it time to cut and run from Flash? Steve Jobs would like you to think so. High-powered opinions aside, Flash’s indelible place in our browsers has definitely come into question.

How HTML 5 is encroaching on Flash’s turf

HTML 5 will be the next version of HTML (Hyper Text Markup Language) and with it will come some of the biggest advances in HTML’s relatively young history. The proposed new standard will change the way websites are built and looks to minimize the need for proprietary browser plug-ins like Adobe Flash and Microsoft’s Silverlight.

Some of the biggest impacts will be in how HTML handles audio and video without the use of rich media plug-ins such as Flash. This new functionality will be handled with new tags <video> and <audio>, while still aiming to be backward compliant with older versions of HTML.

This has led many to believe that Flash’s days as an interactive industry leader are over and that there will be a day when you won’t need to upgrade your Flash Player ever again. Don’t hold your breath.
(more…)

Although I was sadly not able enough to attend An Event Apart Seattle this year, I was able to live vicariously through those that did attend, using a handy dandy Twitter feed tool created for the event: A Feed Apart. Clicking on the “Sessions” tab gives you all the Tweets tagged with “aea” that were sent out during each of the event’s sessions – which gives you a pretty good idea of what the highlights were.  One session that seemed particularly interesting to me was “Mobile First!”, presented by Luke Wroblewski. During the session Luke W. convinced attendees of the importance of designing the mobile version of a site or app FIRST, before the “desktop” version.

How did he do that? I’ve decided to pick out some highlight Tweets from the session sent out by audience members, and then try to compile more information and resources to those points. Conveniently, Luke W. also wrote a blog post on this same topic last year, so I have a good place to start from. So even though I wasn’t there in person, I’m hoping to be able to come up with a good overview of his topic.  So let’s go!

(more…)

No. Not really.  As long as you include wireframing in your process, you’re “doing it right,” no matter the tools you choose or the process you use.

Well, that’s not very satisfying is it?  What if you’re new to wireframing and need some help and inspiration for getting started?  Luckily there are a lot of wireframe pros out there who are willing to share their process and some examples of their work.  The important thing is to not obsess over the details of how the pros do it: which tool they use (Balsamiq, OmniGraffle, Fireworks, HTML) or what the deliverables are (flat wireframes, clickable wireframes/prototypes, paper prototypes, STOP-MOTION paper prototypes, protocasts).

Trying to figure out which is the best way or the “right way” to wireframe before you even start is like obsessing over finding the best ergonomic pen and the moleskine notebook with the perfect paper weight and texture before you start writing your novel.  You just gotta start with what you have, and figure out what works best for you as you go.

That point was illustrated very well during a workshop I attended at SXSW called (wait for it) “The Right Way to Wireframe”.  Presented by Russ Unger, Todd Zaki Warfel, Will Evans and Fred Beecher, the workshop covered four different approaches to creating wireframes and designs for the same website redesign project: Lend4Health (read the backstory of this idea here, and about the process of choosing Lend4Health here).

Each of the presenters (and their partners/teams) developed the wireframes and designs individually and isolated from the other three, so that they wouldn’t be influenced by what the others were doing.  So we get a pretty good idea of each person’s/team’s typical workflow. Plus,they decided that each would use a different tool to create their wireframes, so that we could see four different tools in action — and also see that they all get the job done pretty well.  They presented four different workflows, with four different wireframing tools, none of which are the “Right Way to Wireframe”, but simply “ways to wireframe”.

Here are the four videos presented in “The Right Way to Wireframe,” for your viewing pleasure:

Russ Unger | Tool: Balsamiq

Todd Zaki Warfel | Tool: Fireworks

Will Evans | Tool: OmniGraffle

Fred Beecher | Tool: Axure

You’ll notice that even though they use different tools and have different deliverables, they all follow a similar process: research and requirements gathering, creating personas, creating a sitemap, sketching, wireframing/prototyping and finally, designing the visual look and feel. So if there is a “right way” to be found in the act of wireframing, it is in the process leading up to it: research first, sketching ideas next (lots and lots of sketching) and THEN wireframing. But the act of wireframing itself can be approached from many different angles with many different tools. The way you do it is up to you based on personal preference, the requirements of the project, and what will allow you to communicate ideas best to the individual client or project owner.

Can you guess what the most important piece of software is on a personal computer? It’s not Notepad, it’s not any office productivity suite, and it’s not Solitaire. Certainly the most important piece of software, at least since the 90’s, is the web browser. The web browser has brought the whole world together digitally through web email, shopping web sites, and Facebook. (And yes, you can also use a web browser as a notepad, office suite, and you can play Solitaire with one, too.)

Content on the web has evolved from simple text and tables to elaborate layouts of page intermixed with images, audio, and video. The underlying HTML used to display this rich content has evolved as well. From the early workings of HTML 1 all the way to HTML 4, HTML has seen a steady growth. The current version, HTML 4, is great. The language allows for embedded objects (like Flash), and other neat stuff.

HTML 1 (left) to HTML 4 (right)

(more…)

When our long-time client, Wacom, approached us with a new line of touch enabled tablets, they were looking for an integrated marketing campaign that would drive sales and exposure for their new product. Wacom was thinking about abandoning traditional print-based advertising in favor of doing only web-based advertising, which was a major change for them. We took this opportunity to dive in as a team and come up with something truly different. What we ended up creating was a truly integrated marketing campaign that took one central idea and expressed it in several different ways. The results were more than any of us could have expected.

(more…)

This is a continuation of Tom’s post 10 Tracks for your 9-to-5 – Music to get any creative through their work week from last week. Props to Tom for opening the door to writing about how music helps us get through our work week and sharing the love of music with others.

Let me clear my throat by saying how much music affects my daily grind here at work. Aside from Tom, who is a designer looking for inspiration, I am a developer looking to get my work completed with an attention span of about 4 minutes and listening to music while working helps extend that to about 17 minutes. That may not seem a lot to you, but I’ll try any method to get those extra minutes.
(more…)